From 5c75a483a7390ebc742e705abd94f5338e6fc6b8 Mon Sep 17 00:00:00 2001
From: Michael Novotny <manovotny@gmail.com>
Date: Tue, 20 Jun 2023 21:58:12 -0500
Subject: [PATCH] Adds animation back

---
 components/cart/modal.tsx | 270 +++++++++++++++++++++-----------------
 1 file changed, 147 insertions(+), 123 deletions(-)

diff --git a/components/cart/modal.tsx b/components/cart/modal.tsx
index 949fb088a..82c2a310a 100644
--- a/components/cart/modal.tsx
+++ b/components/cart/modal.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { Dialog } from '@headlessui/react';
+import { Dialog, Transition } from '@headlessui/react';
 import Image from 'next/image';
 import Link from 'next/link';
 
@@ -11,7 +11,7 @@ import Price from 'components/price';
 import { DEFAULT_OPTION } from 'lib/constants';
 import type { Cart } from 'lib/shopify/types';
 import { createUrl } from 'lib/utils';
-import { useEffect, useRef, useState } from 'react';
+import { Fragment, useEffect, useRef, useState } from 'react';
 import { useCookies } from 'react-cookie';
 import DeleteItemButton from './delete-item-button';
 import EditItemQuantityButton from './edit-item-quantity-button';
@@ -56,128 +56,152 @@ export default function CartModal({ cart, cartIdUpdated }: { cart: Cart; cartIdU
       <button aria-label="Open cart" onClick={openCart} data-testid="open-cart">
         <CartIcon quantity={cart.totalQuantity} />
       </button>
-      <Dialog open={cartIsOpen} onClose={closeCart} className="relative z-50" data-testid="cart">
-        <div className="fixed inset-0 bg-black/30" aria-hidden="true" />
-        <Dialog.Panel className="fixed bottom-0 right-0 top-0 flex h-full w-full flex-col bg-white p-6 text-black dark:bg-black dark:text-white md:w-3/5 lg:w-2/5">
-          <div className="flex items-center justify-between">
-            <p className="text-lg font-bold">My Cart</p>
-            <button
-              aria-label="Close cart"
-              onClick={closeCart}
-              className="text-black transition-colors hover:text-gray-500 dark:text-gray-100"
-              data-testid="close-cart"
-            >
-              <CloseIcon className="h-7" />
-            </button>
-          </div>
-
-          {cart.lines.length === 0 ? (
-            <div className="mt-20 flex w-full flex-col items-center justify-center overflow-hidden">
-              <ShoppingBagIcon className="h-16" />
-              <p className="mt-6 text-center text-2xl font-bold">Your cart is empty.</p>
-            </div>
-          ) : (
-            <div className="flex h-full flex-col justify-between overflow-hidden">
-              <ul className="flex-grow overflow-auto p-6">
-                {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} data-testid="cart-item">
-                      <Link
-                        className="flex flex-row space-x-4 py-4"
-                        href={merchandiseUrl}
-                        onClick={closeCart}
-                      >
-                        <div className="relative h-16 w-16 cursor-pointer overflow-hidden bg-white">
-                          <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="font-semibold">{item.merchandise.product.title}</span>
-                          {item.merchandise.title !== DEFAULT_OPTION ? (
-                            <p className="text-sm" data-testid="cart-product-variant">
-                              {item.merchandise.title}
-                            </p>
-                          ) : null}
-                        </div>
-                        <Price
-                          className="flex flex-col justify-between space-y-2 text-sm"
-                          amount={item.cost.totalAmount.amount}
-                          currencyCode={item.cost.totalAmount.currencyCode}
-                        />
-                      </Link>
-                      <div className="flex h-9 flex-row">
-                        <DeleteItemButton item={item} />
-                        <p className="ml-2 flex w-full items-center justify-center border dark:border-gray-700">
-                          <span className="w-full px-2">{item.quantity}</span>
-                        </p>
-                        <EditItemQuantityButton item={item} type="minus" />
-                        <EditItemQuantityButton item={item} type="plus" />
-                      </div>
-                    </li>
-                  );
-                })}
-              </ul>
-              <div className="border-t border-gray-200 pt-2 text-sm text-black dark:text-white">
-                <div className="mb-2 flex items-center justify-between">
-                  <p>Subtotal</p>
-                  <Price
-                    className="text-right"
-                    amount={cart.cost.subtotalAmount.amount}
-                    currencyCode={cart.cost.subtotalAmount.currencyCode}
-                  />
-                </div>
-                <div className="mb-2 flex items-center justify-between">
-                  <p>Taxes</p>
-                  <Price
-                    className="text-right"
-                    amount={cart.cost.totalTaxAmount.amount}
-                    currencyCode={cart.cost.totalTaxAmount.currencyCode}
-                  />
-                </div>
-                <div className="mb-2 flex items-center justify-between border-b border-gray-200 pb-2">
-                  <p>Shipping</p>
-                  <p className="text-right">Calculated at checkout</p>
-                </div>
-                <div className="mb-2 flex items-center justify-between font-bold">
-                  <p>Total</p>
-                  <Price
-                    className="text-right"
-                    amount={cart.cost.totalAmount.amount}
-                    currencyCode={cart.cost.totalAmount.currencyCode}
-                  />
-                </div>
+      <Transition show={cartIsOpen}>
+        <Dialog onClose={closeCart} className="relative z-50" data-testid="cart">
+          <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/30" aria-hidden="true" />
+          </Transition.Child>
+          <Transition.Child
+            as={Fragment}
+            enter="transition-all ease-in-out duration-300"
+            enterFrom="translate-x-full"
+            enterTo="translate-x-0"
+            leave="transition-all ease-in-out duration-200"
+            leaveFrom="translate-x-0"
+            leaveTo="translate-x-full"
+          >
+            <Dialog.Panel className="fixed bottom-0 right-0 top-0 flex h-full w-full flex-col bg-white p-6 text-black dark:bg-black dark:text-white md:w-3/5 lg:w-2/5">
+              <div className="flex items-center justify-between">
+                <p className="text-lg font-bold">My Cart</p>
+                <button
+                  aria-label="Close cart"
+                  onClick={closeCart}
+                  className="text-black transition-colors hover:text-gray-500 dark:text-gray-100"
+                  data-testid="close-cart"
+                >
+                  <CloseIcon className="h-7" />
+                </button>
               </div>
-              <a
-                href={cart.checkoutUrl}
-                className="flex w-full items-center justify-center bg-black p-3 text-sm font-medium uppercase text-white opacity-90 hover:opacity-100 dark:bg-white dark:text-black"
-              >
-                <span>Proceed to Checkout</span>
-              </a>
-            </div>
-          )}
-        </Dialog.Panel>
-      </Dialog>
+
+              {cart.lines.length === 0 ? (
+                <div className="mt-20 flex w-full flex-col items-center justify-center overflow-hidden">
+                  <ShoppingBagIcon className="h-16" />
+                  <p className="mt-6 text-center text-2xl font-bold">Your cart is empty.</p>
+                </div>
+              ) : (
+                <div className="flex h-full flex-col justify-between overflow-hidden">
+                  <ul className="flex-grow overflow-auto p-6">
+                    {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} data-testid="cart-item">
+                          <Link
+                            className="flex flex-row space-x-4 py-4"
+                            href={merchandiseUrl}
+                            onClick={closeCart}
+                          >
+                            <div className="relative h-16 w-16 cursor-pointer overflow-hidden bg-white">
+                              <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="font-semibold">
+                                {item.merchandise.product.title}
+                              </span>
+                              {item.merchandise.title !== DEFAULT_OPTION ? (
+                                <p className="text-sm" data-testid="cart-product-variant">
+                                  {item.merchandise.title}
+                                </p>
+                              ) : null}
+                            </div>
+                            <Price
+                              className="flex flex-col justify-between space-y-2 text-sm"
+                              amount={item.cost.totalAmount.amount}
+                              currencyCode={item.cost.totalAmount.currencyCode}
+                            />
+                          </Link>
+                          <div className="flex h-9 flex-row">
+                            <DeleteItemButton item={item} />
+                            <p className="ml-2 flex w-full items-center justify-center border dark:border-gray-700">
+                              <span className="w-full px-2">{item.quantity}</span>
+                            </p>
+                            <EditItemQuantityButton item={item} type="minus" />
+                            <EditItemQuantityButton item={item} type="plus" />
+                          </div>
+                        </li>
+                      );
+                    })}
+                  </ul>
+                  <div className="border-t border-gray-200 pt-2 text-sm text-black dark:text-white">
+                    <div className="mb-2 flex items-center justify-between">
+                      <p>Subtotal</p>
+                      <Price
+                        className="text-right"
+                        amount={cart.cost.subtotalAmount.amount}
+                        currencyCode={cart.cost.subtotalAmount.currencyCode}
+                      />
+                    </div>
+                    <div className="mb-2 flex items-center justify-between">
+                      <p>Taxes</p>
+                      <Price
+                        className="text-right"
+                        amount={cart.cost.totalTaxAmount.amount}
+                        currencyCode={cart.cost.totalTaxAmount.currencyCode}
+                      />
+                    </div>
+                    <div className="mb-2 flex items-center justify-between border-b border-gray-200 pb-2">
+                      <p>Shipping</p>
+                      <p className="text-right">Calculated at checkout</p>
+                    </div>
+                    <div className="mb-2 flex items-center justify-between font-bold">
+                      <p>Total</p>
+                      <Price
+                        className="text-right"
+                        amount={cart.cost.totalAmount.amount}
+                        currencyCode={cart.cost.totalAmount.currencyCode}
+                      />
+                    </div>
+                  </div>
+                  <a
+                    href={cart.checkoutUrl}
+                    className="flex w-full items-center justify-center bg-black p-3 text-sm font-medium uppercase text-white opacity-90 hover:opacity-100 dark:bg-white dark:text-black"
+                  >
+                    <span>Proceed to Checkout</span>
+                  </a>
+                </div>
+              )}
+            </Dialog.Panel>
+          </Transition.Child>
+        </Dialog>
+      </Transition>
     </>
   );
 }