@tbox.cn/app-module-promotion 0.2.0 → 0.9.3

package/src/client/components/CouponQrCode.tsx

@@ -0,0 +1,48 @@
+import QRCode from 'qrcode';
+import JsBarcode from 'jsbarcode';
+import { useEffect, useState } from 'react';
+import { useRef } from 'react';
+
+export function CouponQrCode(props: { value: string; disabled?: boolean }) {
+  const { value, disabled = false } = props;
+  const [src, setSrc] = useState<string>();
+
+  useEffect(() => {
+    let active = true;
+    setSrc(undefined);
+    void QRCode.toDataURL(value, {
+      width: 200,
+      margin: 1,
+      errorCorrectionLevel: 'M',
+      color: { dark: disabled ? '#999999' : '#000000', light: '#ffffff' },
+    }).then((dataUrl) => {
+      if (active) setSrc(dataUrl);
+    }).catch(() => {
+      if (active) setSrc(undefined);
+    });
+    return () => { active = false; };
+  }, [disabled, value]);
+
+  return src ? <img className={`promotion-sheet__qrcode${disabled ? ' promotion-sheet__qrcode--disabled' : ''}`} src={src} alt="券码二维码" /> : null;
+}
+
+export function CouponBarcode(props: { value: string; disabled?: boolean }) {
+  const { value, disabled = false } = props;
+  const ref = useRef<SVGSVGElement>(null);
+  useEffect(() => {
+    if (!ref.current) return;
+    try {
+      JsBarcode(ref.current, value, {
+        format: 'CODE128',
+        width: 2,
+        height: 52,
+        margin: 0,
+        displayValue: false,
+        lineColor: disabled ? '#999999' : '#000000',
+      });
+    } catch {
+      ref.current.replaceChildren();
+    }
+  }, [disabled, value]);
+  return <svg ref={ref} className={`promotion-sheet__barcode${disabled ? ' promotion-sheet__barcode--disabled' : ''}`} aria-label="券码条形码" role="img" />;
+}

package/src/client/components/CouponSheet.tsx

@@ -0,0 +1,124 @@
+/**
+ * 券浮层：从券行就地拉起的底部抽屉，券列表与「我的券」共用。
+ *
+ * 它替代了原来的券详情卡——就地展开、没有二次请求可补，所以呈现什么完全取决于
+ * 列表这一跳已经下发的字段：**缺的整块不渲染，绝不留空壳，也不编造占位文案**。
+ */
+import { X } from '@phosphor-icons/react';
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
+import { ImageWithFallback } from './ImageWithFallback';
+import { sanitizeActivityHtml } from '../utils/sanitize-activity-html';
+
+export interface SheetFact {
+  readonly icon: React.ReactNode;
+  readonly label: string;
+  readonly value: string;
+}
+
+export function CouponSheet(props: {
+  title: string;
+  imageUrl?: string;
+  subtitle?: string;
+  noticeText?: string;
+  guaranteeText?: string;
+  /** 图下沿的压条主文案：券列表放售价，我的券放权益额度 */
+  priceMain?: string;
+  /** 划线原价，仅在有主售价时才有比较意义 */
+  priceOriginal?: string;
+  /** 压条右侧：库存或状态 */
+  aside?: string;
+  facts?: readonly SheetFact[];
+  /** facts 之前的扩展内容，例如已领取券的券码和适用商家。 */
+  beforeFacts?: React.ReactNode;
+  extra?: React.ReactNode;
+  /** 底部贴边条；无动作可给的场景整条不出 */
+  foot?: React.ReactNode;
+  onClose: () => void;
+}) {
+  const { title, imageUrl, subtitle, noticeText, guaranteeText, priceMain, priceOriginal, aside, facts = [], beforeFacts, extra, foot, onClose } = props;
+  const [closing, setClosing] = useState(false);
+  const closingRef = useRef(false);
+  const closeTimerRef = useRef<number>();
+  const onCloseRef = useRef(onClose);
+  onCloseRef.current = onClose;
+
+  const finishClose = useCallback(() => {
+    if (!closingRef.current) return;
+    window.clearTimeout(closeTimerRef.current);
+    closingRef.current = false;
+    setClosing(false);
+    onCloseRef.current();
+  }, []);
+
+  const requestClose = useCallback(() => {
+    if (closingRef.current) return;
+    closingRef.current = true;
+    setClosing(true);
+    const reducedMotion = window.matchMedia?.('(prefers-reduced-motion: reduce)')?.matches ?? false;
+    closeTimerRef.current = window.setTimeout(finishClose, reducedMotion ? 1 : 200);
+  }, [finishClose]);
+
+  useEffect(() => {
+    const onKey = (e: KeyboardEvent) => { if (e.key === 'Escape') requestClose(); };
+    document.addEventListener('keydown', onKey);
+    return () => document.removeEventListener('keydown', onKey);
+  }, [requestClose]);
+
+  useEffect(() => () => window.clearTimeout(closeTimerRef.current), []);
+
+  return createPortal(
+    <div
+      className={`promotion-sheet${closing ? ' promotion-sheet--closing' : ''}`}
+      role="dialog"
+      aria-modal="true"
+      aria-label={`${title} 详情`}
+      onAnimationEnd={(event) => {
+        if (closing && event.target === event.currentTarget) finishClose();
+      }}
+      onMouseDown={(e) => { if (e.target === e.currentTarget) requestClose(); }}
+    >
+      <div className="promotion-sheet__panel">
+        <button type="button" className="promotion-sheet__close" aria-label="关闭详情" onClick={requestClose}>
+          <X size={18} weight="bold" aria-hidden="true" />
+        </button>
+        <div className="promotion-sheet__scroll">
+          <ImageWithFallback src={imageUrl} alt={title} className="promotion-sheet__image" />
+          {/* 价格条压在图下沿：与列表行同一组价格语言，浮层里放大一档 */}
+          {(priceMain || aside) && (
+            <div className="promotion-sheet__price">
+              {priceMain && <b>{priceMain}</b>}
+              {priceMain && priceOriginal && <s>{priceOriginal}</s>}
+              {aside && <span className="promotion-sheet__stock">{aside}</span>}
+            </div>
+          )}
+          <h4 className="promotion-sheet__title">{title}</h4>
+          {(noticeText || guaranteeText) && <div className="promotion-sheet__notice-strip">
+            {noticeText && <span><b>须知</b>{noticeText}</span>}
+            {guaranteeText && <span><b>保障</b>{guaranteeText}</span>}
+          </div>}
+          {subtitle && <p className="promotion-sheet__sub" dangerouslySetInnerHTML={{ __html: subtitle }} />}
+          {beforeFacts}
+          {facts.length > 0 && (
+            <>
+              <div className="promotion-sheet__section">使用须知</div>
+              <dl className="promotion-sheet__facts">
+                {facts.map((f) => (
+                  <div key={f.label}>
+                    <dt>{f.icon}{f.label}</dt>
+                    <dd dangerouslySetInnerHTML={{ __html: sanitizeActivityHtml(f.value) }} />
+                  </div>
+                ))}
+              </dl>
+            </>
+          )}
+          {extra}
+        </div>
+        {foot && <div className="promotion-sheet__foot">{foot}</div>}
+      </div>
+    </div>,
+    document.body,
+  );
+}
+
+export default CouponSheet;

package/src/client/components/ImageWithFallback.tsx

@@ -0,0 +1,39 @@
+/**
+ * 图片 + 加载失败占位（0.4.0 D6：模块自持 ~20 行，禁跨模块依赖/基元封顶不破）。
+ * 源：POC shopping-guide 占位语义。src 缺省或加载失败 → 图标占位。
+ */
+import { useState } from 'react';
+import { ImageSquare } from '@phosphor-icons/react';
+
+export function ImageWithFallback(props: {
+  src?: string;
+  alt: string;
+  className?: string;
+  /** 占位区尺寸（px，图标随比例缩小） */
+  size?: number;
+}) {
+  const { src, alt, className, size = 40 } = props;
+  const [failed, setFailed] = useState(false);
+  if (!src || failed) {
+    return (
+      <div
+        className={`img-fallback promotion-image--fallback ${className ?? ''}`.trim()}
+        aria-label={alt}
+        role="img"
+      >
+        <ImageSquare weight="duotone" size={Math.round(size * 0.45)} />
+      </div>
+    );
+  }
+  return (
+    <img
+      className={className}
+      src={src}
+      alt={alt}
+      loading="eager"
+      decoding="async"
+      referrerPolicy="no-referrer"
+      onError={() => setFailed(true)}
+    />
+  );
+}

package/src/client/index.ts

@@ -1,16 +1,35 @@
+/**
+ * module-promotion 客户端入口：9 个稳定传输卡型，renderer 内覆盖多个展示语义。
+ */
+import './styles/promotion.css'; // 0.4.0 D1：模块自持 CSS（副作用 import，首行保证先行加载）
+
 import type { CardComponent } from '@tbox.cn/app-contracts';
 import type { ClientContext, ClientModule } from '@tbox.cn/app-sdk/client';
-import { CouponCard } from './cards/coupon';
+import {
+  PromotionOfferListCard,
+  PromotionOfferDetailCard,
+  PromotionEntitlementListCard,
+  PromotionActivityListCard,
+  PromotionActivityDetailCard,
+  PromotionActivityCategoryListCard,
+  PromotionBestDealCard,
+} from './cards';
 
-/** 客户端卡片组件 map（key 约定 = cardType；CLI sync 装配读取） */
 const cards = {
-  coupon: CouponCard as CardComponent,
+  'promotion-offer-list': PromotionOfferListCard as CardComponent,
+  'promotion-offer-detail': PromotionOfferDetailCard as CardComponent,
+  'promotion-entitlement-list': PromotionEntitlementListCard as CardComponent,
+  'promotion-activity-list': PromotionActivityListCard as CardComponent,
+  'promotion-activity-detail': PromotionActivityDetailCard as CardComponent,
+  'promotion-activity-category-list': PromotionActivityCategoryListCard as CardComponent,
+  'promotion-best-deal': PromotionBestDealCard as CardComponent,
 } as const;
 
-/** 模块注册入口：自注册闭环（与服务端 serverModule 对称） */
 export const clientModule = {
   cards,
   register(ctx: ClientContext): void {
     ctx.cards.registerMap(cards);
   },
 } satisfies ClientModule;
+
+export { cards as promotionClientCards };