@akinon/pz-theme 2.0.35-rc.0 → 2.0.35

package/src/sections/contact-form-section.tsx

@@ -22,6 +22,8 @@ import {
 } from '@akinon/next/data/client/account';
 import { ContactFormType } from '@akinon/next/types';
 
+import { postToEditor } from '../editor-bridge';
+import { PreviewToEditorMessageType } from '@akinon/theme-contract';
 interface ContactFormSectionProps {
   section: Section;
   currentBreakpoint?: string;
@@ -71,7 +73,9 @@ const readProperty = (
   if (typeof raw === 'object') {
     const responsive = raw as Record<string, unknown>;
     const picked =
-      responsive[breakpoint] ?? responsive.desktop ?? Object.values(responsive)[0];
+      responsive[breakpoint] ??
+      responsive.desktop ??
+      Object.values(responsive)[0];
     return picked == null ? fallback : String(picked);
   }
   return String(raw);
@@ -100,7 +104,15 @@ const ContactFormSection: React.FC<ContactFormSectionProps> = ({
 
   // Build filtered subjects
   const filteredSubjects: { label: string; value: string }[] = [
-    { label: readProperty(section.properties, 'subject-placeholder', 'Konu seçiniz', currentBreakpoint), value: '' }
+    {
+      label: readProperty(
+        section.properties,
+        'subject-placeholder',
+        'Konu seçiniz',
+        currentBreakpoint
+      ),
+      value: ''
+    }
   ];
 
   if (subjectsSuccess && contactSubjects) {
@@ -124,21 +136,60 @@ const ContactFormSection: React.FC<ContactFormSectionProps> = ({
     reset,
     handleSubmit,
     formState: { errors }
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
   } = useForm<ContactFormType & Record<string, any>>({
     resolver: yupResolver(contactFormSchema) as any
   });
 
   // Read section properties
   const props = section.properties || {};
-  const fullNamePlaceholder = readProperty(props, 'full-name-placeholder', 'Adınız Soyadınız', currentBreakpoint);
-  const emailPlaceholder = readProperty(props, 'email-placeholder', 'E-posta adresiniz', currentBreakpoint);
-  const phonePlaceholder = readProperty(props, 'phone-placeholder', 'Telefon numaranız', currentBreakpoint);
-  const messagePlaceholder = readProperty(props, 'message-placeholder', 'Mesajınızı yazın...', currentBreakpoint);
-  const buttonText = readProperty(props, 'button-text', 'Gönder', currentBreakpoint);
-  const successMessage = readProperty(props, 'success-message', 'Mesajınız başarıyla gönderildi!', currentBreakpoint);
-  const errorMessageText = readProperty(props, 'error-message', 'Bir hata oluştu. Lütfen tekrar deneyin.', currentBreakpoint);
-  const showFileUploadRaw = getResponsiveValue(props['show-file-upload'], currentBreakpoint, true);
+  const fullNamePlaceholder = readProperty(
+    props,
+    'full-name-placeholder',
+    'Adınız Soyadınız',
+    currentBreakpoint
+  );
+  const emailPlaceholder = readProperty(
+    props,
+    'email-placeholder',
+    'E-posta adresiniz',
+    currentBreakpoint
+  );
+  const phonePlaceholder = readProperty(
+    props,
+    'phone-placeholder',
+    'Telefon numaranız',
+    currentBreakpoint
+  );
+  const messagePlaceholder = readProperty(
+    props,
+    'message-placeholder',
+    'Mesajınızı yazın...',
+    currentBreakpoint
+  );
+  const buttonText = readProperty(
+    props,
+    'button-text',
+    'Gönder',
+    currentBreakpoint
+  );
+  const successMessage = readProperty(
+    props,
+    'success-message',
+    'Mesajınız başarıyla gönderildi!',
+    currentBreakpoint
+  );
+  const errorMessageText = readProperty(
+    props,
+    'error-message',
+    'Bir hata oluştu. Lütfen tekrar deneyin.',
+    currentBreakpoint
+  );
+  const showFileUploadRaw = getResponsiveValue(
+    props['show-file-upload'],
+    currentBreakpoint,
+    true
+  );
   const showFileUpload =
     showFileUploadRaw === false || showFileUploadRaw === 'false' ? false : true;
   // Read section styles
@@ -155,43 +206,99 @@ const ContactFormSection: React.FC<ContactFormSectionProps> = ({
       : '';
   const hasMaxWidth = maxWidth !== 'none' && maxWidth !== 'full';
 
-  const formGap = getResponsiveValue(section.styles?.['form-gap'], currentBreakpoint, 16);
+  const formGap = getResponsiveValue(
+    section.styles?.['form-gap'],
+    currentBreakpoint,
+    16
+  );
 
   const inputBg = resolveThemeCssVariables(
-    String(getResponsiveValue(section.styles?.['input-background-color'], currentBreakpoint, '#ffffff')),
+    String(
+      getResponsiveValue(
+        section.styles?.['input-background-color'],
+        currentBreakpoint,
+        '#ffffff'
+      )
+    ),
     themeSettings
   );
   const inputTextColor = resolveThemeCssVariables(
-    String(getResponsiveValue(section.styles?.['input-text-color'], currentBreakpoint, '#0f172a')),
+    String(
+      getResponsiveValue(
+        section.styles?.['input-text-color'],
+        currentBreakpoint,
+        '#0f172a'
+      )
+    ),
     themeSettings
   );
   const inputBorderColor = resolveThemeCssVariables(
-    String(getResponsiveValue(section.styles?.['input-border-color'], currentBreakpoint, '#cbd5e1')),
+    String(
+      getResponsiveValue(
+        section.styles?.['input-border-color'],
+        currentBreakpoint,
+        '#cbd5e1'
+      )
+    ),
     themeSettings
   );
   const inputBorderRadius = String(
-    getResponsiveValue(section.styles?.['input-border-radius'], currentBreakpoint, '8px')
+    getResponsiveValue(
+      section.styles?.['input-border-radius'],
+      currentBreakpoint,
+      '8px'
+    )
   );
   const inputPadding = String(
-    getResponsiveValue(section.styles?.['input-padding'], currentBreakpoint, '14px 16px')
+    getResponsiveValue(
+      section.styles?.['input-padding'],
+      currentBreakpoint,
+      '14px 16px'
+    )
   );
   const buttonBg = resolveThemeCssVariables(
-    String(getResponsiveValue(section.styles?.['button-background-color'], currentBreakpoint, '#0f172a')),
+    String(
+      getResponsiveValue(
+        section.styles?.['button-background-color'],
+        currentBreakpoint,
+        '#0f172a'
+      )
+    ),
     themeSettings
   );
   const buttonTextColor = resolveThemeCssVariables(
-    String(getResponsiveValue(section.styles?.['button-text-color'], currentBreakpoint, '#ffffff')),
+    String(
+      getResponsiveValue(
+        section.styles?.['button-text-color'],
+        currentBreakpoint,
+        '#ffffff'
+      )
+    ),
     themeSettings
   );
   const buttonHoverBg = resolveThemeCssVariables(
-    String(getResponsiveValue(section.styles?.['button-hover-background-color'], currentBreakpoint, '#1e293b')),
+    String(
+      getResponsiveValue(
+        section.styles?.['button-hover-background-color'],
+        currentBreakpoint,
+        '#1e293b'
+      )
+    ),
     themeSettings
   );
   const buttonBorderRadius = String(
-    getResponsiveValue(section.styles?.['button-border-radius'], currentBreakpoint, '8px')
+    getResponsiveValue(
+      section.styles?.['button-border-radius'],
+      currentBreakpoint,
+      '8px'
+    )
   );
   const buttonPadding = String(
-    getResponsiveValue(section.styles?.['button-padding'], currentBreakpoint, '14px 32px')
+    getResponsiveValue(
+      section.styles?.['button-padding'],
+      currentBreakpoint,
+      '14px 32px'
+    )
   );
 
   const filteredStyles = Object.fromEntries(
@@ -214,7 +321,11 @@ const ContactFormSection: React.FC<ContactFormSectionProps> = ({
     )
   );
 
-  const sectionStyles = getCSSStyles(filteredStyles, themeSettings, currentBreakpoint);
+  const sectionStyles = getCSSStyles(
+    filteredStyles,
+    themeSettings,
+    currentBreakpoint
+  );
 
   const inputStyle: React.CSSProperties = {
     backgroundColor: inputBg,
@@ -257,20 +368,21 @@ const ContactFormSection: React.FC<ContactFormSectionProps> = ({
       .forEach((b) => textBlocks.push(b));
   }
 
-  const postBlockAction = (type: string, blockId: string, label?: string) => {
+  const postBlockAction = (
+    type: PreviewToEditorMessageType,
+    blockId: string,
+    label?: string
+  ) => {
     if (!window.parent) return;
-    window.parent.postMessage(
-      {
-        type,
-        data: {
-          placeholderId,
-          sectionId: section.id,
-          blockId,
-          ...(label ? { label } : {})
-        }
-      },
-      '*'
-    );
+    postToEditor({
+      type,
+      data: {
+        placeholderId,
+        sectionId: section.id,
+        blockId,
+        ...(label ? { label } : {})
+      }
+    });
   };
 
   const renderBlock = (block: Block) => (
@@ -286,9 +398,13 @@ const ContactFormSection: React.FC<ContactFormSectionProps> = ({
       onMoveUp={() => postBlockAction('MOVE_BLOCK_UP', block.id)}
       onMoveDown={() => postBlockAction('MOVE_BLOCK_DOWN', block.id)}
       onDuplicate={() => postBlockAction('DUPLICATE_BLOCK', block.id)}
-      onToggleVisibility={() => postBlockAction('TOGGLE_BLOCK_VISIBILITY', block.id)}
+      onToggleVisibility={() =>
+        postBlockAction('TOGGLE_BLOCK_VISIBILITY', block.id)
+      }
       onDelete={() => postBlockAction('DELETE_BLOCK', block.id)}
-      onRename={(newLabel) => postBlockAction('RENAME_BLOCK', block.id, newLabel)}
+      onRename={(newLabel) =>
+        postBlockAction('RENAME_BLOCK', block.id, newLabel)
+      }
     />
   );
 
@@ -320,10 +436,9 @@ const ContactFormSection: React.FC<ContactFormSectionProps> = ({
       .catch((err) => {
         let msg = errorMessageText;
         if (err?.data && typeof err.data === 'object') {
-          const entries = Object.entries(err.data)
-            .map(([, msgs]) =>
-              Array.isArray(msgs) ? msgs.join(', ') : String(msgs)
-            );
+          const entries = Object.entries(err.data).map(([, msgs]) =>
+            Array.isArray(msgs) ? msgs.join(', ') : String(msgs)
+          );
           if (entries.length > 0) msg = entries.join(' ');
         }
         setFeedbackModal({ open: true, title: 'Hata', message: msg });
@@ -342,7 +457,6 @@ const ContactFormSection: React.FC<ContactFormSectionProps> = ({
     marginTop: '4px'
   };
 
-
   return (
     <>
       <div
@@ -371,7 +485,11 @@ const ContactFormSection: React.FC<ContactFormSectionProps> = ({
           {/* Form */}
           <form
             onSubmit={handleSubmit(onSubmit)}
-            style={{ display: 'flex', flexDirection: 'column', gap: `${formGap}px` }}
+            style={{
+              display: 'flex',
+              flexDirection: 'column',
+              gap: `${formGap}px`
+            }}
           >
             {/* Name + Email row */}
             <div
@@ -430,7 +548,13 @@ const ContactFormSection: React.FC<ContactFormSectionProps> = ({
             {/* Subject — select from API */}
             <div style={{ position: 'relative' }}>
               {subjectsLoading && (
-                <div style={{ padding: '10px', fontSize: '13px', color: '#94a3b8' }}>
+                <div
+                  style={{
+                    padding: '10px',
+                    fontSize: '13px',
+                    color: '#94a3b8'
+                  }}
+                >
                   Konular yükleniyor...
                 </div>
               )}
@@ -508,8 +632,9 @@ const ContactFormSection: React.FC<ContactFormSectionProps> = ({
                 }}
                 onMouseEnter={(e) => {
                   if (!isSubmitting) {
-                    (e.currentTarget as HTMLButtonElement).style.backgroundColor =
-                      buttonHoverBg;
+                    (
+                      e.currentTarget as HTMLButtonElement
+                    ).style.backgroundColor = buttonHoverBg;
                   }
                 }}
                 onMouseLeave={(e) => {
@@ -523,19 +648,21 @@ const ContactFormSection: React.FC<ContactFormSectionProps> = ({
 
             {/* Server-side errors */}
             {submitError && (
-              <div style={{ color: '#ef4444', fontSize: '13px', marginTop: '4px' }}>
+              <div
+                style={{ color: '#ef4444', fontSize: '13px', marginTop: '4px' }}
+              >
                 {'data' in submitError &&
                 submitError.data &&
                 typeof submitError.data === 'object'
-                  ? Object.entries(submitError.data as Record<string, unknown>).map(
-                      ([field, messages]) => (
-                        <div key={field}>
-                          {Array.isArray(messages)
-                            ? messages.join(', ')
-                            : String(messages)}
-                        </div>
-                      )
-                    )
+                  ? Object.entries(
+                      submitError.data as Record<string, unknown>
+                    ).map(([field, messages]) => (
+                      <div key={field}>
+                        {Array.isArray(messages)
+                          ? messages.join(', ')
+                          : String(messages)}
+                      </div>
+                    ))
                   : errorMessageText}
               </div>
             )}
@@ -546,9 +673,7 @@ const ContactFormSection: React.FC<ContactFormSectionProps> = ({
       <Modal
         portalId={`contact-form-feedback-${section.id}`}
         open={feedbackModal.open}
-        setOpen={(open) =>
-          setFeedbackModal((prev) => ({ ...prev, open }))
-        }
+        setOpen={(open) => setFeedbackModal((prev) => ({ ...prev, open }))}
         title={feedbackModal.title}
         showCloseButton={true}
         className="w-[92vw] max-w-[420px] rounded"

package/src/sections/countdown-campaign-banner-section.tsx

@@ -14,6 +14,8 @@ import {
 } from '../utils';
 import { Section } from '../theme-section';
 
+import { postToEditor } from '../editor-bridge';
+import { PreviewToEditorMessageType } from '@akinon/theme-contract';
 interface CountdownCampaignBannerSectionProps {
   section: Section;
   currentBreakpoint?: string;
@@ -87,7 +89,8 @@ const parseNumber = (value: unknown, fallback: number): number => {
 const clampNumber = (value: number, min: number, max: number) =>
   Math.min(Math.max(value, min), max);
 
-const formatTwoDigits = (value: number) => String(Math.max(0, value)).padStart(2, '0');
+const formatTwoDigits = (value: number) =>
+  String(Math.max(0, value)).padStart(2, '0');
 
 const parseBoolean = (value: unknown, fallback: boolean): boolean => {
   if (typeof value === 'boolean') return value;
@@ -166,7 +169,9 @@ const getRemainingTime = (
   };
 };
 
-const CountdownCampaignBannerSection: React.FC<CountdownCampaignBannerSectionProps> = ({
+const CountdownCampaignBannerSection: React.FC<
+  CountdownCampaignBannerSectionProps
+> = ({
   section,
   currentBreakpoint = 'desktop',
   placeholderId = '',
@@ -203,7 +208,11 @@ const CountdownCampaignBannerSection: React.FC<CountdownCampaignBannerSectionPro
   const endDate = useMemo(() => parseEndDate(endDateRaw), [endDateRaw]);
 
   const showSeconds = parseBoolean(
-    getResponsiveValue(section.properties?.['show-seconds'], currentBreakpoint, true),
+    getResponsiveValue(
+      section.properties?.['show-seconds'],
+      currentBreakpoint,
+      true
+    ),
     true
   );
 
@@ -256,7 +265,11 @@ const CountdownCampaignBannerSection: React.FC<CountdownCampaignBannerSectionPro
     )
   );
 
-  const sectionStyles = getCSSStyles(filteredStyles, themeSettings, currentBreakpoint);
+  const sectionStyles = getCSSStyles(
+    filteredStyles,
+    themeSettings,
+    currentBreakpoint
+  );
   const backgroundImageSrc = useMemo(() => {
     if (!backgroundBlock) return '';
     const raw = pickImageSource(backgroundBlock.value, currentBreakpoint);
@@ -266,14 +279,22 @@ const CountdownCampaignBannerSection: React.FC<CountdownCampaignBannerSectionPro
 
   const overlayColor = resolveThemeCssVariables(
     String(
-      getResponsiveValue(section.styles?.['overlay-color'], currentBreakpoint, '#0f172a')
+      getResponsiveValue(
+        section.styles?.['overlay-color'],
+        currentBreakpoint,
+        '#0f172a'
+      )
     ),
     themeSettings
   );
   const overlayOpacity =
     clampNumber(
       parseNumber(
-        getResponsiveValue(section.styles?.['overlay-opacity'], currentBreakpoint, 45),
+        getResponsiveValue(
+          section.styles?.['overlay-opacity'],
+          currentBreakpoint,
+          45
+        ),
         45
       ),
       0,
@@ -293,39 +314,55 @@ const CountdownCampaignBannerSection: React.FC<CountdownCampaignBannerSectionPro
   );
   const timerTextColor = resolveThemeCssVariables(
     String(
-      getResponsiveValue(section.styles?.['timer-text-color'], currentBreakpoint, '#0f172a')
+      getResponsiveValue(
+        section.styles?.['timer-text-color'],
+        currentBreakpoint,
+        '#0f172a'
+      )
     ),
     themeSettings
   );
   const timerLabelColor = resolveThemeCssVariables(
     String(
-      getResponsiveValue(section.styles?.['timer-label-color'], currentBreakpoint, '#64748b')
+      getResponsiveValue(
+        section.styles?.['timer-label-color'],
+        currentBreakpoint,
+        '#64748b'
+      )
     ),
     themeSettings
   );
   const timerBorderRadius = String(
-    getResponsiveValue(section.styles?.['timer-border-radius'], currentBreakpoint, '10px')
+    getResponsiveValue(
+      section.styles?.['timer-border-radius'],
+      currentBreakpoint,
+      '10px'
+    )
   );
   const timerGap = clampNumber(
-    parseNumber(getResponsiveValue(section.styles?.['timer-gap'], currentBreakpoint, 10), 10),
+    parseNumber(
+      getResponsiveValue(section.styles?.['timer-gap'], currentBreakpoint, 10),
+      10
+    ),
     0,
     32
   );
 
-  const postBlockAction = (type: string, blockId: string, label?: string) => {
+  const postBlockAction = (
+    type: PreviewToEditorMessageType,
+    blockId: string,
+    label?: string
+  ) => {
     if (!window.parent) return;
-    window.parent.postMessage(
-      {
-        type,
-        data: {
-          placeholderId,
-          sectionId: section.id,
-          blockId,
-          ...(label ? { label } : {})
-        }
-      },
-      '*'
-    );
+    postToEditor({
+      type,
+      data: {
+        placeholderId,
+        sectionId: section.id,
+        blockId,
+        ...(label ? { label } : {})
+      }
+    });
   };
 
   const renderBlock = (block: Block) => (
@@ -341,9 +378,13 @@ const CountdownCampaignBannerSection: React.FC<CountdownCampaignBannerSectionPro
       onMoveUp={() => postBlockAction('MOVE_BLOCK_UP', block.id)}
       onMoveDown={() => postBlockAction('MOVE_BLOCK_DOWN', block.id)}
       onDuplicate={() => postBlockAction('DUPLICATE_BLOCK', block.id)}
-      onToggleVisibility={() => postBlockAction('TOGGLE_BLOCK_VISIBILITY', block.id)}
+      onToggleVisibility={() =>
+        postBlockAction('TOGGLE_BLOCK_VISIBILITY', block.id)
+      }
       onDelete={() => postBlockAction('DELETE_BLOCK', block.id)}
-      onRename={(newLabel) => postBlockAction('RENAME_BLOCK', block.id, newLabel)}
+      onRename={(newLabel) =>
+        postBlockAction('RENAME_BLOCK', block.id, newLabel)
+      }
     />
   );
 
@@ -372,7 +413,9 @@ const CountdownCampaignBannerSection: React.FC<CountdownCampaignBannerSectionPro
       style={{ ...sectionStyles, position: 'relative' }}
     >
       {backgroundBlock && backgroundImageSrc ? (
-        <div className="absolute inset-0 z-0">{renderBlock(backgroundBlock)}</div>
+        <div className="absolute inset-0 z-0">
+          {renderBlock(backgroundBlock)}
+        </div>
       ) : (
         <div className="absolute inset-0 z-0 bg-slate-600" />
       )}
@@ -397,7 +440,10 @@ const CountdownCampaignBannerSection: React.FC<CountdownCampaignBannerSectionPro
             {expiredMessage}
           </div>
         ) : (
-          <div className="flex flex-wrap items-stretch" style={{ gap: `${timerGap}px` }}>
+          <div
+            className="flex flex-wrap items-stretch"
+            style={{ gap: `${timerGap}px` }}
+          >
             {timerUnits.map((unit) => (
               <div
                 key={unit.key}