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

package/app-template/src/widgets/footer-social-client.tsx

@@ -0,0 +1,251 @@
+'use client';
+
+import type { CSSProperties } from 'react';
+import clsx from 'clsx';
+import { Link, Icon } from '@theme/components';
+import { useDesignerFeatures } from '@akinon/next/components/theme-editor/hooks/use-designer-features';
+import {
+  useFooterSocialDesigner,
+  FOOTER_SOCIAL_ICONS_BLOCK_ID,
+  type SocialIconItem
+} from '../views/footer/footer-social-context';
+import {
+  FOOTER_PLACEHOLDER_ID,
+  FOOTER_SOCIAL_SECTION_ID
+} from '../views/footer/native-widget-config';
+
+const kebabToCamel = (str: string): string =>
+  str.replace(/-([a-z])/g, (_, letter) => letter.toUpperCase());
+
+const normalizeStyles = (
+  styles: Record<string, unknown> | undefined
+): CSSProperties => {
+  if (!styles) return {};
+
+  const result: Record<string, string | number> = {};
+
+  for (const [key, value] of Object.entries(styles)) {
+    if (value == null) continue;
+
+    const camelKey = kebabToCamel(key);
+    let resolved: unknown = value;
+
+    if (typeof value === 'object' && !Array.isArray(value)) {
+      const responsive = value as Record<string, unknown>;
+      resolved = responsive.desktop ?? responsive.mobile ?? responsive.tablet;
+    }
+
+    if (resolved != null) {
+      if (typeof resolved === 'number') {
+        result[camelKey] = resolved;
+      } else if (typeof resolved === 'string') {
+        result[camelKey] = resolved;
+      }
+    }
+  }
+
+  return result as CSSProperties;
+};
+
+// Legacy types for backwards compatibility
+type SocialNetwork = {
+  key: string;
+  url: string;
+  icon: string;
+};
+
+type SocialItem = {
+  value: {
+    icon_class?: string;
+    site_name: string;
+    redirect_url: string;
+    is_target_blank: string;
+  };
+};
+
+interface FooterSocialClientProps {
+  activeNetworks: SocialNetwork[];
+  socialItems: SocialItem[];
+}
+
+// Resolve responsive value to actual value
+const resolveValue = <T,>(value: unknown, defaultValue: T): T => {
+  if (value == null) return defaultValue;
+  if (typeof value === 'object' && !Array.isArray(value)) {
+    const responsive = value as Record<string, unknown>;
+    const resolved =
+      responsive.desktop ?? responsive.mobile ?? responsive.tablet;
+    return (resolved as T) ?? defaultValue;
+  }
+  return value as T;
+};
+
+export default function FooterSocialClient({
+  activeNetworks,
+  socialItems
+}: FooterSocialClientProps) {
+  const { isDesigner, selectedBlockId, getBlock, blockVersion } =
+    useFooterSocialDesigner();
+
+  const iconsBlock =
+    blockVersion >= 0 ? getBlock(FOOTER_SOCIAL_ICONS_BLOCK_ID) : undefined;
+  const iconStylesRaw = iconsBlock?.styles as
+    | Record<string, unknown>
+    | undefined;
+  const iconStyles = normalizeStyles(iconStylesRaw);
+
+  // Get custom icons from properties (new social-icons-list format)
+  const blockProperties = iconsBlock?.properties as
+    | Record<string, unknown>
+    | undefined;
+  const customIcons = resolveValue<SocialIconItem[]>(
+    blockProperties?.icons,
+    []
+  );
+
+  // Gap between icons from styles
+  const iconGap = resolveValue<string | number>(iconStylesRaw?.gap, 16);
+
+  const { handleClick: handleIconsClick } = useDesignerFeatures({
+    blockId: FOOTER_SOCIAL_ICONS_BLOCK_ID,
+    placeholderId: FOOTER_PLACEHOLDER_ID,
+    sectionId: FOOTER_SOCIAL_SECTION_ID,
+    isDesigner,
+    blockInfo: {
+      id: FOOTER_SOCIAL_ICONS_BLOCK_ID,
+      type: 'social-icons-list',
+      label: 'Social Icons'
+    }
+  });
+
+  const isIconsSelected = selectedBlockId === FOOTER_SOCIAL_ICONS_BLOCK_ID;
+
+  // Process SVG to apply color - replace fill/stroke attributes with the chosen color
+  const processSvgColor = (svgHtml: string, color: string | undefined) => {
+    if (!color) return svgHtml;
+    // Replace fill and stroke attributes (but not fill="none" which is used for transparency)
+    let processed = svgHtml
+      .replace(/fill="(?!none)[^"]*"/gi, `fill="${color}"`)
+      .replace(/stroke="(?!none)[^"]*"/gi, `stroke="${color}"`);
+    // If no fill attribute exists, add one to the svg element
+    if (!processed.includes('fill=')) {
+      processed = processed.replace('<svg', `<svg fill="${color}"`);
+    }
+    return processed;
+  };
+
+  // Render custom icons from theme editor (new format)
+  if (customIcons.length > 0) {
+    return (
+      <div
+        className={clsx(
+          'flex items-center',
+          isDesigner && 'cursor-pointer',
+          isIconsSelected && 'ring-2 ring-blue-500 ring-offset-2 rounded'
+        )}
+        style={{ gap: `${iconGap}px` }}
+        data-block-id={isDesigner ? FOOTER_SOCIAL_ICONS_BLOCK_ID : undefined}
+        onClick={isDesigner ? handleIconsClick : undefined}
+      >
+        {customIcons.map((item, i) => (
+          <Link key={i} href={item.link} target="_blank">
+            <Icon
+              size={item.size || 24}
+              name={item.icon}
+              style={{ color: item.color }}
+            />
+          </Link>
+        ))}
+      </div>
+    );
+  }
+
+  // Fallback: Render legacy activeNetworks (SVG icons from theme-config)
+  if (activeNetworks.length > 0) {
+    // Legacy: use global color/size from styles
+    const legacyIconColor = iconStyles.color as string | undefined;
+    const legacyIconSize = resolveValue<number>(iconStylesRaw?.size, 18);
+
+    return (
+      <div
+        className={clsx(
+          'flex items-center',
+          isDesigner && 'cursor-pointer',
+          isIconsSelected && 'ring-2 ring-blue-500 ring-offset-2 rounded'
+        )}
+        style={{ gap: `${iconGap}px` }}
+        data-block-id={isDesigner ? FOOTER_SOCIAL_ICONS_BLOCK_ID : undefined}
+        onClick={isDesigner ? handleIconsClick : undefined}
+      >
+        {activeNetworks.map((network, i) => (
+          <Link key={i} href={network.url} target="_blank">
+            <div
+              className="flex items-center justify-center [&>svg]:w-full [&>svg]:h-full"
+              style={{
+                width: legacyIconSize,
+                height: legacyIconSize
+              }}
+              dangerouslySetInnerHTML={{
+                __html: processSvgColor(network.icon, legacyIconColor)
+              }}
+            />
+          </Link>
+        ))}
+      </div>
+    );
+  }
+
+  // Fallback: Render legacy socialItems (font icons from footer-social widget)
+  if (socialItems.length > 0) {
+    const legacyIconColor = iconStyles.color as string | undefined;
+    const legacyIconSize = resolveValue<number>(iconStylesRaw?.size, 18);
+
+    return (
+      <div
+        className={clsx(
+          'flex items-center',
+          isDesigner && 'cursor-pointer',
+          isIconsSelected && 'ring-2 ring-blue-500 ring-offset-2 rounded'
+        )}
+        style={{ gap: `${iconGap}px` }}
+        data-block-id={isDesigner ? FOOTER_SOCIAL_ICONS_BLOCK_ID : undefined}
+        onClick={isDesigner ? handleIconsClick : undefined}
+      >
+        {socialItems.map((item, i) => (
+          <Link
+            key={i}
+            href={item?.value?.redirect_url}
+            target={
+              item?.value?.is_target_blank === 'true' ? '_blank' : '_self'
+            }
+            style={{ color: legacyIconColor }}
+          >
+            <Icon
+              size={legacyIconSize}
+              name={item?.value?.icon_class?.replace('pz-icon-', '')}
+            />
+          </Link>
+        ))}
+      </div>
+    );
+  }
+
+  // Designer mode: Show placeholder when no icons
+  if (isDesigner) {
+    return (
+      <div
+        className={clsx(
+          'flex items-center gap-4 py-2 px-4 border border-dashed border-gray-400 rounded text-gray-400 text-sm',
+          'cursor-pointer',
+          isIconsSelected && 'ring-2 ring-blue-500 ring-offset-2'
+        )}
+        data-block-id={FOOTER_SOCIAL_ICONS_BLOCK_ID}
+        onClick={handleIconsClick}
+      >
+        Click to add social icons
+      </div>
+    );
+  }
+
+  return null;
+}

package/app-template/src/widgets/footer-social.tsx

@@ -1,7 +1,11 @@
 import 'server-only';
 
-import { Link, Icon } from '@theme/components';
 import { getWidgetData } from '@akinon/next/data/server';
+import FooterSocialClient from './footer-social-client';
+
+type ThemeConfig = {
+  theme_settings: string | object;
+};
 
 type TargetBlank = {
   value: string;
@@ -31,23 +35,50 @@ type FooterSocialType = {
 };
 
 export default async function FooterSocial() {
+  const themeConfig = await getWidgetData<ThemeConfig>({
+    slug: 'theme-config'
+  });
+
+  let socialNetworks = {};
+  try {
+    if (themeConfig?.attributes?.theme_settings) {
+      const settingsRaw = themeConfig.attributes.theme_settings;
+      let settings;
+
+      if (typeof settingsRaw === 'string') {
+        settings = JSON.parse(settingsRaw);
+      } else if (
+        typeof settingsRaw === 'object' &&
+        settingsRaw !== null &&
+        'value' in settingsRaw
+      ) {
+        const value = (settingsRaw as any).value;
+        settings = typeof value === 'string' ? JSON.parse(value) : value;
+      } else {
+        settings = settingsRaw;
+      }
+
+      socialNetworks = settings.socialNetworks || {};
+    }
+  } catch (e) {
+    console.error('Error parsing theme settings:', e);
+  }
+
+  const activeNetworks = Object.entries(socialNetworks)
+    .filter(([_, value]: [string, any]) => value.icon)
+    .map(([key, value]: [string, any]) => ({
+      key,
+      url: value.url || '#',
+      icon: value.icon
+    }));
+
   const data = await getWidgetData<FooterSocialType>({ slug: 'footer-social' });
+  const socialItems = data?.attributes?.social_items || [];
 
   return (
-    <div className="flex flex-wrap items-center justify-around py-4 border-t border-gray md:justify-center">
-      {data?.attributes?.social_items?.map((item, i) => (
-        <Link
-          key={i}
-          href={item?.value?.redirect_url}
-          className="p-2 border rounded-full border-gray md:mr-1 md:last:mr-0"
-          target={item?.value?.is_target_blank === 'true' ? '_blank' : '_self'}
-        >
-          <Icon
-            size={18}
-            name={item?.value?.icon_class?.replace('pz-icon-', '')}
-          />
-        </Link>
-      ))}
-    </div>
+    <FooterSocialClient
+      activeNetworks={activeNetworks}
+      socialItems={socialItems}
+    />
   );
 }

package/app-template/src/widgets/footer-subscription/footer-subscription-form.tsx

@@ -9,6 +9,7 @@ import { useEmailSubscriptionMutation } from '@akinon/next/data/client/misc';
 import { useGetWidgetQuery } from '@akinon/next/data/client/misc';
 import { Input, Button, Checkbox, Modal } from '@theme/components';
 import { useLocalization } from '@akinon/next/hooks';
+import { Icon } from '@akinon/next/components';
 
 const subscriptionFormSchema = (t: (key: string) => string) =>
   yup.object().shape({
@@ -43,29 +44,31 @@ export default function FooterSubscriptionForm() {
 
   return (
     <div>
-      <div className="flex mb-5">
-        <Input
-          id="footer-subscription-email"
-          type="email"
-          placeholder={t('common.newsletter_signup.email_address')}
-          className="text-sm h-7 w-44"
-          {...register('email')}
-          error={errors.email}
-          data-testid="newsletter-input"
-        />
+      <div className="flex items-center justify-between border border-[#7d7d7d] px-4 py-[14px] gap-4 w-[331px]">
+        <div className="flex-1">
+          <Input
+            id="footer-subscription-email"
+            type="email"
+            placeholder={t('common.newsletter_signup.email_address')}
+            className="border-0 h-auto p-0 flex-1"
+            {...register('email')}
+            error={errors.email}
+            data-testid="newsletter-input"
+          />
+        </div>
 
         <Button
           type="submit"
           appearance="outlined"
-          className="text-xs font-semibold h-7"
+          className="bg-transparent hover:bg-transparent p-0 h-auto"
           data-testid="newsletter-submit"
           onClick={handleSubmit(onSubmit)}
         >
-          {t('common.newsletter_signup.submit')}
+          <Icon name="arrow-right" size={16} className="text-black" />
         </Button>
       </div>
 
-      <Checkbox
+      {/* <Checkbox
         {...register('subscribe_contract')}
         error={errors.subscribe_contract}
         data-testid="newsletter-agreement-checkbox"
@@ -104,7 +107,7 @@ export default function FooterSubscriptionForm() {
             {t('common.newsletter_signup.close')}
           </Button>
         </Modal>
-      </Checkbox>
+      </Checkbox> */}
     </div>
   );
 }

package/app-template/src/widgets/footer-subscription/index.tsx

@@ -1,30 +1,196 @@
-import 'server-only';
+'use client';
 
-import { getWidgetData } from '@akinon/next/data/server';
+import type { CSSProperties } from 'react';
+import clsx from 'clsx';
+import { useDesignerFeatures } from '@akinon/next/components/theme-editor/hooks/use-designer-features';
 
 import FooterSubscriptionForm from './footer-subscription-form';
+import {
+  FOOTER_PLACEHOLDER_ID,
+  FOOTER_SUBSCRIPTION_SECTION_ID
+} from '../../views/footer/native-widget-config';
+import {
+  FOOTER_SUBSCRIPTION_BLOCKS,
+  FOOTER_SUBSCRIPTION_DEFAULT_CONTENT
+} from '../../views/footer/subscription-settings';
+import { useFooterSubscriptionDesigner } from '../../views/footer/footer-subscription-context';
 
-type FooterSubscriptionType = {
-  description: {
-    value: string;
-  };
-  title: {
-    value: string;
-  };
+type FooterSubscriptionProps = {
+  title?: string;
+  description?: string;
+};
+
+type FooterSubscriptionBlockConfig =
+  typeof FOOTER_SUBSCRIPTION_BLOCKS[keyof typeof FOOTER_SUBSCRIPTION_BLOCKS];
+
+const extractTextValue = (value: unknown): string | undefined => {
+  if (value == null) {
+    return undefined;
+  }
+
+  if (typeof value === 'string' || typeof value === 'number') {
+    return String(value);
+  }
+
+  if (typeof value === 'object') {
+    const record = value as Record<string, unknown>;
+    const candidateKeys = [
+      'content',
+      'value',
+      'text',
+      'label',
+      'default',
+      'desktop',
+      'mobile',
+      'tablet'
+    ];
+
+    for (const key of candidateKeys) {
+      const candidate = record[key];
+      if (typeof candidate === 'string' && candidate.trim().length > 0) {
+        return candidate;
+      }
+    }
+
+    for (const objValue of Object.values(record)) {
+      if (typeof objValue === 'string' && objValue.trim().length > 0) {
+        return objValue;
+      }
+    }
+  }
+
+  return undefined;
+};
+
+const kebabToCamel = (str: string): string =>
+  str.replace(/-([a-z])/g, (_, letter) => letter.toUpperCase());
+
+const normalizeStyles = (
+  styles: Record<string, unknown> | undefined
+): CSSProperties => {
+  if (!styles) return {};
+
+  const result: Record<string, string | number> = {};
+
+  for (const [key, value] of Object.entries(styles)) {
+    if (value == null) continue;
+
+    const camelKey = kebabToCamel(key);
+    let resolved: unknown = value;
+
+    if (typeof value === 'object' && !Array.isArray(value)) {
+      const responsive = value as Record<string, unknown>;
+      resolved = responsive.desktop ?? responsive.mobile ?? responsive.tablet;
+    }
+
+    if (resolved != null) {
+      if (typeof resolved === 'number') {
+        result[camelKey] = resolved;
+      } else if (typeof resolved === 'string') {
+        result[camelKey] = resolved;
+      }
+    }
+  }
+
+  return result as CSSProperties;
 };
 
-export default async function FooterSubscription() {
-  const data = await getWidgetData<FooterSubscriptionType>({
-    slug: 'footer-subscription'
+function useSubscriptionBlock(blockConfig: FooterSubscriptionBlockConfig) {
+  const { isDesigner, selectedBlockId, getBlock, blockVersion } =
+    useFooterSubscriptionDesigner();
+  const blockState = blockVersion >= 0 ? getBlock(blockConfig.id) : undefined;
+  const styles = normalizeStyles(blockState?.styles as Record<string, unknown>);
+  const { handleClick } = useDesignerFeatures({
+    blockId: blockConfig.id,
+    placeholderId: FOOTER_PLACEHOLDER_ID,
+    sectionId: FOOTER_SUBSCRIPTION_SECTION_ID,
+    isDesigner,
+    blockInfo: {
+      id: blockConfig.id,
+      type: blockConfig.type,
+      label: blockConfig.label
+    }
   });
 
+  return {
+    styles,
+    isDesigner,
+    isSelected: selectedBlockId === blockConfig.id,
+    onClick: isDesigner ? handleClick : undefined,
+    content: extractTextValue(blockState?.value)
+  };
+}
+
+export default function FooterSubscription({
+  title,
+  description
+}: FooterSubscriptionProps) {
+  const titleBlock = useSubscriptionBlock(FOOTER_SUBSCRIPTION_BLOCKS.TITLE);
+  const descriptionBlock = useSubscriptionBlock(
+    FOOTER_SUBSCRIPTION_BLOCKS.DESCRIPTION
+  );
+  const formBlock = useSubscriptionBlock(FOOTER_SUBSCRIPTION_BLOCKS.FORM);
+  const displayTitle =
+    titleBlock.content || title || FOOTER_SUBSCRIPTION_DEFAULT_CONTENT.title;
+  const displayDescription =
+    descriptionBlock.content ||
+    description ||
+    FOOTER_SUBSCRIPTION_DEFAULT_CONTENT.description;
+  const shouldRenderDescription =
+    descriptionBlock.isDesigner || Boolean(displayDescription);
+
   return (
-    <div className="py-4 border-t md:border-t-0 lg:pl-7">
-      <h3 className="mb-1 text-xs font-medium">
-        {data?.attributes?.title?.value}
+    <div className="w-full max-w-[331px]">
+      <h3
+        style={titleBlock.styles}
+        data-block-id={
+          titleBlock.isDesigner
+            ? FOOTER_SUBSCRIPTION_BLOCKS.TITLE.id
+            : undefined
+        }
+        onClick={titleBlock.onClick}
+        className={clsx(
+          'mb-4 text-lg text-[#121212]',
+          titleBlock.isDesigner && 'cursor-pointer',
+          titleBlock.isSelected && 'ring-2 ring-blue-500 ring-offset-2 rounded'
+        )}
+      >
+        {displayTitle}
       </h3>
-      <p className="mb-2 text-xs">{data?.attributes?.description?.value}</p>
-      <FooterSubscriptionForm />
+
+      {shouldRenderDescription && (
+        <p
+          style={descriptionBlock.styles}
+          data-block-id={
+            descriptionBlock.isDesigner
+              ? FOOTER_SUBSCRIPTION_BLOCKS.DESCRIPTION.id
+              : undefined
+          }
+          onClick={descriptionBlock.onClick}
+          className={clsx(
+            'text-sm text-[#121212] text-opacity-75 mb-6 leading-relaxed',
+            descriptionBlock.isDesigner && 'cursor-pointer',
+            descriptionBlock.isSelected &&
+              'ring-2 ring-blue-500 ring-offset-2 rounded'
+          )}
+        >
+          {displayDescription}
+        </p>
+      )}
+
+      <div
+        style={formBlock.styles}
+        data-block-id={
+          formBlock.isDesigner ? FOOTER_SUBSCRIPTION_BLOCKS.FORM.id : undefined
+        }
+        onClick={formBlock.onClick}
+        className={clsx(
+          formBlock.isDesigner && 'cursor-pointer inline-block',
+          formBlock.isSelected && 'ring-2 ring-blue-500 ring-offset-2 rounded'
+        )}
+      >
+        <FooterSubscriptionForm />
+      </div>
     </div>
   );
 }