Merge pull request #181 from Weaverse/fix/ui

fix(ui): refine product controls and card layouts

Author: hta218

app/components/cart/cart-summary-actions.tsx

@@ -6,6 +6,7 @@ import { useEffect, useId, useRef, useState } from "react";
 import { useFetcher } from "react-router";
 import type { CartApiQueryFragment } from "storefront-api.generated";
 import { Button } from "~/components/button";
+import { CART_CODE_APPLY_ACTION } from "~/utils/cart-code";
 import { getCartMutationError } from "~/utils/cart-error";
 import { cn } from "~/utils/cn";
 import { usePrefixPathWithLocale } from "~/utils/locale";
@@ -180,36 +181,30 @@ export function NoteDialog({
   );
 }
 
-export function DiscountDialog({
-  discountCodes = [],
-  layout = "aside",
-}: {
-  discountCodes: CartApiQueryFragment["discountCodes"];
-  layout?: CartLayout;
-}) {
+export function DiscountDialog({ layout = "aside" }: { layout?: CartLayout }) {
   const { t } = useTranslation();
   const [code, setCode] = useState("");
-  const fetcher = useFetcher();
+  const fetcher = useFetcher<{ codeApplied?: boolean }>();
   const discountCodeId = useId();
   const cartRoute = usePrefixPathWithLocale("/cart");
   const submitted = Boolean(code && fetcher.state === "idle" && fetcher.data);
-  const success = Boolean(
-    submitted && discountCodes?.find((d) => d.code === code && d.applicable),
-  );
+  const success = Boolean(submitted && fetcher.data?.codeApplied);
   const error = submitted && !success;
 
   function handleSubmit(event: React.FormEvent<HTMLFormElement>) {
     event.preventDefault();
     const formData = new FormData(event.currentTarget);
     const discountCode = formData.get("discountCode") as string;
     if (discountCode) {
-      const existingCodes = discountCodes.map((d) => d.code);
-      const updatedCodes = [...existingCodes, discountCode];
       fetcher.submit(
         {
           [CartForm.INPUT_NAME]: JSON.stringify({
-            action: CartForm.ACTIONS.DiscountCodesUpdate,
-            inputs: { discountCodes: updatedCodes },
+            action: CART_CODE_APPLY_ACTION,
+            inputs: {
+              code: discountCode,
+              allowDiscountCode: true,
+              allowGiftCard: false,
+            },
           }),
         },
         { method: "POST", action: cartRoute },

app/components/cart/cart-summary.tsx

@@ -473,7 +473,7 @@ function CartAsideSummary({ cart }: { cart: CartWithOptimistic }) {
                   {discountCodeButtonText || t("cart.discountCode")}
                 </button>
               </Dialog.Trigger>
-              <DiscountDialog discountCodes={discountCodes} layout="aside" />
+              <DiscountDialog layout="aside" />
             </Dialog.Root>
           )}
           {enableDiscountCode && enableGiftCard && (
@@ -694,7 +694,7 @@ function PageCartCodeForm({
         <button
           type="submit"
           disabled={!code.trim() || isSubmitting}
-          className="rounded-xl bg-text-primary px-6 py-3 font-body text-base leading-[160%] font-semibold tracking-[-0.16px] text-text-inverse disabled:cursor-not-allowed disabled:opacity-50"
+          className="h-13.5 rounded-xl bg-text-primary px-6 py-3.5 font-body text-base leading-[160%] font-semibold tracking-[-0.16px] text-text-inverse disabled:cursor-not-allowed disabled:opacity-50"
         >
           {t("cart.apply")}
         </button>

app/components/cart/cart-types.ts

@@ -13,6 +13,10 @@ export type CartWithOptimistic = CartApiQueryFragment & {
 export type CartMutationResponse = {
   cart?: CartApiQueryFragment | null;
   errors?: Array<{ message?: string }>;
-  userErrors?: Array<{ message?: string }>;
+  userErrors?: Array<{
+    code?: string | null;
+    field?: string[] | null;
+    message?: string;
+  }>;
   warnings?: Array<{ code?: string; message?: string; target?: string }>;
 };

app/components/cart/cart.tsx

@@ -7,6 +7,7 @@ import { Link } from "~/components/link";
 import {
   getCartMutationError,
   getCartMutationWarning,
+  getCartQuantityError,
   getCartQuantityWarning,
 } from "~/utils/cart-error";
 import { cn } from "~/utils/cn";
@@ -315,7 +316,7 @@ function CartLineItem({
           to={lineItemUrl}
           prefetch="intent"
           onClick={onClose}
-          className="size-26 shrink-0 overflow-hidden rounded-sm"
+          className="size-26 shrink-0 self-start overflow-hidden rounded-sm"
         >
           <Image
             alt={merchandise.product.title}
@@ -462,7 +463,7 @@ function CartLineQuantity({
   const updateWarning = useCartStore((state) =>
     state.lineUpdateWarnings.get(lineId),
   );
-  const errorMessage = getCartMutationError(updateError);
+  const errorMessage = getCartQuantityError(updateError);
   const warningMessage = getCartQuantityWarning(
     updateWarning,
     t("cart.outOfPurchaseLimit"),
@@ -538,16 +539,13 @@ function CartLineQuantity({
       <fieldset
         aria-label={`${t("product.quantity")}, ${optimisticQuantity}`}
         className={cn(
-          "flex w-fit items-center border border-border rounded-2xl h-10",
-          layout === "page" && "gap-2 bg-background-basic md:row-start-2",
+          "flex h-10 w-fit items-center gap-1 rounded-2xl border border-border bg-background-basic",
+          layout === "page" && "md:row-start-2",
         )}
       >
         <button
           type="button"
-          className={cn(
-            "flex items-center justify-center disabled:cursor-not-allowed disabled:opacity-50",
-            layout === "aside" ? "size-10" : "h-10 w-11",
-          )}
+          className="flex h-10 shrink-0 items-center justify-center px-3.5 py-2.5 disabled:cursor-not-allowed disabled:opacity-50"
           aria-label={t("product.decreaseQuantity")}
           disabled={
             getValidInputQuantity() <= 1 || isOptimistic || isQuantityUpdating
@@ -556,17 +554,16 @@ function CartLineQuantity({
           onMouseDown={(event) => event.preventDefault()}
           onClick={() => stepQuantity(-1)}
         >
-          <span className="translate-y-px">&#8722;</span>
+          <span className="flex size-4 items-center justify-center leading-none">
+            &#8722;
+          </span>
         </button>
         <input
           type="text"
           inputMode="numeric"
           pattern="[0-9]*"
           aria-label={t("product.quantity")}
-          className={cn(
-            "translate-y-px appearance-none border-0 bg-transparent p-0 text-center font-body text-sm leading-none font-normal tracking-[-0.14px] text-text outline-none focus:ring-0 disabled:cursor-not-allowed",
-            layout === "aside" ? "w-8 min-w-8" : "w-[26px] min-w-[26px]",
-          )}
+          className="field-sizing-content h-10 min-w-7 max-w-12 appearance-none border-0 bg-transparent p-0 text-center font-body !text-[14px] leading-none font-normal tracking-[-0.14px] text-text outline-none focus:ring-0 disabled:cursor-not-allowed"
           value={quantityInput}
           disabled={isOptimistic || isQuantityUpdating}
           onChange={(event) => {
@@ -587,17 +584,16 @@ function CartLineQuantity({
         />
         <button
           type="button"
-          className={cn(
-            "flex items-center justify-center disabled:cursor-not-allowed disabled:opacity-50",
-            layout === "aside" ? "size-10" : "h-10 w-11",
-          )}
+          className="flex h-10 shrink-0 items-center justify-center px-3.5 py-2.5 disabled:cursor-not-allowed disabled:opacity-50"
           aria-label={t("product.increaseQuantity")}
           disabled={isOptimistic || isQuantityUpdating}
           name="increase-quantity"
           onMouseDown={(event) => event.preventDefault()}
           onClick={() => stepQuantity(1)}
         >
-          <span className="translate-y-px">&#43;</span>
+          <span className="flex size-4 items-center justify-center leading-none">
+            &#43;
+          </span>
         </button>
       </fieldset>
       {quantityMessage && (

app/components/layout/predictive-search/PredictiveSearch/SearchDrawer/search-type-drawer-results.tsx

@@ -77,7 +77,7 @@ export function SearchTypeDrawerResults() {
           to={`/search?q=${encodeURIComponent(term)}`}
           size="sm"
           variant="primary"
-          className="px-5 text-sm"
+          className="h-13.5 px-5 text-sm"
         >
           {t("search.viewAll")} ({totalResults})
         </Button>

app/components/product-form/pdp-form.tsx

@@ -107,7 +107,7 @@ export function ProductQuantityInput({
   return (
     <div
       className={cn(
-        "flex h-12 items-center overflow-hidden rounded-xl border border-border bg-background-basic",
+        "flex h-13.5 items-center overflow-hidden rounded-xl border border-border bg-background-basic",
         className,
       )}
     >

app/components/product/add-to-cart-button.tsx

@@ -140,7 +140,7 @@ function AddToCartContent({
         as="button"
         type="submit"
         size="lg"
-        className={cn("h-14 px-6 py-3.5 text-base", className)}
+        className={cn("h-13.5 px-6 py-3.5 text-base", className)}
         disabled={Boolean(disabled || isAdding || !hasValidLines)}
         loading={fetcher.state === "submitting"}
         variant={variant}

app/components/product/quick-view.tsx

@@ -209,7 +209,7 @@ export function QuickView({
                 }
                 onAdded={onClose}
                 data-test="add-to-cart"
-                className="h-12 w-full rounded-xl"
+                className="w-full rounded-xl"
               >
                 <span>{atcText}</span>
               </AddToCartButton>

app/sections/blogs/index.tsx

@@ -170,7 +170,7 @@ const Blogs = ({
                     />
                   </div>
                 )}
-                <div className="flex w-full flex-col gap-4 px-5 py-6">
+                <div className="flex w-full flex-1 flex-col gap-4 px-5 py-6">
                   <div className="flex min-h-5 items-center">
                     {idx.tags[0] && (
                       <span className="line-clamp-1 w-fit max-w-full rounded-full bg-background-subtle-2 px-3 py-1 text-xs leading-none text-text-subtle">
@@ -181,7 +181,7 @@ const Blogs = ({
 
                   <Tag
                     className={cn(
-                      "line-clamp-2 min-h-[2lh]",
+                      "line-clamp-3 flex-1",
                       size === "custom" &&
                         fontSizeVariants({ mobileSize, desktopSize }),
                       variants({ size, weight }),

app/sections/collection-list/collection-card.tsx

@@ -54,9 +54,9 @@ export function CollectionCard({
         </div>
       </div>
       <div className="absolute inset-0 z-10 flex items-center justify-center rounded-md">
-        <h3 className="group-hover:underline text-white font-medium">
+        <h6 className="text-center font-heading text-[26px] leading-[110%] font-normal text-text-inverse group-hover:underline">
           {collection.title}
-        </h3>
+        </h6>
       </div>
       <div className="absolute inset-0 rounded-md bg-[var(--calculate-color)] opacity-30 transition-opacity duration-500 group-hover:opacity-50" />
     </Link>