Format

components/cart/add-to-cart.tsx

@@ -7,51 +7,66 @@ import LoadingDots from 'components/loading-dots';
 import { ProductVariant } from 'lib/shopify/types';
 import { useSearchParams } from 'next/navigation';
 // @ts-ignore
-import { experimental_useFormState as useFormState, experimental_useFormStatus as useFormStatus } from 'react-dom';
+import {
+  experimental_useFormState as useFormState,
+  experimental_useFormStatus as useFormStatus
+} from 'react-dom';
 
-function SubmitButton({ availableForSale, selectedVariantId }: {
+function SubmitButton({
+  availableForSale,
+  selectedVariantId
+}: {
   availableForSale: boolean;
   selectedVariantId: string | undefined;
 }) {
-  const { pending } = useFormStatus()
+  const { pending } = useFormStatus();
-  const buttonClasses = 'relative flex w-full items-center justify-center rounded-full bg-blue-600 p-4 tracking-wide text-white'
+  const buttonClasses =
+    'relative flex w-full items-center justify-center rounded-full bg-blue-600 p-4 tracking-wide text-white';
+  const disabledClasses = 'cursor-not-allowed opacity-60 hover:opacity-60';
 
   if (!availableForSale) {
-    return <button aria-disabled className={clsx(
+    return (
-      buttonClasses,
+      <button aria-disabled className={clsx(buttonClasses, disabledClasses)}>
-      'cursor-not-allowed opacity-60 hover:opacity-60'
-    )}>
         Out Of Stock
       </button>
+    );
   }
 
   if (!selectedVariantId) {
-    return <button aria-label="Please select an option" aria-disabled className={clsx(
+    return (
-      buttonClasses,
+      <button
-      'cursor-not-allowed opacity-60 hover:opacity-60'
+        aria-label="Please select an option"
-    )}>
+        aria-disabled
+        className={clsx(buttonClasses, disabledClasses)}
+      >
         <div className="absolute left-0 ml-4">
           <PlusIcon className="h-5" />
         </div>
         Add To Cart
       </button>
+    );
   }
 
   return (
-    <button type="submit" aria-disabled={pending} className={clsx(
+    <button
-      buttonClasses,
+      type="submit"
-      {
+      aria-label="Add to cart"
+      aria-disabled={pending}
+      className={clsx(buttonClasses, {
         'hover:opacity-90': true,
         'cursor-not-allowed': pending
-      }
+      })}
-    )}>
+    >
       <div className="absolute left-0 ml-4">
-        {!pending ? <PlusIcon className="h-5" /> : <LoadingDots className="mb-3 bg-white" />}
+        {!pending ? (
+          <PlusIcon className="h-5" />
+        ) : (
+          <LoadingDots className="mb-3 bg-white" />
+        )}
       </div>
       Add To Cart
     </button>
-  )
+  );
-  
 }
 
 export function AddToCart({
@@ -61,7 +76,7 @@ export function AddToCart({
   variants: ProductVariant[];
   availableForSale: boolean;
 }) {
-  const [message, formAction] = useFormState(addItem, null)
+  const [message, formAction] = useFormState(addItem, null);
   const searchParams = useSearchParams();
   const defaultVariantId = variants.length === 1 ? variants[0]?.id : undefined;
   const variant = variants.find((variant: ProductVariant) =>
@@ -70,15 +85,17 @@ export function AddToCart({
     )
   );
   const selectedVariantId = variant?.id || defaultVariantId;
-  const actionWithVariant = formAction.bind(null, selectedVariantId)
+  const actionWithVariant = formAction.bind(null, selectedVariantId);
 
   return (
-    <form action={actionWithVariant}
+    <form action={actionWithVariant}>
-    >
+      <SubmitButton
-      <SubmitButton availableForSale={availableForSale} selectedVariantId={selectedVariantId} />
+        availableForSale={availableForSale}
+        selectedVariantId={selectedVariantId}
+      />
       <p aria-live="polite" className="sr-only" role="status">
         {message}
       </p>
     </form>
-  )
+  );
 }