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

package/components/theme-editor/blocks/button-block.tsx

@@ -1,593 +0,0 @@
-'use client';
-
-import React, { useEffect, useState } from 'react';
-import { useLocalization } from '@akinon/next/hooks';
-import { useEmailSubscriptionMutation } from '../../../data/client/misc';
-import { Modal } from '../../modal';
-import {
-  colorToRgba,
-  getResponsiveValue,
-  resolveThemeCssVariables
-} from '../utils';
-import { BlockRendererProps } from './block-renderer-registry';
-import { useThemeSettingsContext } from '../theme-settings-context';
-
-const ButtonBlock = ({
-  block,
-  currentBreakpoint = 'desktop',
-  isDesigner = false
-}: BlockRendererProps) => {
-  const themeSettings = useThemeSettingsContext();
-  const { locale } = useLocalization();
-  const [emailSubscription] = useEmailSubscriptionMutation();
-  const [feedbackModal, setFeedbackModal] = useState({
-    open: false,
-    title: '',
-    message: ''
-  });
-  const defaultLocale = process.env.NEXT_PUBLIC_DEFAULT_LOCALE || 'en';
-
-  const getStyleEntry = (kebabKey: string) => {
-    if (!block.styles) return undefined;
-    const styles = block.styles as Record<string, unknown>;
-    const camelKey = kebabKey.replace(/-([a-z])/g, (_, letter) =>
-      letter.toUpperCase()
-    );
-    return styles[kebabKey] ?? styles[camelKey];
-  };
-
-  const normalizeKey = (key: string): string => {
-    if (key.includes('-')) return key;
-    return key.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
-  };
-
-  const getLocalizedText = (textValue: unknown): string => {
-    let value = textValue;
-
-    if (typeof value === 'string' && value.startsWith('{')) {
-      try {
-        value = JSON.parse(value);
-      } catch (e) {
-        return String(value);
-      }
-    }
-
-    if (typeof value === 'object' && value !== null) {
-      const localized = value as Record<string, unknown>;
-      if (localized[locale]) {
-        return String(localized[locale]);
-      }
-      if (localized[defaultLocale]) {
-        return String(localized[defaultLocale]);
-      }
-
-      const responsiveValue = getResponsiveValue(
-        value,
-        currentBreakpoint,
-        'Click Me'
-      );
-      if (responsiveValue && responsiveValue !== 'Click Me') {
-        return String(responsiveValue);
-      }
-
-      const firstValue = Object.values(localized)[0];
-      return typeof firstValue === 'string' ? firstValue : 'Click Me';
-    }
-
-    if (typeof value === 'string') {
-      return value;
-    }
-
-    return 'Click Me';
-  };
-
-  const textValue = block.properties?.text || block.value;
-  const text = getLocalizedText(textValue);
-
-  const url = block.properties?.url
-    ? String(getResponsiveValue(block.properties.url, currentBreakpoint, '#'))
-    : '#';
-
-  const target = block.properties?.target
-    ? String(
-        getResponsiveValue(block.properties.target, currentBreakpoint, '_self')
-      )
-    : '_self';
-
-  const tag = block.properties?.tag
-    ? String(getResponsiveValue(block.properties.tag, currentBreakpoint, 'a'))
-    : 'a';
-
-  const normalizeButtonType = (
-    value: string
-  ): 'button' | 'submit' | 'reset' => {
-    if (value === 'submit' || value === 'reset') {
-      return value;
-    }
-
-    return 'button';
-  };
-
-  const buttonType =
-    tag === 'button'
-      ? normalizeButtonType(
-          String(
-            getResponsiveValue(
-              block.properties?.type,
-              currentBreakpoint,
-              'button'
-            )
-          )
-        )
-      : 'button';
-
-  const iconUrl = block.properties?.icon
-    ? String(getResponsiveValue(block.properties.icon, currentBreakpoint, ''))
-    : '';
-
-  const iconPosition = block.properties?.iconPosition
-    ? String(
-        getResponsiveValue(
-          block.properties.iconPosition,
-          currentBreakpoint,
-          'left'
-        )
-      )
-    : 'left';
-
-  const iconSize = block.properties?.iconSize
-    ? String(
-        getResponsiveValue(block.properties.iconSize, currentBreakpoint, '16')
-      )
-    : '16';
-
-  const iconGap = block.properties?.iconGap
-    ? String(
-        getResponsiveValue(block.properties.iconGap, currentBreakpoint, '8px')
-      )
-    : '8px';
-
-  const showIcon = iconUrl && iconPosition !== 'none';
-
-  const fontFamily = block.styles?.['font-family']
-    ? String(
-        getResponsiveValue(
-          block.styles['font-family'],
-          currentBreakpoint,
-          'inherit'
-        )
-      )
-    : 'inherit';
-
-  useEffect(() => {
-    if (!fontFamily || fontFamily === 'inherit') return;
-
-    const cleanFontFamily = fontFamily.replace(/['"]/g, '').trim();
-
-    const systemFonts = [
-      'Arial',
-      'Helvetica',
-      'Times New Roman',
-      'Georgia',
-      'Courier New',
-      'Verdana'
-    ];
-    if (systemFonts.includes(cleanFontFamily)) return;
-
-    const fontParam = `${cleanFontFamily.replace(
-      /\s+/g,
-      '+'
-    )}:wght@100;300;400;500;600;700;800;900`;
-    const fontUrl = `https://fonts.googleapis.com/css2?family=${fontParam}&display=swap`;
-
-    const linkId = `google-font-${cleanFontFamily
-      .replace(/\s+/g, '-')
-      .toLowerCase()}`;
-    const existingLink = document.getElementById(linkId);
-    if (existingLink) return;
-
-    const link = document.createElement('link');
-    link.href = fontUrl;
-    link.rel = 'stylesheet';
-    link.id = linkId;
-
-    document.head.appendChild(link);
-  }, [fontFamily]);
-
-  const toAlpha = (value: unknown, fallback = 100): number | null => {
-    const numeric = Number(
-      value === undefined || value === null || value === '' ? fallback : value
-    );
-    if (Number.isNaN(numeric)) return null;
-    return Math.max(0, Math.min(1, numeric / 100));
-  };
-
-  const getButtonStyles = (): React.CSSProperties => {
-    if (!block.styles) return {};
-
-    const styles: React.CSSProperties = {};
-
-    const textOpacityValue = getStyleEntry('text-opacity')
-      ? getResponsiveValue(
-          getStyleEntry('text-opacity'),
-          currentBreakpoint,
-          '100'
-        )
-      : '100';
-    const textOpacity = Number(textOpacityValue);
-
-    const backgroundOpacityValue = getStyleEntry('background-opacity')
-      ? getResponsiveValue(
-          getStyleEntry('background-opacity'),
-          currentBreakpoint,
-          '100'
-        )
-      : '100';
-    const backgroundAlpha = toAlpha(backgroundOpacityValue, 100);
-
-    Object.keys(block.styles).forEach((key) => {
-      const value = getResponsiveValue(block.styles[key], currentBreakpoint);
-      if (value === undefined || value === null) return;
-
-      const normalizedKey = normalizeKey(key);
-
-      if (
-        normalizedKey === 'text-opacity' ||
-        normalizedKey === 'background-opacity' ||
-        normalizedKey === 'hover-opacity' ||
-        normalizedKey === 'hover-color'
-      ) {
-        return;
-      }
-
-      const camelKey = key.replace(/-([a-z])/g, (_, letter) =>
-        letter.toUpperCase()
-      );
-
-      let resolvedValue = value;
-      if (typeof value === 'string') {
-        resolvedValue = resolveThemeCssVariables(value, themeSettings);
-      }
-
-      if (normalizedKey === 'width' && resolvedValue === 'fill') {
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        (styles as any)[camelKey] = '100%';
-        return;
-      }
-
-      if (normalizedKey === 'width' && resolvedValue === 'fit') {
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        (styles as any)[camelKey] = 'fit-content';
-        return;
-      }
-
-      if (normalizedKey === 'height' && resolvedValue === 'fill') {
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        (styles as any)[camelKey] = '100%';
-        return;
-      }
-
-      if (normalizedKey === 'height' && resolvedValue === 'fit') {
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        (styles as any)[camelKey] = 'fit-content';
-        return;
-      }
-
-      if (
-        normalizedKey === 'color' &&
-        typeof resolvedValue === 'string' &&
-        !isNaN(textOpacity)
-      ) {
-        const alpha = toAlpha(textOpacityValue, 100);
-        if (alpha !== null) {
-          const rgba = colorToRgba(resolvedValue, alpha);
-          if (rgba) {
-            // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            (styles as any)[camelKey] = rgba;
-            return;
-          }
-        }
-
-        // Fallback if not a valid hex (e.g. named color or rgb)
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        (styles as any)[camelKey] = resolvedValue;
-      } else if (
-        (normalizedKey === 'background-color' ||
-          normalizedKey === 'background') &&
-        typeof resolvedValue === 'string' &&
-        backgroundAlpha !== null
-      ) {
-        if (backgroundAlpha === 0) {
-          // Ensure background disappears even if color can't be parsed (e.g. unresolved CSS var).
-          // eslint-disable-next-line @typescript-eslint/no-explicit-any
-          (styles as any).backgroundColor = 'transparent';
-          // eslint-disable-next-line @typescript-eslint/no-explicit-any
-          (styles as any).backgroundImage = 'none';
-          // eslint-disable-next-line @typescript-eslint/no-explicit-any
-          delete (styles as any).background;
-          return;
-        }
-
-        const rgba = colorToRgba(resolvedValue, backgroundAlpha);
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        (styles as any).backgroundColor = rgba || resolvedValue;
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        delete (styles as any).background;
-      } else {
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        (styles as any)[camelKey] = resolvedValue;
-      }
-    });
-
-    return styles;
-  };
-
-  const buttonStyles = getButtonStyles();
-
-  const finalStyles: React.CSSProperties = {
-    textDecoration: 'none',
-    display: showIcon ? 'inline-flex' : buttonStyles.display || 'inline-block',
-    alignItems: showIcon ? 'center' : undefined,
-    justifyContent: showIcon ? 'center' : undefined,
-    gap: showIcon ? iconGap : undefined,
-    ...buttonStyles
-  };
-
-  const EMAIL_REGEX = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
-
-  const extractMessage = (payload: unknown, fallback: string): string => {
-    if (typeof payload === 'string' && payload.trim()) {
-      return payload;
-    }
-
-    if (!payload || typeof payload !== 'object') {
-      return fallback;
-    }
-
-    const payloadObject = payload as Record<string, unknown>;
-
-    const directKeys = ['message', 'detail', 'non_field_errors', 'error'];
-    for (const key of directKeys) {
-      const value = payloadObject[key];
-      if (typeof value === 'string' && value.trim()) {
-        return value;
-      }
-      if (Array.isArray(value) && typeof value[0] === 'string') {
-        return value[0];
-      }
-    }
-
-    const emailValue = payloadObject.email;
-    if (Array.isArray(emailValue) && typeof emailValue[0] === 'string') {
-      return emailValue[0];
-    }
-
-    const dataValue = payloadObject.data;
-    if (dataValue && typeof dataValue === 'object') {
-      return extractMessage(dataValue, fallback);
-    }
-
-    return fallback;
-  };
-
-  const showPopup = (message: string, success = false) => {
-    if (!message?.trim()) return;
-
-    setFeedbackModal({
-      open: true,
-      title: success ? 'Başarılı' : 'Bilgilendirme',
-      message
-    });
-  };
-
-  const handleClick = async (e: React.MouseEvent<HTMLElement>) => {
-    if (isDesigner) {
-      e.preventDefault();
-      return;
-    }
-
-    if (tag === 'button' && buttonType === 'submit') {
-      e.preventDefault();
-    }
-
-    if (tag !== 'button' || buttonType !== 'submit') {
-      return;
-    }
-
-    const currentTarget = e.currentTarget as HTMLElement;
-    const newsletterContainer = currentTarget.closest(
-      '[data-newsletter-signup="true"]'
-    ) as HTMLElement | null;
-
-    if (!newsletterContainer) {
-      return;
-    }
-
-    const rawEndpoint =
-      newsletterContainer.getAttribute('data-newsletter-endpoint')?.trim() || '';
-    if (!rawEndpoint) {
-      return;
-    }
-
-    const endpoint =
-      rawEndpoint.startsWith('/api/client') ||
-      rawEndpoint.startsWith('http://') ||
-      rawEndpoint.startsWith('https://')
-        ? rawEndpoint
-        : rawEndpoint.startsWith('/')
-        ? `/api/client${rawEndpoint}`
-        : `/api/client/${rawEndpoint}`;
-
-    const isEmailSubscriptionEndpoint =
-      rawEndpoint.includes('email-subscription') ||
-      endpoint.includes('/api/client/email-subscription');
-
-    const inputElement = newsletterContainer.querySelector(
-      'input[type="email"], input[name="email"], input'
-    ) as HTMLInputElement | null;
-
-    const email = inputElement?.value?.trim() || '';
-    if (!email) {
-      inputElement?.focus();
-      showPopup('Email is required.');
-      return;
-    }
-
-    if (!EMAIL_REGEX.test(email)) {
-      inputElement?.focus();
-      showPopup('Enter a valid email address.');
-      return;
-    }
-
-    const successMessage =
-      newsletterContainer.getAttribute('data-newsletter-success-message') ||
-      'Successfully subscribed.';
-    const errorMessage =
-      newsletterContainer.getAttribute('data-newsletter-error-message') ||
-      'Subscription failed. Please try again.';
-
-    try {
-      let popupMessage = successMessage;
-
-      if (isEmailSubscriptionEndpoint) {
-        const result = await emailSubscription({
-          email,
-          subscribe_contract: false
-        }).unwrap();
-        popupMessage = extractMessage(result, successMessage);
-      } else {
-        const response = await fetch(endpoint, {
-          method: 'POST',
-          headers: {
-            Accept: '*/*',
-            'Content-Type': 'application/json'
-          },
-          credentials: 'include',
-          body: JSON.stringify({ email })
-        });
-
-        let responsePayload: unknown = null;
-
-        try {
-          const contentType = response.headers.get('content-type') || '';
-          if (contentType.includes('application/json')) {
-            responsePayload = await response.json();
-          } else {
-            const textPayload = await response.text();
-            responsePayload = textPayload || null;
-          }
-        } catch {
-          responsePayload = null;
-        }
-
-        if (!response.ok) {
-          throw new Error(extractMessage(responsePayload, errorMessage));
-        }
-
-        popupMessage = extractMessage(responsePayload, successMessage);
-      }
-
-      newsletterContainer.dispatchEvent(
-        new CustomEvent('newsletter:submit', {
-          bubbles: true,
-          detail: {
-            success: true,
-            message: popupMessage,
-            email
-          }
-        })
-      );
-      showPopup(popupMessage, true);
-    } catch (error) {
-      const message =
-        error instanceof Error && error.message
-          ? error.message
-          : extractMessage(error, errorMessage);
-
-      newsletterContainer.dispatchEvent(
-        new CustomEvent('newsletter:submit', {
-          bubbles: true,
-          detail: {
-            success: false,
-            message,
-            email
-          }
-        })
-      );
-      showPopup(message);
-    }
-  };
-
-  const shouldShowText = text && text.trim() !== '';
-
-  const iconElement = (position: 'left' | 'right') =>
-    showIcon &&
-    iconPosition === position && (
-      // eslint-disable-next-line @next/next/no-img-element
-      <img
-        src={iconUrl}
-        alt="icon"
-        style={{
-          width: `${iconSize}px`,
-          height: `${iconSize}px`,
-          flexShrink: 0
-        }}
-      />
-    );
-
-  const content = (
-    <>
-      {iconElement('left')}
-      {shouldShowText && <span>{text}</span>}
-      {iconElement('right')}
-    </>
-  );
-
-  const feedbackModalElement = (
-    <Modal
-      portalId={`newsletter-feedback-modal-${block.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>
-  );
-
-  if (tag === 'button') {
-    return (
-      <>
-        <button type={buttonType} style={finalStyles} onClick={handleClick}>
-          {content}
-        </button>
-        {feedbackModalElement}
-      </>
-    );
-  }
-
-  return (
-    <>
-      <a
-        href={url}
-        target={target}
-        rel={target === '_blank' ? 'noopener noreferrer' : undefined}
-        style={finalStyles}
-        onClick={handleClick}
-      >
-        {content}
-      </a>
-      {feedbackModalElement}
-    </>
-  );
-};
-
-export default ButtonBlock;