Improve toast notifications in mobile view (#2476)

.github/workflows/deploy.yaml

@@ -73,7 +73,7 @@ jobs:
     # needs: test
     if: github.ref == 'refs/heads/develop'
     name: Build and push to GitHub Staging
-    runs-on: ubuntu-latest 
+    runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v2
       - name: Set current date as ENV variable
@@ -193,7 +193,7 @@ jobs:
       - name: install kubectl
         uses: azure/[email protected]
         with:
-          version: 'v1.23.6'
+          version: "v1.23.6"
         id: install
       - name: Deploy Care Fe Staging
         run: |
@@ -226,7 +226,7 @@ jobs:
       - name: install kubectl
         uses: azure/[email protected]
         with:
-          version: 'v1.23.6'
+          version: "v1.23.6"
         id: install
       - name: Deploy Care Fe Staging
         run: |
@@ -259,7 +259,7 @@ jobs:
       - name: install kubectl
         uses: azure/[email protected]
         with:
-          version: 'v1.23.6'
+          version: "v1.23.6"
         id: install
       - name: Deploy Care Fe Production
         run: |
@@ -284,7 +284,7 @@ jobs:
           token: ${{ secrets.GIT_ACCESS_TOKEN  }}
           path: kube
           ref: main
-      
+
       # Setup gcloud CLI
       - uses: google-github-actions/setup-gcloud@94337306dda8180d967a56932ceb4ddcf01edae7
         with:
@@ -301,12 +301,12 @@ jobs:
       - name: install kubectl
         uses: azure/[email protected]
         with:
-          version: 'v1.23.6'
+          version: "v1.23.6"
         id: install
-      
+
       - name: Deploy Care Fe Production
         run: |
           mkdir -p $HOME/.kube/
           cd kube/deployments/
           sed -i -e "s/_BUILD_NUMBER_/${GITHUB_RUN_NUMBER}/g" care-fe.yaml
-          kubectl apply -f care-fe.yaml 
+          kubectl apply -f care-fe.yaml

package.json

@@ -147,6 +147,7 @@
   "devDependencies": {
     "@fullhuman/postcss-purgecss": "^2.3.0",
     "@pnotify/core": "^5.2.0",
+    "@pnotify/mobile": "^5.2.0",
     "@testing-library/jest-dom": "^5.12.0",
     "@testing-library/react": "^11.2.7",
     "@testing-library/user-event": "^13.1.9",

src/Components/Common/HelperInputFields.tsx

@@ -77,17 +77,17 @@ type ActionTextFieldProps = TextFieldPropsExtended & {
   actionIcon?: React.ReactElement;
   action?: () => void;
 };
-type Option = { text: string; score: number };
-interface InputProps {
-  options: Array<Option>;
-  onChange: (
-    e: React.ChangeEvent<HTMLTextAreaElement | HTMLInputElement>,
-    index: number
-  ) => void;
-  handleDeleteOption: (index: number) => void;
-  errors: Array<Option>;
-  onKeyDown: (e: React.KeyboardEvent<HTMLInputElement>) => void;
-}
+// type Option = { text: string; score: number };
+// interface InputProps {
+//   options: Array<Option>;
+//   onChange: (
+//     e: React.ChangeEvent<HTMLTextAreaElement | HTMLInputElement>,
+//     index: number
+//   ) => void;
+//   handleDeleteOption: (index: number) => void;
+//   errors: Array<Option>;
+//   onKeyDown: (e: React.KeyboardEvent<HTMLInputElement>) => void;
+// }
 interface DateInputFieldProps extends DatePickerProps {
   value: string;
   onChange: (
@@ -100,13 +100,13 @@ interface DateInputFieldProps extends DatePickerProps {
   disabled?: boolean;
   margin?: "none" | "dense" | "normal";
 }
-interface TimeInputFieldProps {
-  value: string;
-  onChange: (
-    date: MaterialUiPickersDate,
-    value?: string | null | undefined
-  ) => void;
-}
+// interface TimeInputFieldProps {
+//   value: string;
+//   onChange: (
+//     date: MaterialUiPickersDate,
+//     value?: string | null | undefined
+//   ) => void;
+// }
 
 interface CheckboxProps extends Omit<FormControlLabelProps, "control"> {
   label: string;
@@ -234,7 +234,7 @@ export const DateInputField = (props: DateInputFieldProps) => {
     onChange,
     label,
     errors,
-    variant,
+    // variant,
     disabled,
     margin,
     ...restProps
@@ -598,11 +598,11 @@ export const PhoneNumberField = (props: any) => {
     turnOffAutoFormat,
     disabled,
   } = props;
-  const countryRestriction = !!onlyIndia ? { onlyCountries: ["in"] } : {};
+  const countryRestriction = onlyIndia ? { onlyCountries: ["in"] } : {};
   const onChangeHandler = debounce(onChange, 500);
   const handleChange = (
     value: string,
-    data: ICountryData | {},
+    data: Partial<ICountryData>,
     event: ChangeEvent<HTMLInputElement>,
     formattedValue: string
   ) => {

src/Components/Notifications/NotificationsList.tsx

@@ -24,8 +24,7 @@ interface Props {
   onClickCB?: () => void;
 }
 
-export default function ResultList(props: Props) {
-  const { expanded, onClickCB } = props;
+export default function ResultList({ expanded = false, onClickCB }: Props) {
   const rootState: any = useSelector((rootState) => rootState);
   const { currentUser } = rootState;
   const { t } = useTranslation();

src/Utils/Notifications.js

@@ -1,8 +1,12 @@
-import { alert, Stack } from "@pnotify/core";
+import { alert, Stack, defaultModules } from "@pnotify/core";
 import "@pnotify/core/dist/PNotify.css";
+import * as PNotifyMobile from "@pnotify/mobile";
+import "@pnotify/mobile/dist/PNotifyMobile.css";
 import "@pnotify/core/dist/BrightTheme.css";
 import _ from "lodash";
 
+defaultModules.set(PNotifyMobile, {});
+
 const notifyStack = new Stack({
   dir1: "down",
   dir2: "left",
@@ -26,11 +30,6 @@ const notify = (text, type) => {
       closer: false,
       sticker: false,
     },
-    modules: {
-      Desktop: {
-        desktop: true,
-      },
-    },
     stack: notifyStack,
   });
   notification.refs.elem.addEventListener("click", () => {