refactor: improve mobile responsive

pcomparator/package.json

@@ -62,6 +62,7 @@
     "react-dom": "^18.3.1",
     "react-hook-form": "^7.53.1",
     "react-phone-number-input": "^3.4.9",
+    "react-spring-bottom-sheet": "3.5.0-alpha.0",
     "react-toastify": "^10.0.6",
     "react-wrap-balancer": "^1.0.0",
     "storybook": "^8.3.6",

pcomparator/src/app/[locale]/dashboard/layout.tsx

@@ -5,7 +5,7 @@ import { type NextPageProps, withLinguiLayout } from "~/core/withLinguiLayout";
 
 const DashboardLayout = ({ children }: NextPageProps) => {
   return (
-    <div className="flex">
+    <div className="flex flex-1">
       <aside className="sticky top-24 w-72 h-[calc(100dvh-96px)] p-6 mt-8 flex-col hidden md:flex">
         <nav className="h-auto flex-1">
           <ul>

pcomparator/src/app/[locale]/globals.css

@@ -102,3 +102,11 @@ div[data-overlay-container="true"] {
 :root {
   --toastify-color-success: #17c964 !important;
 }
+
+reach-portal {
+  @apply !z-[9999] relative;
+}
+
+main {
+  @apply flex flex-1;
+}

pcomparator/src/app/[locale]/layout.tsx

@@ -6,6 +6,7 @@ import { locales } from "~/core/locale";
 import { pcomparatorMetadata } from "~/core/metadata";
 import { type NextPageProps, withLinguiLayout } from "~/core/withLinguiLayout";
 import "react-toastify/dist/ReactToastify.css";
+import "react-spring-bottom-sheet/dist/style.css";
 import "./globals.css";
 import { InstallPWA } from "~/core/pwa/Install";
 

pcomparator/src/applications/Prices/Ui/ListPrices/CardPrice/DeletePriceModal/DeletePriceModal.tsx

@@ -1,10 +1,10 @@
 import { Trans } from "@lingui/macro";
-import { Modal, ModalBody, ModalContent, ModalFooter, ModalHeader } from "@nextui-org/react";
 import { useRouter } from "next/navigation";
 import { toast } from "react-toastify";
 import { deletePrice } from "~/applications/Prices/Api/deletePrice";
 import useForm from "~/components/Form/useForm";
 import { Input } from "~/components/Inputs/Input/Input";
+import { Modal } from "~/components/Modal/Modal";
 
 interface DeletePriceModalProps {
   priceId: string;
@@ -29,13 +29,16 @@ export const DeletePriceModal = ({
   const { refresh } = useRouter();
 
   return (
-    <Modal isOpen={isOpen} onOpenChange={onOpenChange}>
-      <ModalContent>
-        <ModalHeader>
-          <p>
-            <Trans>Are you sure you want to delete this price?</Trans>
-          </p>
-        </ModalHeader>
+    <Modal
+      isOpen={isOpen}
+      onClose={onClose}
+      onOpenChange={onOpenChange}
+      header={
+        <p>
+          <Trans>Are you sure you want to delete this price?</Trans>
+        </p>
+      }
+      body={
         <form.Form
           methods={form.methods}
           onSubmit={async () => {
@@ -49,28 +52,26 @@ export const DeletePriceModal = ({
               color: "danger",
               isDisabled: !form.watch("confirmation")?.match(`delete ${productName.toLowerCase()}`)
             },
-            prevProps: { title: <Trans>Cancel</Trans> },
-            wrapper: ModalFooter
+            prevProps: { title: <Trans>Cancel</Trans> }
           }}
         >
-          <ModalBody>
-            <p className="text-small text-default-500">
-              <Trans>
-                This action <b>CANNOT be undone</b>. Please be certain about your decision.
-              </Trans>
-            </p>
-            <p className="text-small text-default-500 mb-6">
-              <Trans>Deleting this price will delete all of its data. You cannot undo this action.</Trans>
-            </p>
-            <Input name="empty" hidden className="hidden" />
-            <Input
-              name="confirmation"
-              label={<Trans>Type "delete {productName.toLowerCase()}" to confirm</Trans>}
-              placeholder={`delete ${productName.toLowerCase()}`}
-            />
-          </ModalBody>
+          <p className="text-small text-default-500">
+            <Trans>
+              This action <b>CANNOT be undone</b>. Please be certain about your decision.
+            </Trans>
+          </p>
+          <p className="text-small text-default-500 mb-6">
+            <Trans>Deleting this price will delete all of its data. You cannot undo this action.</Trans>
+          </p>
+          <Input name="empty" hidden className="hidden" />
+          <Input
+            name="confirmation"
+            label={<Trans>Type "delete {productName.toLowerCase()}" to confirm</Trans>}
+            placeholder={`delete ${productName.toLowerCase()}`}
+          />
         </form.Form>
-      </ModalContent>
-    </Modal>
+      }
+      isForm
+    />
   );
 };

pcomparator/src/applications/Prices/Ui/NewPrice/BarcodeScanner/BarcodeScannerModal.tsx

@@ -1,23 +1,28 @@
-import { Modal, ModalContent } from "@nextui-org/react";
 import { BarcodeScanner } from "react-barcode-scanner";
 import type { Barcode } from "~/applications/Prices/Domain/ValueObjects/Barcode";
+import { Modal } from "~/components/Modal/Modal";
 
 interface BarcodeScannerModalProps {
   isOpen: boolean;
+  onClose: () => void;
   onOpenChange: (isOpen: boolean) => void;
   onBarcodeDetected: (barcode: Barcode) => void;
 }
 
 export const BarcodeScannerModal = ({
   isOpen,
+  onClose,
   onOpenChange,
   onBarcodeDetected
 }: BarcodeScannerModalProps) => {
   return (
-    <Modal isOpen={isOpen} onOpenChange={onOpenChange} size="4xl" data-testid="modal-barcode-scanner">
-      <ModalContent>
+    <Modal
+      isOpen={isOpen}
+      onOpenChange={onOpenChange}
+      body={
         <BarcodeScanner
           onCapture={(barcode) => onBarcodeDetected({ barcode: barcode.rawValue, format: barcode.format })}
+          className="pointer-events-none"
           options={{
             formats: [
               "codabar",
@@ -35,7 +40,10 @@ export const BarcodeScannerModal = ({
             ]
           }}
         />
-      </ModalContent>
-    </Modal>
+      }
+      onClose={onClose}
+      modalProps={{ size: "4xl", classNames: { body: "!p-0", footer: "p-0", header: "p-0" } }}
+      data-testid="modal-barcode-scanner"
+    />
   );
 };

pcomparator/src/applications/Prices/Ui/NewPrice/FormSteps/Step1/TypeBarcode.tsx

@@ -1,5 +1,5 @@
 import { Trans } from "@lingui/macro";
-import { ModalBody, ModalFooter } from "@nextui-org/react";
+import {} from "@nextui-org/react";
 import _ from "lodash";
 import type { Barcode as BarcodeT } from "~/applications/Prices/Domain/ValueObjects/Barcode";
 import useForm from "~/components/Form/useForm";
@@ -29,15 +29,12 @@ export const TypeBarcode = ({ onNextStep, barcode }: TypeBarcodeProps) => {
           }
         }}
         actions={{
-          nextProps: { title: <Trans>Next</Trans>, color: "primary", type: "submit" },
-          wrapper: ModalFooter
+          nextProps: { title: <Trans>Next</Trans>, color: "primary", type: "submit" }
         }}
       >
-        <ModalBody>
-          {/* NOTE – Adding this hidden input to fix nextui modal error... */}
-          <Input name="empty" className="hidden" hidden />
-          <Barcode name="barcode" defaultValue={barcode?.barcode} />
-        </ModalBody>
+        {/* NOTE – Adding this hidden input to fix nextui modal error... */}
+        <Input name="empty" className="hidden" hidden />
+        <Barcode name="barcode" defaultValue={barcode?.barcode} />
       </form.Form>
     </>
   );

pcomparator/src/applications/Prices/Ui/NewPrice/FormSteps/Step2/Price.tsx

@@ -1,5 +1,4 @@
 import { Trans, t } from "@lingui/macro";
-import { ModalBody, ModalFooter } from "@nextui-org/react";
 import { Euro } from "lucide-react";
 import useForm from "~/components/Form/useForm";
 import { Input } from "~/components/Inputs/Input/Input";
@@ -25,22 +24,19 @@ export const Price = ({ onNextStep, onPrevious }: PriceProps) => {
         }}
         actions={{
           nextProps: { title: <Trans>Next</Trans>, color: "primary" },
-          prevProps: { title: <Trans>Previous</Trans>, onPress: onPrevious },
-          wrapper: ModalFooter
+          prevProps: { title: <Trans>Previous</Trans>, onPress: onPrevious }
         }}
       >
-        <ModalBody>
-          {/* NOTE – Adding this hidden input to fix nextui modal error... */}
-          <Input name="empty" className="hidden" hidden />
-          <Input
-            name="price"
-            type="number"
-            placeholder="9.99"
-            label={<Trans>Price</Trans>}
-            endContent={<Euro />}
-            required={t`Please enter a valid price.`}
-          />
-        </ModalBody>
+        {/* NOTE – Adding this hidden input to fix nextui modal error... */}
+        <Input name="empty" className="hidden" hidden />
+        <Input
+          name="price"
+          type="number"
+          placeholder="9.99"
+          label={<Trans>Price</Trans>}
+          endContent={<Euro />}
+          required={t`Please enter a valid price.`}
+        />
       </form.Form>
     </>
   );

pcomparator/src/applications/Prices/Ui/NewPrice/FormSteps/Step4/Location.tsx

@@ -1,5 +1,5 @@
 import { Trans } from "@lingui/macro";
-import { Button, ModalBody, ModalFooter, Radio, RadioGroup, Spinner } from "@nextui-org/react";
+import { Button, Radio, RadioGroup, Spinner } from "@nextui-org/react";
 import { Search } from "lucide-react";
 import { useRef, useState } from "react";
 import useForm from "~/components/Form/useForm";
@@ -28,45 +28,42 @@ export const Location = ({ onNextStep, onPrevious }: LocationProps) => {
       }}
       actions={{
         nextProps: { title: <Trans>Next</Trans>, color: "primary" },
-        prevProps: { title: <Trans>Previous</Trans>, onPress: onPrevious },
-        wrapper: ModalFooter
+        prevProps: { title: <Trans>Previous</Trans>, onPress: onPrevious }
       }}
     >
-      <ModalBody>
-        <RadioGroup label="Select the store" color="default">
-          {loading ? (
-            <Spinner />
-          ) : (
-            location?.map(({ name, address }) => (
-              <Radio
-                value={name}
-                description={address}
-                key={name}
-                onChange={() => {
-                  setChoosenLocation({ storeName: name, location: address });
-                }}
-              >
-                {name}
-              </Radio>
-            ))
-          )}
-        </RadioGroup>
-        <Input
-          name="location"
-          label={<Trans>Custom location</Trans>}
-          placeholder="4 rue du dôme, 67000, Strasbourg"
-          endContent={
-            <Button
-              startContent={<Search />}
-              variant="flat"
-              onPress={() => getLocation(searchRef.current?.value)}
+      <RadioGroup label="Select the store" color="default">
+        {loading ? (
+          <Spinner />
+        ) : (
+          location?.map(({ name, address }) => (
+            <Radio
+              value={name}
+              description={address}
+              key={name}
+              onChange={() => {
+                setChoosenLocation({ storeName: name, location: address });
+              }}
             >
-              <Trans>Search</Trans>
-            </Button>
-          }
-          ref={searchRef}
-        />
-      </ModalBody>
+              {name}
+            </Radio>
+          ))
+        )}
+      </RadioGroup>
+      <Input
+        name="location"
+        label={<Trans>Custom location</Trans>}
+        placeholder="4 rue du dôme, 67000, Strasbourg"
+        endContent={
+          <Button
+            startContent={<Search />}
+            variant="flat"
+            onPress={() => getLocation(searchRef.current?.value)}
+          >
+            <Trans>Search</Trans>
+          </Button>
+        }
+        ref={searchRef}
+      />
     </form.Form>
   );
 };