Merge pull request #4 from zenzen-sol/sol/fix-age-gate

fix: Age gate modal

components/cart/add-many-to-cart.tsx

@@ -4,7 +4,7 @@ import { ChevronDownIcon, ChevronUpIcon } from '@heroicons/react/24/outline';
 import clsx from 'clsx';
 import LoadingDots from 'components/loading-dots';
 import { ProductVariant } from 'lib/shopify/types';
-import { useLocale, useTranslations } from 'next-intl';
+import { useTranslations } from 'next-intl';
 import { useRouter, useSearchParams } from 'next/navigation';
 import { useState, useTransition } from 'react';
 import { addItems } from './actions';
@@ -20,7 +20,6 @@ export function AddManyToCart({
 }) {
   const router = useRouter();
   const searchParams = useSearchParams();
-  const locale = useLocale();
   const t = useTranslations('Index');
 
   const [currentQuantity, setCurrentQuantity] = useState<number>(quantity);

components/cart/modal.tsx

@@ -2,7 +2,9 @@
 
 import { Dialog, Transition } from '@headlessui/react';
 import { ShoppingBagIcon } from '@heroicons/react/24/outline';
+import { useAgeConfirmation } from 'app/hooks/use-age-confirmation';
 import Price from 'components/price';
+import AgeGateForm from 'components/product/age-gate-form';
 import { DEFAULT_OPTION } from 'lib/constants';
 import type { Cart, Product } from 'lib/shopify/types';
 import { createUrl } from 'lib/utils';
@@ -10,7 +12,6 @@ import { useTranslations } from 'next-intl';
 import Image from 'next/image';
 import Link from 'next/link';
 import { Fragment, useEffect, useRef, useState } from 'react';
-import AgeConfirmBeforeCheckout from './age-gate-confirm-before-checkout';
 import CloseCart from './close-cart';
 import DeleteItemButton from './delete-item-button';
 import EditItemQuantityButton from './edit-item-quantity-button';
@@ -29,7 +30,10 @@ export default function CartModal({
   promotedItem?: Product;
 }) {
   const t = useTranslations('Index');
-  const [isOpen, setIsOpen] = useState(false);
+  const [isOpen, setIsOpen] = useState<boolean>(false);
+  const [isConfirming, setIsConfirming] = useState<boolean>(false);
+  const { ageConfirmed } = useAgeConfirmation();
+
   const quantityRef = useRef(cart?.totalQuantity);
   const openCart = () => setIsOpen(true);
   const closeCart = () => setIsOpen(false);
@@ -181,15 +185,38 @@ export default function CartModal({
                       />
                     </div>
                   </div>
-                  <AgeConfirmBeforeCheckout checkoutUrl={cart.checkoutUrl}>
+                  {ageConfirmed ? (
+                    <>
+                      <Link
+                        href={cart.checkoutUrl}
+                        className="block w-full border border-white/20 bg-dark px-12 py-6 text-center font-sans font-medium uppercase tracking-wider text-white transition-colors duration-300 hover:bg-white hover:text-black"
+                      >
                         {t('cart.proceed')}
-                  </AgeConfirmBeforeCheckout>
+                      </Link>
+                    </>
+                  ) : (
+                    <>
+                      <button
+                        type="button"
+                        onClick={() => setIsConfirming(true)}
+                        className="block w-full border border-white/20 bg-dark px-12 py-6 text-center font-sans font-medium uppercase tracking-wider text-white transition-colors duration-300 hover:bg-white hover:text-black"
+                      >
+                        {t('cart.proceed')}
+                      </button>
+                    </>
+                  )}
+                  {/* <AgeConfirmBeforeCheckout checkoutUrl={cart.checkoutUrl}>
+                    {t('cart.proceed')}
+                  </AgeConfirmBeforeCheckout> */}
                 </div>
               )}
             </Dialog.Panel>
           </Transition.Child>
         </Dialog>
       </Transition>
+      {!!isConfirming && !!cart && cart?.checkoutUrl && (
+        <AgeGateForm didCancel={() => setIsConfirming(false)} checkoutUrl={cart.checkoutUrl} />
+      )}
     </>
   );
 }

components/product/age-gate-form.tsx

@@ -63,44 +63,31 @@ const AgeGateForm: FC<AgeGateFormProps> = ({ checkoutUrl, didCancel }) => {
 
   return (
     <>
-      <Transition.Root show={true} as={Fragment}>
-        <Dialog
-          as="div"
-          className="fixed inset-0 z-50 overflow-y-auto"
-          initialFocus={yearFieldRef}
-          onClose={() => {}}
-        >
-          <div
-            className={clsx(
-              'flex min-h-screen items-end justify-center px-4 pb-20 pt-4 text-center sm:block sm:p-0'
-            )}
-          >
+      <Transition show={true}>
+        <Dialog className="relative z-50" initialFocus={yearFieldRef} onClose={() => {}}>
           <Transition.Child
             as={Fragment}
-              enter="ease-out duration-300"
-              enterFrom="opacity-0"
-              enterTo="opacity-100"
-              leave="ease-in duration-200"
-              leaveFrom="opacity-100"
-              leaveTo="opacity-0"
+            enter="transition-all ease-in-out duration-300"
+            enterFrom="opacity-0 backdrop-blur-none"
+            enterTo="opacity-100 backdrop-blur-[.5px]"
+            leave="transition-all ease-in-out duration-200"
+            leaveFrom="opacity-100 backdrop-blur-[.5px]"
+            leaveTo="opacity-0 backdrop-blur-none"
           >
-              <Dialog.Overlay className="fixed inset-0 bg-dark/80 backdrop-blur-sm transition-opacity" />
+            <div className="fixed inset-0 bg-black/70" aria-hidden="true" />
           </Transition.Child>
-
-            {/* This element is to trick the browser into centering the modal contents. */}
-            <span className="hidden sm:inline-block sm:h-screen sm:align-middle" aria-hidden="true">
-              &#8203;
-            </span>
           <Transition.Child
             as={Fragment}
-              enter="ease-out duration-300"
-              enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-              enterTo="opacity-100 translate-y-0 sm:scale-100"
-              leave="ease-in duration-200"
-              leaveFrom="opacity-100 translate-y-0 sm:scale-100"
-              leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+            enter="transition-all ease-in-out duration-300"
+            enterFrom="translate-x-[-100%]"
+            enterTo="translate-x-0"
+            leave="transition-all ease-in-out duration-200"
+            leaveFrom="translate-x-0"
+            leaveTo="translate-x-[-100%]"
           >
-              <div className="inline-block space-y-6 overflow-hidden rounded-lg bg-white px-4 pb-4 pt-5 text-left align-bottom text-dark shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg sm:p-6 sm:align-middle">
+            <Dialog.Panel className="fixed inset-0 flex h-full w-full flex-col pb-6">
+              <div className="grid h-full w-full grid-cols-1 place-content-center p-4">
+                <div className="mx-auto inline-block space-y-6 overflow-hidden rounded-lg bg-white px-4 pb-4 pt-5 text-left align-bottom text-dark shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg sm:p-6 sm:align-middle">
                   <div>
                     <div className="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-green-100 dark:bg-green-900">
                       <CheckIcon
@@ -199,10 +186,11 @@ const AgeGateForm: FC<AgeGateFormProps> = ({ checkoutUrl, didCancel }) => {
                     </button>
                   </div>
                 </div>
-            </Transition.Child>
               </div>
+            </Dialog.Panel>
+          </Transition.Child>
         </Dialog>
-      </Transition.Root>
+      </Transition>
     </>
   );
 };