From 0964dc52c81cd82c546f0e1ba1041498fabe4d4e Mon Sep 17 00:00:00 2001
From: hta218 <hta218.dev@gmail.com>
Date: Tue, 17 Dec 2024 09:50:40 +0700
Subject: [PATCH 1/2] Remove unused input component

---
 app/modules/input.tsx | 107 ------------------------------------------
 1 file changed, 107 deletions(-)
 delete mode 100644 app/modules/input.tsx

diff --git a/app/modules/input.tsx b/app/modules/input.tsx
deleted file mode 100644
index 9a8051c6..00000000
--- a/app/modules/input.tsx
+++ /dev/null
@@ -1,107 +0,0 @@
-import { X } from "@phosphor-icons/react";
-import { type VariantProps, cva } from "class-variance-authority";
-import clsx from "clsx";
-import type React from "react";
-import { forwardRef, useState } from "react";
-
-interface InputProps
-  extends VariantProps<typeof variants>,
-    React.InputHTMLAttributes<HTMLInputElement> {
-  variant?: "default" | "search" | "minisearch" | "error";
-  suffix?: React.ReactNode;
-  prefixElement?: React.ReactNode;
-  onClear?: (event: React.ChangeEvent<HTMLInputElement>) => void;
-}
-
-let variants = cva(
-  "w-full focus-visible:outline-none !shadow-none focus:ring-0",
-  {
-    variants: {
-      variant: {
-        default: "leading-tight",
-        search:
-          "px-0 py-2 text-2xl w-full focus:ring-0 border-x-0 border-t-0 transition border-b-2 border-line focus:border-line-subtle",
-        minisearch:
-          "hidden md:inline-block text-left lg:text-right border-b transition border-transparent -mb-px border-x-0 border-t-0 appearance-none px-0 py-1 focus:ring-transparent placeholder:opacity-20 placeholder:text-inherit focus:border-line-subtle",
-        error: "border-red-500",
-      },
-    },
-  },
-);
-
-/**
- * @deprecated
- * No need an `Input` component since we only have a few inputs in the theme.
- * Just implement where needed.
- */
-export let Input = forwardRef<HTMLInputElement, InputProps>(
-  (
-    {
-      className = "",
-      type,
-      variant = "default",
-      prefixElement,
-      prefix,
-      suffix,
-      onFocus,
-      onBlur,
-      onClear,
-      ...rest
-    },
-    ref,
-  ) => {
-    let [focused, setFocused] = useState(false);
-    let commonClasses = clsx(
-      "w-full border px-3 py-3",
-      // focused ? "border-line" : "border-line",
-      className,
-    );
-
-    let handleClear = (e: any) => {
-      e.preventDefault();
-      e.stopPropagation();
-      if (e.currentTarget?.previousSibling) {
-        e.currentTarget.previousSibling.value = "";
-      }
-      if (onClear) onClear(e);
-    };
-    if (type === "search") {
-      suffix = <X className="cursor-pointer w-5 h-5" onClick={handleClear} />;
-    }
-    let hasChild = Boolean(prefixElement || suffix);
-
-    let rawInput = (
-      <input
-        ref={ref}
-        className={clsx(
-          variants({ variant }),
-          hasChild ? "grow border-none bg-transparent p-0" : commonClasses,
-        )}
-        onFocus={(e) => {
-          setFocused(true);
-          if (onFocus) onFocus(e);
-        }}
-        onBlur={(e) => {
-          setFocused(false);
-          if (onBlur) onBlur(e);
-        }}
-        {...rest}
-      />
-    );
-
-    return hasChild ? (
-      <div
-        className={clsx(
-          commonClasses,
-          "flex gap-2.5 overflow-hidden items-center bg-background p-2.5 border",
-        )}
-      >
-        {prefixElement}
-        {rawInput}
-        {suffix}
-      </div>
-    ) : (
-      rawInput
-    );
-  },
-);

From 26e777740ecce67365fd8c9f296887ee6451df6a Mon Sep 17 00:00:00 2001
From: hta218 <hta218.dev@gmail.com>
Date: Tue, 17 Dec 2024 09:51:05 +0700
Subject: [PATCH 2/2] Make footer newsletter form work

---
 app/components/layout/footer.tsx     | 79 ++++++++++++++++++++--------
 app/routes/($locale).api.customer.ts |  8 +--
 2 files changed, 61 insertions(+), 26 deletions(-)

diff --git a/app/components/layout/footer.tsx b/app/components/layout/footer.tsx
index 8b8f33a1..a86c587e 100644
--- a/app/components/layout/footer.tsx
+++ b/app/components/layout/footer.tsx
@@ -6,7 +6,7 @@ import {
   XLogo,
 } from "@phosphor-icons/react";
 import * as Accordion from "@radix-ui/react-accordion";
-import { Link } from "@remix-run/react";
+import { Link, useFetcher } from "@remix-run/react";
 import { Image } from "@shopify/hydrogen";
 import { useThemeSettings } from "@weaverse/hydrogen";
 import { cva } from "class-variance-authority";
@@ -15,7 +15,7 @@ import { Button } from "~/components/button";
 import { useShopMenu } from "~/hooks/use-shop-menu";
 import { cn } from "~/lib/cn";
 import type { SingleMenuItem } from "~/lib/type";
-import { Input } from "~/modules/input";
+import type { CustomerApiPlayLoad } from "~/routes/($locale).api.customer";
 import { CountrySelector } from "./country-selector";
 
 let variants = cva("", {
@@ -48,10 +48,6 @@ export function Footer() {
     addressTitle,
     storeAddress,
     storeEmail,
-    newsletterTitle,
-    newsletterDescription,
-    newsletterPlaceholder,
-    newsletterButtonText,
   } = useThemeSettings();
 
   let socialItems = [
@@ -81,18 +77,19 @@ export function Footer() {
     <footer
       className={cn(
         "w-full bg-[--color-footer-bg] text-[--color-footer-text] pt-9 lg:pt-16",
-        variants({ padding: footerWidth })
+        variants({ padding: footerWidth }),
       )}
       style={
         {
           "--underline-color": "var(--color-footer-text)",
         } as React.CSSProperties
       }
+      data-motion="fade-up"
     >
       <div
         className={cn(
           "divide-y divide-line-subtle space-y-9 w-full h-full",
-          variants({ width: footerWidth })
+          variants({ width: footerWidth }),
         )}
       >
         <div className="space-y-9">
@@ -124,7 +121,7 @@ export function Footer() {
                     >
                       {social.icon}
                     </Link>
-                  ) : null
+                  ) : null,
                 )}
               </div>
             </div>
@@ -135,19 +132,7 @@ export function Footer() {
                 <p>Email: {storeEmail}</p>
               </div>
             </div>
-            <div className="flex flex-col gap-6">
-              <div className="text-base">{newsletterTitle}</div>
-              <div className="space-y-2">
-                <p>{newsletterDescription}</p>
-                <div className="flex">
-                  <Input
-                    placeholder={newsletterPlaceholder}
-                    className="max-w-96 text-body"
-                  />
-                  <Button variant="custom">{newsletterButtonText}</Button>
-                </div>
-              </div>
-            </div>
+            <NewsLetter />
           </div>
           <FooterMenu />
         </div>
@@ -162,6 +147,56 @@ export function Footer() {
   );
 }
 
+function NewsLetter() {
+  let {
+    newsletterTitle,
+    newsletterDescription,
+    newsletterPlaceholder,
+    newsletterButtonText,
+  } = useThemeSettings();
+
+  let fetcher = useFetcher();
+  let { state, Form } = fetcher;
+  let data = fetcher.data as CustomerApiPlayLoad;
+  let { ok, errorMessage } = data || {};
+
+  return (
+    <Form method="POST" action="/api/customer" className="flex flex-col gap-6">
+      <div className="text-base">{newsletterTitle}</div>
+      <div className="space-y-2">
+        <p>{newsletterDescription}</p>
+        <div className="flex">
+          <input
+            name="email"
+            type="email"
+            required
+            placeholder={newsletterPlaceholder}
+            className="grow text-body focus-visible:outline-none px-3"
+          />
+          <Button
+            type="submit"
+            variant="custom"
+            loading={state === "submitting"}
+          >
+            {newsletterButtonText}
+          </Button>
+        </div>
+        <div
+          className={clsx(
+            "mx-auto pt-1 font-medium",
+            state === "idle" && data ? "visible" : "invisible",
+            ok ? "text-green-700" : "text-red-600",
+          )}
+        >
+          {ok
+            ? "🎉 Thank you for subscribing!"
+            : errorMessage || "Something went wrong!"}
+        </div>
+      </div>
+    </Form>
+  );
+}
+
 function FooterMenu() {
   let { footerMenu } = useShopMenu();
   let items = footerMenu.items as unknown as SingleMenuItem[];
diff --git a/app/routes/($locale).api.customer.ts b/app/routes/($locale).api.customer.ts
index 014ab885..7eb6edf6 100644
--- a/app/routes/($locale).api.customer.ts
+++ b/app/routes/($locale).api.customer.ts
@@ -5,7 +5,7 @@ import type {
 import { json } from "@remix-run/server-runtime";
 import type { CustomerCreateMutation } from "storefrontapi.generated";
 
-let CUSTOMER_CREATE = `#graphql
+const CUSTOMER_CREATE = `#graphql
   mutation customerCreate($input: CustomerCreateInput!) {
     customerCreate(input: $input) {
       customer {
@@ -47,7 +47,7 @@ export let action: ActionFunction = async ({
         errorMessage: "Internal server error!",
         ok: false,
       },
-      { status: 500 },
+      { status: 500 }
     );
   }
   if (customerUserErrors?.length) {
@@ -57,7 +57,7 @@ export let action: ActionFunction = async ({
         errorMessage: customerUserErrors?.[0]?.message,
         ok: false,
       },
-      { status: 500 },
+      { status: 500 }
     );
   }
   if (customer) {
@@ -68,7 +68,7 @@ export let action: ActionFunction = async ({
       errorMessage: "Something went wrong! Please try again later.",
       ok: false,
     },
-    { status: 500 },
+    { status: 500 }
   );
 };