@akinon/projectzero 2.0.0-beta.19 → 2.0.0-beta.20

package/app-template/src/components/currency-select.tsx

@@ -9,6 +9,11 @@ import { Select } from './select';
 
 interface CurrencySelectProps {
   className?: string;
+  showIcon?: boolean;
+  /** Custom SVG icon content */
+  customIcon?: string;
+  /** Label format: 'full' (US Dollar), 'symbol' ($), 'code' (USD) */
+  labelFormat?: 'full' | 'symbol' | 'code';
 }
 
 export const CurrencySelect = (props: CurrencySelectProps) => {
@@ -17,6 +22,98 @@ export const CurrencySelect = (props: CurrencySelectProps) => {
   const { t, currency, setCurrency } = useLocalization();
   const { currencies } = settings.localization;
 
+  // Currency symbol map for common currencies
+  const currencySymbolMap: Record<string, string> = {
+    usd: '$',
+    eur: '€',
+    gbp: '£',
+    try: '₺',
+    jpy: '¥',
+    cny: '¥',
+    krw: '₩',
+    inr: '₹',
+    rub: '₽',
+    brl: 'R$',
+    aud: 'A$',
+    cad: 'C$',
+    chf: 'CHF',
+    sek: 'kr',
+    nok: 'kr',
+    dkk: 'kr',
+    pln: 'zł',
+    mxn: '$',
+    sgd: 'S$',
+    hkd: 'HK$',
+    nzd: 'NZ$',
+    zar: 'R',
+    aed: 'د.إ',
+    sar: '﷼',
+    thb: '฿',
+    myr: 'RM',
+    php: '₱',
+    idr: 'Rp',
+    vnd: '₫',
+    egp: 'E£',
+    ngn: '₦',
+    pkr: '₨',
+    bdt: '৳',
+    cop: '$',
+    ars: '$',
+    clp: '$',
+    pen: 'S/',
+    ils: '₪',
+    kwd: 'د.ك',
+    qar: '﷼',
+    bhd: '.د.ب',
+    omr: '﷼'
+  };
+
+  // Currency full name map for common currencies
+  const currencyNameMap: Record<string, string> = {
+    usd: 'US Dollar',
+    eur: 'Euro',
+    gbp: 'British Pound',
+    try: 'Turkish Lira',
+    jpy: 'Japanese Yen',
+    cny: 'Chinese Yuan',
+    krw: 'South Korean Won',
+    inr: 'Indian Rupee',
+    rub: 'Russian Ruble',
+    brl: 'Brazilian Real',
+    aud: 'Australian Dollar',
+    cad: 'Canadian Dollar',
+    chf: 'Swiss Franc',
+    sek: 'Swedish Krona',
+    nok: 'Norwegian Krone',
+    dkk: 'Danish Krone',
+    pln: 'Polish Zloty',
+    mxn: 'Mexican Peso',
+    sgd: 'Singapore Dollar',
+    hkd: 'Hong Kong Dollar',
+    nzd: 'New Zealand Dollar',
+    zar: 'South African Rand',
+    aed: 'UAE Dirham',
+    sar: 'Saudi Riyal',
+    thb: 'Thai Baht',
+    myr: 'Malaysian Ringgit',
+    php: 'Philippine Peso',
+    idr: 'Indonesian Rupiah',
+    vnd: 'Vietnamese Dong',
+    egp: 'Egyptian Pound',
+    ngn: 'Nigerian Naira',
+    pkr: 'Pakistani Rupee',
+    bdt: 'Bangladeshi Taka',
+    cop: 'Colombian Peso',
+    ars: 'Argentine Peso',
+    clp: 'Chilean Peso',
+    pen: 'Peruvian Sol',
+    ils: 'Israeli Shekel',
+    kwd: 'Kuwaiti Dinar',
+    qar: 'Qatari Riyal',
+    bhd: 'Bahraini Dinar',
+    omr: 'Omani Rial'
+  };
+
   const handleChange = async (e) => {
     setSelectedCurrency(e.currentTarget.value);
     setIsModalOpen(true);
@@ -26,16 +123,64 @@ export const CurrencySelect = (props: CurrencySelectProps) => {
     setCurrency(selectedCurrency);
   };
 
+  // Get currency symbol from map or use provided symbol
+  const getCurrencySymbol = (curr: { code: string; symbol?: string }) => {
+    if (curr.symbol) return curr.symbol;
+    return (
+      currencySymbolMap[curr.code.toLowerCase()] || curr.code.toUpperCase()
+    );
+  };
+
+  // Get currency full name from map or use provided label
+  const getCurrencyName = (curr: { code: string; label: string }) => {
+    const name = currencyNameMap[curr.code.toLowerCase()];
+    // If name exists in map, use it. Otherwise check if label looks like a full name (not just code)
+    if (name) return name;
+    // If label is different from code, assume it's a proper name
+    if (curr.label.toLowerCase() !== curr.code.toLowerCase()) return curr.label;
+    // Fallback to code uppercase
+    return curr.code.toUpperCase();
+  };
+
+  // Format label based on labelFormat prop
+  const formatLabel = (curr: {
+    code: string;
+    label: string;
+    symbol?: string;
+  }) => {
+    switch (props.labelFormat) {
+      case 'symbol':
+        // Return currency symbol ($, €, etc.)
+        return getCurrencySymbol(curr);
+      case 'code':
+        // Return currency code (USD, EUR, etc.)
+        return curr.code.toUpperCase();
+      case 'full':
+      default:
+        // Return full label (US Dollar, Euro, etc.)
+        return getCurrencyName(curr);
+    }
+  };
+
+  // Check if customIcon has actual SVG content
+  const hasValidCustomIcon =
+    props.customIcon &&
+    typeof props.customIcon === 'string' &&
+    props.customIcon.includes('<svg');
+
   return (
     <>
       <Select
         onChange={handleChange}
-        options={currencies.map((currency) => ({
-          value: currency.code,
-          label: currency.label
+        options={currencies.map((curr) => ({
+          value: curr.code,
+          label: formatLabel(curr)
         }))}
         value={currency}
-        icon="money"
+        icon={
+          props.showIcon !== false && !hasValidCustomIcon ? 'money' : undefined
+        }
+        customIcon={props.showIcon !== false ? props.customIcon : undefined}
         data-testid="currency"
         borderless
         className={props.className}

package/app-template/src/components/icon.tsx

@@ -2,17 +2,16 @@ import { IconProps } from '@theme/components/types';
 import clsx from 'clsx';
 
 export const Icon = (props: IconProps) => {
-  const { name, size, className, ...rest } = props;
+  const { name, size, className, style, ...rest } = props;
 
   return (
     <i
       className={clsx(`flex pz-icon-${name}`, className)}
       {...rest}
-      style={
-        size && {
-          fontSize: `${size}px`
-        }
-      }
+      style={{
+        ...style,
+        ...(size && { fontSize: `${size}px` })
+      }}
     />
   );
 };

package/app-template/src/components/index.ts

@@ -18,7 +18,8 @@ export * from './select';
 export * from './radio';
 export * from './checkbox';
 export * from './file-input';
-
+export * from './widget-content';
+export * from './action-tooltip';
 // Loaders
 export * from './loader-spinner';
 export * from './custom-loader';
@@ -39,3 +40,5 @@ export * from './skeleton-wrapper';
 // Head
 export * from './canonical-url';
 export * from './pwa-tags';
+export * from './quantity-input';
+export * from './quantity-selector';

package/app-template/src/components/language-select.tsx

@@ -1,30 +1,116 @@
 'use client';
 
 import { useLocalization } from '@akinon/next/hooks';
+import { useEffect, useRef } from 'react';
 import { Select } from './select';
 
 interface LanguageSelectProps {
   className?: string;
+  showIcon?: boolean;
+  iconClassName?: string;
+  /** Custom SVG icon content */
+  customIcon?: string;
+  /** Label format: 'full' (English), 'short' (EN), 'code' (en) */
+  labelFormat?: 'full' | 'short' | 'code';
 }
 
 export const LanguageSelect = (props: LanguageSelectProps) => {
   const { locale, locales, setLocale } = useLocalization();
+  const isUpdatingFromParent = useRef(false);
+
+  useEffect(() => {
+    if (window.parent !== window && !isUpdatingFromParent.current) {
+      window.parent.postMessage(
+        {
+          type: 'LOCALE_UPDATE',
+          data: {
+            locale,
+            locales: locales.map((lang) => ({
+              value: lang.value,
+              label: lang.label
+            }))
+          }
+        },
+        '*'
+      );
+    }
+  }, [locale, locales]);
+
+  useEffect(() => {
+    const handleMessage = (event: MessageEvent) => {
+      if (event.data?.type === 'LOCALE_UPDATE') {
+        const { locale: newLocale } = event.data.data;
+
+        if (newLocale && newLocale !== locale) {
+          isUpdatingFromParent.current = true;
+          setLocale(newLocale);
+          setTimeout(() => {
+            isUpdatingFromParent.current = false;
+          }, 100);
+        }
+      }
+    };
+
+    window.addEventListener('message', handleMessage);
+    return () => window.removeEventListener('message', handleMessage);
+  }, [locale, setLocale]);
 
   const handleChange = async (e) => {
     const selectedLanguage = e.currentTarget.value;
 
     setLocale(selectedLanguage);
+
+    if (window.parent !== window) {
+      window.parent.postMessage(
+        {
+          type: 'LOCALE_UPDATE',
+          data: {
+            locale: selectedLanguage,
+            locales: locales.map((lang) => ({
+              value: lang.value,
+              label: lang.label
+            }))
+          }
+        },
+        '*'
+      );
+    }
+  };
+
+  // Format label based on labelFormat prop
+  const formatLabel = (lang: { value: string; label: string }) => {
+    switch (props.labelFormat) {
+      case 'short':
+        // Get first 2 characters uppercase (EN, TR, etc.)
+        return lang.value.slice(0, 2).toUpperCase();
+      case 'code':
+        // Return locale code as-is (en, tr, etc.)
+        return lang.value;
+      case 'full':
+      default:
+        // Return full label (English, Türkçe, etc.)
+        return lang.label;
+    }
   };
 
+  // Check if customIcon has actual SVG content
+  const hasValidCustomIcon =
+    props.customIcon &&
+    typeof props.customIcon === 'string' &&
+    props.customIcon.includes('<svg');
+
   return (
     <Select
       onChange={handleChange}
       options={locales.map((lang) => ({
         value: lang.value,
-        label: lang.label
+        label: formatLabel(lang)
       }))}
       value={locale}
-      icon="globe"
+      icon={
+        props.showIcon !== false && !hasValidCustomIcon ? 'globe' : undefined
+      }
+      customIcon={props.showIcon !== false ? props.customIcon : undefined}
       data-testid="language"
       borderless
       className={props.className}

package/app-template/src/components/pagination.tsx

@@ -8,6 +8,14 @@ import { useLocalization } from '@akinon/next/hooks';
 import { useRouter } from '@akinon/next/hooks';
 import { useInView } from 'react-intersection-observer';
 
+const parseSafeUrl = (url: string) => {
+  try {
+    return new URL(url, window.location.origin);
+  } catch {
+    return null;
+  }
+};
+
 export const Pagination = (props: PaginationProps) => {
   const { t } = useLocalization();
   const router = useRouter();
@@ -26,7 +34,8 @@ export const Pagination = (props: PaginationProps) => {
     onPageChange,
     direction,
     render,
-    isLoading
+    isLoading,
+    customStyles
   } = props;
 
   const pagination = usePagination(total, limit, currentPage, numberOfPages);
@@ -96,7 +105,11 @@ export const Pagination = (props: PaginationProps) => {
   const handleClick = (e: MouseEvent<HTMLAnchorElement>, url: string) => {
     e.preventDefault();
 
-    const newUrl = new URL(url, window.location.origin);
+    const newUrl = parseSafeUrl(url);
+    if (!newUrl) {
+      return;
+    }
+
     const page = newUrl.searchParams.get('page');
 
     if (page === '1') {
@@ -117,7 +130,21 @@ export const Pagination = (props: PaginationProps) => {
       setNextPage(changingPage);
     }
 
-    onPageChange(changingPage);
+    // Navigate to new page using router if onPageChange is not provided
+    if (onPageChange) {
+      onPageChange(changingPage);
+    } else {
+      const currentUrl = parseSafeUrl(window.location.href);
+      if (!currentUrl) {
+        return;
+      }
+
+      currentUrl.searchParams.set('page', String(changingPage));
+      if (changingPage === 1) {
+        currentUrl.searchParams.delete('page');
+      }
+      router.push(currentUrl.pathname + currentUrl.search, undefined);
+    }
   };
 
   useEffect(() => {
@@ -156,11 +183,77 @@ export const Pagination = (props: PaginationProps) => {
     return <>{render(pagination)}</>;
   }
 
+  // Custom styles for pagination container
+  const containerStyles: React.CSSProperties = {
+    marginTop: customStyles?.marginTop || '32px',
+    marginBottom: customStyles?.marginBottom || '16px',
+    gap: customStyles?.pageGap || '8px'
+  };
+
+  // Custom styles for page links (button-like)
+  const pageStyles: React.CSSProperties = {
+    fontSize: customStyles?.pageFontSize || '14px',
+    color: customStyles?.pageColor || '#9ca3af',
+    backgroundColor: customStyles?.pageBgColor || 'transparent',
+    paddingLeft: customStyles?.pagePaddingX || '8px',
+    paddingRight: customStyles?.pagePaddingX || '8px',
+    paddingTop: customStyles?.pagePaddingY || '4px',
+    paddingBottom: customStyles?.pagePaddingY || '4px',
+    borderRadius: customStyles?.pageBorderRadius || '0px',
+    borderWidth: customStyles?.pageBorderWidth || '0px',
+    borderStyle: 'solid',
+    borderColor: customStyles?.pageBorderColor || '#e5e7eb',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center'
+  };
+
+  const activePageStyles: React.CSSProperties = {
+    fontSize: customStyles?.pageFontSize || '14px',
+    color: customStyles?.pageActiveColor || '#1a1a1a',
+    fontWeight: customStyles?.pageActiveFontWeight || '600',
+    backgroundColor: customStyles?.pageActiveBgColor || 'transparent',
+    paddingLeft: customStyles?.pagePaddingX || '8px',
+    paddingRight: customStyles?.pagePaddingX || '8px',
+    paddingTop: customStyles?.pagePaddingY || '4px',
+    paddingBottom: customStyles?.pagePaddingY || '4px',
+    borderRadius: customStyles?.pageBorderRadius || '0px',
+    borderWidth: customStyles?.pageBorderWidth || '0px',
+    borderStyle: 'solid',
+    borderColor: customStyles?.pageActiveBorderColor || '#1a1a1a',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center'
+  };
+
+  const arrowStyles: React.CSSProperties = {
+    color: customStyles?.arrowColor || '#1a1a1a'
+  };
+
+  // Custom styles for more button
+  const buttonStyles: React.CSSProperties = {
+    backgroundColor: customStyles?.buttonBgColor || '#000000',
+    color: customStyles?.buttonTextColor || '#ffffff',
+    borderRadius: customStyles?.buttonBorderRadius || '4px',
+    paddingLeft: customStyles?.buttonPaddingX || '20px',
+    paddingRight: customStyles?.buttonPaddingX || '20px',
+    paddingTop: customStyles?.buttonPaddingY || '12px',
+    paddingBottom: customStyles?.buttonPaddingY || '12px'
+  };
+
   return direction === 'prev' && type !== 'list' ? (
     <>
-      <div className="flex items-center justify-center">
+      <div
+        className="flex items-center justify-center"
+        style={{
+          marginTop: customStyles?.marginTop,
+          marginBottom: customStyles?.marginBottom
+        }}
+        data-section-id="pagination-section"
+      >
         <Button
           className={twMerge('px-5', moreButtonClassName)}
+          style={buttonStyles}
           onClick={() => handlePageChange()}
         >
           {isLoading ? (
@@ -174,15 +267,26 @@ export const Pagination = (props: PaginationProps) => {
   ) : (
     <>
       {type === 'more' && (
-        <div className="flex items-center justify-center">
+        <div
+          className="flex items-center justify-center"
+          style={{
+            marginTop: customStyles?.marginTop,
+            marginBottom: customStyles?.marginBottom
+          }}
+          data-section-id="pagination-section"
+        >
           <Button
             className={twMerge(
-              'px-5',
-              Number(nextPage) === Number(last)
-                ? 'bg-gray-600 border-gray-600 pointer-events-none'
-                : 'bg-black',
+              Number(nextPage) === Number(last) ? 'pointer-events-none' : '',
               moreButtonClassName
             )}
+            style={{
+              ...buttonStyles,
+              backgroundColor:
+                Number(nextPage) === Number(last)
+                  ? '#6b7280'
+                  : customStyles?.buttonBgColor || '#000000'
+            }}
             onClick={() => handlePageChange()}
             disabled={Number(nextPage) === Number(last)}
           >
@@ -210,9 +314,11 @@ export const Pagination = (props: PaginationProps) => {
       {type === 'list' && (
         <ul
           className={twMerge(
-            'mb-4 mt-8 flex items-center justify-center',
+            'flex items-center justify-center',
             containerClassName
           )}
+          style={containerStyles}
+          data-section-id="pagination-section"
         >
           {prev && currentPage !== 1 && (
             <li>
@@ -220,9 +326,10 @@ export const Pagination = (props: PaginationProps) => {
                 onClick={(e) => handleClick(e, prev)}
                 href={prev}
                 className={twMerge(
-                  'flex cursor-pointer px-2 text-sm items-center',
+                  'flex cursor-pointer px-2 items-center',
                   prevClassName
                 )}
+                style={arrowStyles}
               >
                 <span>&lt;</span>
                 <span className="ms-4 hidden lg:inline-block">
@@ -239,20 +346,24 @@ export const Pagination = (props: PaginationProps) => {
                   onClick={(e) => handleClick(e, item.url)}
                   href={item.url}
                   className={twMerge(
-                    clsx(
-                      'cursor-pointer px-2 text-xs items-center',
-                      { 'pointer-events-none': item.url === null },
-                      Number(page) === Number(item?.page)
-                        ? 'font-semibold text-black-800'
-                        : 'text-gray-400'
-                    ),
+                    clsx('cursor-pointer px-2 items-center', {
+                      'pointer-events-none': item.url === null
+                    }),
                     pageClassName
                   )}
+                  style={
+                    Number(page) === Number(item?.page)
+                      ? activePageStyles
+                      : pageStyles
+                  }
                 >
                   {item?.page}
                 </Link>
               ) : (
-                <span className="flex cursor-default items-center justify-center text-xs">
+                <span
+                  className="flex cursor-default items-center justify-center"
+                  style={pageStyles}
+                >
                   {item?.page}
                 </span>
               )}
@@ -265,9 +376,10 @@ export const Pagination = (props: PaginationProps) => {
                 onClick={(e) => handleClick(e, next)}
                 href={next}
                 className={twMerge(
-                  'flex cursor-pointer px-2 text-xs items-center',
+                  'flex cursor-pointer px-2 items-center',
                   nextClassName
                 )}
+                style={arrowStyles}
               >
                 <span className="me-4 hidden lg:inline-block">
                   {t('category.pagination.next')}

package/app-template/src/components/quantity-input.tsx

@@ -0,0 +1,63 @@
+import { Button, Icon, LoaderSpinner } from '@theme/components';
+
+interface QuantityInputProps {
+  quantity: number;
+  onChange?: (newQuantity: number) => void;
+  min?: number;
+  max?: number;
+  isLoading?: boolean;
+  disabled?: boolean;
+  className?: string;
+}
+
+export const QuantityInput = ({
+  quantity,
+  onChange,
+  min = 1,
+  max = 999,
+  isLoading = false,
+  disabled = false,
+  className = ''
+}: QuantityInputProps) => {
+  const handleDecrease = () => {
+    if (quantity > min && onChange) {
+      onChange(quantity - 1);
+    }
+  };
+
+  const handleIncrease = () => {
+    if (quantity < max && onChange) {
+      onChange(quantity + 1);
+    }
+  };
+
+  return (
+    <div
+      className={`w-[138px] h-11 flex items-center justify-between border p-4 ${className}`}
+    >
+      <Button
+        className="h-auto p-0 hover:bg-transparent hover:text-black"
+        appearance="ghost"
+        onClick={handleDecrease}
+        disabled={disabled || isLoading || quantity <= min}
+      >
+        <Icon name="minus" size={12} />
+      </Button>
+      <div>
+        {isLoading ? (
+          <LoaderSpinner className="w-4 h-4" />
+        ) : (
+          <span>{quantity}</span>
+        )}
+      </div>
+      <Button
+        className="h-auto p-0 hover:bg-transparent hover:text-black"
+        appearance="ghost"
+        onClick={handleIncrease}
+        disabled={disabled || isLoading || quantity >= max}
+      >
+        <Icon name="plus" size={12} />
+      </Button>
+    </div>
+  );
+};