@salla.sa/twilight-theme-engine 1.0.85 → 1.0.87

package/tailwind/components/navigation/MobileMenu.tsx.txt

@@ -0,0 +1,160 @@
+import { useState, useCallback, useEffect, memo } from 'react';
+import { useQuery } from '@tanstack/react-query';
+import { useTwilight } from '../../providers/twilight-context';
+import { useTranslation } from '../../providers/I18nProvider';
+import { Drawer } from '../../components/drawer';
+import { Link } from '../common';
+import { menu } from '../../api/menu';
+import type { MenuItem } from '../../types';
+
+export interface MobileMenuProps {
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+const MOBILE_SKELETON_ITEMS = 5;
+const SKELETON_WIDTHS = ['w-32', 'w-28', 'w-36', 'w-24', 'w-30'];
+
+const MobileMenuSkeleton = memo(function MobileMenuSkeleton() {
+  return (
+    <ul className="divide-y divide-gray-100">
+      {Array.from({ length: MOBILE_SKELETON_ITEMS }, (_, i) => (
+        <li key={i} className="py-4">
+          <span
+            className={`inline-block animate-pulse rounded bg-gray-200 h-5 ${SKELETON_WIDTHS[i]}`}
+          />
+        </li>
+      ))}
+    </ul>
+  );
+});
+
+export function MobileMenu(props: MobileMenuProps) {
+  if (!props.isOpen) return null;
+  return <MobileMenuContent {...props} />;
+}
+
+function MobileMenuContent({ onClose }: MobileMenuProps) {
+  const { theme } = useTwilight();
+  const { data: menus = [], isLoading } = useQuery(menu.queries.header());
+  const { t } = useTranslation();
+
+  const [menuStack, setMenuStack] = useState<{ title: string; items: MenuItem[] }[]>([]);
+  const [isAnimating, setIsAnimating] = useState(false);
+
+  const currentLevel = menuStack[menuStack.length - 1] ?? { title: '', items: menus };
+  const isRootLevel = menuStack.length === 0;
+
+  const openSubmenu = useCallback((item: MenuItem) => {
+    if (item.children && item.children.length > 0) {
+      setIsAnimating(true);
+      setMenuStack((prev) => [...prev, { title: item.title, items: item.children! }]);
+      requestAnimationFrame(() => {
+        setIsAnimating(false);
+      });
+    }
+  }, []);
+
+  const goBack = useCallback(() => {
+    setIsAnimating(true);
+    setMenuStack((prev) => prev.slice(0, -1));
+    requestAnimationFrame(() => {
+      setIsAnimating(false);
+    });
+  }, []);
+
+  useEffect(() => {
+    document.body.classList.add('menu-opened');
+    return () => document.body.classList.remove('menu-opened');
+  }, []);
+
+  const getListAnimationClass = () => {
+    if (isAnimating) {
+      return theme.is_rtl ? 'translate-x-4 opacity-0' : '-translate-x-4 opacity-0';
+    }
+    return 'translate-x-0 opacity-100';
+  };
+
+  return (
+    <>
+      <Drawer
+        isOpen
+        onClose={onClose}
+        size="md"
+        closeOnBackdropClick={true}
+        preventBodyScroll={false}
+        className="overflow-visible"
+      >
+        <button
+          type="button"
+          onClick={onClose}
+          aria-label={t('common.buttons.close', 'Close')}
+          className="absolute top-0 w-12 h-12 flex items-center justify-center bg-[#d35a51] text-white hover:bg-red-600 transition-colors z-50 ltr:-right-12 rtl:-left-12"
+        >
+          <i className="sicon-cancel text-xl leading-none"></i>
+        </button>
+
+        <Drawer.Header showCloseButton={false} onClose={onClose}>
+          <div className="flex items-center gap-2 w-full">
+            {!isRootLevel && (
+              <button
+                type="button"
+                className="text-gray-500 hover:text-gray-800 transition-colors flex-shrink-0"
+                onClick={goBack}
+                aria-label={t('common.buttons.back', 'Back')}
+              >
+                <i className="sicon-keyboard_arrow_left text-xl flex items-center justify-center"></i>
+              </button>
+            )}
+            <span className="font-bold text-lg truncate flex-1 text-center pr-6 rtl:pl-6 rtl:pr-0">
+              {isRootLevel ? t('blocks.header.main_menu', 'Menu') : currentLevel.title}
+            </span>
+          </div>
+        </Drawer.Header>
+        <Drawer.Body className="p-0 overflow-hidden">
+          <nav className="mobile-menu h-full overflow-y-auto">
+            {isLoading ? (
+              <MobileMenuSkeleton />
+            ) : (
+              <ul
+                className={`divide-y divide-gray-100 transition-all duration-200 ease-out ${getListAnimationClass()}`}
+              >
+                {currentLevel.items.map((item) => {
+                  const hasChildren =
+                    item.has_children && item.children && item.children.length > 0;
+
+                  return (
+                    <li key={item.id} className="mobile-menu-item">
+                      {hasChildren ? (
+                        <button
+                          type="button"
+                          className="flex items-center justify-between w-full py-4 hover:text-primary transition-colors text-start group"
+                          onClick={() => openSubmenu(item)}
+                        >
+                          <span className="text-gray-800 group-hover:text-primary font-medium text-base">
+                            {item.title}
+                          </span>
+                          <i className="sicon-keyboard_arrow_right rtl:rotate-180 text-gray-500 group-hover:text-primary text-lg flex items-center justify-center h-full"></i>
+                        </button>
+                      ) : (
+                        <Link
+                          to={item.url}
+                          className="block w-full py-4 hover:text-primary transition-colors text-gray-800 font-medium text-base group"
+                          onClick={onClose}
+                        >
+                          <span className="group-hover:translate-x-1 rtl:group-hover:-translate-x-1 inline-block transition-transform">
+                            {item.title}
+                          </span>
+                        </Link>
+                      )}
+                    </li>
+                  );
+                })}
+              </ul>
+            )}
+          </nav>
+        </Drawer.Body>
+      </Drawer>
+    </>
+  );
+}

package/tailwind/components/navigation/index.ts.txt

@@ -0,0 +1,4 @@
+import { LazyMainMenu, LazyMobileMenu } from './lazy';
+
+// Lazy-loaded navigation components (code-split)
+export { LazyMainMenu as MainMenu, LazyMobileMenu as MobileMenu };

package/tailwind/components/navigation/lazy.ts.txt

@@ -0,0 +1,11 @@
+import { lazy } from 'react';
+
+/**
+ * Lazy-loaded navigation components
+ * Use these for code-splitting navigation sections
+ */
+export const LazyMainMenu = lazy(() => import('./MainMenu').then((m) => ({ default: m.MainMenu })));
+
+export const LazyMobileMenu = lazy(() =>
+  import('./MobileMenu').then((m) => ({ default: m.MobileMenu }))
+);

package/tailwind/components/product/AddToCartForm.tsx.txt

@@ -0,0 +1,365 @@
+import { SallaAddProductButton } from '@salla.sa/twilight-components-react/add-product-button';
+import { SallaButton } from '@salla.sa/twilight-components-react/button';
+import { SallaCountDown } from '@salla.sa/twilight-components-react/count-down';
+import { SallaFileUpload } from '@salla.sa/twilight-components-react/file-upload';
+import { SallaGifting } from '@salla.sa/twilight-components-react/gifting';
+import { SallaMultipleBundleProduct } from '@salla.sa/twilight-components-react/multiple-bundle-product';
+// Use the eager (non-deferred) Core export: product options are an essential form
+// control, and the deferred wrapper's visibility-triggered hydration races with the
+// gallery's image layout shift and gets stuck on the skeleton, so options never appear.
+import { SallaProductOptionsCore as SallaProductOptions } from '@salla.sa/twilight-components-react/product-options';
+import { SallaProductSizeGuide } from '@salla.sa/twilight-components-react/product-size-guide';
+import { SallaQuantityInput } from '@salla.sa/twilight-components-react/quantity-input';
+import { useHostAttributes } from '@salla.sa/twilight-theme-engine/hooks/useHostAttributes';
+import { useTranslation } from '@salla.sa/twilight-theme-engine/i18n';
+import { getActiveCurrency } from '@salla.sa/twilight-theme-engine/api/client';
+import type { ReactNode } from 'react';
+import { useCallback, useEffect, useState } from 'react';
+import type { Product } from '../../types';
+import { CurrencySymbol } from '../common';
+
+interface AddToCartFormProps {
+  product: Product;
+  stickyAddToCart?: boolean;
+  giftingIntro?: string;
+  formStartSlot?: ReactNode;
+  formEndSlot?: ReactNode;
+}
+
+const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+  e.preventDefault();
+  // Native event, like Twig's onsubmit: the SDK spins its submitter's salla-button until the add settles.
+  window.salla?.form.onSubmit('cart.addItem', e.nativeEvent);
+};
+
+const handleChange = (e: React.FormEvent<HTMLFormElement>) => {
+  const form = e.currentTarget;
+  // Not reportValidity(): it focuses and scrolls to the first empty required option mid-edit.
+  const isComplete = Array.from(form.elements).every(
+    (el) => !(el as HTMLInputElement).willValidate || (el as HTMLInputElement).validity.valid
+  );
+  if (isComplete) {
+    window.salla?.product?.getPrice(new FormData(form));
+  }
+};
+
+export function AddToCartForm({
+  product,
+  stickyAddToCart,
+  giftingIntro,
+  formStartSlot,
+  formEndSlot,
+}: AddToCartFormProps) {
+  const { t } = useTranslation();
+  // The API converts the amounts but still labels them in the store's own currency.
+  const priceCurrency = getActiveCurrency(product.currency);
+  const [activeCollapse, setActiveCollapse] = useState<string | null>(null);
+
+  // stable ref: an inline arrow re-runs on every render and resets the user's selection
+  const optionsRef = useCallback(
+    (el: { setOptionsData?: (data: never[]) => void } | null) =>
+      void el?.setOptionsData?.(product.options as never[]),
+    [product.options]
+  );
+
+  // salla-product-options reads its `options` prop only in its constructor (no
+  // @Watch), and on first load that constructor runs before sdk.init has set
+  // page.id — so its getDetails(page.id) fallback fetches nothing and the options
+  // never reflect. Seed page.id (=== product.id) and wait for the SDK to be ready
+  // before mounting the element so its fallback resolves on first load too.
+  const [optionsReady, setOptionsReady] = useState(false);
+  useEffect(() => {
+    const salla = window.salla;
+    if (!salla) return;
+    let alive = true;
+    salla.config?.set?.('page.id', product.id);
+    Promise.resolve(salla.onReady?.()).finally(() => {
+      if (alive) setOptionsReady(true);
+    });
+    return () => {
+      alive = false;
+    };
+  }, [product.id]);
+
+  const handleCollapseToggle = useCallback((id: string) => {
+    setActiveCollapse((current) => (current === id ? null : id));
+  }, []);
+
+  const hasPreorder = product.has_preorder_campaign && product.preorder;
+  const hasWeightOrSizeGuide = product.weight || product.has_size_guide;
+  const hasAttachments = product.can_add_note || product.can_upload_file;
+  const amount =
+    typeof product.base_currency_price === 'object'
+      ? product.base_currency_price.amount
+      : product.base_currency_price;
+
+  const quantityRef = useHostAttributes({
+    max: product.max_quantity,
+    value: 1,
+    name: 'quantity',
+  });
+  const addButtonRef = useHostAttributes({
+    amount,
+    'loader-position': 'end',
+    type: 'submit',
+    width: 'wide',
+    'required-shipping': product.is_require_shipping,
+    'is-subscribed': product.notify_availability?.subscribed,
+  });
+
+  return (
+    <form
+      className="form product-form"
+      encType="multipart/form-data"
+      method="post"
+      onSubmit={handleSubmit}
+      onChange={handleChange}
+    >
+      <input type="hidden" name="id" value={product.id} />
+
+      {formStartSlot}
+
+      {optionsReady && product.options && product.options.length > 0 && (
+        <SallaProductOptions
+          key={product.id}
+          // constructor-only options parse: push data via ref on client remount
+          ref={optionsRef}
+          options={JSON.stringify(product.options)}
+          productId={product.id}
+        />
+      )}
+
+      {product.has_bundle_products && (
+        <SallaMultipleBundleProduct bundleSections={JSON.stringify(product)} />
+      )}
+
+      {hasWeightOrSizeGuide && (
+        <section className="bg-white p-5 rounded-md mb-5">
+          {product.weight && (
+            <div
+              className={`center-between ${product.has_size_guide ? 'pb-5 mb-5 border-b-[1px]' : ''}`}
+            >
+              <b className="form-label rtl:space-x-reverse space-x-1">
+                <i className="sicon-luggage-cart"></i>
+                <span>{t('pages.products.weight', 'Weight')}</span>
+              </b>
+              <span className="product-weight text-sm">{product.weight}</span>
+            </div>
+          )}
+          {product.has_size_guide && (
+            <>
+              <div className="center-between">
+                <b className="form-label rtl:space-x-reverse space-x-1">
+                  <i className="sicon-pencil-ruler"></i>
+                  <span>{t('pages.products.size_guides', 'Size Guides')}</span>
+                </b>
+                <SallaButton
+                  shape="link"
+                  color="primary"
+                  className="!p-0 text-sm with-arrow"
+                  onClick={() =>
+                    window.salla?.event?.dispatch('size-guide::open', String(product.id))
+                  }
+                >
+                  {t('pages.products.show_size_guides', 'Show Size Guides')}
+                  <i className="sicon-keyboard_arrow_left"></i>
+                </SallaButton>
+              </div>
+              <SallaProductSizeGuide />
+            </>
+          )}
+        </section>
+      )}
+
+      {hasAttachments && (
+        <section className="bg-white p-5 rounded-md mb-5">
+          <div className="sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start">
+            <div className="form-label">
+              <b className="block">{t('pages.products.attachments', 'Attachments')}</b>
+            </div>
+            <div className="mt-1 sm:mt-0 sm:col-span-2 text-end">
+              <div className="flex rtl:space-x-reverse space-x-3">
+                {product.can_add_note && (
+                  <button
+                    type="button"
+                    onClick={() => handleCollapseToggle(`note_${product.id}`)}
+                    className={`btn-tab btn--collapse ${activeCollapse === `note_${product.id}` ? 'is-opened' : 'is-closed'}`}
+                  >
+                    <i className="font-medium sicon-chat-conversation-alt rtl:ml-1.5 ltr:mr-1.5"></i>
+                    <span className="fix-align">{t('pages.products.add_note', 'Add Note')}</span>
+                  </button>
+                )}
+                {product.can_upload_file && (
+                  <button
+                    type="button"
+                    onClick={() => handleCollapseToggle(`file_${product.id}`)}
+                    className={`btn-tab btn--collapse ${activeCollapse === `file_${product.id}` ? 'is-opened' : 'is-closed'}`}
+                  >
+                    <i className="font-medium sicon-paperclip rtl:ml-1.5 ltr:mr-1.5"></i>
+                    <span className="fix-align">{t('pages.products.add_file', 'Add File')}</span>
+                  </button>
+                )}
+              </div>
+
+              {product.can_add_note && (
+                <div
+                  className={`collapse-content ${activeCollapse === `note_${product.id}` ? 'is-opened' : 'is-closed'}`}
+                >
+                  <div className="pt-4">
+                    <textarea
+                      className="animated animatedfadeInDown fadeInDown form-input h-16 bg-gray-50 block"
+                      placeholder={t('pages.products.notes_placeholder', 'Add your notes here...')}
+                      name="notes"
+                      cols={30}
+                      rows={10}
+                      defaultValue={product.notes}
+                    ></textarea>
+                  </div>
+                </div>
+              )}
+
+              {product.can_upload_file && (
+                <div
+                  className={`collapse-content ${activeCollapse === `file_${product.id}` ? 'is-opened' : 'is-closed'}`}
+                >
+                  <div className="pt-4 px-1">
+                    <SallaFileUpload
+                      accept="image/png, image/jpeg, image/jpg, image/gif, video/*, application/pdf"
+                      className="product-option-uploader"
+                    >
+                      <div className="product-option-uploader-placholder">
+                        <span className="product-option-uploader-placholder-icon">
+                          <i className="sicon-camera"></i>
+                        </span>
+                        <p className="profile-filepond-placholder-text">
+                          {t('common.uploader.drag_and_drop', 'Drag and drop files here')}
+                        </p>
+                        <span className="filepond--label-action">
+                          {t('common.uploader.browse', 'Browse')}
+                        </span>
+                      </div>
+                    </SallaFileUpload>
+                  </div>
+                </div>
+              )}
+            </div>
+          </div>
+        </section>
+      )}
+
+      {formEndSlot}
+
+      <section className="flex bg-white p-5 sm:pb-0 rounded-md rounded-b-none">
+        <div className="center-between w-full">
+          <div className="form-label">
+            <b className="block">{t('pages.products.price', 'Price')}</b>
+          </div>
+
+          <div
+            className={`flex whitespace-nowrap price-wrapper gap-4 items-center ${product.is_out_of_stock ? 'hidden' : ''}`}
+          >
+            <div
+              className={`price_is_on_sale space-x-2 rtl:space-x-reverse whitespace-nowrap ${product.is_on_sale ? '' : 'hidden'}`}
+            >
+              <span className="total-price text-red-800 font-bold text-xl inline-block">
+                {product.sale_price} <CurrencySymbol currency={priceCurrency} />
+              </span>
+              <span className="before-price text-gray-500 line-through">
+                {product.regular_price} <CurrencySymbol currency={priceCurrency} />
+              </span>
+            </div>
+            <div
+              className={`starting-or-normal-price gap-4 ${product.is_on_sale ? 'hidden' : 'flex'}`}
+            >
+              {product.starting_price && (
+                <span className="starting-price-title">
+                  {t('pages.products.starting_price', 'Starting from')}
+                </span>
+              )}
+              <span className="total-price font-bold text-xl inline-block">
+                {String(product.starting_price ?? product.price)}{' '}
+                <CurrencySymbol currency={priceCurrency} />
+              </span>
+            </div>
+          </div>
+
+          <div
+            className={`out-of-stock min-h-7 leading-7 text-base text-red-600 !opacity-50 font-bold ${product.is_out_of_stock ? 'scale-pulse' : 'hidden'}`}
+          >
+            {t('pages.products.out_of_stock', 'Out of Stock')}
+          </div>
+        </div>
+      </section>
+
+      {hasPreorder ? (
+        <section className="mt-5 p-5">
+          <SallaCountDown preOrder={JSON.stringify(product.preorder)} boxed labeled />
+        </section>
+      ) : null}
+
+      <section className="sticky-product-bar bg-white p-5 rounded-md rounded-b-none">
+        {product.is_hidden_quantity || product.type === 'booking' ? (
+          <input
+            type="hidden"
+            value="1"
+            name="quantity"
+            aria-label={t('pages.products.quantity', 'Quantity')}
+          />
+        ) : (
+          <div className="sticky-product-bar__quantity center-between mb-5">
+            <span className="form-label font-bold">{t('pages.products.quantity', 'Quantity')}</span>
+            <SallaQuantityInput
+              ref={quantityRef}
+              max={product.max_quantity ?? undefined}
+              value={1}
+              name="quantity"
+              aria-label={t('pages.products.quantity', 'Quantity')}
+              className="border-gray-200 flex justify-end"
+            />
+          </div>
+        )}
+
+        <SallaAddProductButton
+          ref={addButtonRef}
+          {...(product.can_quick_buy ? { quickBuy: true } : {})}
+          {...(stickyAddToCart ? { supportStickyBar: true } : {})}
+          {...(product.is_require_shipping ? { requiredShipping: true } : {})}
+          {...(hasPreorder ? { hasPreOrder: true } : {})}
+          amount={amount}
+          className="mt-5 w-full sticky-product-bar__btn"
+          productStatus={product.status}
+          productType={product.type}
+          productId={product.id}
+          loaderPosition="end"
+          type="submit"
+          width="wide"
+          {...(product.notify_availability
+            ? {
+                ...(product.notify_availability.subscribed ? { isSubscribed: true } : {}),
+                channels: product.notify_availability.channels.join(','),
+                ...(product.notify_availability.subscribed_options
+                  ? {
+                      subscribedOptions: JSON.stringify(
+                        product.notify_availability.subscribed_options
+                      ),
+                    }
+                  : {}),
+                ...(product.notify_availability.options ? { notifyOptionsAvailability: true } : {}),
+              }
+            : {})}
+        >
+          {product.add_to_cart_label}
+        </SallaAddProductButton>
+      </section>
+
+      {product.giftable && (
+        <SallaGifting
+          className="mt-5"
+          widgetSubtitle={giftingIntro}
+          productId={Number(product.id)}
+          {...(product.is_require_shipping ? { physicalProducts: true } : {})}
+        />
+      )}
+    </form>
+  );
+}