Merge branch 'Weaverse:main' into main

app/components/Button.tsx

@@ -9,10 +9,11 @@ import type { HTMLAttributes } from "react";
 import { forwardRef } from "react";
 import { cn } from "~/lib/cn";
 import { Link } from "~/modules";
+import { IconCircleNotch } from "./Icons";
 
 let variants = cva(
   [
-    "inline-flex items-center justify-center rounded-none",
+    "inline-flex items-center justify-center rounded-none relative",
     "text-base leading-tight font-normal whitespace-nowrap",
     "focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50",
     "transition-colors",
@@ -74,17 +75,16 @@ export interface ButtonStyleProps {
 
 export interface ButtonProps
   extends VariantProps<typeof variants>,
-    Omit<
-      HTMLAttributes<HTMLAnchorElement | HTMLButtonElement>,
-      "children" | "type"
-    >,
+    Omit<HTMLAttributes<HTMLAnchorElement | HTMLButtonElement>, "type">,
     Partial<Omit<HydrogenComponentProps, "children">>,
     Partial<ButtonStyleProps> {
   type?: "button" | "reset" | "submit";
   className?: string;
-  text: string;
+  text?: string;
   link?: string;
   openInNewTab?: boolean;
+  disabled?: boolean;
+  loading?: boolean;
   children?: React.ReactNode;
 }
 
@@ -94,6 +94,7 @@ let Button = forwardRef<HTMLButtonElement, ButtonProps>((props, ref) => {
     variant,
     text,
     link,
+    loading,
     openInNewTab,
     className,
     buttonStyle,
@@ -123,6 +124,15 @@ let Button = forwardRef<HTMLButtonElement, ButtonProps>((props, ref) => {
     return null;
   }
 
+  let content: React.ReactNode;
+  if (text) {
+    content = <span>{text}</span>;
+  } else if (typeof children === "string") {
+    content = <span>{children}</span>;
+  } else {
+    content = children;
+  }
+
   if (link) {
     return (
       <Link
@@ -134,7 +144,8 @@ let Button = forwardRef<HTMLButtonElement, ButtonProps>((props, ref) => {
         target={openInNewTab ? "_blank" : "_self"}
         rel="noreferrer"
       >
-        {text}
+        {loading && <Spinner />}
+        {content}
       </Link>
     );
   }
@@ -146,11 +157,24 @@ let Button = forwardRef<HTMLButtonElement, ButtonProps>((props, ref) => {
       {...rest}
       className={cn(variants({ variant, className }))}
     >
-      {text || children}
+      {loading && <Spinner />}
+      {content}
     </button>
   );
 });
 
+function Spinner() {
+  let style = { "--duration": "500ms" } as React.CSSProperties;
+  return (
+    <span
+      className="button-spinner absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2"
+      style={style}
+    >
+      <IconCircleNotch className="animate-spin w-5 h-5" />
+    </span>
+  );
+}
+
 export default Button;
 
 export let buttonContentInputs: InspectorGroup["inputs"] = [

app/components/Icons.tsx

@@ -301,3 +301,48 @@ export function IconList(props: IconProps) {
     </svg>
   );
 }
+
+export function IconCircleNotch(props: IconProps) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="32"
+      height="32"
+      viewBox="0 0 256 256"
+      fill="currentColor"
+      {...props}
+    >
+      <path d="M232,128a104,104,0,0,1-208,0c0-41,23.81-78.36,60.66-95.27a8,8,0,0,1,6.68,14.54C60.15,61.59,40,93.27,40,128a88,88,0,0,0,176,0c0-34.73-20.15-66.41-51.34-80.73a8,8,0,0,1,6.68-14.54C208.19,49.64,232,87,232,128Z" />
+    </svg>
+  );
+}
+
+export function IconPaperPlaneTilt(props: IconProps) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="32"
+      height="32"
+      viewBox="0 0 256 256"
+      fill="currentColor"
+      {...props}
+    >
+      <path d="M227.32,28.68a16,16,0,0,0-15.66-4.08l-.15,0L19.57,82.84a16,16,0,0,0-2.49,29.8L102,154l41.3,84.87A15.86,15.86,0,0,0,157.74,248q.69,0,1.38-.06a15.88,15.88,0,0,0,14-11.51l58.2-191.94c0-.05,0-.1,0-.15A16,16,0,0,0,227.32,28.68ZM157.83,231.85l-.05.14,0-.07-40.06-82.3,48-48a8,8,0,0,0-11.31-11.31l-48,48L24.08,98.25l-.07,0,.14,0L216,40Z" />
+    </svg>
+  );
+}
+
+export function IconEnvelopeSimple(props: IconProps) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="32"
+      height="32"
+      viewBox="0 0 256 256"
+      fill="currentColor"
+      {...props}
+    >
+      <path d="M224,48H32a8,8,0,0,0-8,8V192a16,16,0,0,0,16,16H216a16,16,0,0,0,16-16V56A8,8,0,0,0,224,48ZM203.43,64,128,133.15,52.57,64ZM216,192H40V74.19l82.59,75.71a8,8,0,0,0,10.82,0L216,74.19V192Z" />
+    </svg>
+  );
+}

app/modules/AddToCartButton.tsx

@@ -52,7 +52,6 @@ export function AddToCartButton({
               type="submit"
               variant={variant}
               className={className}
-              // @ts-expect-error
               disabled={disabled ?? fetcher.state !== "idle"}
               {...props}
             >

app/modules/Input.tsx

@@ -18,7 +18,7 @@ let variants = cva(
   {
     variants: {
       variant: {
-        default: "",
+        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-bar/10 focus:border-bar/50",
         minisearch:
@@ -29,7 +29,12 @@ let variants = cva(
   },
 );
 
-export const Input = forwardRef<HTMLInputElement, InputProps>(
+/**
+ * @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 = "",
@@ -47,8 +52,8 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(
   ) => {
     let [focused, setFocused] = useState(false);
     let commonClasses = clsx(
-      "w-full rounded-sm border px-3 py-2.5",
-      focused ? "border-bar/50" : "border-bar/10",
+      "w-full border px-3 py-3",
+      focused ? "border-bar/50" : "border-bar/30",
       className,
     );
 
@@ -90,7 +95,7 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(
       <div
         className={clsx(
           commonClasses,
-          "flex gap-2 overflow-hidden items-center bg-primary p-2.5 border rounded-sm",
+          "flex gap-2.5 overflow-hidden items-center bg-primary p-2.5 border",
         )}
       >
         {prefixElement}

app/modules/ProductCard.tsx

@@ -103,12 +103,7 @@ export function ProductCard({
                     totalValue: Number.parseFloat(productAnalytics.price),
                   }}
                 >
-                  <Text
-                    as="span"
-                    className="flex items-center justify-center gap-2"
-                  >
-                    Add to Cart
-                  </Text>
+                  Add to Cart
                 </AddToCartButton>
               </div>
             )}
@@ -132,7 +127,7 @@ export function ProductCard({
           </Text>
           <div className="flex">
             <Text className="flex gap-2">
-              <Money withoutTrailingZeros data={price!} />
+              <Money withoutTrailingZeros data={price} />
               {isDiscounted(price as MoneyV2, compareAtPrice as MoneyV2) && (
                 <CompareAtPrice
                   className={"opacity-50"}
@@ -159,9 +154,7 @@ export function ProductCard({
             totalValue: Number.parseFloat(productAnalytics.price),
           }}
         >
-          <Text as="span" className="flex items-center justify-center gap-2">
-            Add to Cart
-          </Text>
+          Add to Cart
         </AddToCartButton>
       )}
       {quickAdd && !firstVariant.availableForSale && (

app/modules/QuickView.tsx

@@ -47,6 +47,7 @@ export function QuickView(props: { data: Jsonify<ProductData> }) {
     setSelectedVariant(variant);
   };
 
+  // biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>
   useEffect(() => {
     if (variants?.nodes?.length) {
       if (!selectedVariant) {
@@ -55,7 +56,6 @@ export function QuickView(props: { data: Jsonify<ProductData> }) {
         setSelectedVariant(product?.selectedVariant);
       }
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [product?.id]);
 
   const { shippingPolicy, refundPolicy } = shop;
@@ -129,7 +129,7 @@ export function QuickView(props: { data: Jsonify<ProductData> }) {
             data-test="add-to-cart"
             className="w-[360px]"
           >
-            <span> {atcText}</span>
+            {atcText}
           </AddToCartButton>
           {selectedVariant?.availableForSale && (
             <ShopPayButton
@@ -176,11 +176,11 @@ export function QuickViewTrigger(props: { productHandle: string }) {
   const { productHandle } = props;
   let { load, data, state } = useFetcher<ProductData>();
 
+  // biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>
   useEffect(() => {
     if (quickAddOpen && !data && state !== "loading") {
       load(`/api/query/products?handle=${productHandle}`);
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [quickAddOpen, data, load, state]);
 
   return (

app/routes/($locale).api.customer.ts

@@ -30,18 +30,53 @@ export let action: ActionFunction = async ({
 }: ActionFunctionArgs) => {
   let formData = await request.formData();
   let email = formData.get("email") as string;
-  let { storefront } = context;
-
-  let { customerCreate, errors: queryError } =
-    await storefront.mutate<CustomerCreateMutation>(CUSTOMER_CREATE, {
+  let { customerCreate, errors: queryErrors } =
+    await context.storefront.mutate<CustomerCreateMutation>(CUSTOMER_CREATE, {
       variables: {
         input: { email, password: "5hopify" },
       },
     });
+
   let customer = customerCreate?.customer;
-  let errors = customerCreate?.customerUserErrors || queryError;
-  if (errors && errors.length) {
-    return json({ errors }, { status: 200 });
+  let customerUserErrors = customerCreate?.customerUserErrors;
+
+  if (queryErrors?.length) {
+    return json(
+      {
+        errors: queryErrors,
+        errorMessage: "Internal server error!",
+        ok: false,
+      },
+      { status: 500 },
+    );
   }
-  return json({ customer }, { status: 201 });
+  if (customerUserErrors?.length) {
+    return json(
+      {
+        errors: customerUserErrors,
+        errorMessage: customerUserErrors?.[0]?.message,
+        ok: false,
+      },
+      { status: 500 },
+    );
+  }
+  if (customer) {
+    return json({ customer, ok: true }, { status: 201 });
+  }
+  return json(
+    {
+      errorMessage: "Something went wrong! Please try again later.",
+      ok: false,
+    },
+    { status: 500 },
+  );
+};
+
+export type CustomerApiPlayLoad = {
+  ok: boolean;
+  customer?:
+    | NonNullable<CustomerCreateMutation["customerCreate"]>["customer"]
+    | null;
+  errors?: any[];
+  errorMessage?: string;
 };

app/sections/columns-with-images/column.tsx

@@ -69,12 +69,9 @@ let ColumnWithImageItem = forwardRef<HTMLDivElement, ColumnWithImageItemProps>(
           {heading && <h6>{heading}</h6>}
           {content && <p dangerouslySetInnerHTML={{ __html: content }} />}
           {text && (
-            <Button
-              variant={variant}
-              text={text}
-              link={link}
-              openInNewTab={openInNewTab}
-            />
+            <Button variant={variant} link={link} openInNewTab={openInNewTab}>
+              {text}
+            </Button>
           )}
         </div>
       </div>

app/sections/newsletter/index.tsx

@@ -20,7 +20,7 @@ export let schema: HydrogenComponentSchema = {
   type: "newsletter",
   title: "Newsletter",
   inspector: sectionInspector,
-  childTypes: ["subheading", "heading", "paragraph", "newsletter-input"],
+  childTypes: ["subheading", "heading", "paragraph", "newsletter-form"],
   presets: {
     gap: 20,
     children: [
@@ -33,7 +33,7 @@ export let schema: HydrogenComponentSchema = {
         content:
           "Subscribe to get special offers, free giveaways, and once-in-a-lifetime deals.",
       },
-      { type: "newsletter-input" },
+      { type: "newsletter-form" },
     ],
   },
 };