From 79158bfee2cc29a52b5597a96357037f15ba7abf Mon Sep 17 00:00:00 2001
From: foochifa <foochifa@gmail.com>
Date: Mon, 11 Sep 2023 14:34:26 +0800
Subject: [PATCH] feat: full screen product modal in mobile

---
 .../PaymentsInputPanel/ProductModal.tsx       | 23 +++++++++++++++----
 1 file changed, 18 insertions(+), 5 deletions(-)

diff --git a/frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignDrawer/FieldListDrawer/field-panels/PaymentsInputPanel/ProductModal.tsx b/frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignDrawer/FieldListDrawer/field-panels/PaymentsInputPanel/ProductModal.tsx
index d72102def0..eef07b1c90 100644
--- a/frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignDrawer/FieldListDrawer/field-panels/PaymentsInputPanel/ProductModal.tsx
+++ b/frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignDrawer/FieldListDrawer/field-panels/PaymentsInputPanel/ProductModal.tsx
@@ -2,7 +2,6 @@ import { Controller, RegisterOptions, useForm } from 'react-hook-form'
 import {
   Box,
   Button,
-  ButtonGroup,
   Divider,
   Flex,
   FormControl,
@@ -15,6 +14,7 @@ import {
   ModalOverlay,
   Skeleton,
   Stack,
+  useBreakpointValue,
 } from '@chakra-ui/react'
 
 import { Product, StorageFormSettings } from '~shared/types'
@@ -24,6 +24,7 @@ import {
   formatCurrency,
 } from '~shared/utils/payments'
 
+import { useIsMobile } from '~hooks/useIsMobile'
 import FormErrorMessage from '~components/FormControl/FormErrorMessage'
 import FormLabel from '~components/FormControl/FormLabel'
 import Input from '~components/Input'
@@ -72,6 +73,8 @@ export const ProductModal = ({
     mode: 'all',
   })
 
+  const isMobile = useIsMobile()
+
   const {
     data: {
       maxPaymentAmountCents = Number.MAX_SAFE_INTEGER,
@@ -161,9 +164,14 @@ export const ProductModal = ({
       return true
     },
   }
+  const modalSize = useBreakpointValue({
+    base: 'mobile',
+    xs: 'mobile',
+    md: 'md',
+  })
 
   return (
-    <Modal isOpen onClose={onClose}>
+    <Modal isOpen onClose={onClose} size={modalSize}>
       <ModalOverlay />
       <ModalContent>
         <ModalCloseButton />
@@ -329,18 +337,23 @@ export const ProductModal = ({
           </Stack>
         </ModalBody>
         <ModalFooter>
-          <ButtonGroup>
-            <Button variant="clear" onClick={onClose}>
+          <Stack
+            w="100%"
+            direction={{ base: 'column-reverse', md: 'row' }}
+            justifyContent={{ md: 'right' }}
+          >
+            <Button variant="clear" onClick={onClose} isFullWidth={isMobile}>
               Cancel
             </Button>
             <Button
               loadingText="Saving"
               onClick={handleSaveProduct}
               isDisabled={Object.keys(errors).length > 0}
+              isFullWidth={isMobile}
             >
               Save product
             </Button>
-          </ButtonGroup>
+          </Stack>
         </ModalFooter>
       </ModalContent>
     </Modal>