blurhash (#125)

* blurhash

package.json

@@ -25,6 +25,7 @@
     "@radix-ui/react-slot": "^1.0.2",
     "@react-input/mask": "^1.2.5",
     "@uidotdev/usehooks": "^2.4.1",
+    "blurhash-base64": "^0.0.3",
     "clsx": "2.1.0",
     "next": "15.0.0-canary.6",
     "qrcode": "^1.5.3",

src/api/proto-http/common/index.ts

@@ -23,6 +23,8 @@ export type MediaItem = {
   thumbnail: MediaInfo | undefined;
   // Compressed media URL
   compressed: MediaInfo | undefined;
+  // BlurHash
+  blurhash: string | undefined;
 };
 
 export type MediaInfo = {
@@ -126,6 +128,7 @@ export type CategoryEnum =
   | "CATEGORY_ENUM_GLOVES"
   | "CATEGORY_ENUM_SHOES"
   | "CATEGORY_ENUM_BELT"
+  | "CATEGORY_ENUM_BAG"
   | "CATEGORY_ENUM_OTHER";
 export type SizeEnum =
   | "SIZE_ENUM_UNKNOWN"
@@ -348,7 +351,9 @@ export type FilterConditions = {
 export type PaymentMethodNameEnum =
   | "PAYMENT_METHOD_NAME_ENUM_UNKNOWN"
   | "PAYMENT_METHOD_NAME_ENUM_CARD"
+  | "PAYMENT_METHOD_NAME_ENUM_CARD_TEST"
   | "PAYMENT_METHOD_NAME_ENUM_ETH"
+  | "PAYMENT_METHOD_NAME_ENUM_ETH_TEST"
   | "PAYMENT_METHOD_NAME_ENUM_USDT_TRON"
   | "PAYMENT_METHOD_NAME_ENUM_USDT_SHASTA";
 // Payment represents the payment table
@@ -365,6 +370,7 @@ export type PaymentInsert = {
   transactionAmountPaymentCurrency: googletype_Decimal | undefined;
   payer: string | undefined;
   payee: string | undefined;
+  clientSecret: string | undefined;
   isTransactionDone: boolean | undefined;
 };
 
@@ -463,6 +469,7 @@ export type OrderItem = {
   id: number | undefined;
   orderId: number | undefined;
   thumbnail: string | undefined;
+  blurhash: string | undefined;
   productName: string | undefined;
   productPrice: string | undefined;
   productPriceWithSale: string | undefined;

src/api/proto-http/frontend/index.ts

@@ -46,6 +46,8 @@ export type common_MediaItem = {
   thumbnail: common_MediaInfo | undefined;
   // Compressed media URL
   compressed: common_MediaInfo | undefined;
+  // BlurHash
+  blurhash: string | undefined;
 };
 
 export type common_MediaInfo = {
@@ -185,6 +187,7 @@ export type common_CategoryEnum =
   | "CATEGORY_ENUM_GLOVES"
   | "CATEGORY_ENUM_SHOES"
   | "CATEGORY_ENUM_BELT"
+  | "CATEGORY_ENUM_BAG"
   | "CATEGORY_ENUM_OTHER";
 export type common_MeasurementName = {
   id: number | undefined;
@@ -227,7 +230,9 @@ export type common_PaymentMethod = {
 export type common_PaymentMethodNameEnum =
   | "PAYMENT_METHOD_NAME_ENUM_UNKNOWN"
   | "PAYMENT_METHOD_NAME_ENUM_CARD"
+  | "PAYMENT_METHOD_NAME_ENUM_CARD_TEST"
   | "PAYMENT_METHOD_NAME_ENUM_ETH"
+  | "PAYMENT_METHOD_NAME_ENUM_ETH_TEST"
   | "PAYMENT_METHOD_NAME_ENUM_USDT_TRON"
   | "PAYMENT_METHOD_NAME_ENUM_USDT_SHASTA";
 export type common_ShipmentCarrier = {
@@ -414,6 +419,7 @@ export type common_PaymentInsert = {
   transactionAmountPaymentCurrency: googletype_Decimal | undefined;
   payer: string | undefined;
   payee: string | undefined;
+  clientSecret: string | undefined;
   isTransactionDone: boolean | undefined;
 };
 
@@ -450,6 +456,7 @@ export type common_OrderItem = {
   id: number | undefined;
   orderId: number | undefined;
   thumbnail: string | undefined;
+  blurhash: string | undefined;
   productName: string | undefined;
   productPrice: string | undefined;
   productPriceWithSale: string | undefined;
@@ -542,11 +549,11 @@ export type CancelOrderInvoiceRequest = {
 export type CancelOrderInvoiceResponse = {
 };
 
-export type CheckCryptoPaymentRequest = {
+export type CheckPaymentRequest = {
   orderUuid: string | undefined;
 };
 
-export type CheckCryptoPaymentResponse = {
+export type CheckPaymentResponse = {
   payment: common_Payment | undefined;
 };
 
@@ -625,8 +632,8 @@ export interface FrontendService {
   GetOrderInvoice(request: GetOrderInvoiceRequest): Promise<GetOrderInvoiceResponse>;
   // Cancel an invoice for the order
   CancelOrderInvoice(request: CancelOrderInvoiceRequest): Promise<CancelOrderInvoiceResponse>;
-  // CheckCryptoPayment checks the crypto payment if it has been received and updates the order status if it has been received
-  CheckCryptoPayment(request: CheckCryptoPaymentRequest): Promise<CheckCryptoPaymentResponse>;
+  // CheckPayment checks the crypto payment if it has been received and updates the order status if it has been received
+  CheckPayment(request: CheckPaymentRequest): Promise<CheckPaymentResponse>;
   // Subscribe to the newsletter
   SubscribeNewsletter(request: SubscribeNewsletterRequest): Promise<SubscribeNewsletterResponse>;
   // Unsubscribe from the newsletter
@@ -872,7 +879,7 @@ export function createFrontendServiceClient(
         method: "CancelOrderInvoice",
       }) as Promise<CancelOrderInvoiceResponse>;
     },
-    CheckCryptoPayment(request) { // eslint-disable-line @typescript-eslint/no-unused-vars
+    CheckPayment(request) { // eslint-disable-line @typescript-eslint/no-unused-vars
       if (!request.orderUuid) {
         throw new Error("missing required field request.order_uuid");
       }
@@ -889,8 +896,8 @@ export function createFrontendServiceClient(
         body,
       }, {
         service: "FrontendService",
-        method: "CheckCryptoPayment",
-      }) as Promise<CheckCryptoPaymentResponse>;
+        method: "CheckPayment",
+      }) as Promise<CheckPaymentResponse>;
     },
     SubscribeNewsletter(request) { // eslint-disable-line @typescript-eslint/no-unused-vars
       const path = `api/frontend/newsletter/subscribe`; // eslint-disable-line quotes

src/app/invoices/crypto/[uuid]/page.tsx

@@ -1,9 +1,9 @@
-import QRCode from "qrcode";
 import CoreLayout from "@/components/layouts/CoreLayout";
 import { serviceClient } from "@/lib/api";
+import QRCode from "qrcode";
 
-import V0GenUi from "./V0GenUi";
 import { redirect } from "next/navigation";
+import V0GenUi from "./V0GenUi";
 
 interface Props {
   params: {
@@ -14,7 +14,7 @@ interface Props {
 export default async function Page({ params }: Props) {
   const { uuid } = params;
 
-  const cryptoPaymentInvoice = await serviceClient.CheckCryptoPayment({
+  const cryptoPaymentInvoice = await serviceClient.CheckPayment({
     orderUuid: uuid,
   });
 

src/components/sections/AdsSection.tsx

@@ -19,6 +19,7 @@ export default function AdsSection({
                 a?.media?.media?.fullSize.width,
                 a?.media?.media?.fullSize.height,
               )}
+              blurHash={a?.media?.media?.blurhash}
             />
           </div>
         ) : null,

src/components/sections/Cart/CartItemRow.tsx

@@ -1,6 +1,6 @@
 import { changeCartProductQuantity, removeCartProduct } from "@/actions/cart";
 import type { common_OrderItem } from "@/api/proto-http/frontend";
-import ImageComponent from "@/components/ui/Image";
+import Image from "@/components/ui/Image";
 import Size from "../Common/Size";
 import ProductAmountButtons from "./ProductAmountButtons";
 
@@ -15,11 +15,12 @@ export default function CartItemRow({
     <div className="flex justify-between gap-6 text-textColor">
       <div className="flex w-1/2 gap-6">
         <div className="h-full w-28 flex-none">
-          <ImageComponent
+          <Image
             src={product.thumbnail || ""}
             alt="product"
             fit="cover"
             aspectRatio="2/3"
+            blurHash={product.blurhash}
           />
         </div>
         <div className="space-y-2">

src/components/sections/Header/index.tsx

@@ -1,9 +1,8 @@
 "use client";
 
-import Link from "next/link";
 import Image from "@/components/ui/Image";
+import Link from "next/link";
 import useMobileMenu from "./useMobileMenu";
-import Button from "@/components/ui/Button";
 
 export default function Header() {
   const { triggerElement, dropdownElement } = useMobileMenu();

src/components/sections/HeroSection.tsx

@@ -12,6 +12,7 @@ export default function Hero({ media }: common_HeroItem) {
           src={media.media?.fullSize?.mediaUrl!}
           alt="main hero image"
           aspectRatio="4/3"
+          blurHash={media.media?.blurhash}
         />
       </div>
     </div>

src/components/sections/ProductsGridSection/ProductItem.tsx

@@ -1,6 +1,6 @@
 import type { common_Product } from "@/api/proto-http/frontend";
-import Image from "@/components/ui/Image";
 import Button from "@/components/ui/Button";
+import Image from "@/components/ui/Image";
 import { CURRENCY_MAP } from "@/constants";
 import { cn } from "@/lib/utils";
 import Link from "next/link";
@@ -36,6 +36,7 @@ export default function ProductItem({
               alt={product.productDisplay?.productBody?.name || ""}
               aspectRatio="4/3" // take from BE values
               fit="cover"
+              blurHash={product.productDisplay?.thumbnail?.media?.blurhash}
             />
           </div>
           <div className="flex w-full gap-3">

src/components/ui/Image/index.tsx

@@ -1,3 +1,4 @@
+import { blurhashToBase64 } from "blurhash-base64";
 import Image from "next/image";
 import ImageContainer from "./ImageContainer";
 
@@ -7,19 +8,18 @@ export default function ImageComponent({
   alt,
   sizes = "(max-width: 1280px) 100vw, 1280px",
   fit,
+  blurHash,
 }: {
   alt: string;
   src: string;
   aspectRatio: string;
   sizes?: string;
   fit?: "cover" | "contain";
+  blurHash?: string;
 }) {
   return (
     <ImageContainer aspectRatio={aspectRatio}>
       <Image
-        // loader={storyBlokImageLoader}
-        // blurDataURL={`${asset.filename}/m/filters:quality(5):blur(10)`}
-        // loading={isPrioritized ? "eager" : "lazy"}
         fill
         src={src}
         alt={alt}
@@ -28,6 +28,8 @@ export default function ImageComponent({
         style={{
           objectFit: fit,
         }}
+        placeholder={blurHash ? "blur" : undefined}
+        blurDataURL={blurHash ? blurhashToBase64(blurHash) : undefined}
       />
     </ImageContainer>
   );