Added validation and other comments also removed

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}`;

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;
  }
 `;
 

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,13 +34,107 @@ 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<EditNotificationSettingsFormProviderProps> = ({
  children,
  initialValue,
  onSubmit,
 }) => {
  const addNotificationSettingsForm = useFormik<NotificationSettingFormValues>({
  initialValues: getFormInitialValus(initialValue),
+ validationSchema: NotificationSettingsSchema,
  onSubmit: onSubmit,
  });
 

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();
 

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<NotificationSettingsBodyProps> = ({
  settingsToEdit,
  setSettingsToEdit,
 }) => {
+
+ const { isWalletConnected, connect } = useAccount();
  const [newSettings, setNewSettings] = useState<ChannelSetting[]>([]);
 
  const { open } = modalControl;
@@ -50,6 +54,14 @@ const NotificationSettingsBody: FC<NotificationSettingsBodyProps> = ({
  }
  };
 
+ const openModal = () => {
+ if (!isWalletConnected) {
+ connect();
+ } else {
+ open();
+ }
+ }
+
  return (
  <Box
  width="100%"
@@ -71,7 +83,7 @@ const NotificationSettingsBody: FC<NotificationSettingsBodyProps> = ({
  state="notificationSettings"
  title="No settings yet"
  subTitle="Add options for users to customize notifications."
- onClick={open}
+ onClick={openModal}
  />
  )}
 

src/modules/notifSettings/components/NotificationSettingsFooter.tsx

@@ -27,7 +27,7 @@ const EDIT_SETTING_FEE = 50;
 
 const NotificationSettingsFooter: FC<NotificationSettingsFooterProps> = ({ 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<NotificationSettingsFooterProps> = ({ 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<NotificationSettingsFooterProps> = ({ 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<NotificationSettingsFooterProps> = ({ newSe
  }
  }
 
+ setErrorMessage('');
  if (newSettings.length > 0) {
  const newsettingData: ChannelSetting[] = newSettings.map((setting) => {
  if (setting.type === 1) {
@@ -174,9 +180,10 @@ const NotificationSettingsFooter: FC<NotificationSettingsFooterProps> = ({ newSe
  display="flex"
  flexDirection="column"
  >
+
  {errorMessage && (
  <Alert
- actionText={errorMessage}
+ heading={errorMessage}
  variant="error"
  />
  )}

src/modules/notifSettings/components/NotificationSettingsHeader.tsx

@@ -6,13 +6,23 @@ import { ModalResponse } from 'common';
 
 import { ChannelSetting } from 'modules/channelDashboard/ChannelDashboard.types';
 import { settingInitialValue } from '../NotificationSettings.constants';
+import { useAccount } from 'hooks';
 
 type NotificationSettingsHeaderProps = {
  modalControl: ModalResponse;
  setSettingsToEdit: (settingsToEdit: ChannelSetting) => void;
 };
 const NotificationSettingsHeader: FC<NotificationSettingsHeaderProps> = ({ modalControl, setSettingsToEdit }) => {
  const { open } = modalControl;
+ const { isWalletConnected, connect } = useAccount();
+
+ const openModal = () => {
+ if (!isWalletConnected) {
+ connect();
+ } else {
+ open();
+ }
+ }
 
  return (
  <Box
@@ -41,7 +51,7 @@ const NotificationSettingsHeader: FC<NotificationSettingsHeaderProps> = ({ modal
  leadingIcon={<Add />}
  onClick={() => {
  setSettingsToEdit(settingInitialValue);
- open();
+ openModal();
  }}
  >
  Add Setting

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"
  >
  <TextInput
  placeholder="e.g.0"
  type="number"
  value={formValues.rangelowerlimit}
  onChange={handleChange('rangelowerlimit')}
+ error={touched.rangelowerlimit && Boolean(errors.rangelowerlimit)}
+ errorMessage={touched.rangelowerlimit ? errors.rangelowerlimit : ''}
  />
  <Text variant="bm-regular">to</Text>
  <TextInput
@@ -72,6 +74,8 @@ const NotificationSettingsRangeSelector = () => {
  onChange={(e) => {
  setFieldValue('rangeupperlimit', e.target.value);
  }}
+ error={touched.rangeupperlimit && Boolean(errors.rangeupperlimit)}
+ errorMessage={touched.rangeupperlimit ? errors.rangeupperlimit : ''}
  />
  </Box>
  </Box>
@@ -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"
  >
  <TextInput
  placeholder="e.g.0"
@@ -129,6 +135,8 @@ const NotificationSettingsRangeSelector = () => {
  setFieldValue('multirangelowerlimit', e.target.value);
  setSliderPreviewStartVal(Number(e.target.value));
  }}
+ error={touched.multirangelowerlimit && Boolean(errors.multirangelowerlimit)}
+ errorMessage={touched.multirangelowerlimit ? errors.multirangelowerlimit : ''}
  />
  <Text variant="bm-regular">to</Text>
  <TextInput
@@ -139,6 +147,8 @@ const NotificationSettingsRangeSelector = () => {
  setFieldValue('multirangeupperlimit', e.target.value);
  setSliderPreviewEndVal(Number(e.target.value));
  }}
+ error={touched.multirangeupperlimit && Boolean(errors.multirangeupperlimit)}
+ errorMessage={touched.multirangeupperlimit ? errors.multirangeupperlimit : ''}
  />
  </Box>
  </Box>
@@ -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 : ''}
  />
  </Box>