droplinked-editor-configs 1.8.3 → 1.8.5

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/header/Header.tsx

@@ -11,13 +11,12 @@ import { useAppStore } from 'AppStoreProvider'
 interface Props {
   linkManagement?: { link: { label: string, url: string } }[]
   onCartClick?: () => void
-  onProfileClick?: () => void
+  ProfileDropdownWrapper?: React.ElementType
   cartItemCount?: number
-  isLoggedIn?: boolean
   isRendering?: boolean
 }
 
-const Header = ({ linkManagement, onCartClick, onProfileClick, cartItemCount, isRendering, isLoggedIn }: Props) => {
+const Header = ({ linkManagement, onCartClick, ProfileDropdownWrapper, cartItemCount, isRendering }: Props) => {
   const { states: { shop }, methods: { updateState } } = useAppStore()
   const { shopDesign: { backgroundBody, iconHeaderColor } } = useThemeInfo()
   const isRestrictedModalOpen = shop.isAgeRestricted && shop.isRestricted === undefined
@@ -69,8 +68,7 @@ const Header = ({ linkManagement, onCartClick, onProfileClick, cartItemCount, is
             <Sidebar
               iconColor={iconColor}
               linkManagement={linkManagement}
-              onProfileClick={onProfileClick}
-              isLoggedIn={isLoggedIn}
+              ProfileDropdownWrapper={ProfileDropdownWrapper}
             />
             <Box maxWidth="150px">
               <AppLogo height="31px" objectFit="contain" />
@@ -82,7 +80,7 @@ const Header = ({ linkManagement, onCartClick, onProfileClick, cartItemCount, is
           <HeaderIcons
             iconColor={iconColor}
             onCartClick={onCartClick}
-            onProfileClick={onProfileClick}
+            ProfileDropdownWrapper={ProfileDropdownWrapper}
             cartItemCount={cartItemCount}
           />
         </AppContainer>

package/src/components/header/HeaderIcons.tsx

@@ -9,11 +9,11 @@ import HeaderCartIcon from './HeaderCartIcon'
 interface Props {
     iconColor: string
     onCartClick?: () => void
-    onProfileClick?: () => void
     cartItemCount?: number
+    ProfileDropdownWrapper?: React.ElementType
 }
 
-function HeaderIcons({ iconColor, onCartClick, onProfileClick, cartItemCount }: Props) {
+function HeaderIcons({ iconColor, onCartClick, ProfileDropdownWrapper, cartItemCount }: Props) {
     const { shopDesign: { backgroundBody } } = useThemeInfo()
 
     const renderIcon = (iconComponent: React.ReactElement, customStyles?: IconProps) => {
@@ -39,9 +39,17 @@ function HeaderIcons({ iconColor, onCartClick, onProfileClick, cartItemCount }:
                 icon={renderIcon(<CartMd />, { onClick: onCartClick })}
                 cartItemCount={cartItemCount}
             />
-            <Box display={{ base: "none", md: "block" }}>
-                {renderIcon(<UserMd />, { onClick: onProfileClick })}
-            </Box>
+            {ProfileDropdownWrapper ? (
+                <ProfileDropdownWrapper>
+                    <Box display={{ base: "none", md: "block" }}>
+                        {renderIcon(<UserMd />)}
+                    </Box>
+                </ProfileDropdownWrapper>
+            ) : (
+                <Box display={{ base: "none", md: "block" }}>
+                    {renderIcon(<UserMd />)}
+                </Box>
+            )}
         </HStack>
     )
 }

package/src/components/header/Sidebar.tsx

@@ -7,16 +7,18 @@ import { drawerAnatomy as parts } from '@chakra-ui/anatomy';
 import { createMultiStyleConfigHelpers } from '@chakra-ui/styled-system';
 import HeaderLinks from './HeaderLinks';
 import { Button } from 'components/ui/button';
+import { useAppStore } from 'AppStoreProvider';
 
 interface Props {
     iconColor: string
     linkManagement?: { link: { label: string, url: string } }[]
-    onProfileClick?: () => void
-    isLoggedIn?: boolean
+    ProfileDropdownWrapper?: React.ElementType
 }
 
-function Sidebar({ iconColor, linkManagement, onProfileClick, isLoggedIn }: Props) {
+function Sidebar({ iconColor, linkManagement, ProfileDropdownWrapper }: Props) {
     const { isOpen, onOpen, onClose } = useDisclosure()
+    const { states: { user, shop: { name } } } = useAppStore()
+    const { id } = user?.[name]?.user || {}
     const { shopDesign: { backgroundBody } } = useThemeInfo()
     const [isLargerThan768] = useMediaQuery('(min-width: 768px)')
     const { defineMultiStyleConfig } = createMultiStyleConfigHelpers(parts.keys)
@@ -41,11 +43,21 @@ function Sidebar({ iconColor, linkManagement, onProfileClick, isLoggedIn }: Prop
                         <VStack width={"100%"} height={"80%"} justifyContent={"space-between"} alignItems={"start"} overflow="auto">
                             <HeaderLinks type='vertical' onClose={() => onClose()} linkManagement={linkManagement} />
                             <VStack gap={"16px"} width={"100%"}>
-                                <Button variant='outline' onClick={onProfileClick}>
-                                    <AppTypography>
-                                        {isLoggedIn ? "Account" : "Sign In"}
-                                    </AppTypography>
-                                </Button>
+                                {ProfileDropdownWrapper ? (
+                                    <ProfileDropdownWrapper>
+                                        <Button variant='outline'>
+                                            <AppTypography>
+                                                {id ? "Account" : "Sign In"}
+                                            </AppTypography>
+                                        </Button>
+                                    </ProfileDropdownWrapper>
+                                ) : (
+                                    <Button variant='outline'>
+                                        <AppTypography>
+                                            {id ? "Account" : "Sign In"}
+                                        </AppTypography>
+                                    </Button>
+                                )}
                             </VStack>
                         </VStack>
                     </DrawerBody>

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/configured-components/layout/headerConfig.tsx

@@ -52,13 +52,13 @@ export const headerConfig: Config["components"][string] = {
             }
         ]
     },
-    render: ({ linkManagement, onCartClick, onProfileClick, isLoggedIn, cartItemCount, isRendering }) => {
+    render: ({ linkManagement, onCartClick, ProfileDropdownWrapper, cartItemCount, isRendering }) => {
         return (
             <StylesWrapper>
                 <Header
                     linkManagement={linkManagement}
                     onCartClick={onCartClick}
-                    onProfileClick={onProfileClick}
+                    ProfileDropdownWrapper={ProfileDropdownWrapper}
                     cartItemCount={cartItemCount}
                     isRendering={isRendering}
                 />

package/src/lib/models/user.ts

@@ -55,7 +55,7 @@ export interface IUser {
   status: string;
   stripeCustomerID: string;
   walletType?: WALLET_TYPES;
-  _id: string;
+  id: string;
 }
 
 /*

package/src/lib/stores/app/appStore.ts

@@ -2,7 +2,7 @@ import { IUser } from 'lib/models/user'
 import { appDevelopment } from 'lib/utils/app/variables'
 import { create } from 'zustand'
 import { devtools, persist } from 'zustand/middleware'
-import { ICartStore, IShop } from './interfaces'
+import { ICart, IShop } from './interfaces'
 import { shopStates } from './shopModel'
 
 interface IupdateState {
@@ -10,7 +10,7 @@ interface IupdateState {
     value: any
 }
 interface Icart {
-    [propname: string]: ICartStore
+    [propname: string]: ICart
 }
 
 export interface IAppStore {

package/src/lib/stores/app/interfaces.ts

@@ -1,5 +1,132 @@
 import { ImsTypeEnum, IPaymentMethods, IShopDesign, IShopDesignPrev, IShopMedia, ITemplateOptions } from "lib/models/shop";
 
+export interface ICartItem {
+    productId: string;
+    slug: string;
+    skuId: string;
+    sku: {
+        variantKey: string;
+        attributes: {
+            key: string;
+            value: string
+            caption: string
+        }[]
+    }
+    quantity: number;
+    thumbnail: string;
+    m2m: {
+        position: string;
+        artworkUrl: string;
+    };
+    cost: number;
+    price: number;
+    totalPriceBeforeDiscount: number;
+    totalPrice: number;
+    unitPrice: number;
+    title: string;
+    description: string;
+    productType: string;
+    ruleset: {
+        type: string;
+        discountPercentage: number;
+    };
+    collectionName: string;
+    affiliateInfo: {
+        isAffiliateProduct: boolean;
+        originalShopId: string;
+        commissionPercentage: number;
+    };
+}
+
+export interface IShippingRate {
+    rateId: string;
+    price: number;
+    deliveryTime: string;
+    selected: boolean;
+    name?: string;
+    carrier?: string;
+    estimatedDays?: number;
+}
+
+export interface IAvailableShipping {
+    type: "THIRD_PARTY" | "CUSTOM" | "POD";
+    shipmentId: string;
+    rates: IShippingRate[];
+    productIds: string[];
+}
+
+export interface IGiftCard {
+    type: "PERCENTAGE" | "AMOUNT";
+    value: number;
+    code: string;
+}
+
+export interface IFinancialDetails {
+    tax: {
+        total: number;
+        droplinked: number;
+        producer: number;
+    };
+    discounts: {
+        ruleset: number;
+        giftCard: number;
+    };
+    shipping: {
+        total: number;
+        dropLinkedShare: number;
+        merchantShare: number;
+    };
+    amounts: {
+        productTotal: number;
+        discountTotal: number;
+        taxTotal: number;
+        shippingTotal: number;
+        totalBeforeDiscount: number;
+        finalTotalBeforeTax: number;
+        totalAmount: number;
+        productTotalAfterDiscount: number;
+    };
+}
+
+export interface IAddress {
+    addressLine1?: string;
+    addressLine2?: string;
+    city?: string;
+    country?: string;
+    state?: string;
+    zip?: string;
+    firstName?: string;
+    lastName?: string;
+    phone?: string;
+}
+
+export interface ICart {
+    id: string;
+    shopId: string;
+    customerId: string;
+    email: string;
+    items: ICartItem[];
+    shippingAddressId: string;
+    availableShipping: IAvailableShipping[];
+    giftcard: IGiftCard;
+    financialDetails: IFinancialDetails;
+    status: "ACTIVE" | "EXPIRED";
+    additional: {
+        note: string;
+    };
+    shippingAddress: IAddress;
+    expiredAt: string;
+    createdAt: string;
+    updatedAt: string;
+    _id: string;
+}
+
+export interface ISelectedShipping {
+    shipmentId: string;
+    rateId: string;
+}
+
+// Legacy interfaces - keeping for backward compatibility
 export interface ICartStoreItem {
     _id: string
     skuID: string
@@ -66,6 +193,22 @@ export interface Ishippings {
     data: IShippingData[]
 }
 
+export interface ISelectedShippingRate {
+    type: string;
+    shipmentId: string;
+    rate: IRate;
+    productIds: string[];
+}
+
+export interface IRate {
+    rateId: string;
+    carrier: string;
+    service: string;
+    price: number;
+    estimatedDays: number;
+    name: string
+}
+
 export interface ICartStore {
     _id: string
     status: string
@@ -78,6 +221,7 @@ export interface ICartStore {
     address?: any
     canApplyGiftCard: boolean
     totalCart: TotalCart
+    selectedShipmentRates: ISelectedShippingRate;
 }
 
 export interface TotalCart {
@@ -140,9 +284,11 @@ export interface IShop {
     linkedinURL: string | null;
     facebookURL: string | null;
     paymentMethods: IPaymentMethods[];
+    pre_purchase_data_fetch?: {
+        active: boolean;
+        title: string;
+    };
     productsTags: string | null;
-    textColor: string;
-    shopifyDomain: string | null;
     twitterURL: string | null;
     webURL: string | null;
     telegramURL: string | null;
@@ -157,6 +303,7 @@ export interface IShop {
     design: IShopDesignPrev;
     shopDesign: IShopDesign;
     template_options: ITemplateOptions;
+    shopTemplate: string;
     loginMethods: IWallet[]
     tokenBasedPricing: ITokenBasedPricing;
     launchDate: string | null;

package/src/types/renderersProps.ts

@@ -1,4 +1,5 @@
 import { Data } from "droplinked-editor-core";
+import { ElementType, ReactNode } from "react";
 
 export interface innerContentProps {
     data: Data;
@@ -7,11 +8,10 @@ export interface innerContentProps {
 
 export interface PageHeaderProps {
     onCartClick: () => void
-    onProfileClick: () => void
     cartItemCount: number
     data: Data
     handleNavigate: (route: string) => void
-    isLoggedIn: boolean
+    profileDropdownWrapper: ElementType
 }
 
 export interface PageFooterProps {