<Miqdad> Button Position

2 files changed, 53 insertions, 19 deletions

diff --git a/src-migrate/modules/product-detail/components/AddToQuotation.tsx b/src-migrate/modules/product-detail/components/AddToQuotation.tsx
index f9b6c2b3..0a901448 100644
--- a/src-migrate/modules/product-detail/components/AddToQuotation.tsx
+++ b/src-migrate/modules/product-detail/components/AddToQuotation.tsx
@@ -16,6 +16,7 @@ import { useProductCartContext } from '@/contexts/ProductCartContext';
 import { createSlug } from '~/libs/slug';
 import formatCurrency from '~/libs/formatCurrency';
 import { useProductDetail } from '../stores/useProductDetail';
+import useDevice from '@/core/hooks/useDevice';
 
 type Props = {
   variantId: number | null;
@@ -40,6 +41,7 @@ const AddToQuotation = ({
   });
 
   const { askAdminUrl } = useProductDetail();
+  const { isMobile, isDesktop } = useDevice();
 
   const [product, setProducts] = useState(products);
   const [status, setStatus] = useState<Status>('idle');
@@ -129,7 +131,7 @@ const AddToQuotation = ({
           width={25}
           height={25}
         />
-        Penawaran Harga Instan
+        {isDesktop ? 'Penawaran Harga Instan' : ''}
       </Button>
       <BottomPopup
         className='!container'
diff --git a/src-migrate/modules/product-detail/components/PriceAction.tsx b/src-migrate/modules/product-detail/components/PriceAction.tsx
index 7548e016..9d45a7c3 100644
--- a/src-migrate/modules/product-detail/components/PriceAction.tsx
+++ b/src-migrate/modules/product-detail/components/PriceAction.tsx
@@ -12,6 +12,8 @@ import { getAuth } from '~/libs/auth';
 import useDevice from '@/core/hooks/useDevice';
 import odooApi from '~/libs/odooApi';
 import { Button, Skeleton } from '@chakra-ui/react';
+import DesktopView from '@/core/components/views/DesktopView';
+import MobileView from '@/core/components/views/MobileView';
 
 type Props = {
   product: IProductDetail;
@@ -201,30 +203,60 @@ const PriceAction = ({ product }: Props) => {
         </div>
       )}
       <div className='h-4' />
-
-      <div className={`${style['action-wrapper']}`}>
-        <AddToCart
-          products={product}
-          variantId={activeVariantId}
-          quantity={Number(quantityInput)}
-        />
-        {!isApproval && (
+      <DesktopView>
+        <div className={`${style['action-wrapper']}`}>
           <AddToCart
+            products={product}
+            variantId={activeVariantId}
+            quantity={Number(quantityInput)}
+          />
+          {!isApproval && (
+            <AddToCart
+              source='buy'
+              products={product}
+              variantId={activeVariantId}
+              quantity={Number(quantityInput)}
+            />
+          )}
+        </div>
+        <div className='mt-4'>
+          <AddToQuotation
             source='buy'
             products={product}
             variantId={activeVariantId}
             quantity={Number(quantityInput)}
           />
-        )}
-      </div>
-      <div className='mt-4'>
-        <AddToQuotation
-          source='buy'
-          products={product}
-          variantId={activeVariantId}
-          quantity={Number(quantityInput)}
-        />
-      </div>
+        </div>
+      </DesktopView>
+      <MobileView>
+        <div className='grid grid-cols-12 gap-2'>
+          <div className='col-span-2'>
+            <AddToQuotation
+              source='buy'
+              products={product}
+              variantId={activeVariantId}
+              quantity={Number(quantityInput)}
+            />
+          </div>
+          <div className='col-span-5'>
+            {!isApproval && (
+              <AddToCart
+                source='buy'
+                products={product}
+                variantId={activeVariantId}
+                quantity={Number(quantityInput)}
+              />
+            )}
+          </div>
+          <div className='col-span-5'>
+            <AddToCart
+              products={product}
+              variantId={activeVariantId}
+              quantity={Number(quantityInput)}
+            />
+          </div>
+        </div>
+      </MobileView>
     </div>
   );
 };