feat(btn): sms removal and announcment (#7257)

* fe: remove mention of 10k limit * fe: remove dialog when turning on otp * feat: remove toggle block when sms quota has been exceeded * chore: update copy on twilio settings page * chore: remove mention of 10k limit on twilio cred removal * chore: update twilio settings copy
opengovsg · Apr 22, 2024 · 5a80430 · 5a80430
1 parent 8846b00
commit 5a80430
Show file tree

Hide file tree

Showing 8 changed files with 28 additions and 237 deletions.
diff --git a/...nd-design/BuilderAndDesignDrawer/EditFieldDrawer/edit-fieldtype/EditMobile/EditMobile.tsx b/...nd-design/BuilderAndDesignDrawer/EditFieldDrawer/edit-fieldtype/EditMobile/EditMobile.tsx
@@ -1,5 +1,5 @@
 import { useMemo } from 'react'
-import { Box, FormControl, useDisclosure } from '@chakra-ui/react'
+import { Box, FormControl } from '@chakra-ui/react'
 import { extend, pick } from 'lodash'
 
 import { MobileFieldBase } from '~shared/types/field'
@@ -14,14 +14,11 @@ import Toggle from '~components/Toggle'
 import { useFreeSmsQuota } from '~features/admin-form/common/queries'
 
 import { CreatePageDrawerContentContainer } from '../../../../../common'
-import { useCreateTabForm } from '../../../../useCreateTabForm'
 import { FormFieldDrawerActions } from '../common/FormFieldDrawerActions'
 import { EditFieldProps } from '../common/types'
 import { useEditFieldForm } from '../common/useEditFieldForm'
 
 import { SmsCountMessage } from './SmsCountMessage'
-import { SmsCountsModal } from './SmsCountsModal'
-import { TwilioCredentialsMessage } from './TwilioCredentialsMessage'
 
 const EDIT_MOBILE_KEYS = [
   'title',
@@ -57,20 +54,7 @@ export const EditMobile = ({ field }: EditMobileProps): JSX.Element => {
     [],
   )
 
-  const { data: form } = useCreateTabForm()
-  const hasTwilioCredentials = useMemo(() => !!form?.msgSrvcName, [form])
-
   const { data: freeSmsCount } = useFreeSmsQuota()
-  const isToggleVfnDisabled = useMemo(() => {
-    if (!freeSmsCount) return true
-    return (
-      !field.isVerifiable &&
-      !hasTwilioCredentials &&
-      freeSmsCount.freeSmsCounts >= freeSmsCount.quota
-    )
-  }, [field.isVerifiable, freeSmsCount, hasTwilioCredentials])
-
-  const smsCountsDisclosure = useDisclosure()
 
   return (
     <>
@@ -103,27 +87,14 @@ export const EditMobile = ({ field }: EditMobileProps): JSX.Element => {
           />
         </FormControl>
         <Box>
-          <FormControl isReadOnly={isLoading} isDisabled={isToggleVfnDisabled}>
+          <FormControl isReadOnly={isLoading}>
             <Toggle
-              {...register('isVerifiable', {
-                onChange: (e) => {
-                  if (e.target.checked && !hasTwilioCredentials) {
-                    smsCountsDisclosure.onOpen()
-                  }
-                },
-              })}
+              {...register('isVerifiable')}
               label="OTP verification"
               description="Respondents must verify by entering a code sent to them. If you have added Twilio credentials, please test this OTP verification feature to make sure your credentials are accurate."
             />
           </FormControl>
-          <SmsCountMessage
-            hasTwilioCredentials={hasTwilioCredentials}
-            freeSmsCount={freeSmsCount}
-          />
-          <TwilioCredentialsMessage
-            freeSmsCount={freeSmsCount}
-            hasTwilioCredentials={hasTwilioCredentials}
-          />
+          <SmsCountMessage freeSmsCount={freeSmsCount} />
         </Box>
         <FormFieldDrawerActions
           isLoading={isLoading}
@@ -132,11 +103,6 @@ export const EditMobile = ({ field }: EditMobileProps): JSX.Element => {
           handleCancel={handleCancel}
         />
       </CreatePageDrawerContentContainer>
-      <SmsCountsModal
-        freeSmsCount={freeSmsCount}
-        isOpen={smsCountsDisclosure.isOpen}
-        onClose={smsCountsDisclosure.onClose}
-      />
     </>
   )
 }
diff --git a/...sign/BuilderAndDesignDrawer/EditFieldDrawer/edit-fieldtype/EditMobile/SmsCountMessage.tsx b/...sign/BuilderAndDesignDrawer/EditFieldDrawer/edit-fieldtype/EditMobile/SmsCountMessage.tsx
@@ -1,4 +1,3 @@
-import { useMemo } from 'react'
 import { BiMessage } from 'react-icons/bi'
 import { Flex, Icon, Skeleton, Text } from '@chakra-ui/react'
 
@@ -7,31 +6,19 @@ import { SmsCountsDto } from '~shared/types/form'
 import { formatSmsCounts } from './utils'
 
 type SmsCountMessageProps = {
-  hasTwilioCredentials: boolean
   freeSmsCount: SmsCountsDto | undefined
 }
 
 export const SmsCountMessage = ({
-  hasTwilioCredentials,
   freeSmsCount,
 }: SmsCountMessageProps): JSX.Element => {
-  const textColor = useMemo(() => {
-    if (hasTwilioCredentials) return 'secondary.500'
-    return freeSmsCount && freeSmsCount.freeSmsCounts >= freeSmsCount.quota
-      ? 'danger.500'
-      : 'secondary.500'
-  }, [freeSmsCount, hasTwilioCredentials])
+  const textColor = 'secondary.500'
 
   return (
     <Flex mt="1rem" color={textColor}>
       <Icon as={BiMessage} mr="0.5rem" />
       <Skeleton isLoaded={!!freeSmsCount}>
-        <Text
-          textDecorationLine={hasTwilioCredentials ? 'line-through' : undefined}
-          textStyle="caption-1"
-        >
-          {formatSmsCounts(freeSmsCount)}
-        </Text>
+        <Text textStyle="caption-1">{formatSmsCounts(freeSmsCount)}</Text>
       </Skeleton>
     </Flex>
   )

diff --git a/...esign/BuilderAndDesignDrawer/EditFieldDrawer/edit-fieldtype/EditMobile/SmsCountsModal.tsx b/...esign/BuilderAndDesignDrawer/EditFieldDrawer/edit-fieldtype/EditMobile/SmsCountsModal.tsx
diff --git a/...derAndDesignDrawer/EditFieldDrawer/edit-fieldtype/EditMobile/TwilioCredentialsMessage.tsx b/...derAndDesignDrawer/EditFieldDrawer/edit-fieldtype/EditMobile/TwilioCredentialsMessage.tsx
diff --git a/...lder-and-design/BuilderAndDesignDrawer/EditFieldDrawer/edit-fieldtype/EditMobile/utils.ts b/...lder-and-design/BuilderAndDesignDrawer/EditFieldDrawer/edit-fieldtype/EditMobile/utils.ts
@@ -4,5 +4,5 @@ export const formatSmsCounts = (smsCounts?: SmsCountsDto): string => {
   if (!smsCounts) {
     return 'Loading...'
   }
-  return `${smsCounts.freeSmsCounts.toLocaleString()}/${smsCounts.quota.toLocaleString()} SMSes used`
+  return `${smsCounts.freeSmsCounts.toLocaleString()} SMSes used`
 }
diff --git a/...d/src/features/admin-form/settings/components/TwilioSettingsSection/DeleteTwilioModal.tsx b/...d/src/features/admin-form/settings/components/TwilioSettingsSection/DeleteTwilioModal.tsx
@@ -58,9 +58,7 @@ export const DeleteTwilioModal = ({
         </ModalHeader>
         <ModalBody whiteSpace="pre-wrap">
           <Text textStyle="body-2" color="secondary.500">
-            Are you sure you want to remove your Twilio credentials? You will
-            not be able to use the Verified SMS feature unless you have free
-            SMSes remaining.
+            Are you sure you want to remove your Twilio credentials?
           </Text>
         </ModalBody>
         <ModalFooter>

diff --git a/frontend/src/features/admin-form/settings/components/TwilioSettingsSection/FreeSmsQuota.tsx b/frontend/src/features/admin-form/settings/components/TwilioSettingsSection/FreeSmsQuota.tsx
@@ -14,8 +14,7 @@ export const FreeSmsQuota = (): JSX.Element => {
         alignItems="center"
       >
         <Icon fontSize="1rem" mr="0.5rem" as={BiMessage} />
-        {freeSmsQuota?.freeSmsCounts.toLocaleString()}/
-        {freeSmsQuota?.quota.toLocaleString()} free SMSes used
+        {freeSmsQuota?.freeSmsCounts.toLocaleString()} free SMSes used
       </Skeleton>
     </Text>
   )

diff --git a/...c/features/admin-form/settings/components/TwilioSettingsSection/TwilioSettingsSection.tsx b/...c/features/admin-form/settings/components/TwilioSettingsSection/TwilioSettingsSection.tsx
@@ -1,32 +1,30 @@
-import { Skeleton, Text } from '@chakra-ui/react'
+import { ListItem, Text, UnorderedList } from '@chakra-ui/react'
 
-import { GUIDE_TWILIO } from '~constants/links'
 import InlineMessage from '~components/InlineMessage'
-import Link from '~components/Link'
-
-import { useFreeSmsQuota } from '~features/admin-form/common/queries'
 
 import { TwilioDetailsInputs } from './TwilioDetailsInputs'
 
 export const TwilioSettingsSection = (): JSX.Element => {
-  const { data: freeSmsQuota } = useFreeSmsQuota()
-
   return (
     <>
-      <Text mb="1rem">
-        Add your Twilio credentials to pay for Verified SMSes beyond the free
-        tier of&nbsp;
-        <Skeleton as="span" isLoaded={!!freeSmsQuota}>
-          {freeSmsQuota?.quota.toLocaleString() ?? '10,000'}
-        </Skeleton>
-        &nbsp;SMSes.&nbsp;
-        <Link href={GUIDE_TWILIO} isExternal>
-          How to find your credentials
-        </Link>
-      </Text>
-      <InlineMessage mb="1rem">
-        Please test SMS verification in your form to verify that your
-        credentials work
+      <InlineMessage mb="1rem" variant="warning">
+        <Text>
+          To comply with <strong>SNDGO Circular NO-1-2024</strong>, FormSG will
+          start using gov.sg secured channel to send SMSes to form respondents
+          from <strong>1 July 2024</strong>.
+          <UnorderedList spacing="0.5rem" mt="1rem">
+            <ListItem>
+              There is no longer a limit of 10,000 SMSes per form admin. Given
+              this change, the capability of adding new Twilio credentials will
+              be disabled from 30 April.
+            </ListItem>
+
+            <ListItem>
+              Existing Twilio credentials will automatically be removed and all
+              SMSes will be sent out via gov.sg from 30 June.
+            </ListItem>
+          </UnorderedList>
+        </Text>
       </InlineMessage>
       <TwilioDetailsInputs />
     </>