diff --git a/frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignDrawer/EditFieldDrawer/edit-fieldtype/EditMobile/EditMobile.tsx b/frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignDrawer/EditFieldDrawer/edit-fieldtype/EditMobile/EditMobile.tsx index 0ccfc7ed40..5e8aac0187 100644 --- a/frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignDrawer/EditFieldDrawer/edit-fieldtype/EditMobile/EditMobile.tsx +++ b/frontend/src/features/admin-form/create/builder-and-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 => { /> - + { - 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." /> - - + { handleCancel={handleCancel} /> - ) } diff --git a/frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignDrawer/EditFieldDrawer/edit-fieldtype/EditMobile/SmsCountMessage.tsx b/frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignDrawer/EditFieldDrawer/edit-fieldtype/EditMobile/SmsCountMessage.tsx index 50f0cace7d..e0f64144e4 100644 --- a/frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignDrawer/EditFieldDrawer/edit-fieldtype/EditMobile/SmsCountMessage.tsx +++ b/frontend/src/features/admin-form/create/builder-and-design/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 ( - - {formatSmsCounts(freeSmsCount)} - + {formatSmsCounts(freeSmsCount)} ) diff --git a/frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignDrawer/EditFieldDrawer/edit-fieldtype/EditMobile/SmsCountsModal.tsx b/frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignDrawer/EditFieldDrawer/edit-fieldtype/EditMobile/SmsCountsModal.tsx deleted file mode 100644 index 40c0e12589..0000000000 --- a/frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignDrawer/EditFieldDrawer/edit-fieldtype/EditMobile/SmsCountsModal.tsx +++ /dev/null @@ -1,96 +0,0 @@ -import { useParams } from 'react-router-dom' -import { - Modal, - ModalBody, - ModalContent, - ModalFooter, - ModalHeader, - ModalOverlay, - Text, - useBreakpointValue, -} from '@chakra-ui/react' - -import { SmsCountsDto } from '~shared/types/form' - -import { ADMINFORM_ROUTE, ADMINFORM_SETTINGS_SUBROUTE } from '~constants/routes' -import { useIsMobile } from '~hooks/useIsMobile' -import Badge from '~components/Badge' -import Button from '~components/Button' -import Link from '~components/Link' -import Spinner from '~components/Spinner' - -import { formatSmsCounts } from './utils' - -type SmsCountsModalProps = { - freeSmsCount?: SmsCountsDto - isOpen: boolean - onClose: () => void -} -export const SmsCountsModal = ({ - freeSmsCount, - isOpen, - onClose, -}: SmsCountsModalProps) => { - const { formId } = useParams() - - const modalSize = useBreakpointValue({ - base: 'mobile', - xs: 'mobile', - md: 'md', - }) - - const isMobile = useIsMobile() - - return ( - - - - Verified SMS Billing - - {freeSmsCount === undefined ? ( - - ) : ( - <> - - Form provides {`${freeSmsCount.quota.toLocaleString()}`} free - SMS OTP verifications per account, for forms you are an owner - of. Once this limit is reached, SMS OTP verification will be - automatically disabled for all owned forms. Forms with Twilio - already set up will not be affected. - - - If you are a collaborator, ensure the form's owner has enough - free verifications. If you require more than{' '} - {`${freeSmsCount.quota.toLocaleString()}`} verifications, please{' '} - - add your Twilio credentials. - - - - {formatSmsCounts(freeSmsCount)} - - - )} - - - - - - - ) -} diff --git a/frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignDrawer/EditFieldDrawer/edit-fieldtype/EditMobile/TwilioCredentialsMessage.tsx b/frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignDrawer/EditFieldDrawer/edit-fieldtype/EditMobile/TwilioCredentialsMessage.tsx deleted file mode 100644 index 26ae61872f..0000000000 --- a/frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignDrawer/EditFieldDrawer/edit-fieldtype/EditMobile/TwilioCredentialsMessage.tsx +++ /dev/null @@ -1,61 +0,0 @@ -import { useMemo } from 'react' -import { Link as ReactLink, useParams } from 'react-router-dom' -import { Flex, Icon, Skeleton, Text } from '@chakra-ui/react' - -import { SmsCountsDto } from '~shared/types' - -import { BxsCheckCircle, BxsXCircle } from '~assets/icons' -import { ADMINFORM_ROUTE, ADMINFORM_SETTINGS_SUBROUTE } from '~constants/routes' -import Link from '~components/Link' - -type TwilioCredentialsMessageProps = { - hasTwilioCredentials: boolean - freeSmsCount: SmsCountsDto | undefined -} - -const TwilioCredentialsSuccess = (): JSX.Element => { - return ( - - - Twilio credentials added - - ) -} - -export const TwilioCredentialsMessage = ({ - hasTwilioCredentials, - freeSmsCount, -}: TwilioCredentialsMessageProps): JSX.Element => { - const { formId } = useParams() - const hasExceededQuota = useMemo(() => { - return freeSmsCount && freeSmsCount.freeSmsCounts >= freeSmsCount.quota - }, [freeSmsCount]) - - if (hasTwilioCredentials) { - return - } - - return ( - - - - - {hasExceededQuota - ? 'You have reached the free tier limit for SMS verification.' - : 'Twilio credentials not added.'}{' '} - - Add credentials now - - - - - ) -} diff --git a/frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignDrawer/EditFieldDrawer/edit-fieldtype/EditMobile/utils.ts b/frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignDrawer/EditFieldDrawer/edit-fieldtype/EditMobile/utils.ts index ccf568e7d5..f6e25fbe56 100644 --- a/frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignDrawer/EditFieldDrawer/edit-fieldtype/EditMobile/utils.ts +++ b/frontend/src/features/admin-form/create/builder-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/frontend/src/features/admin-form/settings/components/TwilioSettingsSection/DeleteTwilioModal.tsx b/frontend/src/features/admin-form/settings/components/TwilioSettingsSection/DeleteTwilioModal.tsx index df711b0439..1bffbb2b6a 100644 --- a/frontend/src/features/admin-form/settings/components/TwilioSettingsSection/DeleteTwilioModal.tsx +++ b/frontend/src/features/admin-form/settings/components/TwilioSettingsSection/DeleteTwilioModal.tsx @@ -58,9 +58,7 @@ export const DeleteTwilioModal = ({ - 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? diff --git a/frontend/src/features/admin-form/settings/components/TwilioSettingsSection/FreeSmsQuota.tsx b/frontend/src/features/admin-form/settings/components/TwilioSettingsSection/FreeSmsQuota.tsx index 9812d91356..2bacbd1c44 100644 --- 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" > - {freeSmsQuota?.freeSmsCounts.toLocaleString()}/ - {freeSmsQuota?.quota.toLocaleString()} free SMSes used + {freeSmsQuota?.freeSmsCounts.toLocaleString()} free SMSes used ) diff --git a/frontend/src/features/admin-form/settings/components/TwilioSettingsSection/TwilioSettingsSection.tsx b/frontend/src/features/admin-form/settings/components/TwilioSettingsSection/TwilioSettingsSection.tsx index a293d08dfc..cae36eb680 100644 --- a/frontend/src/features/admin-form/settings/components/TwilioSettingsSection/TwilioSettingsSection.tsx +++ b/frontend/src/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 ( <> - - Add your Twilio credentials to pay for Verified SMSes beyond the free - tier of  - - {freeSmsQuota?.quota.toLocaleString() ?? '10,000'} - -  SMSes.  - - How to find your credentials - - - - Please test SMS verification in your form to verify that your - credentials work + + + To comply with SNDGO Circular NO-1-2024, FormSG will + start using gov.sg secured channel to send SMSes to form respondents + from 1 July 2024. + + + 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. + + + + Existing Twilio credentials will automatically be removed and all + SMSes will be sent out via gov.sg from 30 June. + + +