finish activate warranty logic

Signed-off-by: Chloe <pinkcloudvnn@gmail.com>

components/form/file-input/actions.ts

@@ -29,7 +29,7 @@ const createStagedUploadFiles = async (params: UploadInput) => {
 
     return JSON.parse(JSON.stringify(stagedTargets[0]));
   } catch (error) {
-    console.log(error);
+    console.log('createStagedUploadFiles action', error);
   }
 };
 
@@ -54,7 +54,7 @@ const onUploadFile = async ({
       originalSource: resourceUrl
     });
   } catch (error) {
-    console.log(error);
+    console.log('onUploadFile action', error);
   }
 };
 
@@ -81,6 +81,6 @@ export const handleUploadFile = async ({ file }: { file: File }) => {
       return result?.[0]?.id;
     }
   } catch (error) {
-    console.log(error);
+    console.log('handleUploadFile action', error);
   }
 };

components/orders/actions.ts

@@ -1,8 +1,9 @@
 'use server';
 
 import { handleUploadFile } from 'components/form/file-input/actions';
+import { TAGS } from 'lib/constants';
 import { updateOrderMetafields } from 'lib/shopify';
-import { revalidatePath } from 'next/cache';
+import { revalidateTag } from 'next/cache';
 
 export const activateWarranty = async (orderId: string, formData: FormData) => {
   let odometerFileId = null;
@@ -37,8 +38,9 @@ export const activateWarranty = async (orderId: string, formData: FormData) => {
       orderId,
       metafields: rawFormData
     });
-    revalidatePath('/account');
+
+    revalidateTag(TAGS.orderMetafields);
   } catch (error) {
-    console.log(error);
+    console.log('activateWarranty action', error);
   }
 };

components/orders/activate-warranty.tsx

@@ -1,15 +1,23 @@
 'use client';
 
-import { Order } from 'lib/shopify/types';
+import { Order, OrderMetafield, WarrantyStatus } from 'lib/shopify/types';
 import { useState } from 'react';
 import ActivateWarrantyModal from './activate-warranty-modal';
+import WarrantyActivatedBadge from './warranty-activated-badge';
 
 type ActivateWarrantyModalProps = {
   order: Order;
+  orderMetafields?: OrderMetafield;
 };
 
-const ActivateWarranty = ({ order }: ActivateWarrantyModalProps) => {
+const ActivateWarranty = ({ order, orderMetafields }: ActivateWarrantyModalProps) => {
   const [isOpen, setIsOpen] = useState(false);
+  const isWarrantyActivated = orderMetafields?.warrantyStatus === WarrantyStatus.Activated;
+
+  if (isWarrantyActivated) {
+    return <WarrantyActivatedBadge />;
+  }
+
   return (
     <>
       <button

components/orders/mobile-order-actions.tsx

@@ -3,13 +3,22 @@
 import { Button, Menu, MenuButton, MenuItem, MenuItems } from '@headlessui/react';
 import { EllipsisVerticalIcon } from '@heroicons/react/24/solid';
 import clsx from 'clsx';
-import { Order } from 'lib/shopify/types';
+import { Order, OrderMetafield, WarrantyStatus } from 'lib/shopify/types';
+import { isBeforeToday } from 'lib/utils';
 import Link from 'next/link';
 import { useState } from 'react';
 import ActivateWarrantyModal from './activate-warranty-modal';
 
-const MobileOrderActions = ({ order }: { order: Order }) => {
+const MobileOrderActions = ({
+  order,
+  orderMetafields
+}: {
+  order: Order;
+  orderMetafields?: OrderMetafield;
+}) => {
   const [isOpen, setIsOpen] = useState(false);
+  const isWarrantyActivated = orderMetafields?.warrantyStatus === WarrantyStatus.Activated;
+  const isPassDeadline = isBeforeToday(orderMetafields?.warrantyActivationDeadline);
 
   return (
     <>
@@ -39,19 +48,21 @@ const MobileOrderActions = ({ order }: { order: Order }) => {
                 </Link>
               )}
             </MenuItem>
-            <MenuItem>
-              {({ focus }) => (
-                <Button
-                  className={clsx(
-                    focus ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
-                    'flex w-full px-4 py-2 text-sm'
-                  )}
-                  onClick={() => setIsOpen(true)}
-                >
-                  Activate Warranty
-                </Button>
-              )}
-            </MenuItem>
+            {!isPassDeadline && !isWarrantyActivated && (
+              <MenuItem>
+                {({ focus }) => (
+                  <Button
+                    className={clsx(
+                      focus ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
+                      'flex w-full px-4 py-2 text-sm'
+                    )}
+                    onClick={() => setIsOpen(true)}
+                  >
+                    Activate Warranty
+                  </Button>
+                )}
+              </MenuItem>
+            )}
           </div>
         </MenuItems>
       </Menu>

components/orders/warranty-activated-badge.tsx

@@ -0,0 +1,12 @@
+import { CheckCircleIcon } from '@heroicons/react/24/solid';
+
+const WarrantyActivatedBadge = () => {
+  return (
+    <span className="inline-flex items-center gap-x-2 rounded-md bg-green-50 px-2.5 py-2 text-sm font-medium text-green-700 ring-1 ring-inset ring-green-600/20">
+      <CheckCircleIcon className="h-5 w-5 text-green-500" aria-hidden="true" />
+      Warranty Activated
+    </span>
+  );
+};
+
+export default WarrantyActivatedBadge;

components/orders/warranty-header-action.tsx

@@ -0,0 +1,5 @@
+const WarrantyHeaderAction = () => {
+  return <div>WarrantyHeaderAction</div>;
+};
+
+export default WarrantyHeaderAction;