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

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

@@ -0,0 +1,444 @@
+'use client';
+
+import { useCallback, type CSSProperties } from 'react';
+import clsx from 'clsx';
+import { Image } from '@akinon/next/components/image';
+import { Link } from '@theme/components';
+import { useDesignerFeatures } from '@akinon/next/components/theme-editor/hooks/use-designer-features';
+import {
+  useFooterAppBannerDesigner,
+  FOOTER_APP_BANNER_IMAGE_BLOCK_ID,
+  FOOTER_APP_BANNER_TITLE_BLOCK_ID,
+  FOOTER_APP_BANNER_DESCRIPTION_BLOCK_ID,
+  FOOTER_APP_BANNER_BUTTONS_BLOCK_ID,
+  FOOTER_APP_BANNER_APPSTORE_BLOCK_ID,
+  FOOTER_APP_BANNER_PLAYSTORE_BLOCK_ID
+} from '../views/footer/footer-app-banner-context';
+import {
+  FOOTER_PLACEHOLDER_ID,
+  FOOTER_APP_BANNER_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;
+};
+
+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;
+};
+
+const resolveImageUrl = (url: string): string => {
+  if (!url) return '';
+
+  const isBase64 = url.startsWith('data:');
+  const isAbsolutePath = url.startsWith('/');
+
+  if (
+    !isBase64 &&
+    !isAbsolutePath &&
+    !url.startsWith('http') &&
+    !url.startsWith('//')
+  ) {
+    return `https://${process.env.NEXT_PUBLIC_IMAGE_CLOUD_NAME ?? ''}/${url}`;
+  }
+
+  return url;
+};
+
+interface FooterAppBannerProps {
+  renderPosition?: 'footer-top' | 'footer-bottom';
+}
+
+export default function FooterAppBanner({ renderPosition }: FooterAppBannerProps) {
+  const {
+    isDesigner,
+    selectedSectionId,
+    selectedBlockId,
+    getBlock,
+    getSectionProperty,
+    getSectionStyle,
+    blockVersion
+  } = useFooterAppBannerDesigner();
+
+  const { handleClick: handleImageClick } = useDesignerFeatures({
+    blockId: FOOTER_APP_BANNER_IMAGE_BLOCK_ID,
+    placeholderId: FOOTER_PLACEHOLDER_ID,
+    sectionId: FOOTER_APP_BANNER_SECTION_ID,
+    isDesigner,
+    blockInfo: {
+      id: FOOTER_APP_BANNER_IMAGE_BLOCK_ID,
+      type: 'image',
+      label: 'App Image'
+    }
+  });
+
+  const { handleClick: handleTitleClick } = useDesignerFeatures({
+    blockId: FOOTER_APP_BANNER_TITLE_BLOCK_ID,
+    placeholderId: FOOTER_PLACEHOLDER_ID,
+    sectionId: FOOTER_APP_BANNER_SECTION_ID,
+    isDesigner,
+    blockInfo: {
+      id: FOOTER_APP_BANNER_TITLE_BLOCK_ID,
+      type: 'text',
+      label: 'Banner Title'
+    }
+  });
+
+  const { handleClick: handleDescClick } = useDesignerFeatures({
+    blockId: FOOTER_APP_BANNER_DESCRIPTION_BLOCK_ID,
+    placeholderId: FOOTER_PLACEHOLDER_ID,
+    sectionId: FOOTER_APP_BANNER_SECTION_ID,
+    isDesigner,
+    blockInfo: {
+      id: FOOTER_APP_BANNER_DESCRIPTION_BLOCK_ID,
+      type: 'text',
+      label: 'Banner Description'
+    }
+  });
+
+  const { handleClick: handleButtonsClick } = useDesignerFeatures({
+    blockId: FOOTER_APP_BANNER_BUTTONS_BLOCK_ID,
+    placeholderId: FOOTER_PLACEHOLDER_ID,
+    sectionId: FOOTER_APP_BANNER_SECTION_ID,
+    isDesigner,
+    blockInfo: {
+      id: FOOTER_APP_BANNER_BUTTONS_BLOCK_ID,
+      type: 'group',
+      label: 'Store Buttons'
+    }
+  });
+
+  const { handleClick: handleAppStoreClick } = useDesignerFeatures({
+    blockId: FOOTER_APP_BANNER_APPSTORE_BLOCK_ID,
+    placeholderId: FOOTER_PLACEHOLDER_ID,
+    sectionId: FOOTER_APP_BANNER_SECTION_ID,
+    isDesigner,
+    blockInfo: {
+      id: FOOTER_APP_BANNER_APPSTORE_BLOCK_ID,
+      type: 'image',
+      label: 'App Store Button'
+    }
+  });
+
+  const { handleClick: handlePlayStoreClick } = useDesignerFeatures({
+    blockId: FOOTER_APP_BANNER_PLAYSTORE_BLOCK_ID,
+    placeholderId: FOOTER_PLACEHOLDER_ID,
+    sectionId: FOOTER_APP_BANNER_SECTION_ID,
+    isDesigner,
+    blockInfo: {
+      id: FOOTER_APP_BANNER_PLAYSTORE_BLOCK_ID,
+      type: 'image',
+      label: 'Google Play Button'
+    }
+  });
+
+  const handleSectionClick = useCallback(
+    (e: React.MouseEvent) => {
+      if (isDesigner) {
+        e.stopPropagation();
+        if (window.parent) {
+          window.parent.postMessage(
+            {
+              type: 'SELECT_SECTION',
+              data: {
+                placeholderId: FOOTER_PLACEHOLDER_ID,
+                sectionId: FOOTER_APP_BANNER_SECTION_ID
+              }
+            },
+            '*'
+          );
+        }
+      }
+    },
+    [isDesigner]
+  );
+
+  const enabled = resolveValue<boolean>(getSectionProperty('enabled'), true);
+  const position = resolveValue<string>(getSectionProperty('position'), 'footer-top');
+
+  if (renderPosition && position !== renderPosition) {
+    return null;
+  }
+
+  if (!enabled && !isDesigner) {
+    return null;
+  }
+
+  const sectionStyles: CSSProperties = {
+    backgroundColor: resolveValue<string>(getSectionStyle('background-color'), '#f5f5f5'),
+    paddingTop: `${resolveValue<number>(getSectionStyle('padding-top'), 32)}px`,
+    paddingBottom: `${resolveValue<number>(getSectionStyle('padding-bottom'), 32)}px`
+  };
+
+  const imageBlock = blockVersion >= 0 ? getBlock(FOOTER_APP_BANNER_IMAGE_BLOCK_ID) : undefined;
+  const titleBlock = blockVersion >= 0 ? getBlock(FOOTER_APP_BANNER_TITLE_BLOCK_ID) : undefined;
+  const descBlock = blockVersion >= 0 ? getBlock(FOOTER_APP_BANNER_DESCRIPTION_BLOCK_ID) : undefined;
+  const buttonsBlock = blockVersion >= 0 ? getBlock(FOOTER_APP_BANNER_BUTTONS_BLOCK_ID) : undefined;
+  const appStoreBlock = blockVersion >= 0 ? getBlock(FOOTER_APP_BANNER_APPSTORE_BLOCK_ID) : undefined;
+  const playStoreBlock = blockVersion >= 0 ? getBlock(FOOTER_APP_BANNER_PLAYSTORE_BLOCK_ID) : undefined;
+
+  const imageProps = imageBlock?.properties as Record<string, unknown> | undefined;
+  const imageSrc = resolveImageUrl(resolveValue<string>(imageBlock?.value, ''));
+  const imageAlt = resolveValue<string>(imageProps?.alt, 'Mobile App');
+  const imageStyles = normalizeStyles(imageBlock?.styles as Record<string, unknown>);
+
+  const titleProps = titleBlock?.properties as Record<string, unknown> | undefined;
+  const title = resolveValue<string>(titleProps?.text, 'Download Our App');
+  const titleStyles = normalizeStyles(titleBlock?.styles as Record<string, unknown>);
+
+  const descProps = descBlock?.properties as Record<string, unknown> | undefined;
+  const description = resolveValue<string>(descProps?.text, 'Shop anytime, anywhere with our mobile app');
+  const descStyles = normalizeStyles(descBlock?.styles as Record<string, unknown>);
+
+  const buttonsStylesRaw = buttonsBlock?.styles as Record<string, unknown> | undefined;
+  const buttonsGap = resolveValue<number>(buttonsStylesRaw?.gap, 12);
+
+  const appStoreProps = appStoreBlock?.properties as Record<string, unknown> | undefined;
+  const appStoreUrl = resolveValue<string>(appStoreProps?.url, '');
+  const appStoreIcon = resolveImageUrl(resolveValue<string>(appStoreBlock?.value, ''));
+  const appStoreTopText = resolveValue<string>(appStoreProps?.topText, 'Download on the');
+  const appStoreBottomText = resolveValue<string>(appStoreProps?.bottomText, 'App Store');
+
+  const playStoreProps = playStoreBlock?.properties as Record<string, unknown> | undefined;
+  const playStoreUrl = resolveValue<string>(playStoreProps?.url, '');
+  const playStoreIcon = resolveImageUrl(resolveValue<string>(playStoreBlock?.value, ''));
+  const playStoreTopText = resolveValue<string>(playStoreProps?.topText, 'Get it on');
+  const playStoreBottomText = resolveValue<string>(playStoreProps?.bottomText, 'Google Play');
+
+  const isSectionSelected = selectedSectionId === FOOTER_APP_BANNER_SECTION_ID && !selectedBlockId;
+
+  if (!enabled && isDesigner) {
+    return (
+      <div
+        data-section-id={FOOTER_APP_BANNER_SECTION_ID}
+        className="theme-section relative cursor-pointer"
+        style={sectionStyles}
+        onClick={handleSectionClick}
+      >
+        <div
+          className={clsx(
+            'absolute inset-0 pointer-events-none z-0 border-2 transition-all',
+            isSectionSelected ? 'border-[#4482ff]' : 'border-transparent'
+          )}
+        />
+        <div className="container py-8 text-center text-gray-400 border border-dashed border-gray-300 rounded relative z-10">
+          App Banner (disabled - click section to enable)
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div
+      data-section-id={FOOTER_APP_BANNER_SECTION_ID}
+      className={clsx(
+        'theme-section relative',
+        isDesigner && 'cursor-pointer'
+      )}
+      style={sectionStyles}
+      onClick={isDesigner ? handleSectionClick : undefined}
+    >
+      {isDesigner && (
+        <div
+          className={clsx(
+            'absolute inset-0 pointer-events-none z-0 border-2 transition-all',
+            isSectionSelected ? 'border-[#4482ff]' : 'border-transparent'
+          )}
+        />
+      )}
+      <div className="container relative z-10">
+        <div className="flex flex-col md:flex-row items-center gap-8">
+          <div
+            className={clsx(
+              'flex-shrink-0',
+              isDesigner && 'cursor-pointer',
+              selectedBlockId === FOOTER_APP_BANNER_IMAGE_BLOCK_ID &&
+                'ring-2 ring-blue-500 ring-offset-2 rounded'
+            )}
+            onClick={isDesigner ? handleImageClick : undefined}
+            data-block-id={isDesigner ? FOOTER_APP_BANNER_IMAGE_BLOCK_ID : undefined}
+          >
+            {imageSrc ? (
+              <Image
+                src={imageSrc}
+                alt={imageAlt}
+                width={Number(imageStyles.width) || 200}
+                height={Number(imageStyles.height) || 200}
+                className="object-contain"
+                unoptimized={imageSrc.startsWith('data:')}
+              />
+            ) : isDesigner ? (
+              <div
+                className="flex items-center justify-center bg-gray-200 text-gray-400 rounded"
+                style={{
+                  width: imageStyles.width || 200,
+                  height: imageStyles.height || 200
+                }}
+              >
+                Click to add image
+              </div>
+            ) : null}
+          </div>
+
+          <div className="flex-1 text-center md:text-left">
+            <h3
+              className={clsx(
+                'mb-2',
+                isDesigner && 'cursor-pointer',
+                selectedBlockId === FOOTER_APP_BANNER_TITLE_BLOCK_ID &&
+                  'ring-2 ring-blue-500 ring-offset-2 rounded'
+              )}
+              style={titleStyles}
+              onClick={isDesigner ? handleTitleClick : undefined}
+              data-block-id={isDesigner ? FOOTER_APP_BANNER_TITLE_BLOCK_ID : undefined}
+            >
+              {title}
+            </h3>
+
+            <p
+              className={clsx(
+                'mb-4',
+                isDesigner && 'cursor-pointer',
+                selectedBlockId === FOOTER_APP_BANNER_DESCRIPTION_BLOCK_ID &&
+                  'ring-2 ring-blue-500 ring-offset-2 rounded'
+              )}
+              style={descStyles}
+              onClick={isDesigner ? handleDescClick : undefined}
+              data-block-id={isDesigner ? FOOTER_APP_BANNER_DESCRIPTION_BLOCK_ID : undefined}
+            >
+              {description}
+            </p>
+
+            <div
+              className={clsx(
+                'flex flex-wrap justify-center md:justify-start',
+                isDesigner && 'cursor-pointer',
+                selectedBlockId === FOOTER_APP_BANNER_BUTTONS_BLOCK_ID &&
+                  'ring-2 ring-blue-500 ring-offset-2 rounded'
+              )}
+              style={{ gap: `${buttonsGap}px` }}
+              onClick={isDesigner ? handleButtonsClick : undefined}
+              data-block-id={isDesigner ? FOOTER_APP_BANNER_BUTTONS_BLOCK_ID : undefined}
+            >
+              <div
+                className={clsx(
+                  isDesigner && 'cursor-pointer',
+                  selectedBlockId === FOOTER_APP_BANNER_APPSTORE_BLOCK_ID &&
+                    'ring-2 ring-blue-500 ring-offset-2 rounded'
+                )}
+                onClick={isDesigner ? (e) => { e.stopPropagation(); handleAppStoreClick(e); } : undefined}
+                data-block-id={isDesigner ? FOOTER_APP_BANNER_APPSTORE_BLOCK_ID : undefined}
+              >
+                {appStoreUrl ? (
+                  <Link
+                    href={appStoreUrl}
+                    target="_blank"
+                    className="inline-flex items-center gap-2 px-4 py-2 bg-black text-white rounded-lg hover:bg-gray-800 transition-colors"
+                  >
+                    {appStoreIcon ? (
+                      <Image src={appStoreIcon} alt="App Store" width={24} height={24} unoptimized={appStoreIcon.startsWith('data:')} />
+                    ) : (
+                      <div className="w-6 h-6 bg-gray-600 rounded" />
+                    )}
+                    <div className="text-left">
+                      <div className="text-xs opacity-80">{appStoreTopText}</div>
+                      <div className="text-sm font-semibold">{appStoreBottomText}</div>
+                    </div>
+                  </Link>
+                ) : isDesigner ? (
+                  <div className="inline-flex items-center gap-2 px-4 py-2 border border-dashed border-gray-400 rounded text-gray-400">
+                    {appStoreIcon ? (
+                      <Image src={appStoreIcon} alt="App Store" width={24} height={24} unoptimized={appStoreIcon.startsWith('data:')} />
+                    ) : (
+                      <div className="w-6 h-6 bg-gray-300 rounded" />
+                    )}
+                    <div className="text-left text-sm">
+                      <div className="text-xs">{appStoreTopText}</div>
+                      <div className="font-semibold">{appStoreBottomText}</div>
+                    </div>
+                  </div>
+                ) : null}
+              </div>
+
+              <div
+                className={clsx(
+                  isDesigner && 'cursor-pointer',
+                  selectedBlockId === FOOTER_APP_BANNER_PLAYSTORE_BLOCK_ID &&
+                    'ring-2 ring-blue-500 ring-offset-2 rounded'
+                )}
+                onClick={isDesigner ? (e) => { e.stopPropagation(); handlePlayStoreClick(e); } : undefined}
+                data-block-id={isDesigner ? FOOTER_APP_BANNER_PLAYSTORE_BLOCK_ID : undefined}
+              >
+                {playStoreUrl ? (
+                  <Link
+                    href={playStoreUrl}
+                    target="_blank"
+                    className="inline-flex items-center gap-2 px-4 py-2 bg-black text-white rounded-lg hover:bg-gray-800 transition-colors"
+                  >
+                    {playStoreIcon ? (
+                      <Image src={playStoreIcon} alt="Google Play" width={24} height={24} unoptimized={playStoreIcon.startsWith('data:')} />
+                    ) : (
+                      <div className="w-6 h-6 bg-gray-600 rounded" />
+                    )}
+                    <div className="text-left">
+                      <div className="text-xs opacity-80">{playStoreTopText}</div>
+                      <div className="text-sm font-semibold">{playStoreBottomText}</div>
+                    </div>
+                  </Link>
+                ) : isDesigner ? (
+                  <div className="inline-flex items-center gap-2 px-4 py-2 border border-dashed border-gray-400 rounded text-gray-400">
+                    {playStoreIcon ? (
+                      <Image src={playStoreIcon} alt="Google Play" width={24} height={24} unoptimized={playStoreIcon.startsWith('data:')} />
+                    ) : (
+                      <div className="w-6 h-6 bg-gray-300 rounded" />
+                    )}
+                    <div className="text-left text-sm">
+                      <div className="text-xs">{playStoreTopText}</div>
+                      <div className="font-semibold">{playStoreBottomText}</div>
+                    </div>
+                  </div>
+                ) : null}
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,127 @@
+'use client';
+
+import clsx from 'clsx';
+import { CurrencySelect } from '../components/currency-select';
+import { LanguageSelect } from '../components/language-select';
+import { Image } from '@akinon/next/components/image';
+import { useDesignerFeatures } from '@akinon/next/components/theme-editor/hooks/use-designer-features';
+import {
+  useFooterBottomDesigner,
+  FOOTER_BOTTOM_PAYMENTS_BLOCK_ID
+} from '../views/footer/footer-bottom-context';
+import {
+  FOOTER_PLACEHOLDER_ID,
+  FOOTER_BOTTOM_SECTION_ID
+} from '../views/footer/native-widget-config';
+
+const FooterBottom = () => {
+  const { isDesigner, selectedBlockId, getBlock, blockVersion } =
+    useFooterBottomDesigner();
+
+  const paymentsBlock =
+    blockVersion >= 0 ? getBlock(FOOTER_BOTTOM_PAYMENTS_BLOCK_ID) : undefined;
+  const paymentStylesRaw = paymentsBlock?.styles as
+    | Record<string, unknown>
+    | undefined;
+
+  const iconSizeRaw = paymentStylesRaw?.size as string | number | undefined;
+  const iconSize = iconSizeRaw
+    ? typeof iconSizeRaw === 'number'
+      ? iconSizeRaw
+      : parseInt(String(iconSizeRaw), 10) || 24
+    : 24;
+
+  const { handleClick: handlePaymentsClick } = useDesignerFeatures({
+    blockId: FOOTER_BOTTOM_PAYMENTS_BLOCK_ID,
+    placeholderId: FOOTER_PLACEHOLDER_ID,
+    sectionId: FOOTER_BOTTOM_SECTION_ID,
+    isDesigner,
+    blockInfo: {
+      id: FOOTER_BOTTOM_PAYMENTS_BLOCK_ID,
+      type: 'icon-group',
+      label: 'Payment Icons'
+    }
+  });
+
+  const isPaymentsSelected =
+    selectedBlockId === FOOTER_BOTTOM_PAYMENTS_BLOCK_ID;
+
+  return (
+    <div className="py-16 border-t border-[#d0d0d0]">
+      <div className="container flex flex-col items-start justify-between gap-10 lg:flex-row">
+        <div className="flex items-center gap-9">
+          <div className="flex flex-col gap-2.5">
+            <span className="text-[13px] text-[#7d7d7d]">Country/region</span>
+            <div className="border border-[#7d7d7d]">
+              <CurrencySelect className="w-auto pl-3.5 pr-6 h-11" />
+            </div>
+          </div>
+
+          <div className="flex flex-col gap-2.5">
+            <span className="text-[13px] text-[#7d7d7d]">Language</span>
+            <div className="border border-[#7d7d7d]">
+              <LanguageSelect className="w-auto pl-3.5 pr-6 h-11" />
+            </div>
+          </div>
+        </div>
+
+        <div
+          className={clsx(
+            'flex items-center gap-6',
+            isDesigner && 'cursor-pointer',
+            isPaymentsSelected && 'ring-2 ring-blue-500 ring-offset-2 rounded'
+          )}
+          data-block-id={
+            isDesigner ? FOOTER_BOTTOM_PAYMENTS_BLOCK_ID : undefined
+          }
+          onClick={isDesigner ? handlePaymentsClick : undefined}
+        >
+          <Image
+            src="/shop-pay.svg"
+            alt="Shop Pay"
+            width={iconSize * 1.6}
+            height={iconSize}
+            unoptimized
+          />
+          <Image
+            src="/visa.svg"
+            alt="Visa"
+            width={iconSize * 1.6}
+            height={iconSize}
+            unoptimized
+          />
+          <Image
+            src="/mastercard.svg"
+            alt="Mastercard"
+            width={iconSize * 1.6}
+            height={iconSize}
+            unoptimized
+          />
+          <Image
+            src="/apple-pay.svg"
+            alt="Apple Pay"
+            width={iconSize * 1.6}
+            height={iconSize}
+            unoptimized
+          />
+          <Image
+            src="/google-pay.svg"
+            alt="Google Pay"
+            width={iconSize * 1.6}
+            height={iconSize}
+            unoptimized
+          />
+          <Image
+            src="/amex.svg"
+            alt="American Express"
+            width={iconSize * 1.6}
+            height={iconSize}
+            unoptimized
+          />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default FooterBottom;