droplinked-editor-configs 1.8.4 → 1.8.6

package/dist/lib/stores/productQueryStore/productQueryStore.d.ts

@@ -1,8 +1,8 @@
 export interface ProductQuery {
     search: string;
-    sort: string;
+    sortBy: string;
     order?: number;
-    productType: string[];
+    productTypes: string[];
     collectionId: string[];
     minPrice?: number;
     maxPrice?: number;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "droplinked-editor-configs",
   "private": false,
-  "version": "1.8.4",
+  "version": "1.8.6",
   "type": "module",
   "main": "dist/droplinked-editor.umd.js",
   "module": "dist/droplinked-editor.es.js",
@@ -34,7 +34,7 @@
     "classnames": "^2.5.1",
     "clsx": "^2.1.1",
     "cmdk": "^1.1.1",
-    "droplinked-editor-core": "^1.1.7",
+    "droplinked-editor-core": "^1.1.8",
     "framer-motion": "^8.5.0",
     "keen-slider": "^6.8.6",
     "lucide-react": "^0.525.0",

package/src/apis/blogs/interfaces.ts

@@ -10,45 +10,6 @@ export interface BlogPost {
     slug: string;
 }
 
-export interface IBlogContent {
-    _id: string;
-    shopID: string;
-    author: string;
-    content: string;
-    title: string;
-    writer: string;
-    isVisible: boolean;
-    category: string[];
-    tags: string[];
-    commentsCount: number;
-    image: string;
-    likes: number;
-    readTime: number;
-    version: number;
-    isFeatured: boolean;
-    seoData: {
-        metaDescription: string;
-        keywords: string[];
-        slug: string;
-        canonicalUrl: string;
-        ogTitle: string;
-        ogDescription: string;
-        ogImage: string;
-        structuredData: string;
-        _id: string;
-    },
-    mediaData: {
-        url: string;
-        title: string;
-        positionIndex: number;
-        _id: string;
-    }[],
-    publishedDate: string;
-    createdAt: string;
-    updatedAt: Date;
-    __v: number;
-}
-
 export interface Blog {
     featured: BlogPost[];
     recent: BlogPost[];

package/src/apis/blogs/services.ts

@@ -1,8 +1,5 @@
 import axiosInstance from "apis/axiosConfig"
-import { Blog, IBlogContent } from "./interfaces"
+import { Blog } from "./interfaces"
 
 export const getShopBlogsService = (shopName: string) =>
-    axiosInstance.get<{ data: Blog }>(`blogs/public/shops/${shopName}`).then(res => res.data)
-
-export const getBlogByIdService = ({ slug }: { slug: string }) =>
-    axiosInstance.get<{ data: IBlogContent }>(`blogs/public/${slug}`).then(res => res.data)
+    axiosInstance.get<{ data: Blog }>(`blogs/public/shops/${shopName}`).then(res => res.data)

package/src/apis/product/interface.ts

@@ -1,4 +1,3 @@
-import { IRuleSetID, IMedia as Media } from "lib/models/product";
 import { ProductQuery } from "lib/stores/productQueryStore/productQueryStore";
 
 export interface IGetProductsRequest extends ProductQuery {
@@ -8,296 +7,20 @@ export interface IGetProductsRequest extends ProductQuery {
 }
 
 export interface IHomePageProduct {
-  _id: string;
+  id: string;
   title: string;
   slug: string;
-  skuIDs: { options: IOption[] }[];
-  media: Media[];
-  lowestSkuPrice: number;
-  gatedRuleset: boolean;
+  type: string;
+  status: string;
+  images: {
+    original: string;
+    thumbnail: string;
+    alt: string;
+  }[];
+  isPurchasable: boolean;
+  lowestPrice: number;
+  collectionName: string;
   discountRuleset: boolean;
-}
-
-export interface IgetProductPublicService {
-  shopname: string;
-  productID: string;
-}
-
-export interface IGetProductBySlugService {
-  shopname: string;
-  slug: string;
-}
-
-export interface IGetProductByLinkId {
-  linkId: string;
-}
-
-// Interface for media objects in the product's media array
-interface IMedia {
-  isMain: boolean; // Indicates whether this media is the main image
-  thumbnail: string; // URL of the thumbnail image
-  url: string; // URL of the main image
-  _id: string; // Unique identifier for the media object
-}
-
-// Interface for the product collection object
-interface IProductCollection {
-  title: string; // Title of the product collection
-  ruleSetID?: IRuleSetID
-}
-
-// Interface for the optional ruleset object (not required)
-interface IRuleSet {
-  gated?: boolean; // Optional gated flag
-  redeemedNFTs?: any; // Optional redeemed NFTs field
-  rules?: any; // Optional rules field
-}
-
-// Interface for option objects inside each SKU
-export interface IOption {
-  variantName: string; // Name of the variant (e.g., color, size)
-  value: string; // Value of the variant (e.g., red, large)
-  caption: string; // Caption for the option (additional description)
-}
-
-// Interface for SKU objects in the skuIDs array
-export interface ISku {
-  _id: string; // Unique identifier for the SKU
-  price: number; // Price of the SKU
-  quantity: number; // Quantity available for the SKU
-  image?: string; // Optional image URL for the SKU
-  weight: number; // Weight of the SKU
-
-  dimensions: { // Dimensions of the SKU
-    height: number;
-    length: number;
-    width: number;
-  };
-
-  options?: IOption[]; // Optional options array (for NON-DIGITAL products)
-}
-
-// Main interface for the product object
-export interface IProduct {
-  // Ensured this is exported
-  description: string; // Mandatory description of the product
-  media: IMedia[]; // Mandatory media array containing images and videos
-  productCollectionID: IProductCollection; // Object containing the product collection details
-  ruleSet?: IRuleSet; // Optional ruleSet object (could be undefined)
-  slug: string | null; // Mandatory slug (URL-friendly identifier for the product)
-  title: string; // Mandatory title of the product
-  _id: string | null; // Mandatory unique identifier for the product
-  ownerID: string | null; // Mandatory unique identifier for the owner of the product
-  product_type: "NORMAL" | "PRINT_ON_DEMAND" | "DIGITAL"; // Type of the product (one of three types)
-  skuIDs: ISku[]; // Mandatory SKU array, must contain at least one SKU
-  launchDate?: string;
-  purchaseAvailable: boolean;
-  pod_blank_product_id: string;
-  // Optional nftData object containing blockchain-related information
-  nftData?: INftData;
-  m2m_positions: IM2MPosition[];
-  m2m_services: IM2MService[];
-  shippingType: string;
-}
-export interface IM2MPosition {
-  placement: string
-  variantIDs: number[]
-  url: string
-}
-export interface IM2MService {
-  _id: string;
-  name: string;
-  chain: string;
-}
-
-export interface INftData {
-  deployHash: string;
-  transactionUrl: string;
-  networkName: string;
-}
-export interface IShippingAvailbilityData {
-  statusCode: number;
-  message: string | null;
-  data: string[];
-}
-// Function to convert raw product data into the IProduct model
-export const convertProductDataToModel = (data: any): IProduct => {
-  try {
-    // Default SKU in case the SKU data is missing or incomplete
-    const defaultSku: ISku = {
-      price: 0,
-      quantity: 0,
-      _id: "unknown_sku_id",
-      weight: 0,
-      dimensions: {
-        height: 0,
-        length: 0,
-        width: 0,
-      },
-    };
-
-
-    // Default option for SKUs in NON-DIGITAL products
-    const defaultOption: IOption = {
-      variantName: "default_variant",
-      value: "default_value",
-      caption: " ",
-    };
-
-    // Default media object in case media array is missing or incomplete
-    const defaultMedia: IMedia = {
-      isMain: false,
-      thumbnail: "default_thumbnail.jpg",
-      url: "default_url.jpg",
-      _id: "default_media_id",
-    };
-
-    // Construct the product object, falling back to default values when necessary
-    const product: IProduct = {
-      description: data?.description || "No description available",
-      media:
-        Array.isArray(data?.media) && data?.media.length > 0
-          ? data.media.map((mediaItem: any) => ({
-            isMain:
-              mediaItem?.isMain === "true" || mediaItem?.isMain === true,
-            thumbnail: mediaItem?.thumbnail || "",
-            url: mediaItem?.url || "",
-            _id: mediaItem?._id || "",
-          }))
-          : [defaultMedia],
-
-      productCollectionID: {
-        title: data?.productCollectionID?.title || "",
-        ruleSetID: {
-          collectionID: data?.productCollectionID?.ruleSetID?.collectionID || "",
-          createdAt: data?.productCollectionID?.ruleSetID?.createdAt || "",
-          type: data?.productCollectionID?.ruleSetID?.type || "",
-          ownerID: data?.productCollectionID?.ruleSetID?.ownerID || "",
-          _id: data?.productCollectionID?.ruleSetID?._id || "",
-          blockchainType: data?.productCollectionID?.ruleSetID?.blockchainType || "",
-          description: data?.productCollectionID?.ruleSetID?.description || "",
-          discountPercentage: data?.productCollectionID?.ruleSetID?.discountPercentage || "",
-          minimumNftRequired: data?.productCollectionID?.ruleSetID?.minimumNftRequired || "",
-          network: data?.productCollectionID?.ruleSetID?.network || "",
-          nftContractAddresses: data?.productCollectionID?.ruleSetID?.nftContractAddresses || "",
-          nftPurchaseLink: data?.productCollectionID?.ruleSetID?.nftPurchaseLink || "",
-        }
-      },
-      purchaseAvailable: data.purchaseAvailable,
-      slug: data?.slug || null,
-      title: data?.title || "",
-      _id: data?._id || null,
-      ownerID: data?.ownerID || null,
-      product_type: data?.product_type || "NORMAL",
-      launchDate: data?.launchDate,
-      pod_blank_product_id: data.pod_blank_product_id,
-      shippingType: data.shippingType,
-      skuIDs:
-        Array.isArray(data?.skuIDs) && data?.skuIDs.length > 0
-          ? data.skuIDs.map((sku: any) => ({
-            price: typeof sku?.price === "number" ? sku.price : 0,
-            quantity: typeof sku?.quantity === "number" ? sku.quantity : 0,
-            _id: sku?._id || "unknown_sku_id",
-            options:
-              data?.product_type !== "DIGITAL" &&
-                Array.isArray(sku?.options) &&
-                sku.options.length > 0
-                ? sku.options.map((option: any) => ({
-                  variantName: option?.variantName || "default_variant",
-                  value: option?.value || "default_value",
-                  caption: option?.caption || " ",
-                }))
-                : undefined,
-            image: sku.image,
-            weight: sku.weight,
-            dimensions: {
-              height: sku.dimensions.height,
-              length: sku.dimensions.length,
-              width: sku.dimensions.width,
-            },
-          }))
-          : [defaultSku],
-
-      // Adding nftData
-      nftData: data?.nftData
-        ? {
-          deployHash: data.nftData.deployHash,
-          transactionUrl: data.nftData.transactionUrl,
-          networkName: data.nftData.networkName,
-        }
-        : undefined,
-
-
-      m2m_positions:
-        Array.isArray(data?.m2m_positions) && data?.m2m_positions.length > 0
-          ? data.m2m_positions.map((position: any) => ({
-            placement: position.placement || "",
-            variantIDs: position.variant_ids || "",
-            url: position.url || ""
-          }))
-          : [],
-
-      m2m_services:
-        Array.isArray(data?.m2m_services) && data?.m2m_services.length > 0
-          ? data.m2m_services.map((service: any) => ({
-            _id: service?._id || "",
-            name: service?.name || "Unnamed Service",
-            chain: service?.chain || "Unknown Chain",
-          }))
-          : [],
-    };
-
-    return product;
-  } catch (error) {
-    console.error("Error converting product data:", error);
-
-    // If an error occurs, return a product object with default values
-    return {
-      description: "No description available",
-      purchaseAvailable: data?.purchaseAvailable,
-      media: [
-        {
-          isMain: false,
-          thumbnail: "default_thumbnail.jpg",
-          url: "default_url.jpg",
-          _id: "default_media_id",
-        },
-      ],
-      productCollectionID: { title: "Default Collection" },
-      slug: null,
-      title: "",
-      _id: null,
-      ownerID: null,
-      product_type: "NORMAL",
-      pod_blank_product_id: "",
-      skuIDs: [
-        {
-          price: 0,
-          quantity: 0,
-          _id: "unknown_sku_id",
-          weight: 0,
-          dimensions: {
-            height: 0,
-            length: 0,
-            width: 0,
-          },
-        },
-      ],
-      nftData: undefined,
-      m2m_positions: [],
-      m2m_services: [],
-      shippingType: ""
-    };
-  }
-};
-
-export interface ISemanticSearchParams {
-  query: string;
-  limit?: number;
-}
-
-export interface NftImagesData {
-  nfts: string[];
-  domains: string[];
-}
-
+  gatedRuleset: boolean;
+  nftRecording: any;
+}

package/src/apis/product/services.ts

@@ -1,14 +1,7 @@
 import axiosInstance from "apis/axiosConfig";
 import { createQueryString } from "lib/utils/app/createQueryString";
 import {
-    convertProductDataToModel,
-    IGetProductByLinkId,
-    IGetProductBySlugService,
-    IgetProductPublicService,
     IGetProductsRequest,
-    IProduct,
-    ISemanticSearchParams,
-    IShippingAvailbilityData
 } from "./interface";
 
 export const getProductsService = (params: IGetProductsRequest) => {
@@ -19,30 +12,6 @@ export const getProductsService = (params: IGetProductsRequest) => {
     }).toString()
 
     return axiosInstance
-        .get(`product/public/shop/${params.shopName}?${queryString}`)
+        .get(`/product-v2/public/shop/${params.shopName}?${queryString}`)
         .then((res) => res.data)
-}
-
-export const getProductPublicService = ({ productID, shopname }: IgetProductPublicService) => {
-    return axiosInstance.get<{ data: IProduct }>(`product/public/${productID}?shopname=${shopname}`).then((res) => convertProductDataToModel(res.data.data));
-};
-
-export const getProductBySlugService = ({ slug, shopname }: IGetProductBySlugService) => axiosInstance.get(`product/public/${slug}?shopname=${shopname}`);
-
-export const getProductByLinkId = ({ linkId }: IGetProductByLinkId) => axiosInstance.get(`/product/link/${linkId}`);
-
-export const getShippingAvailability = async (productId: string): Promise<IShippingAvailbilityData> => {
-    try {
-        const response = await axiosInstance.post<IShippingAvailbilityData>("/product/printful-available-shipping", {
-            product_id: productId,
-        });
-        return response.data;
-    } catch (error) {
-        console.error("Error fetching shipping availability:", error);
-        throw new Error("Failed to fetch shipping availability");
-    }
-};
-
-export const semanticSearchService = ({ query, limit = 10 }: ISemanticSearchParams) => {
-    return axiosInstance.get(`/product/search/semantic${query && query !== "" ? `?query=${query}` : ""}&limit=${limit}`);
-};
+}

package/src/apis/shop/interface.ts

@@ -1,7 +1,3 @@
-export interface IshopDomainService {
-    domain: string;
-}
-
 export interface IgetShopService {
     shopName: string;
 }

package/src/apis/shop/service.ts

@@ -1,13 +1,9 @@
 import axiosInstance from "apis/axiosConfig"
-import { IgetShopService, IshopDomainService, ProductFiltersResponse } from "./interface"
-
-export const shopDomainService = ({ domain }: IshopDomainService) => {
-    return axiosInstance.get(`shop/domain/${domain}`)
-}
+import { IgetShopService, ProductFiltersResponse } from "./interface"
 
 export const getShopService = ({ shopName }: IgetShopService) => {
-    return axiosInstance.get(`shop/public/${shopName}`)
+    return axiosInstance.get(`/shops/v2/public/name/${shopName}`)
 }
 
 export const getAvailableProductFilters = (shopName: string) =>
-    axiosInstance.get<{ data: ProductFiltersResponse }>(`product/available/filters/${shopName}`).then(res => res.data)
+    axiosInstance.get<{ data: ProductFiltersResponse }>(`/product-v2/available/filters/${shopName}`).then(res => res.data)

package/src/components/productGrid/components/ControlBar/sort/SortDropdown.tsx

@@ -9,7 +9,7 @@ import Text from 'components/ui/Text';
 function SortDropdown() {
   const { isDarkTheme } = useThemeInfo();
   const { stagedSortOption, stagedSortOrder } = useProductQueryStore((state) => ({
-    stagedSortOption: state.stagedProductQuery.sort,
+    stagedSortOption: state.stagedProductQuery.sortBy,
     stagedSortOrder: state.stagedProductQuery.order
   }));
 

package/src/components/productGrid/components/ControlBar/sort/SortOptionButton.tsx

@@ -5,7 +5,7 @@ import useProductQueryStore from "lib/stores/productQueryStore/productQueryStore
 
 function SortOptionButton({ option }: { option: SortOption }) {
     const { stagedSortOption, stagedSortOrder } = useProductQueryStore((state) => ({
-        stagedSortOption: state.stagedProductQuery.sort,
+        stagedSortOption: state.stagedProductQuery.sortBy,
         stagedSortOrder: state.stagedProductQuery.order,
     }))
 

package/src/components/productGrid/components/FilterPanel/TypeFilter.tsx

@@ -5,7 +5,7 @@ import { useFilterData } from "components/productGrid/context/ProductFiltersCont
 
 function TypeFilter() {
     const { isLoading, data, updateFilter } = useFilterData()
-    const productTypes = useProductQueryStore(state => state.stagedProductQuery.productType)
+    const productTypes = useProductQueryStore(state => state.stagedProductQuery.productTypes)
 
     if (isLoading) return <FilterCheckboxSkeleton />
 
@@ -14,7 +14,7 @@ function TypeFilter() {
             [...productTypes, typeValue] :
             productTypes.filter(t => t !== typeValue)
 
-        updateFilter('productType', updatedTypes)
+        updateFilter('productTypes', updatedTypes)
     }
 
     return (

package/src/components/productGrid/components/ProductGrid/GridViewProductCard.tsx

@@ -12,7 +12,7 @@ interface Props {
 }
 
 export default function GridViewProductCard({ product, isEditing }: Props) {
-    const { title, lowestSkuPrice, _id, slug } = product
+    const { title, lowestPrice, id, slug } = product
     const [isHovered, setIsHovered] = useState(false)
 
     return (
@@ -23,7 +23,7 @@ export default function GridViewProductCard({ product, isEditing }: Props) {
         >
             <ProductImageSlider product={product} isHovered={isHovered} isEditing={isEditing} />
             <ProductTitle title={title} slug={slug} className="mt-3" />
-            <ProductPrice price={lowestSkuPrice} slug={slug} className="mt-2" />
+            <ProductPrice price={lowestPrice} slug={slug} className="mt-2" />
         </div>
     )
 }

package/src/components/productGrid/components/ProductGrid/ListViewProductCard.tsx

@@ -7,18 +7,18 @@ import useThemeInfo from "hooks/useThemeInfo"
 import { useCustomNavigate } from "hooks/useCustomNavigate"
 
 export default function ListViewProductCard({ product }: { product: IHomePageProduct }) {
-    const { media, title, lowestSkuPrice, discountRuleset, gatedRuleset, slug, _id } = product
+    const { images, title, lowestPrice, discountRuleset, gatedRuleset, slug, id } = product
     const { isDarkTheme } = useThemeInfo()
     const iconClass = isDarkTheme ? "[&_path]:stroke-white" : ""
     const { navigate } = useCustomNavigate()
-    const imageURL = (media.find(m => m.isMain === "true") ?? media[0]).thumbnail
+    const imageURL = (images.find(img => img.original) ?? images[0])?.thumbnail || images[0]?.original
 
     return (
-        <div className="cursor-pointer" onClick={() => navigate(`product/${slug ?? _id}`)}>
+        <div className="cursor-pointer" onClick={() => navigate(`product/${slug ?? id}`)}>
             <ProductCardBase
                 image={<img src={imageURL} alt={title} className="w-[70px] h-[70px] object-cover rounded-lg shrink-0" />}
                 title={<ProductTitle title={title} slug={slug} />}
-                price={<ProductPrice price={lowestSkuPrice} slug={slug} />}
+                price={<ProductPrice price={lowestPrice} slug={slug} />}
                 icons={
                     <>
                         {discountRuleset && <PLPIcons.Discount className={iconClass} />}

package/src/components/productGrid/components/ProductGrid/ProductGrid.tsx

@@ -39,8 +39,8 @@ function ProductGrid({ limit, isEditing }: { limit?: number; isEditing?: boolean
             <ProductGridLayout>
                 {products.map(product => (
                     isMobile && viewMode === 'list'
-                        ? <ListViewProductCard key={product._id} product={product} />
-                        : <GridViewProductCard key={product._id} product={product} isEditing={isEditing} />
+                        ? <ListViewProductCard key={product.id} product={product} />
+                        : <GridViewProductCard key={product.id} product={product} isEditing={isEditing} />
                 ))}
 
                 {isFetchingNextPage && renderSkeletons()}

package/src/components/productGrid/components/ProductGrid/Slider/ProductImageSlider.tsx

@@ -15,10 +15,10 @@ interface Props {
 }
 
 export default function ProductImageSlider({ product, isHovered, isEditing }: Props) {
-    const { media, title, slug } = product
+    const { images, title, slug } = product
     const { navigate } = useCustomNavigate()
     const [currentIndex, setCurrentIndex] = useState(0)
-    const sliderImages = media.sort((_, b) => (b.isMain === "true" ? 1 : -1)).slice(0, 3)
+    const sliderImages = images.slice(0, 3)
 
     const [sliderRef, instanceRef] = useKeenSlider<HTMLDivElement>({
         loop: true,
@@ -53,7 +53,7 @@ export default function ProductImageSlider({ product, isHovered, isEditing }: Pr
             <div className="relative overflow-hidden rounded-lg aspect-square cursor-pointer">
                 <img
                     src={sliderImages[0]?.thumbnail}
-                    alt={title}
+                    alt={sliderImages[0]?.alt || title}
                     onClick={handleImageClick}
                     className="w-full h-full object-cover transition-transform duration-500 ease-in-out group-hover:scale-[1.04]"
                 />
@@ -69,7 +69,7 @@ export default function ProductImageSlider({ product, isHovered, isEditing }: Pr
                     <div key={index} className="keen-slider__slide w-full h-full aspect-square flex items-center justify-center">
                         <img
                             src={image.thumbnail}
-                            alt={`${title}-${index}`}
+                            alt={image.alt || `${title}-${index}`}
                             className="w-full h-full object-cover transition-transform duration-500 ease-in-out group-hover:scale-[1.04]"
                         />
                     </div>

package/src/components/productGrid/hooks/useSortHandler.ts

@@ -23,11 +23,11 @@ export default function useSortHandler() {
 
     function handleSelectChange(sortOption: string, sortOrder?: number) {
         if (sortOption === 'default') {
-            setStagedProductQuery('sort', '')
+            setStagedProductQuery('sortBy', '')
             setStagedProductQuery('order', undefined)
         }
         else {
-            setStagedProductQuery('sort', sortOption)
+            setStagedProductQuery('sortBy', sortOption)
             setStagedProductQuery('order', sortOrder)
         }
 

package/src/lib/stores/productQueryStore/productQueryStore.ts

@@ -2,9 +2,9 @@ import { create } from 'zustand'
 
 export interface ProductQuery {
     search: string
-    sort: string
+    sortBy: string
     order?: number
-    productType: string[]
+    productTypes: string[]
     collectionId: string[]
     minPrice?: number
     maxPrice?: number
@@ -23,8 +23,8 @@ interface ProductQueryStore {
 
 const initialProductQuery: ProductQuery = {
     search: "",
-    sort: "",
-    productType: [],
+    sortBy: "",
+    productTypes: [],
     collectionId: []
 }