@pisell/materials 1.10.21 → 1.10.23

package/es/components/productCard/cartSkuCard/types.d.ts

@@ -0,0 +1,56 @@
+import { CSSProperties, ReactNode } from "react";
+
+//#region src/components/productCard/cartSkuCard/types.d.ts
+type CartSkuCardVariant = 'a2' | 'a5' | 'a9' | 'a12';
+interface CartSkuCardA12Display {
+  eyebrow?: ReactNode;
+  quantityText?: ReactNode;
+}
+interface CartSkuCardSlotContext {
+  item: any;
+  disabled: boolean;
+}
+interface CartSkuCardA12Slots {
+  contentFooter?: (context: CartSkuCardSlotContext) => ReactNode;
+  quantityControl?: (context: CartSkuCardSlotContext) => ReactNode;
+  actionRail?: (context: CartSkuCardSlotContext & {
+    defaultPrice: ReactNode;
+    defaultEdit: ReactNode;
+    defaultQuantityControl: ReactNode;
+  }) => ReactNode;
+  specifications?: (context: CartSkuCardSlotContext & {
+    defaultSpecifications: ReactNode;
+  }) => ReactNode;
+}
+interface CartSkuCardA12Tokens {
+  background: string;
+  borderColor: string;
+  borderRadius: string;
+  minHeight: string;
+  mediaWidth: string;
+  actionRailWidth: string;
+  contentPadding: string;
+  actionRailPadding: string;
+  accentColor: string;
+  titleColor: string;
+  titleFontSize: string;
+  titleFontWeight: number;
+  priceColor: string;
+  priceFontSize: string;
+  optionBackground: string;
+  optionLabelColor: string;
+  optionValueColor: string;
+  optionGap: string;
+  shadow: string;
+}
+interface CartSkuCardA12Presentation {
+  density?: 'compact' | 'comfortable';
+  optionColumns?: 1 | 2 | 3;
+  mediaFit?: 'cover' | 'contain';
+  contentAlign?: 'start' | 'center';
+  className?: string;
+  style?: CSSProperties;
+  tokens?: Partial<CartSkuCardA12Tokens>;
+}
+//#endregion
+export { CartSkuCardA12Display, CartSkuCardA12Presentation, CartSkuCardA12Slots, CartSkuCardVariant };

package/es/components/productCard/cartSkuCard/variants/A12/index.js

@@ -0,0 +1,126 @@
+import { _objectSpread2 } from "../../../../../_virtual/_@oxc-project_runtime@0.122.0/helpers/objectSpread2.js";
+import IconFont from "../../../../iconfont/index.js";
+import Weighing from "../../components/weighing/index.js";
+import { PREFIX } from "../../index.js";
+import React, { useMemo } from "react";
+import { formatAmount, image, locales, resolveWeighingSnapshot } from "@pisell/utils";
+import classNames from "classnames";
+import "./index.less";
+//#region src/components/productCard/cartSkuCard/variants/A12/index.tsx
+const TOKEN_VARIABLES = {
+	background: "--pc-a12-bg",
+	borderColor: "--pc-a12-border-color",
+	borderRadius: "--pc-a12-radius",
+	minHeight: "--pc-a12-min-height",
+	mediaWidth: "--pc-a12-media-width",
+	actionRailWidth: "--pc-a12-rail-width",
+	contentPadding: "--pc-a12-content-padding",
+	actionRailPadding: "--pc-a12-rail-padding",
+	accentColor: "--pc-a12-accent",
+	titleColor: "--pc-a12-title-color",
+	titleFontSize: "--pc-a12-title-size",
+	titleFontWeight: "--pc-a12-title-weight",
+	priceColor: "--pc-a12-price-color",
+	priceFontSize: "--pc-a12-price-size",
+	optionBackground: "--pc-a12-option-bg",
+	optionLabelColor: "--pc-a12-option-label-color",
+	optionValueColor: "--pc-a12-option-value-color",
+	optionGap: "--pc-a12-option-gap",
+	shadow: "--pc-a12-shadow"
+};
+/** 复用其它变体使用的 options，只在展示阶段合并同组已选项。 */
+function resolveSpecifications(dataSource) {
+	if (!Array.isArray(dataSource === null || dataSource === void 0 ? void 0 : dataSource.options)) return [];
+	const groups = /* @__PURE__ */ new Map();
+	dataSource.options.forEach((option, index) => {
+		var _ref, _option$name, _ref2, _option$quantity, _ref3, _ref4, _option$option_group_, _ref5, _ref6, _ref7, _option$option_group_2;
+		const name = (_ref = (_option$name = option === null || option === void 0 ? void 0 : option.name) !== null && _option$name !== void 0 ? _option$name : option === null || option === void 0 ? void 0 : option.title) !== null && _ref !== void 0 ? _ref : option === null || option === void 0 ? void 0 : option.variant_item_name;
+		if (name === void 0 || name === null || name === "") return;
+		const quantity = Math.max(1, Number((_ref2 = (_option$quantity = option.quantity) !== null && _option$quantity !== void 0 ? _option$quantity : option.num) !== null && _ref2 !== void 0 ? _ref2 : 1));
+		const value = quantity > 1 ? `${String(name)} × ${quantity}` : name;
+		const groupKey = String((_ref3 = (_ref4 = (_option$option_group_ = option.option_group_id) !== null && _option$option_group_ !== void 0 ? _option$option_group_ : option.group_id) !== null && _ref4 !== void 0 ? _ref4 : option.variant_group_id) !== null && _ref3 !== void 0 ? _ref3 : `option-${index}`);
+		const label = (_ref5 = (_ref6 = (_ref7 = (_option$option_group_2 = option.option_group_name) !== null && _option$option_group_2 !== void 0 ? _option$option_group_2 : option.group_name) !== null && _ref7 !== void 0 ? _ref7 : option.option_group_title) !== null && _ref6 !== void 0 ? _ref6 : option.group_title) !== null && _ref5 !== void 0 ? _ref5 : option.variant_group_name;
+		const current = groups.get(groupKey);
+		if (current) {
+			current.values.push(value);
+			if (!current.label && label) current.label = label;
+			return;
+		}
+		groups.set(groupKey, _objectSpread2(_objectSpread2({ key: groupKey }, label ? { label } : {}), {}, { values: [value] }));
+	});
+	return Array.from(groups.values()).map((group) => ({
+		key: group.key,
+		label: group.label,
+		value: group.values.map(String).join(", ")
+	}));
+}
+function getPresentationStyle(presentation) {
+	const style = _objectSpread2({}, (presentation === null || presentation === void 0 ? void 0 : presentation.style) || {});
+	Object.entries((presentation === null || presentation === void 0 ? void 0 : presentation.tokens) || {}).forEach(([key, value]) => {
+		if (value !== void 0) style[TOKEN_VARIABLES[key]] = value;
+	});
+	style["--pc-a12-option-columns"] = (presentation === null || presentation === void 0 ? void 0 : presentation.optionColumns) || 2;
+	return style;
+}
+const A12 = ({ dataSource, isShowImage = true, isShowDelete = false, isShowOriginalPrice = false, isShowEditProduct = false, disabled = false, disabledEditClick = false, slots, presentation, onDelete, onEditProduct }) => {
+	var _ref8, _dataSource$num, _dataSource$total, _dataSource$origin_to, _slots$contentFooter;
+	const display = (dataSource === null || dataSource === void 0 ? void 0 : dataSource.a12) || {};
+	const specificationsData = useMemo(() => resolveSpecifications(dataSource), [dataSource]);
+	const weighingInfo = useMemo(() => resolveWeighingSnapshot(dataSource), [dataSource]);
+	const quantity = Number((_ref8 = (_dataSource$num = dataSource === null || dataSource === void 0 ? void 0 : dataSource.num) !== null && _dataSource$num !== void 0 ? _dataSource$num : dataSource === null || dataSource === void 0 ? void 0 : dataSource.quantity) !== null && _ref8 !== void 0 ? _ref8 : 1) || 1;
+	const lineTotal = Number((_dataSource$total = dataSource === null || dataSource === void 0 ? void 0 : dataSource.total) !== null && _dataSource$total !== void 0 ? _dataSource$total : 0) * quantity - Number((dataSource === null || dataSource === void 0 ? void 0 : dataSource.totalDifference) || 0);
+	const originalTotal = Number((_dataSource$origin_to = dataSource === null || dataSource === void 0 ? void 0 : dataSource.origin_total) !== null && _dataSource$origin_to !== void 0 ? _dataSource$origin_to : 0) * quantity;
+	const symbol = dataSource === null || dataSource === void 0 ? void 0 : dataSource.symbol;
+	const slotContext = useMemo(() => ({
+		item: dataSource,
+		disabled
+	}), [dataSource, disabled]);
+	const style = useMemo(() => getPresentationStyle(presentation), [presentation]);
+	const defaultSpecifications = specificationsData.length ? /* @__PURE__ */ React.createElement("div", { className: `${PREFIX}-a12__specifications` }, specificationsData.map((specification) => /* @__PURE__ */ React.createElement("div", {
+		className: `${PREFIX}-a12__specification`,
+		key: specification.key
+	}, specification.label ? /* @__PURE__ */ React.createElement("span", { className: `${PREFIX}-a12__specification-label` }, specification.label) : null, /* @__PURE__ */ React.createElement("strong", { className: `${PREFIX}-a12__specification-value` }, specification.value)))) : (dataSource === null || dataSource === void 0 ? void 0 : dataSource.product_option_string) ? /* @__PURE__ */ React.createElement("div", { className: `${PREFIX}-a12__specification-summary` }, dataSource.product_option_string) : null;
+	const specifications = (slots === null || slots === void 0 ? void 0 : slots.specifications) ? slots.specifications(_objectSpread2(_objectSpread2({}, slotContext), {}, { defaultSpecifications })) : defaultSpecifications;
+	const contentFooter = slots === null || slots === void 0 || (_slots$contentFooter = slots.contentFooter) === null || _slots$contentFooter === void 0 ? void 0 : _slots$contentFooter.call(slots, slotContext);
+	const defaultPrice = /* @__PURE__ */ React.createElement("div", { className: `${PREFIX}-a12__price` }, /* @__PURE__ */ React.createElement("strong", null, formatAmount(lineTotal, 2, symbol)), isShowOriginalPrice && originalTotal > 0 && originalTotal !== lineTotal ? /* @__PURE__ */ React.createElement("del", null, formatAmount(originalTotal, 2, symbol)) : null);
+	const defaultEdit = Boolean(isShowEditProduct && onEditProduct) ? /* @__PURE__ */ React.createElement("button", {
+		type: "button",
+		className: `${PREFIX}-a12__edit`,
+		disabled: disabled || disabledEditClick,
+		onClick: (event) => {
+			event.preventDefault();
+			event.stopPropagation();
+			onEditProduct === null || onEditProduct === void 0 || onEditProduct(dataSource);
+		}
+	}, locales.getText("pisell2.product.card.edit")) : null;
+	const defaultQuantityControl = (slots === null || slots === void 0 ? void 0 : slots.quantityControl) ? slots.quantityControl(slotContext) : /* @__PURE__ */ React.createElement("div", { className: `${PREFIX}-a12__quantity-fallback` }, /* @__PURE__ */ React.createElement("span", null, display.quantityText || `× ${quantity}`));
+	const defaultActionRail = /* @__PURE__ */ React.createElement("aside", { className: `${PREFIX}-a12__rail` }, isShowDelete && onDelete ? /* @__PURE__ */ React.createElement("button", {
+		type: "button",
+		className: `${PREFIX}-a12__delete`,
+		"aria-label": locales.getText("pisell2.cart.sku-card.actions.delete"),
+		disabled,
+		onClick: (event) => {
+			event.preventDefault();
+			event.stopPropagation();
+			onDelete(dataSource);
+		}
+	}, /* @__PURE__ */ React.createElement(IconFont, { type: "pisell2-trash-01" })) : null, defaultPrice, defaultEdit, /* @__PURE__ */ React.createElement("div", { className: `${PREFIX}-a12__quantity-control` }, defaultQuantityControl));
+	const actionRail = (slots === null || slots === void 0 ? void 0 : slots.actionRail) ? slots.actionRail(_objectSpread2(_objectSpread2({}, slotContext), {}, {
+		defaultPrice,
+		defaultEdit,
+		defaultQuantityControl
+	})) : defaultActionRail;
+	return /* @__PURE__ */ React.createElement("div", {
+		className: classNames(`${PREFIX}-a12`, `${PREFIX}-a12--${(presentation === null || presentation === void 0 ? void 0 : presentation.density) || "comfortable"}`, `${PREFIX}-a12--align-${(presentation === null || presentation === void 0 ? void 0 : presentation.contentAlign) || "start"}`, !isShowImage && `pisell-cart-sku-card-a12--without-media`, presentation === null || presentation === void 0 ? void 0 : presentation.className),
+		style
+	}, isShowImage ? /* @__PURE__ */ React.createElement("div", { className: `${PREFIX}-a12__media` }, (dataSource === null || dataSource === void 0 ? void 0 : dataSource.image) ? /* @__PURE__ */ React.createElement("img", {
+		alt: "",
+		src: image.ali(dataSource.image, 320),
+		style: { objectFit: (presentation === null || presentation === void 0 ? void 0 : presentation.mediaFit) || "cover" }
+	}) : /* @__PURE__ */ React.createElement("span", { "aria-hidden": "true" }, String((dataSource === null || dataSource === void 0 ? void 0 : dataSource.name) || "").slice(0, 2))) : null, /* @__PURE__ */ React.createElement("div", { className: `${PREFIX}-a12__content` }, display.eyebrow ? /* @__PURE__ */ React.createElement("div", { className: `${PREFIX}-a12__eyebrow` }, display.eyebrow) : null, /* @__PURE__ */ React.createElement("div", { className: `${PREFIX}-a12__name` }, dataSource === null || dataSource === void 0 ? void 0 : dataSource.name), weighingInfo ? /* @__PURE__ */ React.createElement("div", { className: `${PREFIX}-a12__weighing` }, /* @__PURE__ */ React.createElement(Weighing, {
+		dataSource: weighingInfo,
+		symbol
+	})) : null, specifications, contentFooter ? /* @__PURE__ */ React.createElement("div", { className: `${PREFIX}-a12__content-footer` }, contentFooter) : null), actionRail);
+};
+//#endregion
+export { A12 as default };

package/es/components/productCard/cartSkuCard/variants/A12/index.less

@@ -0,0 +1,279 @@
+.pisell-cart-sku-card-a12 {
+  --pc-a12-bg: #fff;
+  --pc-a12-border-color: #e4e7ec;
+  --pc-a12-radius: 18px;
+  --pc-a12-min-height: 164px;
+  --pc-a12-media-width: 228px;
+  --pc-a12-rail-width: 190px;
+  --pc-a12-content-padding: 20px 22px;
+  --pc-a12-rail-padding: 18px 20px;
+  --pc-a12-accent: #b20d12;
+  --pc-a12-title-color: #101828;
+  --pc-a12-title-size: 32px;
+  --pc-a12-title-weight: 800;
+  --pc-a12-price-color: var(--pc-a12-accent);
+  --pc-a12-price-size: 30px;
+  --pc-a12-option-bg: #f5f6f8;
+  --pc-a12-option-label-color: #667085;
+  --pc-a12-option-value-color: #101828;
+  --pc-a12-option-gap: 6px;
+  --pc-a12-shadow: 0 12px 28px rgba(16, 24, 40, 0.08);
+
+  display: grid;
+  grid-template-columns:
+    var(--pc-a12-media-width)
+    minmax(0, 1fr)
+    var(--pc-a12-rail-width);
+  min-height: var(--pc-a12-min-height);
+  overflow: hidden;
+  border: 1px solid var(--pc-a12-border-color);
+  border-radius: var(--pc-a12-radius);
+  background: var(--pc-a12-bg);
+  box-shadow: var(--pc-a12-shadow);
+  hyphens: none;
+  overflow-wrap: normal;
+  word-break: normal;
+
+  &--without-media {
+    grid-template-columns: minmax(0, 1fr) var(--pc-a12-rail-width);
+  }
+
+  &__media {
+    position: relative;
+    display: grid;
+    min-height: var(--pc-a12-min-height);
+    place-items: center;
+    overflow: hidden;
+    background: #f2f4f7;
+    color: var(--pc-a12-accent);
+    font-size: 32px;
+    font-weight: 800;
+
+    img {
+      position: absolute;
+      inset: 0;
+      display: block;
+      width: 100%;
+      height: 100%;
+      min-height: 0;
+    }
+  }
+
+  &__content {
+    display: flex;
+    min-width: 0;
+    flex-direction: column;
+    justify-content: flex-start;
+    padding: var(--pc-a12-content-padding);
+  }
+
+  &__content-footer {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    margin-top: auto;
+    padding-top: 12px;
+
+    .ant-divider {
+      margin: 0 !important;
+    }
+  }
+
+  &--align-center &__content {
+    justify-content: center;
+  }
+
+  &__eyebrow {
+    overflow: hidden;
+    margin-bottom: 4px;
+    color: var(--pc-a12-accent);
+    font-size: 14px;
+    font-weight: 800;
+    line-height: 20px;
+    text-overflow: ellipsis;
+    text-transform: uppercase;
+    white-space: nowrap;
+  }
+
+  &__name {
+    min-width: 0;
+    overflow: hidden;
+    color: var(--pc-a12-title-color);
+    font-size: var(--pc-a12-title-size);
+    font-weight: var(--pc-a12-title-weight);
+    line-height: 1.15;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  &__weighing {
+    min-width: 0;
+    margin-top: 8px;
+  }
+
+  &__specifications {
+    display: grid;
+    grid-template-columns: repeat(
+      var(--pc-a12-option-columns, 2),
+      minmax(0, 1fr)
+    );
+    gap: var(--pc-a12-option-gap);
+    margin-top: 10px;
+  }
+
+  &__specification,
+  &__specification-summary {
+    min-width: 0;
+    padding: 7px 9px;
+    border-radius: 7px;
+    background: var(--pc-a12-option-bg);
+  }
+
+  &__specification {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+  }
+
+  &__specification-label {
+    overflow: hidden;
+    color: var(--pc-a12-option-label-color);
+    font-size: 11px;
+    font-weight: 700;
+    line-height: 16px;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  &__specification-value,
+  &__specification-summary {
+    overflow: hidden;
+    color: var(--pc-a12-option-value-color);
+    font-size: 16px;
+    font-weight: 700;
+    line-height: 20px;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  &__rail {
+    position: relative;
+    display: flex;
+    min-width: 0;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: var(--pc-a12-rail-padding);
+    border-left: 1px solid var(--pc-a12-border-color);
+  }
+
+  &__delete {
+    position: absolute;
+    top: 6px;
+    right: 6px;
+    display: grid;
+    width: 42px;
+    height: 42px;
+    padding: 0;
+    place-items: center;
+    border: 0;
+    border-radius: 50%;
+    background: transparent;
+    color: var(--pc-a12-accent);
+    font-size: 26px;
+    cursor: pointer;
+
+    .anticon,
+    svg {
+      width: 30px;
+      height: 30px;
+      font-size: 30px;
+    }
+
+    &:active {
+      background: #fef3f2;
+    }
+
+    &:disabled {
+      cursor: not-allowed;
+      opacity: 0.5;
+    }
+  }
+
+  &__price {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    color: var(--pc-a12-price-color);
+
+    strong {
+      font-size: var(--pc-a12-price-size);
+      font-weight: 800;
+      line-height: 1.15;
+      white-space: nowrap;
+    }
+
+    del {
+      color: #667085;
+      font-size: 13px;
+    }
+  }
+
+  &__edit {
+    min-width: 62px;
+    min-height: 38px;
+    margin-top: 10px;
+    padding: 7px 14px;
+    border: 1px solid #f5b7ba;
+    border-radius: 999px;
+    background: #fff;
+    color: var(--pc-a12-accent);
+    font: inherit;
+    font-size: 14px;
+    font-weight: 700;
+    white-space: nowrap;
+    cursor: pointer;
+
+    &:disabled {
+      cursor: not-allowed;
+      opacity: 0.5;
+    }
+  }
+
+  &__quantity-control {
+    display: flex;
+    width: 100%;
+    min-height: 44px;
+    align-items: center;
+    justify-content: center;
+    margin-top: 10px;
+    padding-top: 10px;
+  }
+
+  &__quantity-fallback {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 16px;
+    font-weight: 700;
+  }
+
+  &--compact {
+    --pc-a12-min-height: 132px;
+    --pc-a12-media-width: 124px;
+    --pc-a12-rail-width: 156px;
+    --pc-a12-content-padding: 15px 18px;
+    --pc-a12-rail-padding: 14px 16px;
+    --pc-a12-price-size: 25px;
+  }
+}
+
+@container (max-width: 620px) {
+  .pisell-cart-sku-card-a12 {
+    --pc-a12-media-width: 112px;
+    --pc-a12-rail-width: 150px;
+    --pc-a12-content-padding: 14px;
+    --pc-a12-price-size: 24px;
+    --pc-a12-option-columns: 1;
+  }
+}

package/es/components/productCard/lineItem/index.js

@@ -34,6 +34,7 @@ const _excluded = [
 	"holderOptions",
 	"onBookingStatusChange",
 	"onAddTimeProductCard",
+	"a12UnsupportedFallback",
 	"onAction",
 	"onDelete",
 	"onNote",
@@ -47,6 +48,7 @@ const isBookingItem = (dataSource) => {
 	var _dataSource$_extend;
 	return Boolean((dataSource === null || dataSource === void 0 || (_dataSource$_extend = dataSource._extend) === null || _dataSource$_extend === void 0 ? void 0 : _dataSource$_extend.product) || (dataSource === null || dataSource === void 0 ? void 0 : dataSource.booking_id) || (dataSource === null || dataSource === void 0 ? void 0 : dataSource.appointment_status) || (dataSource === null || dataSource === void 0 ? void 0 : dataSource.start_date));
 };
+const resolveLineItemType = ({ requestedType, itemKind, hasBundle, fallback = "a9" }) => requestedType === "a12" && (itemKind === "booking" || hasBundle) ? fallback : requestedType;
 const translateText = (text, translationOriginal) => {
 	if (typeof text === "string") return text;
 	if (!text) return "";
@@ -126,14 +128,36 @@ const mapLineItemOptions = (options, translationOriginal) => options.map((option
 		num: (_ref2 = (_option$num2 = option.num) !== null && _option$num2 !== void 0 ? _option$num2 : option.quantity) !== null && _ref2 !== void 0 ? _ref2 : 1
 	});
 });
+const getFirstDisplayText = (candidates, translationOriginal) => {
+	for (const candidate of candidates) {
+		const translated = translateText(candidate, translationOriginal).trim();
+		if (translated) return translated;
+	}
+	return "";
+};
+const resolveA12Eyebrow = (product, translationOriginal) => {
+	var _product$a, _product$metadata2, _product$metadata3, _categories$find, _categories$;
+	const categories = Array.isArray(product === null || product === void 0 ? void 0 : product.categories) ? product.categories : Array.isArray(product === null || product === void 0 ? void 0 : product.product_categories) ? product.product_categories : [];
+	return getFirstDisplayText([
+		product === null || product === void 0 || (_product$a = product.a12) === null || _product$a === void 0 ? void 0 : _product$a.eyebrow,
+		product === null || product === void 0 ? void 0 : product.category_name,
+		product === null || product === void 0 ? void 0 : product.product_category_name,
+		product === null || product === void 0 ? void 0 : product.product_type_name,
+		product === null || product === void 0 || (_product$metadata2 = product.metadata) === null || _product$metadata2 === void 0 ? void 0 : _product$metadata2.category_name,
+		product === null || product === void 0 || (_product$metadata3 = product.metadata) === null || _product$metadata3 === void 0 ? void 0 : _product$metadata3.product_category_name,
+		(_categories$find = categories.find((category) => category === null || category === void 0 ? void 0 : category.direct)) === null || _categories$find === void 0 ? void 0 : _categories$find.name,
+		(_categories$ = categories[0]) === null || _categories$ === void 0 ? void 0 : _categories$.name
+	], translationOriginal);
+};
 const convertProductToLineItemProduct = (product, translationOriginal, symbol, amountFormatter) => {
-	var _product$metadata2, _ref3, _product$num, _ref4, _product$num2, _product$metadata3, _product$metadata4, _product$discount_lis, _product$discount_lis2, _product$metadata5, _product$metadata6, _ref5, _product$num3;
+	var _product$metadata4, _ref3, _product$num, _ref4, _product$num2, _product$metadata5, _product$metadata6, _product$product_opti, _product$product_sku2, _product$discount_lis, _product$discount_lis2, _product$metadata7, _product$metadata8, _ref5, _product$num3;
 	const title = translateText(product.product_title || product.title, translationOriginal);
 	const bundle = (product.product_bundle || []).map((bundleItem) => convertBundle(bundleItem, translationOriginal, amountFormatter));
 	const lineOriginTotal = resolveLineOriginTotal(product);
 	const lineOptions = mapLineItemOptions(resolveLineItemOptions(product), translationOriginal);
+	const a12Eyebrow = resolveA12Eyebrow(product, translationOriginal);
 	return {
-		_id: ((_product$metadata2 = product.metadata) === null || _product$metadata2 === void 0 ? void 0 : _product$metadata2.unique_identification_number) || product.order_detail_id || product.product_id,
+		_id: ((_product$metadata4 = product.metadata) === null || _product$metadata4 === void 0 ? void 0 : _product$metadata4.unique_identification_number) || product.order_detail_id || product.product_id,
 		id: product.product_id,
 		product_id: product.product_id,
 		product_variant_id: product.product_variant_id,
@@ -144,11 +168,11 @@ const convertProductToLineItemProduct = (product, translationOriginal, symbol, a
 		image: product.cover,
 		num: (_ref3 = (_product$num = product.num) !== null && _product$num !== void 0 ? _product$num : product.product_quantity) !== null && _ref3 !== void 0 ? _ref3 : 1,
 		quantity: (_ref4 = (_product$num2 = product.num) !== null && _product$num2 !== void 0 ? _product$num2 : product.product_quantity) !== null && _ref4 !== void 0 ? _ref4 : 1,
-		price: (_product$metadata3 = product.metadata) === null || _product$metadata3 === void 0 ? void 0 : _product$metadata3.source_product_price,
+		price: (_product$metadata5 = product.metadata) === null || _product$metadata5 === void 0 ? void 0 : _product$metadata5.source_product_price,
 		total: product.selling_price,
 		origin_total: lineOriginTotal,
 		original_total: lineOriginTotal,
-		source_product_price: (_product$metadata4 = product.metadata) === null || _product$metadata4 === void 0 ? void 0 : _product$metadata4.source_product_price,
+		source_product_price: (_product$metadata6 = product.metadata) === null || _product$metadata6 === void 0 ? void 0 : _product$metadata6.source_product_price,
 		selling_price: product.selling_price,
 		payment_price: product.payment_price,
 		tax_fee: product.tax_fee,
@@ -158,12 +182,13 @@ const convertProductToLineItemProduct = (product, translationOriginal, symbol, a
 		product_sku: product.product_sku,
 		product_bundle: bundle,
 		bundle,
-		product_option_string: product.product_option_string,
+		product_option_string: (_product$product_opti = product.product_option_string) !== null && _product$product_opti !== void 0 ? _product$product_opti : (_product$product_sku2 = product.product_sku) === null || _product$product_sku2 === void 0 ? void 0 : _product$product_sku2.product_option_string,
 		options: lineOptions,
+		a12: _objectSpread2(_objectSpread2({}, product.a12 || {}), a12Eyebrow ? { eyebrow: a12Eyebrow } : {}),
 		discount_list: product.discount_list,
 		promotions: product.promotions,
-		discount_reason: (_product$discount_lis = (_product$discount_lis2 = product.discount_list) === null || _product$discount_lis2 === void 0 || (_product$discount_lis2 = _product$discount_lis2.find((d) => (d === null || d === void 0 ? void 0 : d.type) === "product")) === null || _product$discount_lis2 === void 0 || (_product$discount_lis2 = _product$discount_lis2.discount) === null || _product$discount_lis2 === void 0 ? void 0 : _product$discount_lis2.message) !== null && _product$discount_lis !== void 0 ? _product$discount_lis : (_product$metadata5 = product.metadata) === null || _product$metadata5 === void 0 ? void 0 : _product$metadata5.product_discount_reason,
-		isGift: Boolean(product.gift_card || product.isGift || product._isGiftPromotion || ((_product$metadata6 = product.metadata) === null || _product$metadata6 === void 0 ? void 0 : _product$metadata6._giftInfo) || product._giftInfo),
+		discount_reason: (_product$discount_lis = (_product$discount_lis2 = product.discount_list) === null || _product$discount_lis2 === void 0 || (_product$discount_lis2 = _product$discount_lis2.find((d) => (d === null || d === void 0 ? void 0 : d.type) === "product")) === null || _product$discount_lis2 === void 0 || (_product$discount_lis2 = _product$discount_lis2.discount) === null || _product$discount_lis2 === void 0 ? void 0 : _product$discount_lis2.message) !== null && _product$discount_lis !== void 0 ? _product$discount_lis : (_product$metadata7 = product.metadata) === null || _product$metadata7 === void 0 ? void 0 : _product$metadata7.product_discount_reason,
+		isGift: Boolean(product.gift_card || product.isGift || product._isGiftPromotion || ((_product$metadata8 = product.metadata) === null || _product$metadata8 === void 0 ? void 0 : _product$metadata8._giftInfo) || product._giftInfo),
 		giftData: product.giftData,
 		_origin: product,
 		_extend: {
@@ -183,7 +208,7 @@ const convertProductToLineItemProduct = (product, translationOriginal, symbol, a
 };
 const LineItem = (props) => {
 	var _context$appHelper$ut, _context$appHelper$ut2, _context$appHelper$ut3, _context$appHelper$ut4, _dataSource$_extend2, _dataSource$_extend4;
-	const { dataSource = defaultValue.dataSource, itemType, type = "a9", isShowBookingHeader, rightActions = [], rightActionsDisplay = "swipe", escapeDom, isShowImage = defaultValue.isShowImage, isShowDelete = defaultValue.isShowDelete, isShowInlineDelete = isShowDelete, isShowNote = defaultValue.isShowNote, isShowAmountFooter = defaultValue.isShowAmountFooter, disabledClick = defaultValue.disabledClick, disabledEdit = defaultValue.disabledEdit, disabledNoteEdit = disabledEdit, statusOptions = [], statusLoading = false, statusDisabled = false, isShowRelatedProduct = true, holderOptions, onBookingStatusChange, onAddTimeProductCard, onAction, onDelete, onNote, onCard, onPromotion, onGift, symbol: amountSymbol, amountFormatter } = props, other = _objectWithoutProperties(props, _excluded);
+	const { dataSource = defaultValue.dataSource, itemType, type = "a9", isShowBookingHeader, rightActions = [], rightActionsDisplay = "swipe", escapeDom, isShowImage = defaultValue.isShowImage, isShowDelete = defaultValue.isShowDelete, isShowInlineDelete = isShowDelete, isShowNote = defaultValue.isShowNote, isShowAmountFooter = defaultValue.isShowAmountFooter, disabledClick = defaultValue.disabledClick, disabledEdit = defaultValue.disabledEdit, disabledNoteEdit = disabledEdit, statusOptions = [], statusLoading = false, statusDisabled = false, isShowRelatedProduct = true, holderOptions, onBookingStatusChange, onAddTimeProductCard, a12UnsupportedFallback = "a9", onAction, onDelete, onNote, onCard, onPromotion, onGift, symbol: amountSymbol, amountFormatter } = props, other = _objectWithoutProperties(props, _excluded);
 	const itemKind = itemType || (isBookingItem(dataSource) ? "booking" : "product");
 	const context = useEngineContext();
 	const translationOriginal = useTranslationOriginal();
@@ -217,9 +242,15 @@ const LineItem = (props) => {
 		symbol,
 		translationOriginal
 	]);
+	const resolvedType = resolveLineItemType({
+		requestedType: type,
+		itemKind,
+		hasBundle: Boolean(Array.isArray(dataSource === null || dataSource === void 0 ? void 0 : dataSource.product_bundle) && dataSource.product_bundle.length || Array.isArray(dataSource === null || dataSource === void 0 ? void 0 : dataSource.bundle) && dataSource.bundle.length),
+		fallback: a12UnsupportedFallback
+	});
 	if (itemKind === "product") return /* @__PURE__ */ React.createElement(CartSkuCard, _objectSpread2(_objectSpread2({}, other), {}, {
 		dataSource: productDataSource,
-		type,
+		type: resolvedType,
 		rightActions,
 		rightActionsDisplay,
 		escapeDom,
@@ -240,8 +271,8 @@ const LineItem = (props) => {
 	}));
 	return /* @__PURE__ */ React.createElement(BookingLineItem, _objectSpread2(_objectSpread2({}, other), {}, {
 		dataSource,
-		type,
-		cartSkuType: type,
+		type: resolvedType,
+		cartSkuType: resolvedType,
 		isShowBookingHeader,
 		relatedProductDataSource,
 		addTimeProductDataSources,

package/es/components/productCard/types.d.ts

@@ -1,3 +1,5 @@
+import { CartSkuCardA12Display } from "./cartSkuCard/types.js";
+
 //#region src/components/productCard/types.d.ts
 type bundleType = {
   id: number;
@@ -59,7 +61,8 @@ type productType = {
   is_show_week?: boolean;
   promotions?: any[];
   isGift?: boolean;
-  giftData?: any;
+  giftData?: any; /** A12 横向购物车卡片的归一化展示数据。 */
+  a12?: CartSkuCardA12Display;
 };
 /**
  * 排序总配置

package/es/components/section-footers/index.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 //#region src/components/section-footers/index.d.ts
 interface SectionFooterProps {
   left?: React.ReactNode;

package/es/components/virtual-keyboard/Amount/types.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { BaseNumberKeyboardProps } from "../BaseNumberKeyboard/index.js";
 
 //#region src/components/virtual-keyboard/Amount/types.d.ts