Merge branch 'Weaverse:main' into main

hta218 · web-flow · commit d55366a9551c · 2024-12-29T11:09:29.000+07:00
diff --git a/app/components/image.tsx b/app/components/image.tsx
@@ -0,0 +1,53 @@
+import { Image as HydrogenImage } from "@shopify/hydrogen";
+import type { Image as ImageType } from "@shopify/hydrogen/storefront-api-types";
+import { useState } from "react";
+import { cn } from "~/utils/cn";
+
+type Crop = "center" | "top" | "bottom" | "left" | "right";
+
+export interface ImageProps extends React.ComponentPropsWithRef<"img"> {
+  aspectRatio?: string;
+  crop?: "center" | "top" | "bottom" | "left" | "right";
+  data?: Partial<
+    ImageType & {
+      recurseIntoArrays: true;
+    }
+  >;
+  loader?: (params: {
+    src?: ImageType["url"];
+    width?: number;
+    height?: number;
+    crop?: Crop;
+  }) => string;
+  srcSetOptions?: {
+    intervals: number;
+    startingWidth: number;
+    incrementSize: number;
+    placeholderWidth: number;
+  };
+}
+
+export function Image(props: ImageProps) {
+  let { className, ...rest } = props;
+  let [loaded, setLoaded] = useState(false);
+
+  return (
+    <div
+      className={cn(
+        "w-full h-full overflow-hidden",
+        !loaded && "animate-pulse [animation-duration:4s]",
+        className,
+      )}
+    >
+      <HydrogenImage
+        className={cn(
+          "[transition:filter_500ms_cubic-bezier(.4,0,.2,1)]",
+          "h-full max-h-full w-full object-cover object-center",
+          loaded ? "blur-0" : "blur-xl",
+        )}
+        onLoad={() => setLoaded(true)}
+        {...rest}
+      />
+    </div>
+  );
+}
diff --git a/app/components/layout/desktop-menu.tsx b/app/components/layout/desktop-menu.tsx
@@ -1,13 +1,13 @@
 import { CaretDown } from "@phosphor-icons/react";
 import * as Menubar from "@radix-ui/react-menubar";
-import { Image } from "@shopify/hydrogen";
 import { useThemeSettings } from "@weaverse/hydrogen";
 import clsx from "clsx";
 import { useState } from "react";
+import { Image } from "~/components/image";
 import Link from "~/components/link";
 import { useShopMenu } from "~/hooks/use-shop-menu";
-import { cn } from "~/utils/cn";
 import type { SingleMenuItem } from "~/types/menu";
+import { cn } from "~/utils/cn";
 
 export function DesktopMenu() {
   let { headerMenu } = useShopMenu();
@@ -108,13 +108,14 @@ function MegaMenu({ items }: { items: SingleMenuItem[] }) {
         resource?.image && children.length === 0 ? (
           <SlideIn
             key={id}
-            className="grow max-w-72 aspect-square relative group/item overflow-hidden"
+            className="grow max-w-72 w-72 aspect-square relative group/item overflow-hidden"
             style={{ "--idx": idx } as React.CSSProperties}
           >
             <Image
               sizes="auto"
               data={resource.image}
-              className="w-full h-full object-cover group-hover/item:scale-[1.03] transition-transform duration-300"
+              className="group-hover/item:scale-[1.03] transition-transform duration-300"
+              width={300}
             />
             <Link
               to={to}
@@ -154,7 +155,7 @@ function MegaMenu({ items }: { items: SingleMenuItem[] }) {
               ))}
             </div>
           </SlideIn>
-        )
+        ),
       )}
     </div>
   );
@@ -170,7 +171,7 @@ function SlideIn(props: {
     <div
       className={cn(
         "opacity-0 animate-slide-left [animation-delay:calc(var(--idx)*0.1s+0.1s)]",
-        className
+        className,
       )}
       style={
         {
diff --git a/app/components/product/badges.tsx b/app/components/product/badges.tsx
@@ -1,3 +1,4 @@
+import { useMoney as parseMoney } from "@shopify/hydrogen";
 import type { MoneyV2 } from "@shopify/hydrogen/storefront-api-types";
 import { useThemeSettings } from "@weaverse/hydrogen";
 import { clsx } from "clsx";
@@ -33,8 +34,8 @@ export function NewBadge({
   publishedAt,
   className,
 }: { publishedAt: string; className?: string }) {
-  let { newBadgeText, newBadgeColor } = useThemeSettings();
-  if (isNewArrival(publishedAt)) {
+  let { newBadgeText, newBadgeColor, newBadgeDaysOld } = useThemeSettings();
+  if (isNewArrival(publishedAt, newBadgeDaysOld)) {
     return (
       <Badge
         text={newBadgeText}
@@ -73,16 +74,16 @@ export function SaleBadge({
   compareAtPrice,
   className,
 }: { price: MoneyV2; compareAtPrice: MoneyV2; className?: string }) {
-  let { saleBadgeContent, saleBadgeText, saleBadgeColor } = useThemeSettings();
-  let discount = calculateSalePercentage(price, compareAtPrice);
-  if (discount > 0) {
+  let { saleBadgeText = "Sale", saleBadgeColor } = useThemeSettings();
+  let { amount, percentage } = calculateDiscount(price, compareAtPrice);
+  let text = saleBadgeText
+    .replace("[amount]", amount.toString())
+    .replace("[percentage]", percentage.toString());
+
+  if (percentage > 0) {
     return (
       <Badge
-        text={
-          saleBadgeContent === "percentage"
-            ? `-${discount}% Off`
-            : saleBadgeText
-        }
+        text={text}
         backgroundColor={saleBadgeColor}
         className={className}
       />
@@ -98,15 +99,21 @@ function isNewArrival(date: string, daysOld = 30) {
   );
 }
 
-function calculateSalePercentage(price: MoneyV2, compareAtPrice: MoneyV2) {
+function calculateDiscount(price: MoneyV2, compareAtPrice: MoneyV2) {
   if (price?.amount && compareAtPrice?.amount) {
     let priceNumber = Number(price.amount);
     let compareAtPriceNumber = Number(compareAtPrice.amount);
     if (compareAtPriceNumber > priceNumber) {
-      return Math.round(
-        ((compareAtPriceNumber - priceNumber) / compareAtPriceNumber) * 100,
-      );
+      return {
+        amount: parseMoney({
+          amount: String(compareAtPriceNumber - priceNumber),
+          currencyCode: price.currencyCode,
+        }).withoutTrailingZeros,
+        percentage: Math.round(
+          ((compareAtPriceNumber - priceNumber) / compareAtPriceNumber) * 100,
+        ),
+      };
     }
   }
-  return 0;
+  return { amount: "0", percentage: 0 };
 }
diff --git a/app/components/product/product-card.tsx b/app/components/product/product-card.tsx
@@ -1,16 +1,17 @@
-import { Image, flattenConnection } from "@shopify/hydrogen";
+import { flattenConnection } from "@shopify/hydrogen";
 import type {
   MoneyV2,
   ProductVariant,
 } from "@shopify/hydrogen/storefront-api-types";
 import { useThemeSettings } from "@weaverse/hydrogen";
 import clsx from "clsx";
 import type { ProductCardFragment } from "storefront-api.generated";
+import { Image } from "~/components/image";
 import { Link } from "~/components/link";
 import { NavLink } from "~/components/nav-link";
 import { VariantPrices } from "~/components/variant-prices";
-import { BestSellerBadge, NewBadge, SaleBadge, SoldOutBadge } from "./badges";
 import { getImageAspectRatio } from "~/utils/image";
+import { BestSellerBadge, NewBadge, SaleBadge, SoldOutBadge } from "./badges";
 
 export function ProductCard({
   product,
@@ -56,6 +57,7 @@ export function ProductCard({
 
   return (
     <div
+      className="overflow-hidden"
       style={
         {
           borderRadius: pcardBorderRadius,
@@ -69,32 +71,29 @@ export function ProductCard({
           <Link
             to={`/products/${product.handle}`}
             prefetch="intent"
-            className="block group relative aspect-[--pcard-image-ratio] overflow-hidden"
+            className="block group relative aspect-[--pcard-image-ratio] overflow-hidden bg-gray-100"
           >
             <Image
               className={clsx([
-                "w-full h-full object-cover object-center",
                 "absolute inset-0",
-                "opacity-0 animate-fade-in",
                 pcardShowImageOnHover &&
                   secondImage &&
                   "transition-opacity duration-300 group-hover:opacity-0",
               ])}
               sizes="(min-width: 64em) 25vw, (min-width: 48em) 30vw, 45vw"
               data={image}
-              width={1000}
+              width={700}
               alt={image.altText || `Picture of ${product.title}`}
               loading="lazy"
             />
             {pcardShowImageOnHover && secondImage && (
               <Image
                 className={clsx([
-                  "w-full h-full object-cover object-center",
                   "absolute inset-0",
                   "transition-opacity duration-300 opacity-0 group-hover:opacity-100",
                 ])}
                 sizes="auto"
-                width={1000}
+                width={700}
                 data={secondImage}
                 alt={
                   secondImage.altText || `Second picture of ${product.title}`
diff --git a/app/sections/collection-filters/index.tsx b/app/sections/collection-filters/index.tsx
@@ -1,10 +1,10 @@
 import { useLoaderData } from "@remix-run/react";
-import { Image } from "@shopify/hydrogen";
 import type { HydrogenComponentSchema } from "@weaverse/hydrogen";
 import clsx from "clsx";
 import { forwardRef, useEffect, useState } from "react";
 import type { CollectionDetailsQuery } from "storefront-api.generated";
 import { BreadCrumb } from "~/components/breadcrumb";
+import { Image } from "~/components/image";
 import { Section, type SectionProps, layoutInputs } from "~/components/section";
 import { Filters } from "./filters";
 import { ProductsPagination } from "./products-pagination";
@@ -105,13 +105,7 @@ let CollectionFilters = forwardRef<HTMLElement, CollectionFiltersProps>(
                   } as React.CSSProperties
                 }
               >
-                <Image
-                  data={banner}
-                  sizes="auto"
-                  className="w-full h-full object-cover object-center"
-                  width={2000}
-                  height={2000}
-                />
+                <Image data={banner} sizes="auto" width={2000} />
               </div>
             )}
           </div>
diff --git a/app/sections/columns-with-images/column.tsx b/app/sections/columns-with-images/column.tsx
@@ -1,4 +1,3 @@
-import { Image } from "@shopify/hydrogen";
 import {
   type HydrogenComponentProps,
   type HydrogenComponentSchema,
@@ -9,6 +8,7 @@ import type { VariantProps } from "class-variance-authority";
 import { cva } from "class-variance-authority";
 import type { CSSProperties } from "react";
 import { forwardRef } from "react";
+import { Image } from "~/components/image";
 import Link, { linkContentInputs, type LinkProps } from "~/components/link";
 
 let variants = cva("", {
@@ -56,14 +56,12 @@ let ColumnWithImageItem = forwardRef<HTMLDivElement, ColumnWithImageItemProps>(
         {...rest}
         data-motion="slide-in"
         className={variants({ size, hideOnMobile })}
-        style={
-          { "--image-border-radius": `${imageBorderRadius}px` } as CSSProperties
-        }
+        style={{ "--radius": `${imageBorderRadius}px` } as CSSProperties}
       >
         <Image
           data={typeof imageSrc === "object" ? imageSrc : { url: imageSrc }}
           sizes="auto"
-          className="aspect-square object-cover object-center w-full rounded-[var(--image-border-radius)]"
+          className="aspect-square h-auto rounded-[--radius]"
         />
         <div className="text-center w-full space-y-3.5 mt-6">
           {heading && <h6>{heading}</h6>}
diff --git a/app/weaverse/schema.server.ts b/app/weaverse/schema.server.ts
@@ -608,11 +608,24 @@ export let themeSchema: HydrogenThemeSchema = {
         },
         {
           type: "text",
-          label: "New / Limited text",
+          label: "New text",
           name: "newBadgeText",
           defaultValue: "New",
           placeholder: "New",
         },
+        {
+          type: "range",
+          label: "Days old",
+          name: "newBadgeDaysOld",
+          configs: {
+            min: 0,
+            max: 365,
+            step: 1,
+          },
+          defaultValue: 30,
+          helpText:
+            "The <strong>New</strong> badge will be shown if the product is published within the last days.",
+        },
         {
           type: "text",
           label: "Sold out text",
@@ -621,26 +634,16 @@ export let themeSchema: HydrogenThemeSchema = {
           placeholder: "Sold out",
         },
         {
-          type: "select",
-          label: "Sale badge content",
-          name: "saleBadgeContent",
-          configs: {
-            options: [
-              { value: "percentage", label: "Percentage" },
-              { value: "text", label: "Text" },
-            ],
-          },
-          defaultValue: "percentage",
-          helpText:
-            "Display as <strong>-20%</strong> or <strong>Sale</strong> text.",
-        },
-        {
-          type: "text",
+          type: "textarea",
           label: "Sale badge text",
           name: "saleBadgeText",
-          defaultValue: "Sale",
-          placeholder: "Sale",
-          condition: "saleBadgeContent.eq.text",
+          defaultValue: "-[percentage]% Off",
+          placeholder: "-[percentage]% Off, Saved [amount], or Sale",
+          helpText: [
+            "<p class='mb-1'>- Use <strong>[percentage]</strong> to display the discount percentage.</p>",
+            "<p class='mb-1'>- Use <strong>[amount]</strong> to display the discount amount.</p>",
+            "<p>E.g. <strong>-[percentage]% Off</strong>, <strong>Saved [amount]</strong>, or <strong>Sale</strong>.</p>",
+          ].join(""),
         },
       ],
     },
@@ -841,7 +844,7 @@ export let themeSchema: HydrogenThemeSchema = {
         },
         {
           type: "switch",
-          label: "Show New / Limited badges",
+          label: "Show New badges",
           name: "pcardShowNewBadges",
           defaultValue: true,
         },
