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

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

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

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