From 8c194a6ca1ec3f8d534ae4c2a1169acee03f6ed5 Mon Sep 17 00:00:00 2001
From: Sol Irvine <sol@zenzen.io>
Date: Wed, 6 Sep 2023 13:38:48 -0700
Subject: [PATCH] fix: Mailchimp signups

Also, inline age check
---
 components/cart/modal.tsx            | 256 ++++++++++++++-------------
 components/product/age-gate-form.tsx | 233 ++++++++++++------------
 2 files changed, 247 insertions(+), 242 deletions(-)

diff --git a/components/cart/modal.tsx b/components/cart/modal.tsx
index a8c8db8bd..f9e0f6c01 100644
--- a/components/cart/modal.tsx
+++ b/components/cart/modal.tsx
@@ -49,8 +49,17 @@ export default function CartModal({
       // Always update the quantity reference
       quantityRef.current = cart?.totalQuantity;
     }
+
+    return () => {
+      setIsConfirming(false);
+    };
   }, [isOpen, cart?.totalQuantity, quantityRef]);
 
+  const checkoutWithAgeCheck = () => {
+    setIsOpen(true);
+    setIsConfirming(true);
+  };
+
   return (
     <>
       <button aria-label="Open cart" onClick={openCart}>
@@ -87,136 +96,141 @@ export default function CartModal({
                 </button>
               </div>
 
-              {!cart || cart.lines.length === 0 ? (
-                <div className="mt-20 flex w-full flex-col items-center justify-center overflow-hidden">
-                  <ShoppingBagIcon className="h-16" strokeWidth={1} />
-                  <p className="mt-6 text-center font-serif text-xl">Your shopping bag is empty.</p>
-                </div>
+              {!!isConfirming && !!cart && cart?.checkoutUrl ? (
+                <AgeGateForm
+                  didCancel={() => setIsConfirming(false)}
+                  checkoutUrl={cart.checkoutUrl}
+                />
               ) : (
-                <div className="flex h-full flex-col justify-between overflow-hidden p-1">
-                  <ul className="grow overflow-auto py-4">
-                    {cart.lines.map((item, i) => {
-                      const merchandiseSearchParams = {} as MerchandiseSearchParams;
-
-                      item.merchandise.selectedOptions.forEach(({ name, value }) => {
-                        if (value !== DEFAULT_OPTION) {
-                          merchandiseSearchParams[name.toLowerCase()] = value;
-                        }
-                      });
-
-                      const merchandiseUrl = createUrl(
-                        `/product/${item.merchandise.product.handle}`,
-                        new URLSearchParams(merchandiseSearchParams)
-                      );
-
-                      return (
-                        <li key={i} className="flex w-full flex-col border-b border-white/20">
-                          <div className="relative flex w-full flex-row justify-between px-1 py-4">
-                            <div className="absolute z-40 -mt-2 ml-[55px]">
-                              <DeleteItemButton item={item} />
-                            </div>
-                            <Link
-                              href={merchandiseUrl}
-                              onClick={closeCart}
-                              className="z-30 flex flex-row space-x-4"
-                            >
-                              <div className="relative h-16 w-16 cursor-pointer overflow-hidden rounded-md border border-white/20 bg-white/40">
-                                <Image
-                                  className="h-full w-full object-cover"
-                                  width={64}
-                                  height={64}
-                                  alt={
-                                    item.merchandise.product.featuredImage.altText ||
-                                    item.merchandise.product.title
-                                  }
-                                  src={item.merchandise.product.featuredImage.url}
-                                />
-                              </div>
-
-                              <div className="flex flex-1 flex-col text-base">
-                                <span className="leading-tight">
-                                  {item.merchandise.product.title}
-                                </span>
-                                {item.merchandise.title !== DEFAULT_OPTION ? (
-                                  <p className="text-sm text-white">{item.merchandise.title}</p>
-                                ) : null}
-                              </div>
-                            </Link>
-                            <div className="flex h-16 flex-col justify-between">
-                              <Price
-                                className="flex justify-end space-y-2 text-right text-sm"
-                                amount={item.cost.totalAmount.amount}
-                                currencyCode={item.cost.totalAmount.currencyCode}
-                              />
-                              <div className="ml-auto flex h-9 flex-row items-center rounded-full border border-white/20">
-                                <EditItemQuantityButton item={item} type="minus" />
-                                <p className="w-6 text-center">
-                                  <span className="w-full text-sm">{item.quantity}</span>
-                                </p>
-                                <EditItemQuantityButton item={item} type="plus" />
-                              </div>
-                            </div>
-                          </div>
-                        </li>
-                      );
-                    })}
-                  </ul>
-                  {!!promotedItem && (
-                    <PromotedCartItem
-                      product={promotedItem}
-                      availableForSale={promotedItem.availableForSale}
-                    />
-                  )}
-                  <div className="pb-4 pt-12 text-sm text-neutral-500 dark:text-neutral-400">
-                    <div className="mb-3 flex items-center justify-between border-b border-white/20 pb-1">
-                      <p>Taxes</p>
-                      <p className="text-right text-white/50">Calculated at checkout</p>
+                <>
+                  {!cart || cart.lines.length === 0 ? (
+                    <div className="mt-20 flex w-full flex-col items-center justify-center overflow-hidden">
+                      <ShoppingBagIcon className="h-16" strokeWidth={1} />
+                      <p className="mt-6 text-center font-serif text-xl">
+                        Your shopping bag is empty.
+                      </p>
                     </div>
-                    <div className="mb-3 flex items-center justify-between border-b border-white/20 py-1">
-                      <p>Shipping</p>
-                      <p className="text-right text-white/50">Calculated at checkout</p>
-                    </div>
-                    <div className="mb-3 flex items-center justify-between border-b border-white/20 py-1">
-                      <p>Total</p>
-                      <Price
-                        className="text-right text-base text-white"
-                        amount={cart.cost.totalAmount.amount}
-                        currencyCode={cart.cost.totalAmount.currencyCode}
-                      />
-                    </div>
-                  </div>
-                  {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>
-                    </>
+                    <div className="flex h-full flex-col justify-between overflow-hidden p-1">
+                      <ul className="grow overflow-auto py-4">
+                        {cart.lines.map((item, i) => {
+                          const merchandiseSearchParams = {} as MerchandiseSearchParams;
+
+                          item.merchandise.selectedOptions.forEach(({ name, value }) => {
+                            if (value !== DEFAULT_OPTION) {
+                              merchandiseSearchParams[name.toLowerCase()] = value;
+                            }
+                          });
+
+                          const merchandiseUrl = createUrl(
+                            `/product/${item.merchandise.product.handle}`,
+                            new URLSearchParams(merchandiseSearchParams)
+                          );
+
+                          return (
+                            <li key={i} className="flex w-full flex-col border-b border-white/20">
+                              <div className="relative flex w-full flex-row justify-between px-1 py-4">
+                                <div className="absolute z-40 -mt-2 ml-[55px]">
+                                  <DeleteItemButton item={item} />
+                                </div>
+                                <Link
+                                  href={merchandiseUrl}
+                                  onClick={closeCart}
+                                  className="z-30 flex flex-row space-x-4"
+                                >
+                                  <div className="relative h-16 w-16 cursor-pointer overflow-hidden rounded-md border border-white/20 bg-white/40">
+                                    <Image
+                                      className="h-full w-full object-cover"
+                                      width={64}
+                                      height={64}
+                                      alt={
+                                        item.merchandise.product.featuredImage.altText ||
+                                        item.merchandise.product.title
+                                      }
+                                      src={item.merchandise.product.featuredImage.url}
+                                    />
+                                  </div>
+
+                                  <div className="flex flex-1 flex-col text-base">
+                                    <span className="leading-tight">
+                                      {item.merchandise.product.title}
+                                    </span>
+                                    {item.merchandise.title !== DEFAULT_OPTION ? (
+                                      <p className="text-sm text-white">{item.merchandise.title}</p>
+                                    ) : null}
+                                  </div>
+                                </Link>
+                                <div className="flex h-16 flex-col justify-between">
+                                  <Price
+                                    className="flex justify-end space-y-2 text-right text-sm"
+                                    amount={item.cost.totalAmount.amount}
+                                    currencyCode={item.cost.totalAmount.currencyCode}
+                                  />
+                                  <div className="ml-auto flex h-9 flex-row items-center rounded-full border border-white/20">
+                                    <EditItemQuantityButton item={item} type="minus" />
+                                    <p className="w-6 text-center">
+                                      <span className="w-full text-sm">{item.quantity}</span>
+                                    </p>
+                                    <EditItemQuantityButton item={item} type="plus" />
+                                  </div>
+                                </div>
+                              </div>
+                            </li>
+                          );
+                        })}
+                      </ul>
+                      {!!promotedItem && (
+                        <PromotedCartItem
+                          product={promotedItem}
+                          availableForSale={promotedItem.availableForSale}
+                        />
+                      )}
+                      <div className="pb-4 pt-12 text-sm text-neutral-500 dark:text-neutral-400">
+                        <div className="mb-3 flex items-center justify-between border-b border-white/20 pb-1">
+                          <p>Taxes</p>
+                          <p className="text-right text-white/50">Calculated at checkout</p>
+                        </div>
+                        <div className="mb-3 flex items-center justify-between border-b border-white/20 py-1">
+                          <p>Shipping</p>
+                          <p className="text-right text-white/50">Calculated at checkout</p>
+                        </div>
+                        <div className="mb-3 flex items-center justify-between border-b border-white/20 py-1">
+                          <p>Total</p>
+                          <Price
+                            className="text-right text-base text-white"
+                            amount={cart.cost.totalAmount.amount}
+                            currencyCode={cart.cost.totalAmount.currencyCode}
+                          />
+                        </div>
+                      </div>
+                      {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={() => checkoutWithAgeCheck()}
+                            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>
+                        </>
+                      )}
+                    </div>
                   )}
-                  {/* <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} />
-      )}
     </>
   );
 }
diff --git a/components/product/age-gate-form.tsx b/components/product/age-gate-form.tsx
index 3c75b60b2..b968c957c 100644
--- a/components/product/age-gate-form.tsx
+++ b/components/product/age-gate-form.tsx
@@ -3,7 +3,7 @@
 /* This example requires Tailwind CSS v2.0+ */
 import { FC, Fragment, useEffect, useRef, useState, useTransition } from 'react';
 
-import { Dialog, Transition } from '@headlessui/react';
+import { Transition } from '@headlessui/react';
 import { CheckIcon } from '@heroicons/react/24/outline';
 import { useAgeConfirmation } from 'app/hooks/use-age-confirmation';
 import clsx from 'clsx';
@@ -27,7 +27,7 @@ const AgeGateForm: FC<AgeGateFormProps> = ({ checkoutUrl, didCancel }) => {
 
   const { onAgeConfirmed } = useAgeConfirmation();
 
-  const yearFieldRef = useRef(null);
+  const yearFieldRef = useRef<HTMLInputElement>(null);
 
   const minAge = 20;
   const maxAge = 130;
@@ -61,135 +61,126 @@ const AgeGateForm: FC<AgeGateFormProps> = ({ checkoutUrl, didCancel }) => {
     }
   }, [month, day, year]);
 
+  useEffect(() => {
+    if (yearFieldRef) {
+      console.debug('yearFieldRef', yearFieldRef?.current);
+      yearFieldRef?.current?.focus();
+    }
+  }, []);
+
   return (
     <>
       <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"
-          >
-            <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">
+        <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%]"
+        >
+          <div className="grid h-full w-full grid-cols-1 place-content-center">
+            <div className="mx-auto inline-block space-y-6 overflow-hidden rounded-lg py-12 text-left align-bottom text-white 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-900">
+                  <CheckIcon
+                    className="h-6 w-6 text-green-600 dark:text-green-400"
+                    aria-hidden="true"
+                  />
+                </div>
+                <div className="pt-5 text-center">
+                  <h3 className="text-lg font-medium leading-6 text-white">
+                    {t('age-gate.title')}
+                  </h3>
+                  {/* <div className="mt-2">
                         <p className="text-sm text-white">{t('age-gate.description')}</p>
-                      </div>
-                    </div>
+                      </div> */}
+                </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-transparent p-2 text-center text-white selection:bg-emerald-200 focus:ring-offset-0"
+                      ref={yearFieldRef}
+                      placeholder="YYYY"
+                      autoFocus
+                      maxLength={4}
+                      onChange={(e) => setYear(parseInt(e?.target?.value))}
+                    />
+                    <div className="w-full text-center text-xs">{t('age-gate.year')}</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 className="flex flex-col items-start space-y-1">
+                    <input
+                      type="text"
+                      className="w-full border bg-transparent p-2 text-center text-white selection:bg-emerald-200 focus:ring-offset-0"
+                      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="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 className="flex flex-col items-start space-y-1">
+                    <input
+                      type="text"
+                      className="w-full border bg-transparent p-2 text-center text-white selection:bg-emerald-200 focus:ring-offset-0"
+                      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>
-            </Dialog.Panel>
-          </Transition.Child>
-        </Dialog>
+              <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-10',
+                    '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/10 hover:border-dark/30',
+                    'bg-white/50 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/20 disabled:hover:border-dark/20',
+                    'disabled:text-dark/30 disabled:hover:text-dark/30'
+                  )}
+                  onClick={() => cancel()}
+                  disabled={isPending}
+                >
+                  {t('age-gate.deny')}
+                </button>
+              </div>
+            </div>
+          </div>
+        </Transition.Child>
       </Transition>
     </>
   );