From ce7f51a6008f6786cfd6d15e04b09ac72b4226c5 Mon Sep 17 00:00:00 2001
From: Sol Irvine <sol@zenzen.io>
Date: Thu, 17 Aug 2023 21:05:53 +0900
Subject: [PATCH] wip: Saving work

---
 components/layout/footer.tsx            | 33 +++----------
 components/layout/newsletter-footer.tsx | 63 +++++++++++++++++++++++++
 components/layout/newsletter-signup.tsx |  2 +-
 components/layout/shoplist.tsx          |  2 +-
 messages/en.json                        |  5 ++
 messages/ja.json                        |  5 ++
 6 files changed, 81 insertions(+), 29 deletions(-)
 create mode 100644 components/layout/newsletter-footer.tsx

diff --git a/components/layout/footer.tsx b/components/layout/footer.tsx
index c5a150c0c..489250f7c 100644
--- a/components/layout/footer.tsx
+++ b/components/layout/footer.tsx
@@ -1,9 +1,5 @@
-import Link from 'next/link';
-
-import FooterMenu from 'components/layout/footer-menu';
-import LogoSquare from 'components/logo-square';
 import { getMenu } from 'lib/shopify';
-import { Suspense } from 'react';
+import NewsletterFooter from './newsletter-footer';
 
 const { COMPANY_NAME, SITE_NAME } = process.env;
 
@@ -16,30 +12,13 @@ export default async function Footer() {
 
   return (
     <footer className="text-sm">
-      <div className="mx-auto flex w-full max-w-7xl flex-col gap-6 border-t border-white/20 px-6 py-12 text-sm md:flex-row md:gap-12 md:px-4 xl:px-0">
-        <div>
-          <Link className="flex items-center gap-2 md:pt-1" href="/">
-            <LogoSquare size="sm" />
-            <span className="uppercase">{SITE_NAME}</span>
-          </Link>
+      <div className="mx-auto flex w-full max-w-screen-2xl flex-col gap-6 border-t border-white/20 px-6 py-12 text-sm md:flex-row md:gap-12">
+        <div className="flex flex-row justify-between">
+          <NewsletterFooter />
         </div>
-        <Suspense
-          fallback={
-            <div className="flex h-[188px] w-[200px] flex-col gap-2">
-              <div className={skeleton} />
-              <div className={skeleton} />
-              <div className={skeleton} />
-              <div className={skeleton} />
-              <div className={skeleton} />
-              <div className={skeleton} />
-            </div>
-          }
-        >
-          <FooterMenu menu={menu} />
-        </Suspense>
       </div>
-      <div className="border-t border-white/20 py-6 text-sm dark:border-neutral-700">
-        <div className="mx-auto flex w-full max-w-7xl flex-col items-center gap-1 px-4 md:flex-row md:gap-0 md:px-4 xl:px-0">
+      <div>
+        <div className="mx-auto flex w-full max-w-7xl flex-col items-center gap-1 pb-12 md:flex-row">
           <p>
             &copy; {copyrightDate} {copyrightName}
             {copyrightName.length && !copyrightName.endsWith('.') ? '.' : ''} All rights reserved.
diff --git a/components/layout/newsletter-footer.tsx b/components/layout/newsletter-footer.tsx
new file mode 100644
index 000000000..c2ff42c2f
--- /dev/null
+++ b/components/layout/newsletter-footer.tsx
@@ -0,0 +1,63 @@
+'use client';
+import clsx from 'clsx';
+import { useTranslations } from 'next-intl';
+
+export default function NewsletterSignup() {
+  const t = useTranslations('Index');
+
+  return (
+    <div>
+      <div className="flex flex-row items-baseline justify-between space-x-6">
+        <h3 className="grow font-serif text-2xl tracking-wider">{t('newsletter.title')}</h3>
+        <div className="font-multilingual">{t('footer.newsletter.promo')}</div>
+      </div>
+      <form
+        className="max-w-xl space-x-px md:flex"
+        action={`${process?.env?.NEXT_PUBLIC_MAILCHIMP_HOST}/subscribe/post?u=${process?.env?.NEXT_PUBLIC_MAILCHIMP_USER_ID}&amp;id=${process?.env?.NEXT_PUBLIC_MAILCHIMP_LIST_ID}`}
+        method="post"
+        name="mc-embedded-subscribe-form"
+        target="_blank"
+      >
+        <label htmlFor="email-address" className="sr-only">
+          {t('newsletter.placeholder')}
+        </label>
+        <input
+          type="email"
+          name="email-address"
+          id="email-address"
+          autoComplete="email"
+          required
+          className={clsx(
+            'w-full min-w-0 appearance-none',
+            'bg-white outline-none',
+            'px-4 py-2 focus:outline-none',
+            'focus:ring-2 focus:ring-inset focus:ring-emerald-300 focus:ring-offset-0',
+            'text-gray-900 placeholder-gray-400'
+          )}
+          placeholder={t('newsletter.placeholder')}
+        />
+        <div className="mt-3 rounded-md sm:ml-3 sm:mt-0 sm:flex-shrink-0">
+          <button
+            type="submit"
+            className={clsx(
+              'px-4 py-2',
+              'transition-colors duration-150',
+              'flex w-full items-center justify-center',
+              'border border-white/30 hover:border-white',
+              'focus:border-emerald-300 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-emerald-300 focus:ring-offset-0'
+            )}
+          >
+            {t('newsletter.button')}
+          </button>
+        </div>
+        <div style={{ position: 'absolute', left: '-5000px' }} aria-hidden="true">
+          <input
+            type="text"
+            name={`b_${process?.env?.NEXT_PUBLIC_MAILCHIMP_USER_ID}_${process?.env?.NEXT_PUBLIC_MAILCHIMP_LIST_ID}`}
+            defaultValue=""
+          />
+        </div>
+      </form>
+    </div>
+  );
+}
diff --git a/components/layout/newsletter-signup.tsx b/components/layout/newsletter-signup.tsx
index f8312502d..a8e6aa092 100644
--- a/components/layout/newsletter-signup.tsx
+++ b/components/layout/newsletter-signup.tsx
@@ -27,7 +27,7 @@ export default function NewsletterSignup() {
           required
           className={clsx(
             'w-full min-w-0 appearance-none',
-            'outline-none',
+            'bg-white outline-none',
             'px-4 py-2 focus:outline-none',
             'focus:ring-2 focus:ring-inset focus:ring-emerald-300 focus:ring-offset-0',
             'text-gray-900 placeholder-gray-400'
diff --git a/components/layout/shoplist.tsx b/components/layout/shoplist.tsx
index 2158cc834..f04b24b9f 100644
--- a/components/layout/shoplist.tsx
+++ b/components/layout/shoplist.tsx
@@ -6,7 +6,7 @@ import Link from 'next/link';
 export default function Shoplist() {
   const t = useTranslations('Index');
   return (
-    <div className="mx-auto max-w-screen-2xl space-y-4 px-2" id="shops">
+    <div className="mx-auto max-w-screen-2xl space-y-4 px-6" id="shops">
       <div className="flex w-full flex-row items-baseline space-x-12 pb-6">
         <h2 className="font-serif text-6xl tracking-wider">shop list</h2>
         <h3 className="font-multilingual font-serif text-2xl tracking-wider">
diff --git a/messages/en.json b/messages/en.json
index 9781b93d3..0a471d529 100644
--- a/messages/en.json
+++ b/messages/en.json
@@ -26,6 +26,11 @@
       "kinki": "Kinki",
       "chugoku": "Chugoku",
       "kyushu": "Kyushu"
+    },
+    "footer": {
+      "newsletter": {
+        "promo": "Get 10% off on your first order. Get discount."
+      }
     }
   }
 }
diff --git a/messages/ja.json b/messages/ja.json
index 5ac6088ca..d1f23d494 100644
--- a/messages/ja.json
+++ b/messages/ja.json
@@ -26,6 +26,11 @@
       "kinki": "近畿",
       "chugoku": "中国・四国",
       "kyushu": "九州"
+    },
+    "footer": {
+      "newsletter": {
+        "promo": "Get 10% off on your first order. Get discount."
+      }
     }
   }
 }