diff --git a/src/common/Common.form.ts b/src/common/Common.form.ts index 91993080a4..7bd0e25a79 100644 --- a/src/common/Common.form.ts +++ b/src/common/Common.form.ts @@ -3,3 +3,5 @@ export const URLRegex = /^(http:\/\/|https:\/\/|www\.)?([\w-]+\.)+[\w-]{2,}(\/[\ export const getRequiredFieldMessage = (name: string) => `${name} is required.`; export const getMaxCharLimitFieldMessage = (limit: number) => `Maximum ${limit} characters allowed.`; + +export const getMinCharLimitMessage = (limit: number | string) => `Must be greater than ${limit}`; diff --git a/src/components/reusables/checkbox/Checkbox.tsx b/src/components/reusables/checkbox/Checkbox.tsx index d896c536d7..a298b60673 100644 --- a/src/components/reusables/checkbox/Checkbox.tsx +++ b/src/components/reusables/checkbox/Checkbox.tsx @@ -25,7 +25,7 @@ const CheckboxInput = styled.input` /* Change the color of the checkbox */ &:checked { - accent-color: #D53A94; + accent-color: #C742DD; } `; diff --git a/src/modules/notifSettings/EditNotificationSetting.form.tsx b/src/modules/notifSettings/EditNotificationSetting.form.tsx index dd5f2eabf4..92e98a5a4b 100644 --- a/src/modules/notifSettings/EditNotificationSetting.form.tsx +++ b/src/modules/notifSettings/EditNotificationSetting.form.tsx @@ -1,7 +1,11 @@ import { FC } from 'react'; +import * as Yup from 'yup'; + import { FormikProvider, useFormik, useFormikContext } from 'formik'; +import { getMinCharLimitMessage, getRequiredFieldMessage } from 'common'; + import { ChannelSetting } from 'modules/channelDashboard/ChannelDashboard.types'; type EditNotificationSettingsFormProviderProps = { @@ -14,7 +18,11 @@ export const getFormInitialValus = (initialValue: ChannelSetting): NotificationS return { settingName: initialValue.description, isDefault: - initialValue.type === 1 ? (typeof initialValue.default === 'boolean' ? true : false) : initialValue.enabled!, + initialValue.type === 1 + ? typeof initialValue.default === 'boolean' + ? initialValue.default + : true + : initialValue.enabled!, enableRange: initialValue.type !== 1 ? true : false, rangelowerlimit: initialValue.lowerLimit ? initialValue.lowerLimit : 0, rangeupperlimit: initialValue.upperLimit ? initialValue.upperLimit : 0, @@ -26,6 +34,99 @@ export const getFormInitialValus = (initialValue: ChannelSetting): NotificationS }; }; +export const NotificationSettingsSchema = Yup.object().shape({ + settingName: Yup.string().required(getRequiredFieldMessage('Setting Name')), + isDefault: Yup.boolean(), + enableRange: Yup.boolean(), + + rangelowerlimit: Yup.number().when('enableRange', { + is: true, + then: () => Yup.number().min(1, getMinCharLimitMessage(1)).required(getRequiredFieldMessage('Range')), + otherwise: () => Yup.number(), + }), + + rangeupperlimit: Yup.number().when('enableRange', { + is: true, + then: () => + Yup.number() + .min(Yup.ref('rangelowerlimit'), getMinCharLimitMessage('lower limit')) + .required(getRequiredFieldMessage('Range')), + otherwise: () => Yup.number(), + }), + + enableMultiRange: Yup.boolean().required('This field is required'), + + multirangelowerlimit: Yup.number() + .when('enableMultiRange', { + is: true, + then: () => + Yup.number() + .min(1, getMinCharLimitMessage(1)) + .required(getRequiredFieldMessage('Range')) + .test( + 'is-multi-range-within-range', + 'Multi-range lower limit must be between lower limit and upper limit', + function (value) { + const { rangelowerlimit, rangeupperlimit } = this.parent; + return value >= rangelowerlimit && value <= rangeupperlimit; + } + ), + otherwise: () => Yup.number(), + }), + + multirangeupperlimit: Yup.number() + .when('enableMultiRange', { + is: true, + then: () => + Yup.number() + .min(Yup.ref('multirangelowerlimit'), getMinCharLimitMessage('lower limit')) + .required(getRequiredFieldMessage('Range')) + .test( + 'is-multi-range-upper-within-range', + 'Multi-range upper limit must be between lower limit and upper limit', + function (value) { + const { rangelowerlimit, rangeupperlimit } = this.parent; + return value >= rangelowerlimit && value <= rangeupperlimit; + } + ), + otherwise: () => Yup.number(), + }), + + + defaultValue: Yup.number() + .when('enableRange', { + is: true, + then: () => + Yup.number() + .min(1, getMinCharLimitMessage(1)) + .required(getRequiredFieldMessage('Default Value')) + .test( + 'is-within-range', + 'Default value must be between lower limit and upper limit', + function (value) { + const { rangelowerlimit, rangeupperlimit } = this.parent; + return value >= rangelowerlimit && value <= rangeupperlimit; + } + ), + otherwise: () => Yup.number(), + }), + + sliderStepValue: Yup.number() + .when('enableRange', { + is: true, + then: () => Yup.number().min(1, getMinCharLimitMessage(1)).required(getRequiredFieldMessage('Slider Step')) + .test( + 'is-step-value-valid', + 'Slider step value must not be greater than upper limit', + function (value) { + const { rangeupperlimit } = this.parent; + return value <= rangeupperlimit; + } + ), + otherwise: () => Yup.number(), + }), +}); + const EditNotificationSettingsFormProvider: FC = ({ children, initialValue, @@ -33,6 +134,7 @@ const EditNotificationSettingsFormProvider: FC { const addNotificationSettingsForm = useFormik({ initialValues: getFormInitialValus(initialValue), + validationSchema: NotificationSettingsSchema, onSubmit: onSubmit, }); diff --git a/src/modules/notifSettings/NotificationSettings.tsx b/src/modules/notifSettings/NotificationSettings.tsx index f3e7032166..566cc7dbbb 100644 --- a/src/modules/notifSettings/NotificationSettings.tsx +++ b/src/modules/notifSettings/NotificationSettings.tsx @@ -15,15 +15,16 @@ import { settingInitialValue } from './NotificationSettings.constants'; const NotificationSettings = () => { const { account } = useAccount(); - const { data: channelDetails, isLoading: loadingChannelDetails } = useGetChannelDetails(account); const channelSettings = channelDetails?.channel_settings ? channelDetails?.channel_settings : ''; + console.log("Channel detaisls >>>", channelDetails); + const modifiedChannelSettings = loadingChannelDetails ? Array(3).fill(0) : channelSettings - ? JSON.parse(channelSettings) - : []; + ? JSON.parse(channelSettings) + : []; const modalControl = useModal(); diff --git a/src/modules/notifSettings/components/NotificationSettingsBody.tsx b/src/modules/notifSettings/components/NotificationSettingsBody.tsx index d694358e36..453fa50d62 100644 --- a/src/modules/notifSettings/components/NotificationSettingsBody.tsx +++ b/src/modules/notifSettings/components/NotificationSettingsBody.tsx @@ -4,6 +4,8 @@ import { Box } from 'blocks'; import { ModalResponse } from 'common'; +import { useAccount } from 'hooks'; + import { ChannelDashboardNullState } from 'modules/channelDashboard/components/ChannelDashboardNullState'; import { ChannelSetting } from 'modules/channelDashboard/ChannelDashboard.types'; @@ -26,6 +28,8 @@ const NotificationSettingsBody: FC = ({ settingsToEdit, setSettingsToEdit, }) => { + + const { isWalletConnected, connect } = useAccount(); const [newSettings, setNewSettings] = useState([]); const { open } = modalControl; @@ -50,6 +54,14 @@ const NotificationSettingsBody: FC = ({ } }; + const openModal = () => { + if (!isWalletConnected) { + connect(); + } else { + open(); + } + } + return ( = ({ state="notificationSettings" title="No settings yet" subTitle="Add options for users to customize notifications." - onClick={open} + onClick={openModal} /> )} diff --git a/src/modules/notifSettings/components/NotificationSettingsFooter.tsx b/src/modules/notifSettings/components/NotificationSettingsFooter.tsx index c20cd63c28..bd43833be0 100644 --- a/src/modules/notifSettings/components/NotificationSettingsFooter.tsx +++ b/src/modules/notifSettings/components/NotificationSettingsFooter.tsx @@ -27,7 +27,7 @@ const EDIT_SETTING_FEE = 50; const NotificationSettingsFooter: FC = ({ newSettings, channelSettings }) => { const navigate = useNavigate(); - const { account, provider, wallet } = useAccount(); + const { account, provider, wallet, isWalletConnected, connect } = useAccount(); const { userPushSDKInstance } = useSelector((state: any) => { return state.user; @@ -57,8 +57,14 @@ const NotificationSettingsFooter: FC = ({ newSe const approvePUSH = async () => { if (!provider) return; - const signer = provider.getSigner(account); + if (!isWalletConnected) { + connect(); + return; + } + + setErrorMessage(''); + const signer = provider.getSigner(account); const fees = ethers.utils.parseUnits((EDIT_SETTING_FEE - pushApprovalAmount).toString(), 18); approvePUSHToken( @@ -72,7 +78,6 @@ const NotificationSettingsFooter: FC = ({ newSe }, onError: (error: any) => { console.log('Error in Approving PUSH', error); - if (error.code == 'ACTION_REJECTED') { setErrorMessage('User rejected signature. Please try again.'); } else { @@ -94,6 +99,7 @@ const NotificationSettingsFooter: FC = ({ newSe } } + setErrorMessage(''); if (newSettings.length > 0) { const newsettingData: ChannelSetting[] = newSettings.map((setting) => { if (setting.type === 1) { @@ -174,9 +180,10 @@ const NotificationSettingsFooter: FC = ({ newSe display="flex" flexDirection="column" > + {errorMessage && ( )} diff --git a/src/modules/notifSettings/components/NotificationSettingsHeader.tsx b/src/modules/notifSettings/components/NotificationSettingsHeader.tsx index 09ef370cd1..e009c86e8a 100644 --- a/src/modules/notifSettings/components/NotificationSettingsHeader.tsx +++ b/src/modules/notifSettings/components/NotificationSettingsHeader.tsx @@ -6,6 +6,7 @@ import { ModalResponse } from 'common'; import { ChannelSetting } from 'modules/channelDashboard/ChannelDashboard.types'; import { settingInitialValue } from '../NotificationSettings.constants'; +import { useAccount } from 'hooks'; type NotificationSettingsHeaderProps = { modalControl: ModalResponse; @@ -13,6 +14,15 @@ type NotificationSettingsHeaderProps = { }; const NotificationSettingsHeader: FC = ({ modalControl, setSettingsToEdit }) => { const { open } = modalControl; + const { isWalletConnected, connect } = useAccount(); + + const openModal = () => { + if (!isWalletConnected) { + connect(); + } else { + open(); + } + } return ( = ({ modal leadingIcon={} onClick={() => { setSettingsToEdit(settingInitialValue); - open(); + openModal(); }} > Add Setting diff --git a/src/modules/notifSettings/components/NotificationSettingsRangeSelector.tsx b/src/modules/notifSettings/components/NotificationSettingsRangeSelector.tsx index 48a0ff7348..6ccd07cdd0 100644 --- a/src/modules/notifSettings/components/NotificationSettingsRangeSelector.tsx +++ b/src/modules/notifSettings/components/NotificationSettingsRangeSelector.tsx @@ -10,7 +10,7 @@ import RangeSlider from 'components/reusables/sliders/RangeSlider'; import { useEditNotificationSettingsForm } from '../EditNotificationSetting.form'; const NotificationSettingsRangeSelector = () => { - const { values: formValues, handleChange, setFieldValue } = useEditNotificationSettingsForm(); + const { values: formValues, handleChange, setFieldValue, errors, touched } = useEditNotificationSettingsForm(); const showPreview = useMemo(() => { return ( @@ -25,10 +25,10 @@ const NotificationSettingsRangeSelector = () => { Number(formValues.sliderStepValue) <= Number(formValues.rangeupperlimit) - Number(formValues.rangelowerlimit) && (formValues.enableMultiRange ? Number(formValues.multirangelowerlimit) >= Number(formValues.rangelowerlimit) && - Number(formValues.multirangeupperlimit) <= Number(formValues.rangeupperlimit) && - Number(formValues.multirangeupperlimit) > Number(formValues.multirangelowerlimit) + Number(formValues.multirangeupperlimit) <= Number(formValues.rangeupperlimit) && + Number(formValues.multirangeupperlimit) > Number(formValues.multirangelowerlimit) : Number(formValues.defaultValue) >= Number(formValues.rangelowerlimit) && - Number(formValues.defaultValue) <= Number(formValues.rangeupperlimit)) + Number(formValues.defaultValue) <= Number(formValues.rangeupperlimit)) ); }, [ formValues.rangelowerlimit, @@ -56,13 +56,15 @@ const NotificationSettingsRangeSelector = () => { display="flex" gap="spacing-xxs" width="100%" - alignItems="center" + alignItems="baseline" > to { onChange={(e) => { setFieldValue('rangeupperlimit', e.target.value); }} + error={touched.rangeupperlimit && Boolean(errors.rangeupperlimit)} + errorMessage={touched.rangeupperlimit ? errors.rangeupperlimit : ''} /> @@ -105,6 +109,8 @@ const NotificationSettingsRangeSelector = () => { setFieldValue('defaultValue', e.target.value); }} label="Default Value" + error={touched.defaultValue && Boolean(errors.defaultValue)} + errorMessage={touched.defaultValue ? errors.defaultValue : ''} /> )} @@ -119,7 +125,7 @@ const NotificationSettingsRangeSelector = () => { display="flex" gap="spacing-xxs" width="100%" - alignItems="center" + alignItems="baseline" > { setFieldValue('multirangelowerlimit', e.target.value); setSliderPreviewStartVal(Number(e.target.value)); }} + error={touched.multirangelowerlimit && Boolean(errors.multirangelowerlimit)} + errorMessage={touched.multirangelowerlimit ? errors.multirangelowerlimit : ''} /> to { setFieldValue('multirangeupperlimit', e.target.value); setSliderPreviewEndVal(Number(e.target.value)); }} + error={touched.multirangeupperlimit && Boolean(errors.multirangeupperlimit)} + errorMessage={touched.multirangeupperlimit ? errors.multirangeupperlimit : ''} /> @@ -154,6 +164,8 @@ const NotificationSettingsRangeSelector = () => { setFieldValue('sliderStepValue', e.target.value); }} label="Slider Step Value" + error={touched.sliderStepValue && Boolean(errors.sliderStepValue)} + errorMessage={touched.sliderStepValue ? errors.sliderStepValue : ''} />