@akinon/pz-theme 2.0.0-beta.21

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

@@ -0,0 +1,564 @@
+'use client';
+
+import React, { useState } from 'react';
+import clsx from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { useForm, SubmitHandler } from 'react-hook-form';
+import { yupResolver } from '@hookform/resolvers/yup';
+import * as yup from 'yup';
+
+import ThemeBlock, { Block } from '../theme-block';
+import { useThemeSettingsContext } from '../theme-settings-context';
+import {
+  getCSSStyles,
+  getResponsiveValue,
+  resolveThemeCssVariables
+} from '../utils';
+import { Section } from '../theme-section';
+import { Modal } from '@akinon/next/components/modal';
+import {
+  useGetContactSubjectsQuery,
+  useSendContactMutation
+} from '@akinon/next/data/client/account';
+import { ContactFormType } from '@akinon/next/types';
+
+interface ContactFormSectionProps {
+  section: Section;
+  currentBreakpoint?: string;
+  placeholderId?: string;
+  isDesigner?: boolean;
+  selectedBlockId?: string | null;
+}
+
+const contactFormSchema = yup.object().shape({
+  full_name: yup.string().required('Bu alan zorunludur.'),
+  email: yup
+    .string()
+    .email('Geçerli bir e-posta adresi girin.')
+    .required('Bu alan zorunludur.'),
+  phone: yup
+    .string()
+    .transform((value: string) => value.replace(/_/g, '').replace(/ /g, ''))
+    .length(11, 'Telefon numarası 11 haneli olmalıdır.')
+    .required('Bu alan zorunludur.'),
+  subject: yup.string().required('Bu alan zorunludur.'),
+  message: yup
+    .string()
+    .required('Bu alan zorunludur.')
+    .min(10, 'Mesaj en az 10 karakter olmalıdır.')
+    .label('message'),
+  order: yup
+    .string()
+    .nullable()
+    .notRequired()
+    .when('subject', {
+      is: (value: string) => value === '2',
+      then: yup.string().required('Bu alan zorunludur.')
+    }),
+  file: yup.mixed()
+});
+
+const readProperty = (
+  properties: Record<string, unknown> | undefined,
+  key: string,
+  fallback: string,
+  breakpoint: string
+): string => {
+  if (!properties) return fallback;
+  const raw = properties[key];
+  if (raw === undefined || raw === null) return fallback;
+  if (typeof raw === 'string') return raw;
+  if (typeof raw === 'object') {
+    const responsive = raw as Record<string, unknown>;
+    const picked =
+      responsive[breakpoint] ?? responsive.desktop ?? Object.values(responsive)[0];
+    return picked == null ? fallback : String(picked);
+  }
+  return String(raw);
+};
+
+const ContactFormSection: React.FC<ContactFormSectionProps> = ({
+  section,
+  currentBreakpoint = 'desktop',
+  placeholderId = '',
+  isDesigner = false,
+  selectedBlockId = null
+}) => {
+  const themeSettings = useThemeSettingsContext();
+
+  // RTK Query hooks
+  const {
+    data: contactSubjects,
+    isLoading: subjectsLoading,
+    isSuccess: subjectsSuccess
+  } = useGetContactSubjectsQuery();
+
+  const [
+    sendContact,
+    { isSuccess: formSuccess, isLoading: isSubmitting, error: submitError }
+  ] = useSendContactMutation();
+
+  // Build filtered subjects
+  const filteredSubjects: { label: string; value: string }[] = [
+    { label: readProperty(section.properties, 'subject-placeholder', 'Konu seçiniz', currentBreakpoint), value: '' }
+  ];
+
+  if (subjectsSuccess && contactSubjects) {
+    contactSubjects.forEach((item) => {
+      filteredSubjects.push({ label: item.text, value: String(item.id) });
+    });
+  }
+
+  const [selectedSubject, setSelectedSubject] = useState<string | null>(null);
+
+  // Feedback modal
+  const [feedbackModal, setFeedbackModal] = useState({
+    open: false,
+    title: '',
+    message: ''
+  });
+
+  // react-hook-form
+  const {
+    register,
+    reset,
+    handleSubmit,
+    formState: { errors }
+  // 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 showFileUpload =
+    showFileUploadRaw === false || showFileUploadRaw === 'false' ? false : true;
+  // Read section styles
+  const maxWidth = getResponsiveValue(
+    section.styles?.['max-width'],
+    currentBreakpoint,
+    'normal'
+  );
+  const maxWidthClass =
+    maxWidth === 'narrow'
+      ? 'max-w-4xl'
+      : maxWidth === 'normal'
+      ? 'max-w-7xl'
+      : '';
+  const hasMaxWidth = maxWidth !== 'none' && maxWidth !== 'full';
+
+  const formGap = getResponsiveValue(section.styles?.['form-gap'], currentBreakpoint, 16);
+
+  const inputBg = resolveThemeCssVariables(
+    String(getResponsiveValue(section.styles?.['input-background-color'], currentBreakpoint, '#ffffff')),
+    themeSettings
+  );
+  const inputTextColor = resolveThemeCssVariables(
+    String(getResponsiveValue(section.styles?.['input-text-color'], currentBreakpoint, '#0f172a')),
+    themeSettings
+  );
+  const inputBorderColor = resolveThemeCssVariables(
+    String(getResponsiveValue(section.styles?.['input-border-color'], currentBreakpoint, '#cbd5e1')),
+    themeSettings
+  );
+  const inputBorderRadius = String(
+    getResponsiveValue(section.styles?.['input-border-radius'], currentBreakpoint, '8px')
+  );
+  const inputPadding = String(
+    getResponsiveValue(section.styles?.['input-padding'], currentBreakpoint, '14px 16px')
+  );
+  const buttonBg = resolveThemeCssVariables(
+    String(getResponsiveValue(section.styles?.['button-background-color'], currentBreakpoint, '#0f172a')),
+    themeSettings
+  );
+  const buttonTextColor = resolveThemeCssVariables(
+    String(getResponsiveValue(section.styles?.['button-text-color'], currentBreakpoint, '#ffffff')),
+    themeSettings
+  );
+  const buttonHoverBg = resolveThemeCssVariables(
+    String(getResponsiveValue(section.styles?.['button-hover-background-color'], currentBreakpoint, '#1e293b')),
+    themeSettings
+  );
+  const buttonBorderRadius = String(
+    getResponsiveValue(section.styles?.['button-border-radius'], currentBreakpoint, '8px')
+  );
+  const buttonPadding = String(
+    getResponsiveValue(section.styles?.['button-padding'], currentBreakpoint, '14px 32px')
+  );
+
+  const filteredStyles = Object.fromEntries(
+    Object.entries(section.styles || {}).filter(
+      ([key]) =>
+        ![
+          'max-width',
+          'form-gap',
+          'input-background-color',
+          'input-text-color',
+          'input-border-color',
+          'input-border-radius',
+          'input-padding',
+          'button-background-color',
+          'button-text-color',
+          'button-hover-background-color',
+          'button-border-radius',
+          'button-padding'
+        ].includes(key)
+    )
+  );
+
+  const sectionStyles = getCSSStyles(filteredStyles, themeSettings, currentBreakpoint);
+
+  const inputStyle: React.CSSProperties = {
+    backgroundColor: inputBg,
+    color: inputTextColor,
+    border: `1px solid ${inputBorderColor}`,
+    borderRadius: inputBorderRadius,
+    padding: inputPadding,
+    fontSize: '15px',
+    outline: 'none',
+    width: '100%',
+    fontFamily: 'inherit'
+  };
+
+  const buttonStyle: React.CSSProperties = {
+    backgroundColor: buttonBg,
+    color: buttonTextColor,
+    border: 'none',
+    borderRadius: buttonBorderRadius,
+    padding: buttonPadding,
+    fontSize: '15px',
+    fontWeight: 600,
+    cursor: 'pointer',
+    transition: 'all 0.2s ease',
+    fontFamily: 'inherit'
+  };
+
+  // Blocks rendering
+  const sortedBlocks = [...(section.blocks || [])]
+    .sort((a, b) => (a.order || 0) - (b.order || 0))
+    .filter((block) => (isDesigner ? true : !block.hidden));
+
+  const contentGroup = sortedBlocks.find(
+    (block) => block.type === 'group' && block.label === 'Content Container'
+  );
+
+  const textBlocks: Block[] = [];
+  if (contentGroup?.blocks) {
+    contentGroup.blocks
+      .filter((b) => b.type === 'text')
+      .forEach((b) => textBlocks.push(b));
+  }
+
+  const postBlockAction = (type: string, blockId: string, label?: string) => {
+    if (!window.parent) return;
+    window.parent.postMessage(
+      {
+        type,
+        data: {
+          placeholderId,
+          sectionId: section.id,
+          blockId,
+          ...(label ? { label } : {})
+        }
+      },
+      '*'
+    );
+  };
+
+  const renderBlock = (block: Block) => (
+    <ThemeBlock
+      key={block.id}
+      block={block}
+      placeholderId={placeholderId}
+      sectionId={section.id}
+      isDesigner={isDesigner}
+      isSelected={selectedBlockId === block.id}
+      selectedBlockId={selectedBlockId}
+      currentBreakpoint={currentBreakpoint}
+      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)}
+      onDelete={() => postBlockAction('DELETE_BLOCK', block.id)}
+      onRename={(newLabel) => postBlockAction('RENAME_BLOCK', block.id, newLabel)}
+    />
+  );
+
+  // Form submit handler — uses useSendContactMutation
+  const onSubmit: SubmitHandler<ContactFormType> = (data) => {
+    if (isDesigner) return;
+
+    const formData = new FormData();
+
+    Object.keys(data ?? {}).forEach((key) => {
+      if (key === 'file' && data[key]) {
+        formData.append(key, (data[key] as FileList)[0]);
+      } else if (data[key] && key !== 'file') {
+        formData.append(key, String(data[key]));
+      }
+    });
+
+    sendContact(formData)
+      .unwrap()
+      .then(() => {
+        setFeedbackModal({
+          open: true,
+          title: 'Başarılı',
+          message: successMessage
+        });
+        reset();
+        setSelectedSubject(null);
+      })
+      .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)
+            );
+          if (entries.length > 0) msg = entries.join(' ');
+        }
+        setFeedbackModal({ open: true, title: 'Hata', message: msg });
+      });
+  };
+
+  const handleSubjectChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
+    setSelectedSubject(e.target.value);
+  };
+
+  const isMobile = currentBreakpoint === 'mobile';
+
+  const errorStyle: React.CSSProperties = {
+    color: '#ef4444',
+    fontSize: '12px',
+    marginTop: '4px'
+  };
+
+
+  return (
+    <>
+      <div
+        className={twMerge(
+          clsx(
+            'contact-form-section relative z-10 w-full',
+            hasMaxWidth && 'mx-auto',
+            maxWidthClass
+          )
+        )}
+        style={sectionStyles}
+        data-contact-form="true"
+      >
+        <div
+          style={{
+            display: 'flex',
+            flexDirection: 'column',
+            gap: '20px',
+            maxWidth: '600px',
+            width: '100%'
+          }}
+        >
+          {/* Render heading and description text blocks */}
+          {textBlocks.map(renderBlock)}
+
+          {/* Form */}
+          <form
+            onSubmit={handleSubmit(onSubmit)}
+            style={{ display: 'flex', flexDirection: 'column', gap: `${formGap}px` }}
+          >
+            {/* Name + Email row */}
+            <div
+              style={{
+                display: 'flex',
+                flexDirection: isMobile ? 'column' : 'row',
+                gap: `${formGap}px`
+              }}
+            >
+              <div style={{ flex: 1 }}>
+                <input
+                  type="text"
+                  placeholder={fullNamePlaceholder}
+                  {...register('full_name')}
+                  style={{
+                    ...inputStyle,
+                    borderColor: errors.full_name ? '#ef4444' : inputBorderColor
+                  }}
+                />
+                {errors.full_name && (
+                  <div style={errorStyle}>{errors.full_name.message}</div>
+                )}
+              </div>
+              <div style={{ flex: 1 }}>
+                <input
+                  type="email"
+                  placeholder={emailPlaceholder}
+                  {...register('email')}
+                  style={{
+                    ...inputStyle,
+                    borderColor: errors.email ? '#ef4444' : inputBorderColor
+                  }}
+                />
+                {errors.email && (
+                  <div style={errorStyle}>{errors.email.message}</div>
+                )}
+              </div>
+            </div>
+
+            {/* Phone */}
+            <div>
+              <input
+                type="tel"
+                placeholder={phonePlaceholder}
+                {...register('phone')}
+                style={{
+                  ...inputStyle,
+                  borderColor: errors.phone ? '#ef4444' : inputBorderColor
+                }}
+              />
+              {errors.phone && (
+                <div style={errorStyle}>{errors.phone.message}</div>
+              )}
+            </div>
+
+            {/* Subject — select from API */}
+            <div style={{ position: 'relative' }}>
+              {subjectsLoading && (
+                <div style={{ padding: '10px', fontSize: '13px', color: '#94a3b8' }}>
+                  Konular yükleniyor...
+                </div>
+              )}
+              {subjectsSuccess && (
+                <select
+                  {...register('subject')}
+                  onChange={(e) => {
+                    register('subject').onChange(e);
+                    handleSubjectChange(e);
+                  }}
+                  style={{
+                    ...inputStyle,
+                    appearance: 'none',
+                    WebkitAppearance: 'none',
+                    backgroundImage: `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E")`,
+                    backgroundRepeat: 'no-repeat',
+                    backgroundPosition: 'right 16px center',
+                    paddingRight: '40px',
+                    borderColor: errors.subject ? '#ef4444' : inputBorderColor
+                  }}
+                >
+                  {filteredSubjects.map((opt) => (
+                    <option key={opt.value} value={opt.value}>
+                      {opt.label}
+                    </option>
+                  ))}
+                </select>
+              )}
+              {errors.subject && (
+                <div style={errorStyle}>{errors.subject.message}</div>
+              )}
+            </div>
+
+            {/* Message */}
+            <div>
+              <textarea
+                placeholder={messagePlaceholder}
+                rows={5}
+                {...register('message')}
+                style={{
+                  ...inputStyle,
+                  minHeight: '120px',
+                  resize: 'vertical' as const,
+                  borderColor: errors.message ? '#ef4444' : inputBorderColor
+                }}
+              />
+              {errors.message && (
+                <div style={errorStyle}>{errors.message.message}</div>
+              )}
+            </div>
+
+            {/* File upload */}
+            {showFileUpload && (
+              <div>
+                <input
+                  type="file"
+                  // @ts-ignore - react-hook-form FileList type issue
+                  {...register('file')}
+                  style={{
+                    ...inputStyle,
+                    cursor: 'pointer'
+                  }}
+                />
+              </div>
+            )}
+
+            {/* Submit button */}
+            <div>
+              <button
+                type="submit"
+                disabled={isSubmitting}
+                style={{
+                  ...buttonStyle,
+                  opacity: isSubmitting ? 0.7 : 1
+                }}
+                onMouseEnter={(e) => {
+                  if (!isSubmitting) {
+                    (e.currentTarget as HTMLButtonElement).style.backgroundColor =
+                      buttonHoverBg;
+                  }
+                }}
+                onMouseLeave={(e) => {
+                  (e.currentTarget as HTMLButtonElement).style.backgroundColor =
+                    buttonBg;
+                }}
+              >
+                {isSubmitting ? 'Gönderiliyor...' : buttonText}
+              </button>
+            </div>
+
+            {/* Server-side errors */}
+            {submitError && (
+              <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>
+                      )
+                    )
+                  : errorMessageText}
+              </div>
+            )}
+          </form>
+        </div>
+      </div>
+
+      <Modal
+        portalId={`contact-form-feedback-${section.id}`}
+        open={feedbackModal.open}
+        setOpen={(open) =>
+          setFeedbackModal((prev) => ({ ...prev, open }))
+        }
+        title={feedbackModal.title}
+        showCloseButton={true}
+        className="w-[92vw] max-w-[420px] rounded"
+      >
+        <div className="p-6 text-sm leading-6 text-center text-black">
+          {feedbackModal.message}
+        </div>
+      </Modal>
+    </>
+  );
+};
+
+export default ContactFormSection;