From 02ab16d2660fa2520af0b6975d8f0a09e7773df1 Mon Sep 17 00:00:00 2001
From: Sol Irvine <sol@zenzen.io>
Date: Wed, 6 Sep 2023 12:27:16 -0700
Subject: [PATCH] fix: Age gate

---
 components/cart/modal.tsx            |  35 +++-
 components/product/age-gate-form.tsx | 254 +++++++++++++--------------
 2 files changed, 152 insertions(+), 137 deletions(-)

diff --git a/components/cart/modal.tsx b/components/cart/modal.tsx
index d1b34ecfb..a8c8db8bd 100644
--- a/components/cart/modal.tsx
+++ b/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')}
+                      </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>
+                  </AgeConfirmBeforeCheckout> */}
                 </div>
               )}
             </Dialog.Panel>
           </Transition.Child>
         </Dialog>
       </Transition>
+      {!!isConfirming && !!cart && cart?.checkoutUrl && (
+        <AgeGateForm didCancel={() => setIsConfirming(false)} checkoutUrl={cart.checkoutUrl} />
+      )}
     </>
   );
 }
diff --git a/components/product/age-gate-form.tsx b/components/product/age-gate-form.tsx
index 321f6bc4e..3c75b60b2 100644
--- a/components/product/age-gate-form.tsx
+++ b/components/product/age-gate-form.tsx
@@ -63,146 +63,134 @@ 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="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"
           >
-            <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"
-            >
-              <Dialog.Overlay className="fixed inset-0 bg-dark/80 backdrop-blur-sm transition-opacity" />
-            </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"
-            >
-              <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">
-                <div>
-                  <div className="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-green-100 dark:bg-green-900">
-                    <CheckIcon
-                      className="h-6 w-6 text-green-600 dark:text-green-400"
-                      aria-hidden="true"
-                    />
+            <div className="fixed inset-0 bg-black/70" aria-hidden="true" />
+          </Transition.Child>
+          <Transition.Child
+            as={Fragment}
+            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%]"
+          >
+            <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
+                        className="h-6 w-6 text-green-600 dark:text-green-400"
+                        aria-hidden="true"
+                      />
+                    </div>
+                    <div className="text-center sm:mt-5">
+                      <Dialog.Title
+                        as="h3"
+                        className="text-lg font-medium leading-6 text-dark dark:text-white"
+                      >
+                        {t('age-gate.title')}
+                      </Dialog.Title>
+                      <div className="mt-2">
+                        <p className="text-sm text-white">{t('age-gate.description')}</p>
+                      </div>
+                    </div>
                   </div>
-                  <div className="text-center sm:mt-5">
-                    <Dialog.Title
-                      as="h3"
-                      className="text-lg font-medium leading-6 text-dark dark:text-white"
+                  <div>
+                    <div className="text-center text-sm font-medium">{t('age-gate.birthdate')}</div>
+                  </div>
+                  <div>
+                    <div className="flex flex-row justify-center space-x-2">
+                      <div className="flex flex-col items-start space-y-1">
+                        <input
+                          type="text"
+                          className="w-full border bg-white p-2 text-center selection:bg-emerald-200"
+                          ref={yearFieldRef}
+                          placeholder="YYYY"
+                          maxLength={4}
+                          onChange={(e) => setYear(parseInt(e?.target?.value))}
+                        />
+                        <div className="w-full text-center text-xs">{t('age-gate.year')}</div>
+                      </div>
+
+                      <div className="flex flex-col items-start space-y-1">
+                        <input
+                          type="text"
+                          className="w-full border bg-white p-2 text-center selection:bg-emerald-200"
+                          placeholder="MM"
+                          maxLength={2}
+                          onChange={(e) => setMonth(parseInt(e?.target?.value))}
+                        />
+                        <div className="w-full text-center text-xs">{t('age-gate.month')}</div>
+                      </div>
+                      <div className="flex flex-col items-start space-y-1">
+                        <input
+                          type="text"
+                          className="w-full border bg-white p-2 text-center selection:bg-emerald-200"
+                          placeholder="DD"
+                          maxLength={2}
+                          onChange={(e) => setDay(parseInt(e?.target?.value))}
+                        />
+                        <div className="w-full text-center text-xs">{t('age-gate.day')}</div>
+                      </div>
+                    </div>
+                  </div>
+                  <div className="text-black sm:grid sm:grid-flow-row-dense sm:grid-cols-2 sm:gap-3">
+                    <button
+                      type="button"
+                      className={clsx(
+                        'inline-flex w-full justify-center',
+                        hasValidDate
+                          ? 'border border-dark hover:border-dark/50'
+                          : 'border border-dark/50 hover:border-dark/20',
+                        'bg-white px-4 py-2',
+                        'text-base font-medium text-black',
+                        'shadow-sm transition-colors duration-300',
+                        'focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2',
+                        'disabled:cursor-not-allowed disabled:opacity-50',
+                        'disabled:border-dark/50 disabled:hover:border-dark/50',
+                        'sm:col-start-2 sm:text-sm'
+                      )}
+                      onClick={() => save()}
+                      disabled={!hasValidDate}
                     >
-                      {t('age-gate.title')}
-                    </Dialog.Title>
-                    <div className="mt-2">
-                      <p className="text-sm text-white">{t('age-gate.description')}</p>
-                    </div>
+                      {isPending ? t('age-gate.confirming') : t('age-gate.confirm')}
+                    </button>
+                    <button
+                      type="button"
+                      className={clsx(
+                        'mt-3 inline-flex w-full justify-center',
+                        'border border-dark/50 hover:border-dark/20',
+                        'bg-white px-4 py-2',
+                        'text-base font-medium',
+                        'text-black shadow-sm transition-all duration-300 hover:bg-white hover:bg-opacity-20',
+                        'focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2',
+                        'sm:col-start-1 sm:mt-0 sm:text-sm',
+                        'disabled:border-dark/50 disabled:hover:border-dark/50'
+                      )}
+                      onClick={() => cancel()}
+                      disabled={isPending}
+                    >
+                      {t('age-gate.deny')}
+                    </button>
                   </div>
                 </div>
-                <div>
-                  <div className="text-center text-sm font-medium">{t('age-gate.birthdate')}</div>
-                </div>
-                <div>
-                  <div className="flex flex-row justify-center space-x-2">
-                    <div className="flex flex-col items-start space-y-1">
-                      <input
-                        type="text"
-                        className="w-full border bg-white p-2 text-center selection:bg-emerald-200"
-                        ref={yearFieldRef}
-                        placeholder="YYYY"
-                        maxLength={4}
-                        onChange={(e) => setYear(parseInt(e?.target?.value))}
-                      />
-                      <div className="w-full text-center text-xs">{t('age-gate.year')}</div>
-                    </div>
-
-                    <div className="flex flex-col items-start space-y-1">
-                      <input
-                        type="text"
-                        className="w-full border bg-white p-2 text-center selection:bg-emerald-200"
-                        placeholder="MM"
-                        maxLength={2}
-                        onChange={(e) => setMonth(parseInt(e?.target?.value))}
-                      />
-                      <div className="w-full text-center text-xs">{t('age-gate.month')}</div>
-                    </div>
-                    <div className="flex flex-col items-start space-y-1">
-                      <input
-                        type="text"
-                        className="w-full border bg-white p-2 text-center selection:bg-emerald-200"
-                        placeholder="DD"
-                        maxLength={2}
-                        onChange={(e) => setDay(parseInt(e?.target?.value))}
-                      />
-                      <div className="w-full text-center text-xs">{t('age-gate.day')}</div>
-                    </div>
-                  </div>
-                </div>
-                <div className="text-black sm:grid sm:grid-flow-row-dense sm:grid-cols-2 sm:gap-3">
-                  <button
-                    type="button"
-                    className={clsx(
-                      'inline-flex w-full justify-center',
-                      hasValidDate
-                        ? 'border border-dark hover:border-dark/50'
-                        : 'border border-dark/50 hover:border-dark/20',
-                      'bg-white px-4 py-2',
-                      'text-base font-medium text-black',
-                      'shadow-sm transition-colors duration-300',
-                      'focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2',
-                      'disabled:cursor-not-allowed disabled:opacity-50',
-                      'disabled:border-dark/50 disabled:hover:border-dark/50',
-                      'sm:col-start-2 sm:text-sm'
-                    )}
-                    onClick={() => save()}
-                    disabled={!hasValidDate}
-                  >
-                    {isPending ? t('age-gate.confirming') : t('age-gate.confirm')}
-                  </button>
-                  <button
-                    type="button"
-                    className={clsx(
-                      'mt-3 inline-flex w-full justify-center',
-                      'border border-dark/50 hover:border-dark/20',
-                      'bg-white px-4 py-2',
-                      'text-base font-medium',
-                      'text-black shadow-sm transition-all duration-300 hover:bg-white hover:bg-opacity-20',
-                      'focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2',
-                      'sm:col-start-1 sm:mt-0 sm:text-sm',
-                      'disabled:border-dark/50 disabled:hover:border-dark/50'
-                    )}
-                    onClick={() => cancel()}
-                    disabled={isPending}
-                  >
-                    {t('age-gate.deny')}
-                  </button>
-                </div>
               </div>
-            </Transition.Child>
-          </div>
+            </Dialog.Panel>
+          </Transition.Child>
         </Dialog>
-      </Transition.Root>
+      </Transition>
     </>
   );
 };