droplinked-editor-configs 1.9.9 → 1.9.11

package/dist/lib/stores/app/appStore.d.ts

@@ -12,10 +12,7 @@ export interface IAppStore {
     states: {
         cart: Icart;
         user: {
-            [shopName: string]: {
-                token: string;
-                user: IUser;
-            };
+            [shopName: string]: IUser;
         } | null;
         shop: IShop;
     };
@@ -34,10 +31,7 @@ declare const useAppStore: import('zustand').UseBoundStore<Omit<Omit<import('zus
             states: {
                 cart: Icart;
                 user: {
-                    [shopName: string]: {
-                        token: string;
-                        user: IUser;
-                    };
+                    [shopName: string]: IUser;
                 } | null;
                 shop: IShop;
             };
@@ -51,10 +45,7 @@ declare const useAppStore: import('zustand').UseBoundStore<Omit<Omit<import('zus
             states: {
                 cart: Icart;
                 user: {
-                    [shopName: string]: {
-                        token: string;
-                        user: IUser;
-                    };
+                    [shopName: string]: IUser;
                 } | null;
                 shop: IShop;
             };

package/dist/lib/utils/urlUtils.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Checks if a given string is likely an external URL (domain or http/https).
+ * It returns true for "google.com", "www.test.com", "http://site.com".
+ * It returns false for "home", "/about", "contact-us".
+ */
+export declare const isExternalUrl: (url: string) => boolean;
+/**
+ * Normalizes a URL string.
+ * If it's detected as an external URL but missing protocol, prepends https://.
+ */
+export declare const normalizeUrl: (url: string) => string;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "droplinked-editor-configs",
   "private": false,
-  "version": "1.9.9",
+  "version": "1.9.11",
   "type": "module",
   "main": "dist/droplinked-editor.umd.js",
   "module": "dist/droplinked-editor.es.js",

package/src/components/SocialMediaBar/SocialMediaBar.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { socialMediaLinks } from './socialLinks';
 import CustomIcon from 'components/customIcon/CustomIcon';
 import useThemeInfo from 'hooks/useThemeInfo';
+import { isExternalUrl, normalizeUrl } from 'lib/utils/urlUtils';
 
 // Accept socialChannels as prop
 interface SocialChannel {
@@ -25,12 +26,11 @@ interface SocialMediaBarProps {
 const SocialMediaBar: React.FC<SocialMediaBarProps> = React.memo(({ socialChannels }) => {
   const { shopDesign: { foreground } } = useThemeInfo()
 
-  // Map channel name to icon from socialMediaLinks
-  const getIconByChannel = (channel: string) => {
-    const found = socialMediaLinks.find(
+  // Map channel name to social link item
+  const getSocialLinkItem = (channel: string) => {
+    return socialMediaLinks.find(
       (item) => item.key.replace('URL', '').toLowerCase() === channel.toLowerCase()
     );
-    return found ? found.icon : undefined;
   };
 
   return (
@@ -39,12 +39,22 @@ const SocialMediaBar: React.FC<SocialMediaBarProps> = React.memo(({ socialChanne
         .filter((item) => !!item.links?.url && !!item.links?.channel)
         .map((item, idx) => {
           const { channel, url } = item.links!;
-          const Icon = getIconByChannel(channel!);
-          if (!Icon) return null;
+          const socialItem = getSocialLinkItem(channel!);
+          if (!socialItem) return null;
+
+          const Icon = socialItem.icon;
+          let href = url!;
+
+          if (isExternalUrl(href)) {
+            href = normalizeUrl(href);
+          } else {
+            href = `${socialItem.link}${href.replace(/^\//, '')}`;
+          }
+
           return (
             <a
               key={channel + idx}
-              href={url}
+              href={href}
               target="_blank"
               rel="noopener noreferrer"
               className="inline-block rounded-md p-[10px] transition-colors duration-100 ease-out"
@@ -58,31 +68,4 @@ const SocialMediaBar: React.FC<SocialMediaBarProps> = React.memo(({ socialChanne
   );
 });
 
-export default SocialMediaBar;
-
-/**
- * Utility function to darken a hexadecimal color by a percentage
- * 
- * @param color - Hexadecimal color string (e.g., "#FFFFFF")
- * @param percent - Percentage to darken the color (-100 to 100)
- * @returns Darkened hexadecimal color string
- */
-const darkenColor = (color: string, percent: number): string => {
-  let num = parseInt(color.slice(1), 16);
-  let amt = Math.round(2.55 * percent);
-  let R = (num >> 16) + amt;
-  let G = ((num >> 8) & 0x00ff) + amt;
-  let B = (num & 0x0000ff) + amt;
-
-  return (
-    '#' +
-    (
-      0x1000000 +
-      (R < 255 ? (R < 1 ? 0 : R) : 255) * 0x10000 +
-      (G < 255 ? (G < 1 ? 0 : G) : 255) * 0x100 +
-      (B < 255 ? (B < 1 ? 0 : B) : 255)
-    )
-      .toString(16)
-      .slice(1)
-  );
-};
+export default SocialMediaBar;

package/src/components/header/Sidebar.tsx

@@ -18,7 +18,7 @@ interface Props {
 function Sidebar({ iconColor, linkManagement, ProfileDropdownWrapper }: Props) {
     const { isOpen, onOpen, onClose } = useDisclosure()
     const { states: { user, shop: { url } } } = useAppStore()
-    const { id } = user?.[url]?.user || {}
+    const { id } = user?.[url] || {}
     const { shopDesign: { backgroundBody } } = useThemeInfo()
     const [isLargerThan768] = useMediaQuery('(min-width: 768px)')
     const { defineMultiStyleConfig } = createMultiStyleConfigHelpers(parts.keys)

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

@@ -4,8 +4,9 @@ import CurrencyIcon from './CurrencyIcon'
 import useThemeInfo from 'hooks/useThemeInfo'
 import usePriceInputClassNames from 'components/productGrid/hooks/usePriceInputClassNames'
 
-interface Props extends ComponentProps<"input"> {
-    onValueChange: (value: number) => void
+interface Props extends Omit<ComponentProps<"input">, 'value' | 'onChange'> {
+    value: number | string | undefined
+    onValueChange: (value: number | string) => void
 }
 
 export default function PriceInput({ value, placeholder, onValueChange, ...inputProps }: Props) {
@@ -21,9 +22,13 @@ export default function PriceInput({ value, placeholder, onValueChange, ...input
             <input
                 type="number"
                 className={` !font-shopfont ${inputClassName}`}
-                value={value}
+                value={value ?? ''}
                 placeholder={placeholder}
-                onChange={({ target: { validity, value } }) => validity.valid && onValueChange(+value)}
+                onChange={({ target: { validity, value } }) => {
+                    if (validity.valid) {
+                        onValueChange(value === '' ? '' : +value)
+                    }
+                }}
                 onKeyDown={(e) => {
                     const invalidKeys = ['+', '-', 'e', '.']
                     if (invalidKeys.includes(e.key)) e.preventDefault()

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

@@ -21,8 +21,8 @@ export default function PriceRangeFilter() {
     } : {}
 
     const { minPrice, maxPrice, setStagedProductQuery, applyStagedFilters } = useProductQueryStore(state => ({
-        minPrice: state.stagedProductQuery.minPrice ?? min,
-        maxPrice: state.stagedProductQuery.maxPrice ?? max,
+        minPrice: state.stagedProductQuery.minPrice,
+        maxPrice: state.stagedProductQuery.maxPrice,
         setStagedProductQuery: state.setStagedProductQuery,
         applyStagedFilters: state.applyStagedFilters
     }))
@@ -31,15 +31,28 @@ export default function PriceRangeFilter() {
     const debouncedMaxPrice = useDebounce(maxPrice, 300)
 
     useEffect(() => {
+        if (typeof debouncedMinPrice === 'number' && typeof debouncedMaxPrice === 'number' && debouncedMinPrice > debouncedMaxPrice) {
+            setStagedProductQuery('minPrice', debouncedMaxPrice)
+            setStagedProductQuery('maxPrice', debouncedMinPrice)
+            return
+        }
         applyStagedFilters()
-    }, [debouncedMinPrice, debouncedMaxPrice, applyStagedFilters])
+    }, [debouncedMinPrice, debouncedMaxPrice, applyStagedFilters, setStagedProductQuery])
 
-    const handleMinChange = (newMin: number) => {
-        if (newMin < maxPrice) setStagedProductQuery('minPrice', newMin)
+    const handleMinChange = (newMin: number | string) => {
+        if (newMin === '') {
+            setStagedProductQuery('minPrice', undefined)
+            return
+        }
+        if (typeof newMin === 'number') setStagedProductQuery('minPrice', newMin)
     }
 
-    const handleMaxChange = (newMax: number) => {
-        if (newMax > minPrice) setStagedProductQuery('maxPrice', newMax)
+    const handleMaxChange = (newMax: number | string) => {
+        if (newMax === '') {
+            setStagedProductQuery('maxPrice', undefined)
+            return
+        }
+        if (typeof newMax === 'number') setStagedProductQuery('maxPrice', newMax)
     }
 
     if (isLoading) return <FilterCheckboxSkeleton />
@@ -48,15 +61,15 @@ export default function PriceRangeFilter() {
         <div className="flex flex-col gap-4">
             <div className="flex items-center gap-3">
                 <PriceInput
-                    value={minPrice}
-                    placeholder="0"
+                    value={minPrice ?? ''}
+                    placeholder={min.toString()}
                     onValueChange={handleMinChange}
                     min={min}
                 />
                 <PLPIcons.Separator className="shrink-0" />
                 <PriceInput
-                    value={maxPrice}
-                    placeholder="1000"
+                    value={maxPrice ?? ''}
+                    placeholder={max.toString()}
                     onValueChange={handleMaxChange}
                     max={max}
                 />
@@ -65,7 +78,7 @@ export default function PriceRangeFilter() {
                 className="price-range-slider"
                 thumbClassName={isDarkTheme ? "dark-price-range-slider__thumb" : "price-range-slider__thumb"}
                 trackClassName={isDarkTheme ? "dark-price-range-slider__track" : "price-range-slider__track"}
-                value={[minPrice, maxPrice]}
+                value={[minPrice ?? min, maxPrice ?? max]}
                 renderThumb={(props) => <div {...props} />}
                 minDistance={1}
                 onChange={([newMin, newMax]) => {

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

@@ -16,7 +16,7 @@ interface Icart {
 export interface IAppStore {
     states: {
         cart: Icart;
-        user: { [shopName: string]: { token: string; user: IUser } } | null;
+        user: { [shopName: string]: IUser } | null;
         shop: IShop;
     };
     methods: {

package/src/lib/utils/urlUtils.ts

@@ -0,0 +1,40 @@
+/**
+ * Checks if a given string is likely an external URL (domain or http/https).
+ * It returns true for "google.com", "www.test.com", "http://site.com".
+ * It returns false for "home", "/about", "contact-us".
+ */
+export const isExternalUrl = (url: string): boolean => {
+    if (!url) return false;
+
+    // Already has protocol
+    if (/^https?:\/\//i.test(url)) {
+        return true;
+    }
+
+    // Check for domain-like pattern (e.g., "example.com", "sub.domain.net/path")
+    // Pattern: starts with alphanumeric, contains dots, ends with TLD (2+ chars)
+    // We exclude strings that start with '/' (absolute paths)
+    if (url.startsWith('/')) {
+        return false;
+    }
+
+    // Regex to match domain at the start of the string
+    // [domain part].[tld] followed by optional path/query
+    const domainRegex = /^([a-zA-Z0-9]([a-zA-Z0-9\-]{0,61}[a-zA-Z0-9])?\.)+[a-zA-Z]{2,}(\/.*)?$/;
+
+    return domainRegex.test(url);
+};
+
+/**
+ * Normalizes a URL string.
+ * If it's detected as an external URL but missing protocol, prepends https://.
+ */
+export const normalizeUrl = (url: string): string => {
+    if (!url) return url;
+
+    if (isExternalUrl(url) && !/^https?:\/\//i.test(url)) {
+        return `https://${url}`;
+    }
+
+    return url;
+};