@akinon/next 2.0.0-beta.20 → 2.0.0-beta.22

package/components/theme-editor/sections/contact-form-section.tsx

@@ -1,563 +0,0 @@
-'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 '../../modal';
-import {
-  useGetContactSubjectsQuery,
-  useSendContactMutation
-} from '../../../data/client/account';
-import { ContactFormType } from '../../../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 }
-  } = useForm<ContactFormType>({
-    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;