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

package/app-template/src/views/footer.tsx

@@ -1,21 +1,423 @@
 import 'server-only';
 
-import FooterCopyright from '@theme/widgets/footer-copyright';
-import FooterInfo from '@theme/widgets/footer-info';
-import FooterMenu from '@theme/widgets/footer-menu';
+import FooterBottom from '@theme/widgets/footer-bottom';
 import FooterSocial from '@theme/widgets/footer-social';
 import FooterSubscription from '@theme/widgets/footer-subscription';
+import FooterMenuTwo from '@theme/widgets/footer-menu-two';
+import FooterMenuCompact from '@theme/widgets/footer-menu-compact';
+import FooterAppBanner from '@theme/widgets/footer-app-banner';
+import FooterValueProps from '@theme/widgets/footer-value-props';
+import { getWidgetData } from '@akinon/next/data/server';
+import { getThemeSettings } from '@theme/data/server/theme';
+import FooterNativeWidgets from './footer/footer-native-widgets';
+import FooterLayoutSwitcher from './footer/footer-layout-switcher';
+import FooterLayoutRegistrar from './footer/footer-layout-registrar';
+import FooterBottomWrapper from './footer/footer-bottom-wrapper';
+import {
+  FOOTER_NATIVE_SECTIONS,
+  FOOTER_SUBSCRIPTION_SECTION_ID,
+  FOOTER_MENU_SECTION_ID,
+  FOOTER_SOCIAL_SECTION_ID,
+  FOOTER_BOTTOM_SECTION_ID,
+  FOOTER_APP_BANNER_SECTION_ID,
+  FOOTER_VALUE_PROPS_SECTION_ID,
+  FOOTER_SOCIAL_ICONS_BLOCK_ID,
+  type FooterNativeWidgetSection,
+  parseWidgetBlockAttributes
+} from './footer/native-widget-config';
+import { getFooterLogoInitialSettingsFromSections } from './footer/logo-settings';
+import { FooterSubscriptionProvider } from './footer/footer-subscription-context';
+import { FooterMenuProvider } from './footer/footer-menu-context';
+import { FooterSocialProvider, type SocialIconItem } from './footer/footer-social-context';
+import { FooterBottomProvider } from './footer/footer-bottom-context';
+import { FooterAppBannerProvider } from './footer/footer-app-banner-context';
+import { FooterValuePropsProvider } from './footer/footer-value-props-context';
+import {
+  FOOTER_SUBSCRIPTION_DEFAULT_CONTENT,
+  getFooterSubscriptionInitialBlocks,
+  mergeFooterSubscriptionContent
+} from './footer/subscription-settings';
+import {
+  FOOTER_LAYOUT_SECTION_ID,
+  FOOTER_LAYOUT_WIDGET_SLUG,
+  FOOTER_LAYOUT_BLOCK_IDS,
+  type FooterLayoutType
+} from './footer/footer-layout-constants';
+
+// Block styles type for footer layout
+type FooterBlockStyles = Record<string, Record<string, unknown>>;
+
+/**
+ * Parse footer layout settings from widget data (server-side)
+ */
+function parseFooterLayoutSettings(
+  widgetData: { attributes?: Record<string, unknown> } | null
+): { layout: FooterLayoutType; blockStyles: FooterBlockStyles } {
+  const defaultResult = { layout: 'default' as FooterLayoutType, blockStyles: {} };
+  
+  if (!widgetData?.attributes) return defaultResult;
+
+  const result: { layout: FooterLayoutType; blockStyles: FooterBlockStyles } = {
+    layout: 'default',
+    blockStyles: {}
+  };
+
+  // Parse section-level properties (layout)
+  const sectionData = widgetData.attributes[FOOTER_LAYOUT_SECTION_ID];
+  if (sectionData) {
+    try {
+      const data =
+        typeof sectionData === 'string'
+          ? JSON.parse(sectionData)
+          : typeof sectionData === 'object' && sectionData !== null && 'value' in sectionData
+          ? JSON.parse((sectionData as { value: string }).value)
+          : null;
+
+      if (data?.properties?.layout) {
+        const layout = data.properties.layout;
+        result.layout = (typeof layout === 'object' ? layout.desktop : layout) as FooterLayoutType;
+      }
+    } catch {
+      // Ignore parse errors
+    }
+  }
+
+  // Parse block styles (MAIN_ROW, BOTTOM_ROW)
+  Object.values(FOOTER_LAYOUT_BLOCK_IDS).forEach((blockId) => {
+    const blockData = widgetData.attributes?.[blockId];
+    if (!blockData) return;
+
+    try {
+      const data =
+        typeof blockData === 'string'
+          ? JSON.parse(blockData)
+          : typeof blockData === 'object' && blockData !== null && 'value' in blockData
+          ? JSON.parse((blockData as { value: string }).value)
+          : null;
+
+      if (data?.styles) {
+        // Convert responsive styles to flat styles (desktop first)
+        const flatStyles: Record<string, string> = {};
+        Object.entries(data.styles).forEach(([key, value]) => {
+          if (typeof value === 'object' && value !== null) {
+            const responsiveValue = value as Record<string, string>;
+            flatStyles[key] =
+              responsiveValue.desktop ||
+              responsiveValue.mobile ||
+              Object.values(responsiveValue)[0] ||
+              '';
+          } else if (typeof value === 'string') {
+            flatStyles[key] = value;
+          }
+        });
+
+        if (Object.keys(flatStyles).length > 0) {
+          result.blockStyles[blockId] = flatStyles;
+        }
+      }
+    } catch {
+      // Ignore parse errors
+    }
+  });
+
+  return result;
+}
+
+function getFooterMenuInitialBlocks(
+  sections: FooterNativeWidgetSection[]
+): FooterNativeWidgetSection['blocks'] {
+  const menuSection = sections.find(
+    (s) => s.sectionId === FOOTER_MENU_SECTION_ID
+  );
+  return menuSection?.blocks ?? [];
+}
+
+function getFooterSocialInitialBlocks(
+  sections: FooterNativeWidgetSection[],
+  defaultIcons?: SocialIconItem[]
+): FooterNativeWidgetSection['blocks'] {
+  const socialSection = sections.find(
+    (s) => s.sectionId === FOOTER_SOCIAL_SECTION_ID
+  );
+  const blocks = socialSection?.blocks ?? [];
+
+  // If we have default icons, merge them into the footer-social-icons block
+  if (defaultIcons?.length) {
+    return blocks.map((block) => {
+      if (block.id === FOOTER_SOCIAL_ICONS_BLOCK_ID) {
+        const existingIcons = (block.properties as Record<string, unknown>)?.icons;
+        // Only set default icons if no icons are already configured
+        if (!existingIcons || (Array.isArray(existingIcons) && existingIcons.length === 0)) {
+          return {
+            ...block,
+            properties: {
+              ...block.properties,
+              icons: defaultIcons
+            }
+          };
+        }
+      }
+      return block;
+    });
+  }
+
+  return blocks;
+}
+
+function getFooterBottomInitialBlocks(
+  sections: FooterNativeWidgetSection[]
+): FooterNativeWidgetSection['blocks'] {
+  const bottomSection = sections.find(
+    (s) => s.sectionId === FOOTER_BOTTOM_SECTION_ID
+  );
+  return bottomSection?.blocks ?? [];
+}
+
+function getFooterAppBannerInitialData(
+  sections: FooterNativeWidgetSection[]
+): {
+  blocks: FooterNativeWidgetSection['blocks'];
+  properties: Record<string, unknown>;
+  styles: Record<string, unknown>;
+} {
+  const section = sections.find(
+    (s) => s.sectionId === FOOTER_APP_BANNER_SECTION_ID
+  );
+  return {
+    blocks: section?.blocks ?? [],
+    properties: section?.sectionProperties ?? {},
+    styles: section?.sectionStyles ?? {}
+  };
+}
+
+function getFooterValuePropsInitialData(
+  sections: FooterNativeWidgetSection[]
+): {
+  blocks: FooterNativeWidgetSection['blocks'];
+  properties: Record<string, unknown>;
+  styles: Record<string, unknown>;
+} {
+  const section = sections.find(
+    (s) => s.sectionId === FOOTER_VALUE_PROPS_SECTION_ID
+  );
+  return {
+    blocks: section?.blocks ?? [],
+    properties: section?.sectionProperties ?? {},
+    styles: section?.sectionStyles ?? {}
+  };
+}
+
+async function getFooterNativeWidgetSections() {
+  const sections = await Promise.all(
+    FOOTER_NATIVE_SECTIONS.map(async section => {
+      let widgetData: Awaited<ReturnType<typeof getWidgetData>> | null = null;
+
+      try {
+        widgetData = await getWidgetData({ slug: section.widgetSlug });
+      } catch {
+        widgetData = null;
+      }
+
+      const blocks = section.blocks.map(block => ({
+        ...block,
+        ...parseWidgetBlockAttributes(widgetData as { attributes?: Record<string, unknown> }, block.id)
+      }));
+
+      const sectionAttrs = parseWidgetBlockAttributes(
+        widgetData as { attributes?: Record<string, unknown> },
+        section.sectionId
+      );
+
+      return {
+        ...section,
+        blocks,
+        sectionProperties: sectionAttrs.properties,
+        sectionStyles: sectionAttrs.styles
+      } satisfies FooterNativeWidgetSection;
+    })
+  );
+
+  return sections;
+}
+
+export default async function Footer() {
+  const [footerNativeSections, themeSettings, footerSubscriptionData, footerLayoutSettingsData] =
+    await Promise.all([
+      getFooterNativeWidgetSections(),
+      getThemeSettings(),
+      getWidgetData({ slug: 'footer-subscription' }),
+      getWidgetData({ slug: FOOTER_LAYOUT_WIDGET_SLUG }).catch(() => null)
+    ]);
+  const { layout: initialFooterLayout, blockStyles: initialBlockStyles } = parseFooterLayoutSettings(footerLayoutSettingsData);
+  const fallbackLogoSrc = themeSettings.logo || '/logo.svg';
+  const initialFooterLogoSettings = getFooterLogoInitialSettingsFromSections(
+    footerNativeSections,
+    fallbackLogoSrc
+  );
+  const footerSubscriptionTitle =
+    (footerSubscriptionData?.attributes as Record<string, { value?: string }> | undefined)?.title?.value || '';
+  const footerSubscriptionDescription =
+    (footerSubscriptionData?.attributes as Record<string, { value?: string }> | undefined)?.description?.value || '';
+  const initialFooterSubscriptionBlocks = mergeFooterSubscriptionContent(
+    getFooterSubscriptionInitialBlocks(footerNativeSections),
+    {
+      title:
+        footerSubscriptionTitle ||
+        FOOTER_SUBSCRIPTION_DEFAULT_CONTENT.title,
+      description:
+        footerSubscriptionDescription ||
+        FOOTER_SUBSCRIPTION_DEFAULT_CONTENT.description
+    }
+  );
+
+  // Convert theme-config socialNetworks to SocialIconItem format for editor
+  // Must be calculated before getFooterSocialInitialBlocks to pass as default
+  const defaultSocialIcons: SocialIconItem[] = Object.entries(themeSettings.socialNetworks || {})
+    .filter(([, value]: [string, unknown]) => {
+      const v = value as { icon?: string };
+      return v.icon;
+    })
+    .map(([key, value]: [string, unknown]) => {
+      const v = value as { url?: string };
+      return {
+        icon: key,
+        link: v.url || '#',
+        size: 24,
+        color: undefined
+      };
+    });
+
+  const initialFooterSocialBlocks = getFooterSocialInitialBlocks(
+    footerNativeSections,
+    defaultSocialIcons
+  );
+
+  const footerNativeSectionsWithContent = footerNativeSections.map(
+    (section) => {
+      if (section.sectionId === FOOTER_SUBSCRIPTION_SECTION_ID) {
+        return { ...section, blocks: initialFooterSubscriptionBlocks };
+      }
+      if (section.sectionId === FOOTER_SOCIAL_SECTION_ID) {
+        return { ...section, blocks: initialFooterSocialBlocks };
+      }
+      if (section.sectionId === FOOTER_APP_BANNER_SECTION_ID) {
+        return section; // App Banner blocks come from FOOTER_NATIVE_SECTIONS
+      }
+      if (section.sectionId === FOOTER_VALUE_PROPS_SECTION_ID) {
+        return section; // Value Props blocks come from FOOTER_NATIVE_SECTIONS
+      }
+      return section;
+    }
+  );
+  const initialFooterMenuBlocks = getFooterMenuInitialBlocks(
+    footerNativeSectionsWithContent
+  );
+  const initialFooterBottomBlocks = getFooterBottomInitialBlocks(
+    footerNativeSectionsWithContent
+  );
+  const initialAppBannerData = getFooterAppBannerInitialData(
+    footerNativeSectionsWithContent
+  );
+  const initialValuePropsData = getFooterValuePropsInitialData(
+    footerNativeSectionsWithContent
+  );
 
-export default function Footer() {
   return (
-    <div className="lg:pt-16 lg:border-t lg:border-gray">
-      <div className="container px-4 pb-0 mx-auto md:flex md:flex-wrap lg:pb-16 lg:px-0">
-        <FooterInfo />
-        <FooterMenu />
-        <FooterSubscription />
-      </div>
-      <FooterSocial />
-      <FooterCopyright />
-    </div>
+    <footer className="px-4 pt-16 border-t border-[#d0d0d0] lg:px-0">
+      <FooterNativeWidgets sections={footerNativeSectionsWithContent} />
+
+      <FooterValuePropsProvider
+        initialBlocks={initialValuePropsData.blocks}
+        initialProperties={initialValuePropsData.properties}
+        initialStyles={initialValuePropsData.styles}
+      >
+        <FooterValueProps renderPosition="footer-top" />
+      </FooterValuePropsProvider>
+
+      <FooterAppBannerProvider
+        initialBlocks={initialAppBannerData.blocks}
+        initialProperties={initialAppBannerData.properties}
+        initialStyles={initialAppBannerData.styles}
+      >
+        <FooterAppBanner renderPosition="footer-top" />
+      </FooterAppBannerProvider>
+
+      <FooterLayoutRegistrar
+        initialLayout={initialFooterLayout}
+        initialBlockStyles={initialBlockStyles}
+      >
+        <FooterLayoutSwitcher
+          defaultLayout={
+            <>
+              <FooterMenuProvider initialBlocks={initialFooterMenuBlocks}>
+                <FooterMenuTwo
+                  fallbackLogoSrc={fallbackLogoSrc}
+                  initialLogoSettings={initialFooterLogoSettings}
+                />
+              </FooterMenuProvider>
+              <div className="container flex flex-col py-16 gap-10 lg:items-center lg:justify-between lg:flex-row">
+                <FooterSubscriptionProvider
+                  initialBlocks={initialFooterSubscriptionBlocks}
+                >
+                  <FooterSubscription
+                    title={footerSubscriptionTitle}
+                    description={footerSubscriptionDescription}
+                  />
+                </FooterSubscriptionProvider>
+                <FooterSocialProvider initialBlocks={initialFooterSocialBlocks} defaultIcons={defaultSocialIcons}>
+                  <FooterSocial />
+                </FooterSocialProvider>
+              </div>
+            </>
+          }
+          compactLayout={
+            <div className="container flex flex-col lg:flex-row gap-10 lg:gap-16 py-8">
+              {/* Menu on the left - takes more space */}
+              <div className="flex-1 lg:flex-[2]">
+                <FooterMenuProvider initialBlocks={initialFooterMenuBlocks}>
+                  <FooterMenuCompact />
+                </FooterMenuProvider>
+              </div>
+
+              {/* Subscription + Social stacked on the right */}
+              <div className="flex flex-col gap-8 lg:flex-1">
+                <FooterSubscriptionProvider
+                  initialBlocks={initialFooterSubscriptionBlocks}
+                >
+                  <FooterSubscription
+                    title={footerSubscriptionTitle}
+                    description={footerSubscriptionDescription}
+                  />
+                </FooterSubscriptionProvider>
+                <FooterSocialProvider initialBlocks={initialFooterSocialBlocks} defaultIcons={defaultSocialIcons}>
+                  <FooterSocial />
+                </FooterSocialProvider>
+              </div>
+            </div>
+          }
+        />
+        <FooterBottomWrapper>
+          <FooterBottomProvider initialBlocks={initialFooterBottomBlocks}>
+            <FooterBottom />
+          </FooterBottomProvider>
+        </FooterBottomWrapper>
+      </FooterLayoutRegistrar>
+
+      <FooterValuePropsProvider
+        initialBlocks={initialValuePropsData.blocks}
+        initialProperties={initialValuePropsData.properties}
+        initialStyles={initialValuePropsData.styles}
+      >
+        <FooterValueProps renderPosition="footer-bottom" />
+      </FooterValuePropsProvider>
+
+      <FooterAppBannerProvider
+        initialBlocks={initialAppBannerData.blocks}
+        initialProperties={initialAppBannerData.properties}
+        initialStyles={initialAppBannerData.styles}
+      >
+        <FooterAppBanner renderPosition="footer-bottom" />
+      </FooterAppBannerProvider>
+    </footer>
   );
 }

package/app-template/src/views/guest-login/index.tsx

@@ -62,68 +62,72 @@ const GuestLogin = () => {
   };
 
   return (
-    <form onSubmit={handleSubmit(onSubmit)}>
-      <div className={clsx(errors.user_email ? 'mb-8' : 'mb-4')}>
-        <Input
-          labelStyle="floating"
-          label={t('checkout.auth.form.login.email.placeholder')}
-          name="email"
-          className="h-14"
-          {...register('user_email')}
-          error={errors.user_email}
-          data-testid="guest-email"
-          required
-        />
-      </div>
+    <section className="w-full mt-6 lg:mt-8">
+      <form onSubmit={handleSubmit(onSubmit)}>
+        <div>
+          <Input
+            labelStyle="floating"
+            label={t('checkout.auth.form.login.email.placeholder')}
+            name="email"
+            className="h-12"
+            {...register('user_email')}
+            error={errors.user_email}
+            data-testid="guest-email"
+            required
+          />
+        </div>
 
-      <div className={clsx(errors.phone_number ? 'mb-8' : 'mb-4')}>
-        <Input
-          labelStyle="floating"
-          label={t('checkout.auth.form.login.phone.placeholder')}
-          className="h-14"
-          name="phone_number"
-          type="tel"
-          format={user_phone_format.replace(/9/g, '#')}
-          mask="_"
-          control={control}
-          {...register('phone_number')}
-          error={errors.phone_number}
-          data-testid="guest-phone"
-          required
-        />
-      </div>
+        <div className="mt-4">
+          <Input
+            labelStyle="floating"
+            label={t('checkout.auth.form.login.phone.placeholder')}
+            className="h-12"
+            name="phone_number"
+            type="tel"
+            format={user_phone_format.replace(/\9/g, '#')}
+            mask="_"
+            control={control}
+            {...register('phone_number')}
+            error={errors.phone_number}
+            data-testid="guest-phone"
+            required
+          />
+        </div>
 
-      <Button
-        type="submit"
-        className="w-full h-12 uppercase text-xs font-semibold mb-4"
-        data-testid="guest-submit"
-      >
-        {t('checkout.auth.form.login.button')}
-      </Button>
-
-      <div className="text-sm text-black-400 md:text-xs">
-        <p className="mb-4">{t('checkout.auth.form.login.agreement.label')}</p>
-        <Checkbox
-          name="sms_allowed"
-          className={clsx('underline', errors.sms_allowed ? 'mb-8' : 'mb-4')}
-          {...register('sms_allowed')}
-          error={errors.sms_allowed}
-          data-testid="guest-sms"
+        <Button
+          type="submit"
+          className="w-full h-12 uppercase text-xs font-semibold mt-[38px]"
+          data-testid="guest-submit"
         >
-          {t('checkout.auth.form.login.agreement.terms_conditions')}
-        </Checkbox>
+          {t('checkout.auth.form.login.button')}
+        </Button>
 
-        <Checkbox
-          name="confirm"
-          className={clsx('underline', errors.kvkk_confirm ? 'mb-8' : 'mb-4')}
-          {...register('kvkk_confirm')}
-          error={errors.kvkk_confirm}
-          data-testid="guest-kvkk"
-        >
-          {t('checkout.auth.form.login.agreement.privacy_policy')}
-        </Checkbox>
-      </div>
-    </form>
+        <div className="mt-[38px] text-sm text-black-400 md:text-xs">
+          <p className="mb-4">
+            {t('checkout.auth.form.login.agreement.label')}
+          </p>
+          <Checkbox
+            name="sms_allowed"
+            className="underline"
+            {...register('sms_allowed')}
+            error={errors.sms_allowed}
+            data-testid="guest-sms"
+          >
+            {t('checkout.auth.form.login.agreement.terms_conditions')}
+          </Checkbox>
+
+          <Checkbox
+            name="confirm"
+            className="underline mt-4"
+            {...register('kvkk_confirm')}
+            error={errors.kvkk_confirm}
+            data-testid="guest-kvkk"
+          >
+            {t('checkout.auth.form.login.agreement.privacy_policy')}
+          </Checkbox>
+        </div>
+      </form>
+    </section>
   );
 };