From d7051c6b16c38aa013a4d69e56c1b1a71ba63646 Mon Sep 17 00:00:00 2001
From: payacom <59262811+payacom@users.noreply.github.com>
Date: Wed, 16 Sep 2026 10:24:12 +0330
Subject: [PATCH] Add Pinterest product tag: discover filter, Reels badge, and
 images-step checkbox

- Pinterest filter toggle on the Shop discover page, alongside "All",
  backed by the backend's new ?pinterest=true param on
  /shop-products/discover
- Pinterest badge shown above the favorite button in ShopReelsView's
  action rail for products tagged is_pinterest
- "Pinterest product" checkbox at the bottom of the product images step
  (create wizard and edit flow share the same route)
- New pinterest bold-icon SVG under public/images/icons/vuesax/bold

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
---
 public/images/icons/vuesax/bold/pinterest.svg |  3 ++
 .../[shopId]/products/new/images/page.tsx     | 42 +++++++++++++++++--
 src/app/shops/discover/page.tsx               | 36 +++++++++++++++-
 src/components/shops/ShopReelsView.tsx        | 13 ++++++
 src/locales/en/common.json                    |  3 ++
 src/locales/fa/common.json                    |  3 ++
 src/types/types.ts                            |  1 +
 7 files changed, 96 insertions(+), 5 deletions(-)
 create mode 100644 public/images/icons/vuesax/bold/pinterest.svg

diff --git a/public/images/icons/vuesax/bold/pinterest.svg b/public/images/icons/vuesax/bold/pinterest.svg
new file mode 100644
index 0000000..4af9570
--- /dev/null
+++ b/public/images/icons/vuesax/bold/pinterest.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12 2C6.48 2 2 6.48 2 12C2 16.25 4.67 19.9 8.44 21.34C8.35 20.56 8.28 19.36 8.47 18.5C8.65 17.72 9.63 13.6 9.63 13.6C9.63 13.6 9.33 13 9.33 12.09C9.33 10.66 10.16 9.6 11.2 9.6C12.08 9.6 12.5 10.26 12.5 11.05C12.5 11.93 11.93 13.26 11.63 14.5C11.39 15.53 12.15 16.38 13.16 16.38C14.99 16.38 16.4 14.45 16.4 11.66C16.4 9.19 14.62 7.46 12.08 7.46C9.14 7.46 7.42 9.66 7.42 11.94C7.42 12.82 7.76 13.77 8.19 14.29C8.27 14.39 8.28 14.48 8.26 14.58C8.19 14.86 8.04 15.46 8.01 15.59C7.97 15.77 7.87 15.81 7.68 15.72C6.44 15.14 5.67 13.34 5.67 11.9C5.67 8.75 7.95 5.86 12.24 5.86C15.68 5.86 18.36 8.31 18.36 11.62C18.36 15.07 16.19 17.85 13.16 17.85C12.13 17.85 11.16 17.31 10.83 16.68C10.83 16.68 10.32 18.65 10.2 19.1C9.97 19.97 9.35 21.07 8.94 21.74C9.9 22.04 10.93 22.2 12 22.2C17.52 22.2 22 17.72 22 12.2C22 6.68 17.52 2 12 2Z" fill="#292D32"/>
+</svg>
diff --git a/src/app/shops/[shopId]/products/new/images/page.tsx b/src/app/shops/[shopId]/products/new/images/page.tsx
index 436b2d8..8b84c30 100644
--- a/src/app/shops/[shopId]/products/new/images/page.tsx
+++ b/src/app/shops/[shopId]/products/new/images/page.tsx
@@ -36,16 +36,21 @@ function ProductImagesPage() {
 
   const [images, setImages] = useState<PickedImage[]>([]);
   const [primaryIndex, setPrimaryIndex] = useState(0);
+  const [isPinterest, setIsPinterest] = useState(false);
 
   useEffect(() => {
     if (!listingId) return;
-    request<{ listing: { images: string[]; primaryImageIndex: number } }>(
-      "GET",
-      `/shop-products/${listingId}`
-    ).then((res) => {
+    request<{
+      listing: {
+        images: string[];
+        primaryImageIndex: number;
+        is_pinterest?: boolean;
+      };
+    }>("GET", `/shop-products/${listingId}`).then((res) => {
       if (!res?.listing) return;
       setImages((res.listing.images || []).map((path) => ({ type: "existing", path })));
       setPrimaryIndex(res.listing.primaryImageIndex || 0);
+      setIsPinterest(Boolean(res.listing.is_pinterest));
     });
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [listingId]);
@@ -83,6 +88,7 @@ function ProductImagesPage() {
     newFiles.forEach((img) => formData.append("images", img.file, img.file.name));
     formData.append("existing_images", JSON.stringify(existingImages));
     formData.append("primaryImageIndex", String(primaryIndex));
+    formData.append("is_pinterest", String(isPinterest));
 
     try {
       await request("PATCH", `/shop-products/${listingId}`, formData);
@@ -172,6 +178,34 @@ function ProductImagesPage() {
               onChange={handleSelect}
             />
           </div>
+
+          <button
+            type="button"
+            onClick={() => setIsPinterest((v) => !v)}
+            className="mt-4 flex w-full max-w-sm items-center gap-2.5 rounded-2xl border border-neutral-200 bg-neutral-50 px-3.5 py-3 text-right dark:border-neutral-700 dark:bg-neutral-900"
+          >
+            <span
+              className={cn(
+                "flex h-5 w-5 shrink-0 items-center justify-center rounded-md border-2",
+                isPinterest
+                  ? "border-[#E60023] bg-[#E60023]"
+                  : "border-neutral-300 dark:border-neutral-600"
+              )}
+            >
+              {isPinterest ? (
+                <BoldIcon name="tick-square" size={12} tinted className="text-white" />
+              ) : null}
+            </span>
+            <BoldIcon name="pinterest" size={18} tinted className="text-[#E60023]" />
+            <span className="min-w-0 flex-1">
+              <span className="block text-sm font-medium">
+                {t("shops.pinterestProductLabel")}
+              </span>
+              <span className="block text-[11px] text-neutral-500">
+                {t("shops.pinterestProductHint")}
+              </span>
+            </span>
+          </button>
         </AuthPageContent>
         <AuthFormFooter onSkip={goNext} skipDisabled={loading}>
           <AuthNextButton
diff --git a/src/app/shops/discover/page.tsx b/src/app/shops/discover/page.tsx
index c22c26a..3511e8a 100644
--- a/src/app/shops/discover/page.tsx
+++ b/src/app/shops/discover/page.tsx
@@ -1,21 +1,26 @@
 "use client";
 
+import { useState } from "react";
 import Container from "@/components/elements/Container";
 import LocalePageShell from "@/components/i18n/LocalePageShell";
 import PageTitle from "@/components/settings/PageTitle";
 import Header from "@/components/main/Header";
 import TabNavigation from "@/components/TabNavigation";
 import ShopProductGrid from "@/components/shops/ShopProductGrid";
+import BoldIcon from "@/components/ui/BoldIcon";
+import { cn } from "@/lib/utils";
 import useInfiniteScroll from "@/hooks/useInfiniteScroll";
 import { IShopProductListing } from "@/types/types";
 import { useTranslation } from "react-i18next";
 
 export default function ShopDiscoverPage() {
   const { t } = useTranslation("common");
+  const [pinterestOnly, setPinterestOnly] = useState(false);
 
   const { data, isLoading } = useInfiniteScroll({
     endpoint: "/shop-products/discover",
-    queryKey: ["shop-products-discover"],
+    queryKey: ["shop-products-discover", String(pinterestOnly)],
+    params: pinterestOnly ? { pinterest: "true" } : {},
   });
 
   const listings: IShopProductListing[] =
@@ -27,6 +32,35 @@ export default function ShopDiscoverPage() {
       <LocalePageShell>
         <Container className="pb-28">
           <PageTitle>{t("shops.discoverTitle")}</PageTitle>
+
+          <div className="mb-3 flex items-center gap-2">
+            <button
+              type="button"
+              onClick={() => setPinterestOnly(false)}
+              className={cn(
+                "rounded-2xl border px-3.5 py-2 text-sm font-medium transition",
+                !pinterestOnly
+                  ? "border-pink-400 bg-pink-50 text-pink-600 dark:bg-pink-950/30"
+                  : "border-neutral-200 text-neutral-700 dark:border-neutral-700 dark:text-neutral-300"
+              )}
+            >
+              {t("common.all")}
+            </button>
+            <button
+              type="button"
+              onClick={() => setPinterestOnly(true)}
+              className={cn(
+                "flex items-center gap-1.5 rounded-2xl border px-3.5 py-2 text-sm font-medium transition",
+                pinterestOnly
+                  ? "border-[#E60023] bg-[#E60023]/10 text-[#E60023]"
+                  : "border-neutral-200 text-neutral-700 dark:border-neutral-700 dark:text-neutral-300"
+              )}
+            >
+              <BoldIcon name="pinterest" size={14} tinted />
+              {t("shops.pinterestFilter")}
+            </button>
+          </div>
+
           <ShopProductGrid
             listings={listings}
             isLoading={isLoading}
diff --git a/src/components/shops/ShopReelsView.tsx b/src/components/shops/ShopReelsView.tsx
index b379096..da03764 100644
--- a/src/components/shops/ShopReelsView.tsx
+++ b/src/components/shops/ShopReelsView.tsx
@@ -301,6 +301,19 @@ export default function ShopReelsView({
                       className="text-white brightness-125 drop-shadow-lg"
                     />
                   </button>
+                  {listing.is_pinterest && (
+                    <span
+                      aria-hidden
+                      className="flex flex-col items-center gap-1"
+                    >
+                      <BoldIcon
+                        name="pinterest"
+                        size={26}
+                        tinted
+                        className="text-[#E60023] drop-shadow-lg"
+                      />
+                    </span>
+                  )}
                   <button
                     type="button"
                     onClick={() => handleToggleFavorite(listing._id)}
diff --git a/src/locales/en/common.json b/src/locales/en/common.json
index ba8adde..cbf10f4 100644
--- a/src/locales/en/common.json
+++ b/src/locales/en/common.json
@@ -3000,6 +3000,9 @@
     "comparisonTitle": "Compare shop prices",
     "noListingsForProduct": "No shops found for this product",
     "discoverTitle": "Shops",
+    "pinterestFilter": "Pinterest",
+    "pinterestProductLabel": "Pinterest product",
+    "pinterestProductHint": "This product will show up under the shop's Pinterest filter",
     "quantityLabel": "Quantity",
     "buyNow": "Continue purchase",
     "addressRequiredHint": "You need to set your address and location to place an order",
diff --git a/src/locales/fa/common.json b/src/locales/fa/common.json
index 2847b35..6ab2c3e 100644
--- a/src/locales/fa/common.json
+++ b/src/locales/fa/common.json
@@ -2999,6 +2999,9 @@
     "comparisonTitle": "مقایسه قیمت فروشگاه‌ها",
     "noListingsForProduct": "فروشگاهی برای این کالا یافت نشد",
     "discoverTitle": "فروشگاه‌ها",
+    "pinterestFilter": "پینترستی",
+    "pinterestProductLabel": "محصول پینترستی",
+    "pinterestProductHint": "این کالا در فیلتر پینترستی فروشگاه نمایش داده می‌شود",
     "quantityLabel": "تعداد",
     "buyNow": "ادامه خرید",
     "addressRequiredHint": "برای ثبت سفارش نیاز به ثبت آدرس و لوکیشن می‌باشید",
diff --git a/src/types/types.ts b/src/types/types.ts
index 0d9e317..93bcc38 100644
--- a/src/types/types.ts
+++ b/src/types/types.ts
@@ -139,6 +139,7 @@ export interface IShopProductListing {
   isTaggedPost?: boolean;
   postId?: string;
   postCaption?: string | null;
+  is_pinterest?: boolean;
 }
 export interface LastPost {
   _id: string;