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

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

@@ -0,0 +1,593 @@
+'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;