Merge branch 'Weaverse:main' into main

Weaverse · Dec 17, 2024 · df8acd9 · df8acd9
2 parents d72ff44 + 8c6045e
commit df8acd9
Show file tree

Hide file tree

Showing 3 changed files with 61 additions and 133 deletions.
diff --git 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/modules/input.tsx b/app/modules/input.tsx
diff --git 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 }
   );
 };