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

package/app-template/src/components/generate-form-fields.tsx

@@ -7,6 +7,7 @@ import { useForm } from 'react-hook-form';
 import { yupResolver } from '@hookform/resolvers/yup';
 import * as yup from 'yup';
 import DynamicForm from './dynamic-form';
+
 import {
   AllFieldClassesType,
   FieldPropertiesType,
@@ -14,6 +15,7 @@ import {
   FormPropertiesType,
   Schema
 } from '@akinon/next/types';
+import { useLocalization } from '@akinon/next/hooks';
 
 export function GenerateFormFields({
   schema,
@@ -28,8 +30,14 @@ export function GenerateFormFields({
   formProperties: FormPropertiesType;
   submitButtonText: string;
 }) {
+  const { t } = useLocalization();
   const [fields, setFields] = useState([]);
   const [loading, setIsLoading] = useState(true);
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [submitStatus, setSubmitStatus] = useState<
+    'idle' | 'success' | 'error'
+  >('idle');
+  const [submitMessage, setSubmitMessage] = useState('');
 
   const generateValidationSchema = () => {
     const schemaObject = {};
@@ -80,6 +88,7 @@ export function GenerateFormFields({
   const {
     handleSubmit,
     register,
+    reset,
     formState: { errors }
   } = useForm<FormField>({
     resolver: yupResolver(generateValidationSchema())
@@ -108,6 +117,10 @@ export function GenerateFormFields({
   }, [schema, fieldProperties]);
 
   const onSubmit = async (data) => {
+    setIsSubmitting(true);
+    setSubmitStatus('idle');
+    setSubmitMessage('');
+
     try {
       const formData = new FormData();
 
@@ -115,12 +128,25 @@ export function GenerateFormFields({
         formData.append(key, data[key]);
       });
 
-      fetch(formProperties.actionUrl, {
+      const response = await fetch(formProperties.actionUrl, {
         method: 'POST',
         body: formData
       });
+
+      if (response.ok) {
+        setSubmitStatus('success');
+        setSubmitMessage(t('common.forms.success'));
+        reset();
+      } else {
+        setSubmitStatus('error');
+        setSubmitMessage(t('common.forms.error'));
+      }
     } catch (error) {
-      console.error('Form submit error:', error);
+      console.error(t('common.forms.submit_error'), error);
+      setSubmitStatus('error');
+      setSubmitMessage(t('common.forms.error'));
+    } finally {
+      setIsSubmitting(false);
     }
   };
 
@@ -157,7 +183,7 @@ export function GenerateFormFields({
               className={twMerge(allFieldClasses?.className, field.class)}
               name={field.key}
               {...field.attributes}
-              error={errors[field.key]}
+              error={errors[field.key] as any}
               {...register(field.key)}
             />
           </div>
@@ -187,7 +213,7 @@ export function GenerateFormFields({
               className={twMerge(allFieldClasses?.className, field?.class)}
               name={field.key}
               {...field.attributes}
-              error={errors[field.key]}
+              error={errors[field.key] as any}
               {...register(field.key, { valueAsNumber: true })}
             />
           </div>
@@ -220,7 +246,7 @@ export function GenerateFormFields({
             />
             {errors[field.key] && (
               <span className="mt-1 text-sm text-error">
-                {errors[field.key].message}
+                {String(errors[field.key].message)}
               </span>
             )}
           </div>
@@ -251,7 +277,7 @@ export function GenerateFormFields({
               className={twMerge(allFieldClasses?.className, field?.class)}
               name={field.key}
               {...field.attributes}
-              error={errors[field.key]}
+              error={errors[field.key] as any}
               {...register(field.key)}
             />
           </div>
@@ -285,7 +311,7 @@ export function GenerateFormFields({
                 label: choice
               }))}
               {...field.attributes}
-              error={errors[field.key]}
+              error={errors[field.key] as any}
               {...register(field.key)}
             />
           </div>
@@ -316,7 +342,7 @@ export function GenerateFormFields({
               className={twMerge(allFieldClasses?.className, field?.class)}
               name={field.key}
               {...field.attributes}
-              error={errors[field.key]}
+              error={errors[field.key] as any}
               {...register(field.key)}
             />
           </div>
@@ -337,9 +363,22 @@ export function GenerateFormFields({
           <LoaderSpinner />
         ) : (
           <>
+            {submitStatus === 'success' && (
+              <div className="mb-4 p-3 bg-green-100 border border-green-400 text-green-700 rounded">
+                {submitMessage}
+              </div>
+            )}
+
+            {submitStatus === 'error' && (
+              <div className="mb-4 p-3 bg-red-100 border border-red-400 text-red-700 rounded">
+                {submitMessage}
+              </div>
+            )}
+
             {fields.map((field: FormField) => generateField(field))}
-            <Button type="submit" className="w-full">
-              {submitButtonText}
+
+            <Button type="submit" className="w-full" disabled={isSubmitting}>
+              {isSubmitting ? t('common.forms.sending') : submitButtonText}
             </Button>
           </>
         )}

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/input.tsx

@@ -48,7 +48,13 @@ export const Input = forwardRef<
     props.className
   );
 
-  const inputProps: any = {
+  const inputProps: {
+    id?: string;
+    ref?: Ref<HTMLInputElement>;
+    className?: string;
+    onFocus?: () => void;
+    onBlur?: (event: FocusEvent<HTMLInputElement>) => void;
+  } = {
     id,
     ref,
     className: inputClass,
@@ -112,7 +118,7 @@ export const Input = forwardRef<
         )}
       </div>
       {error && (
-        <span className="mt-1 text-sm text-error">{error.message}</span>
+        <span className="mt-1 text-sm text-error">{String(error.message)}</span>
       )}
     </div>
   );

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/modal.tsx

@@ -4,16 +4,7 @@ import ReactPortal from './react-portal';
 import { Icon } from './icon';
 import { twMerge } from 'tailwind-merge';
 import { useEffect } from 'react';
-
-export interface ModalProps {
-  portalId: string;
-  children?: React.ReactNode;
-  open?: boolean;
-  setOpen?: (open: boolean) => void;
-  title?: React.ReactNode;
-  showCloseButton?: React.ReactNode;
-  className?: string;
-}
+import { ModalProps } from '@theme/types';
 
 export const Modal = (props: ModalProps) => {
   const {
@@ -23,7 +14,14 @@ export const Modal = (props: ModalProps) => {
     setOpen,
     title = '',
     showCloseButton = true,
-    className
+    className,
+    overlayClassName,
+    headerWrapperClassName,
+    titleClassName,
+    closeButtonClassName,
+    iconName = 'close',
+    iconSize = 16,
+    iconClassName
   } = props;
 
   useEffect(() => {
@@ -38,23 +36,43 @@ export const Modal = (props: ModalProps) => {
 
   return (
     <ReactPortal wrapperId={portalId}>
-      <div className="fixed top-0 left-0 w-screen h-screen bg-primary bg-opacity-60 z-50" />
+      <div
+        className={twMerge(
+          'fixed top-0 left-0 w-screen h-screen bg-primary bg-opacity-60 z-50',
+          overlayClassName
+        )}
+        onClick={(e) => e.stopPropagation()}
+      />
       <section
         className={twMerge(
           'fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 z-50 bg-white',
           className
         )}
+        onClick={(e) => e.stopPropagation()}
       >
         {(showCloseButton || title) && (
-          <div className="flex px-6 py-4 border-b border-gray-400">
-            {title && <h3 className="text-lg font-light">{title}</h3>}
+          <div
+            className={twMerge(
+              'flex px-6 py-4 border-b border-gray-400',
+              headerWrapperClassName
+            )}
+          >
+            {title && (
+              <h3 className={twMerge('text-lg font-light', titleClassName)}>
+                {title}
+              </h3>
+            )}
             {showCloseButton && (
               <button
                 type="button"
                 onClick={() => setOpen(false)}
-                className="ml-auto"
+                className={twMerge('ml-auto', closeButtonClassName)}
               >
-                <Icon name="close" size={16} />
+                <Icon
+                  name={iconName}
+                  size={iconSize}
+                  className={iconClassName}
+                />
               </button>
             )}
           </div>

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(() => {
@@ -125,6 +152,7 @@ export const Pagination = (props: PaginationProps) => {
       setPrevPage(1);
       setNextPage(1);
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [page]);
 
   useEffect(() => {
@@ -155,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 ? (
@@ -173,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)}
           >
@@ -209,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>
@@ -219,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">
@@ -238,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>
               )}
@@ -264,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/price.tsx

@@ -56,7 +56,7 @@ export const Price = (props: NumericFormatProps & PriceProps) => {
 
   const currentCurrencyDecimalScale = Settings.localization.currencies.find(
     (currency) => currency.code === currencyCode_
-  ).decimalScale;
+  )?.decimalScale;
 
   return (
     <NumericFormat

package/app-template/src/components/pwa-tags.tsx

@@ -2,6 +2,7 @@ import { Metadata } from '@akinon/next/types';
 
 const pwaTags: Metadata = {
   manifest: '/manifest.json',
+  themeColor: '#FFFFFF',
   formatDetection: {
     telephone: false
   },