@rebuy/rebuy 3.22.0 → 3.23.0-rc.1

package/dist/index.cjs

@@ -4652,16 +4652,35 @@ var buildPrice = () => ({
   content: { en: buildPriceContent() },
   sectionType: "text"
 });
+var HAS_VARIANT_TITLE = "hasVariantTitle";
 var buildVariantTitle = (settings) => {
   const show = settings.productOptions?.showVariantTitle;
   if (!show || show === "hide") return [];
   return [
     {
       content: { en: buildStyledText("{{variantTitle}}", settings.displaySettings?.variant) },
-      sectionType: "text"
+      mutators: [
+        { effect: "set_false", variable: HAS_VARIANT_TITLE, when: { operator: "is_empty", type: "content" } },
+        {
+          effect: "set_true",
+          variable: HAS_VARIANT_TITLE,
+          when: { operator: "is_not_empty", type: "content" }
+        }
+      ],
+      sectionType: "text",
+      visibility: { variable: HAS_VARIANT_TITLE, visibleWhen: true }
     }
   ];
 };
+var detailBlock = (sections, horizontal, hasVariantTitleLine) => ({
+  alignment: { horizontal: horizontal ? "start" : "center", vertical: "top" },
+  direction: "rows",
+  name: "detail",
+  sections,
+  sectionType: "layout",
+  spacing: "none",
+  ...hasVariantTitleLine && { variables: [{ defaultValue: false, name: HAS_VARIANT_TITLE }] }
+});
 var SHOW_DESCRIPTION = "showDescription";
 var HAS_DESCRIPTION = "hasDescription";
 var buildDescription = (settings) => {
@@ -4704,6 +4723,14 @@ var buildDescription = (settings) => {
     }
   ];
 };
+var SHOW_VARIANTS = "showVariants";
+var REVEAL_PENDING = "revealPending";
+var revealsVariants = (settings) => settings.viewOptions?.displayActions !== false && settings.productOptions?.showVariantOptions === "default";
+var contentMutator = (effect, variable, operator) => ({
+  effect,
+  variable,
+  when: { operator, type: "content" }
+});
 var buildVariants = (settings) => {
   if (settings.viewOptions?.displayActions === false) return [];
   if (settings.productOptions?.showVariantOptions === "never") return [];
@@ -4711,8 +4738,16 @@ var buildVariants = (settings) => {
   return [
     {
       hideOutOfStockVariants: !!settings.productOptions?.hideOutOfStockVariants,
+      ...revealsVariants(settings) && {
+        mutators: [
+          contentMutator("set_false", REVEAL_PENDING, "is_empty"),
+          contentMutator("set_true", REVEAL_PENDING, "is_not_empty")
+        ]
+      },
       ...selector && { selector: VARIANT_SELECTOR[selector] },
-      sectionType: "variants"
+      sectionType: "variants",
+      variantMode: "single",
+      ...revealsVariants(settings) && { visibility: { variable: SHOW_VARIANTS, visibleWhen: true } }
     }
   ];
 };
@@ -4769,8 +4804,25 @@ var buildSubscriptionButton = (settings) => {
   ];
 };
 var BUTTON_KINDS = ["plain", "primary", "secondary"];
-var buildAddButton = (settings) => {
+var buttonKind = (settings) => {
   const kind = settings.button?.kind;
+  return BUTTON_KINDS.includes(kind) ? kind : "primary";
+};
+var buildRevealButton = (settings) => revealsVariants(settings) ? [
+  {
+    buttonStyle: buttonKind(settings),
+    sections: [
+      { buttonField: "buttonLabel", content: { en: "{{variantOptionsLabel}}" }, sectionType: "text" }
+    ],
+    sectionType: "button",
+    variableEffects: [
+      { effect: "set_false", variable: REVEAL_PENDING },
+      { effect: "set_true", variable: SHOW_VARIANTS }
+    ],
+    visibility: { variable: REVEAL_PENDING, visibleWhen: true }
+  }
+] : [];
+var buildAddButton = (settings) => {
   const slot = (buttonField, override) => ({
     buttonField,
     content: localizedContent(OFFER_LABELS[buttonField], override, ADD_LABEL_TOKENS),
@@ -4778,7 +4830,7 @@ var buildAddButton = (settings) => {
   });
   return {
     action: "addToOrder",
-    buttonStyle: BUTTON_KINDS.includes(kind) ? kind : "primary",
+    buttonStyle: buttonKind(settings),
     sections: [
       slot("addToCart", settings.language?.addToCart),
       slot("addingToCart", settings.language?.addingToCart),
@@ -4787,14 +4839,10 @@ var buildAddButton = (settings) => {
       // Off-checkout Buy Now: the label the button shows once it links to the created checkout.
       slot("redirectToCheckout", settings.language?.redirectToCheckout)
     ],
-    sectionType: "button"
+    sectionType: "button",
+    ...revealsVariants(settings) && { visibility: { variable: REVEAL_PENDING, visibleWhen: false } }
   };
 };
-var rowsLayout = (sections) => ({
-  direction: "rows",
-  sections,
-  sectionType: "layout"
-});
 var buildOfferCard = (settings, horizontal) => {
   const image = buildImage(settings);
   const title = buildTitle(settings);
@@ -4805,18 +4853,33 @@ var buildOfferCard = (settings, horizontal) => {
   const variants = buildVariants(settings);
   const quantity = buildQuantity(settings);
   const subscription = buildSubscriptionButton(settings);
+  const reveal = buildRevealButton(settings);
   const addButton = buildAddButton(settings);
   const controls = [...description, ...quantity, ...variants, ...subscription];
-  if (!horizontal) return [gridCardImage(image), title, ...variantTitle, ...reviews, price, ...controls, addButton];
-  const info = rowsLayout([title, ...variantTitle, ...reviews, price]);
-  const card = {
+  const info = detailBlock([title, ...variantTitle, ...reviews, price], horizontal, variantTitle.length > 0);
+  const card = (sections) => [
+    {
+      alignment: { horizontal: horizontal ? "start" : "center", vertical: "top" },
+      direction: "rows",
+      name: "card",
+      sections,
+      sectionType: "layout",
+      spacing: "base",
+      ...revealsVariants(settings) && {
+        variables: [SHOW_VARIANTS, REVEAL_PENDING].map((name) => ({ defaultValue: false, name }))
+      }
+    }
+  ];
+  if (!horizontal) return card([gridCardImage(image), info, ...controls, ...reveal, addButton]);
+  const action = reveal.length ? { direction: "rows", name: "action", sections: [...reveal, addButton], sectionType: "layout" } : addButton;
+  const row = {
     alignment: { horizontal: "start", vertical: "middle" },
     direction: "grid",
     grid: { columns: [COMPACT_CARD_IMAGE_PX, "fill", "auto"], rows: ["auto"] },
-    sections: [image, info, addButton],
+    sections: [image, info, action],
     sectionType: "layout"
   };
-  return [card, ...controls];
+  return card([row, ...controls]);
 };
 
 // src/transforms/offerV1/convertOfferToV2.ts

package/dist/index.mjs

@@ -4358,16 +4358,35 @@ var buildPrice = () => ({
   content: { en: buildPriceContent() },
   sectionType: "text"
 });
+var HAS_VARIANT_TITLE = "hasVariantTitle";
 var buildVariantTitle = (settings) => {
   const show = settings.productOptions?.showVariantTitle;
   if (!show || show === "hide") return [];
   return [
     {
       content: { en: buildStyledText("{{variantTitle}}", settings.displaySettings?.variant) },
-      sectionType: "text"
+      mutators: [
+        { effect: "set_false", variable: HAS_VARIANT_TITLE, when: { operator: "is_empty", type: "content" } },
+        {
+          effect: "set_true",
+          variable: HAS_VARIANT_TITLE,
+          when: { operator: "is_not_empty", type: "content" }
+        }
+      ],
+      sectionType: "text",
+      visibility: { variable: HAS_VARIANT_TITLE, visibleWhen: true }
     }
   ];
 };
+var detailBlock = (sections, horizontal, hasVariantTitleLine) => ({
+  alignment: { horizontal: horizontal ? "start" : "center", vertical: "top" },
+  direction: "rows",
+  name: "detail",
+  sections,
+  sectionType: "layout",
+  spacing: "none",
+  ...hasVariantTitleLine && { variables: [{ defaultValue: false, name: HAS_VARIANT_TITLE }] }
+});
 var SHOW_DESCRIPTION = "showDescription";
 var HAS_DESCRIPTION = "hasDescription";
 var buildDescription = (settings) => {
@@ -4410,6 +4429,14 @@ var buildDescription = (settings) => {
     }
   ];
 };
+var SHOW_VARIANTS = "showVariants";
+var REVEAL_PENDING = "revealPending";
+var revealsVariants = (settings) => settings.viewOptions?.displayActions !== false && settings.productOptions?.showVariantOptions === "default";
+var contentMutator = (effect, variable, operator) => ({
+  effect,
+  variable,
+  when: { operator, type: "content" }
+});
 var buildVariants = (settings) => {
   if (settings.viewOptions?.displayActions === false) return [];
   if (settings.productOptions?.showVariantOptions === "never") return [];
@@ -4417,8 +4444,16 @@ var buildVariants = (settings) => {
   return [
     {
       hideOutOfStockVariants: !!settings.productOptions?.hideOutOfStockVariants,
+      ...revealsVariants(settings) && {
+        mutators: [
+          contentMutator("set_false", REVEAL_PENDING, "is_empty"),
+          contentMutator("set_true", REVEAL_PENDING, "is_not_empty")
+        ]
+      },
       ...selector && { selector: VARIANT_SELECTOR[selector] },
-      sectionType: "variants"
+      sectionType: "variants",
+      variantMode: "single",
+      ...revealsVariants(settings) && { visibility: { variable: SHOW_VARIANTS, visibleWhen: true } }
     }
   ];
 };
@@ -4475,8 +4510,25 @@ var buildSubscriptionButton = (settings) => {
   ];
 };
 var BUTTON_KINDS = ["plain", "primary", "secondary"];
-var buildAddButton = (settings) => {
+var buttonKind = (settings) => {
   const kind = settings.button?.kind;
+  return BUTTON_KINDS.includes(kind) ? kind : "primary";
+};
+var buildRevealButton = (settings) => revealsVariants(settings) ? [
+  {
+    buttonStyle: buttonKind(settings),
+    sections: [
+      { buttonField: "buttonLabel", content: { en: "{{variantOptionsLabel}}" }, sectionType: "text" }
+    ],
+    sectionType: "button",
+    variableEffects: [
+      { effect: "set_false", variable: REVEAL_PENDING },
+      { effect: "set_true", variable: SHOW_VARIANTS }
+    ],
+    visibility: { variable: REVEAL_PENDING, visibleWhen: true }
+  }
+] : [];
+var buildAddButton = (settings) => {
   const slot = (buttonField, override) => ({
     buttonField,
     content: localizedContent(OFFER_LABELS[buttonField], override, ADD_LABEL_TOKENS),
@@ -4484,7 +4536,7 @@ var buildAddButton = (settings) => {
   });
   return {
     action: "addToOrder",
-    buttonStyle: BUTTON_KINDS.includes(kind) ? kind : "primary",
+    buttonStyle: buttonKind(settings),
     sections: [
       slot("addToCart", settings.language?.addToCart),
       slot("addingToCart", settings.language?.addingToCart),
@@ -4493,14 +4545,10 @@ var buildAddButton = (settings) => {
       // Off-checkout Buy Now: the label the button shows once it links to the created checkout.
       slot("redirectToCheckout", settings.language?.redirectToCheckout)
     ],
-    sectionType: "button"
+    sectionType: "button",
+    ...revealsVariants(settings) && { visibility: { variable: REVEAL_PENDING, visibleWhen: false } }
   };
 };
-var rowsLayout = (sections) => ({
-  direction: "rows",
-  sections,
-  sectionType: "layout"
-});
 var buildOfferCard = (settings, horizontal) => {
   const image = buildImage(settings);
   const title = buildTitle(settings);
@@ -4511,18 +4559,33 @@ var buildOfferCard = (settings, horizontal) => {
   const variants = buildVariants(settings);
   const quantity = buildQuantity(settings);
   const subscription = buildSubscriptionButton(settings);
+  const reveal = buildRevealButton(settings);
   const addButton = buildAddButton(settings);
   const controls = [...description, ...quantity, ...variants, ...subscription];
-  if (!horizontal) return [gridCardImage(image), title, ...variantTitle, ...reviews, price, ...controls, addButton];
-  const info = rowsLayout([title, ...variantTitle, ...reviews, price]);
-  const card = {
+  const info = detailBlock([title, ...variantTitle, ...reviews, price], horizontal, variantTitle.length > 0);
+  const card = (sections) => [
+    {
+      alignment: { horizontal: horizontal ? "start" : "center", vertical: "top" },
+      direction: "rows",
+      name: "card",
+      sections,
+      sectionType: "layout",
+      spacing: "base",
+      ...revealsVariants(settings) && {
+        variables: [SHOW_VARIANTS, REVEAL_PENDING].map((name) => ({ defaultValue: false, name }))
+      }
+    }
+  ];
+  if (!horizontal) return card([gridCardImage(image), info, ...controls, ...reveal, addButton]);
+  const action = reveal.length ? { direction: "rows", name: "action", sections: [...reveal, addButton], sectionType: "layout" } : addButton;
+  const row = {
     alignment: { horizontal: "start", vertical: "middle" },
     direction: "grid",
     grid: { columns: [COMPACT_CARD_IMAGE_PX, "fill", "auto"], rows: ["auto"] },
-    sections: [image, info, addButton],
+    sections: [image, info, action],
     sectionType: "layout"
   };
-  return [card, ...controls];
+  return card([row, ...controls]);
 };
 
 // src/transforms/offerV1/convertOfferToV2.ts

package/dist/schema/widgets/checkout-and-beyond/variables.d.ts

@@ -366,9 +366,11 @@ export type CABVisibility = z.infer<typeof CABVisibility>;
  * Fires against the hosting section's OWN rendered copy — the buyer-language content after token
  * interpolation and HTML stripping — so a section can publish "I have nothing to show" and a sibling
  * control bound to the same variable hides with it (the offer card's `{{productDescription}}` line hiding
- * its "Description" toggle on a product with no description). Text sections only: that is the one section
- * type whose content the runtime interpolates; on any other host the trigger parses but never fires.
- * Content conditions are the mutators phase after count conditions.
+ * its "Description" toggle on a product with no description). Hosts: a `text` section (its interpolated
+ * copy) and a `variants` section, whose "content" is its selectable choices — empty when the product has
+ * fewer than two purchasable variants, so a card can hide a "choose options" control for a product with
+ * nothing to choose. On any other host the trigger parses but never fires. Content conditions are the
+ * mutators phase after count conditions.
  */
 export declare const CABContentTrigger: z.ZodObject<{
     operator: z.ZodDefault<z.ZodEnum<{

package/dist/server/index.cjs

@@ -3237,16 +3237,35 @@ var buildPrice = () => ({
   content: { en: buildPriceContent() },
   sectionType: "text"
 });
+var HAS_VARIANT_TITLE = "hasVariantTitle";
 var buildVariantTitle = (settings) => {
   const show = settings.productOptions?.showVariantTitle;
   if (!show || show === "hide") return [];
   return [
     {
       content: { en: buildStyledText("{{variantTitle}}", settings.displaySettings?.variant) },
-      sectionType: "text"
+      mutators: [
+        { effect: "set_false", variable: HAS_VARIANT_TITLE, when: { operator: "is_empty", type: "content" } },
+        {
+          effect: "set_true",
+          variable: HAS_VARIANT_TITLE,
+          when: { operator: "is_not_empty", type: "content" }
+        }
+      ],
+      sectionType: "text",
+      visibility: { variable: HAS_VARIANT_TITLE, visibleWhen: true }
     }
   ];
 };
+var detailBlock = (sections, horizontal, hasVariantTitleLine) => ({
+  alignment: { horizontal: horizontal ? "start" : "center", vertical: "top" },
+  direction: "rows",
+  name: "detail",
+  sections,
+  sectionType: "layout",
+  spacing: "none",
+  ...hasVariantTitleLine && { variables: [{ defaultValue: false, name: HAS_VARIANT_TITLE }] }
+});
 var SHOW_DESCRIPTION = "showDescription";
 var HAS_DESCRIPTION = "hasDescription";
 var buildDescription = (settings) => {
@@ -3289,6 +3308,14 @@ var buildDescription = (settings) => {
     }
   ];
 };
+var SHOW_VARIANTS = "showVariants";
+var REVEAL_PENDING = "revealPending";
+var revealsVariants = (settings) => settings.viewOptions?.displayActions !== false && settings.productOptions?.showVariantOptions === "default";
+var contentMutator = (effect, variable, operator) => ({
+  effect,
+  variable,
+  when: { operator, type: "content" }
+});
 var buildVariants = (settings) => {
   if (settings.viewOptions?.displayActions === false) return [];
   if (settings.productOptions?.showVariantOptions === "never") return [];
@@ -3296,8 +3323,16 @@ var buildVariants = (settings) => {
   return [
     {
       hideOutOfStockVariants: !!settings.productOptions?.hideOutOfStockVariants,
+      ...revealsVariants(settings) && {
+        mutators: [
+          contentMutator("set_false", REVEAL_PENDING, "is_empty"),
+          contentMutator("set_true", REVEAL_PENDING, "is_not_empty")
+        ]
+      },
       ...selector && { selector: VARIANT_SELECTOR[selector] },
-      sectionType: "variants"
+      sectionType: "variants",
+      variantMode: "single",
+      ...revealsVariants(settings) && { visibility: { variable: SHOW_VARIANTS, visibleWhen: true } }
     }
   ];
 };
@@ -3354,8 +3389,25 @@ var buildSubscriptionButton = (settings) => {
   ];
 };
 var BUTTON_KINDS2 = ["plain", "primary", "secondary"];
-var buildAddButton = (settings) => {
+var buttonKind = (settings) => {
   const kind = settings.button?.kind;
+  return BUTTON_KINDS2.includes(kind) ? kind : "primary";
+};
+var buildRevealButton = (settings) => revealsVariants(settings) ? [
+  {
+    buttonStyle: buttonKind(settings),
+    sections: [
+      { buttonField: "buttonLabel", content: { en: "{{variantOptionsLabel}}" }, sectionType: "text" }
+    ],
+    sectionType: "button",
+    variableEffects: [
+      { effect: "set_false", variable: REVEAL_PENDING },
+      { effect: "set_true", variable: SHOW_VARIANTS }
+    ],
+    visibility: { variable: REVEAL_PENDING, visibleWhen: true }
+  }
+] : [];
+var buildAddButton = (settings) => {
   const slot = (buttonField, override) => ({
     buttonField,
     content: localizedContent(OFFER_LABELS[buttonField], override, ADD_LABEL_TOKENS),
@@ -3363,7 +3415,7 @@ var buildAddButton = (settings) => {
   });
   return {
     action: "addToOrder",
-    buttonStyle: BUTTON_KINDS2.includes(kind) ? kind : "primary",
+    buttonStyle: buttonKind(settings),
     sections: [
       slot("addToCart", settings.language?.addToCart),
       slot("addingToCart", settings.language?.addingToCart),
@@ -3372,14 +3424,10 @@ var buildAddButton = (settings) => {
       // Off-checkout Buy Now: the label the button shows once it links to the created checkout.
       slot("redirectToCheckout", settings.language?.redirectToCheckout)
     ],
-    sectionType: "button"
+    sectionType: "button",
+    ...revealsVariants(settings) && { visibility: { variable: REVEAL_PENDING, visibleWhen: false } }
   };
 };
-var rowsLayout = (sections) => ({
-  direction: "rows",
-  sections,
-  sectionType: "layout"
-});
 var buildOfferCard = (settings, horizontal) => {
   const image = buildImage(settings);
   const title = buildTitle(settings);
@@ -3390,18 +3438,33 @@ var buildOfferCard = (settings, horizontal) => {
   const variants = buildVariants(settings);
   const quantity = buildQuantity(settings);
   const subscription = buildSubscriptionButton(settings);
+  const reveal = buildRevealButton(settings);
   const addButton = buildAddButton(settings);
   const controls = [...description, ...quantity, ...variants, ...subscription];
-  if (!horizontal) return [gridCardImage(image), title, ...variantTitle, ...reviews, price, ...controls, addButton];
-  const info = rowsLayout([title, ...variantTitle, ...reviews, price]);
-  const card = {
+  const info = detailBlock([title, ...variantTitle, ...reviews, price], horizontal, variantTitle.length > 0);
+  const card = (sections) => [
+    {
+      alignment: { horizontal: horizontal ? "start" : "center", vertical: "top" },
+      direction: "rows",
+      name: "card",
+      sections,
+      sectionType: "layout",
+      spacing: "base",
+      ...revealsVariants(settings) && {
+        variables: [SHOW_VARIANTS, REVEAL_PENDING].map((name) => ({ defaultValue: false, name }))
+      }
+    }
+  ];
+  if (!horizontal) return card([gridCardImage(image), info, ...controls, ...reveal, addButton]);
+  const action = reveal.length ? { direction: "rows", name: "action", sections: [...reveal, addButton], sectionType: "layout" } : addButton;
+  const row = {
     alignment: { horizontal: "start", vertical: "middle" },
     direction: "grid",
     grid: { columns: [COMPACT_CARD_IMAGE_PX, "fill", "auto"], rows: ["auto"] },
-    sections: [image, info, addButton],
+    sections: [image, info, action],
     sectionType: "layout"
   };
-  return [card, ...controls];
+  return card([row, ...controls]);
 };
 
 // src/transforms/offerV1/convertOfferToV2.ts

package/dist/server/index.mjs

@@ -3186,16 +3186,35 @@ var buildPrice = () => ({
   content: { en: buildPriceContent() },
   sectionType: "text"
 });
+var HAS_VARIANT_TITLE = "hasVariantTitle";
 var buildVariantTitle = (settings) => {
   const show = settings.productOptions?.showVariantTitle;
   if (!show || show === "hide") return [];
   return [
     {
       content: { en: buildStyledText("{{variantTitle}}", settings.displaySettings?.variant) },
-      sectionType: "text"
+      mutators: [
+        { effect: "set_false", variable: HAS_VARIANT_TITLE, when: { operator: "is_empty", type: "content" } },
+        {
+          effect: "set_true",
+          variable: HAS_VARIANT_TITLE,
+          when: { operator: "is_not_empty", type: "content" }
+        }
+      ],
+      sectionType: "text",
+      visibility: { variable: HAS_VARIANT_TITLE, visibleWhen: true }
     }
   ];
 };
+var detailBlock = (sections, horizontal, hasVariantTitleLine) => ({
+  alignment: { horizontal: horizontal ? "start" : "center", vertical: "top" },
+  direction: "rows",
+  name: "detail",
+  sections,
+  sectionType: "layout",
+  spacing: "none",
+  ...hasVariantTitleLine && { variables: [{ defaultValue: false, name: HAS_VARIANT_TITLE }] }
+});
 var SHOW_DESCRIPTION = "showDescription";
 var HAS_DESCRIPTION = "hasDescription";
 var buildDescription = (settings) => {
@@ -3238,6 +3257,14 @@ var buildDescription = (settings) => {
     }
   ];
 };
+var SHOW_VARIANTS = "showVariants";
+var REVEAL_PENDING = "revealPending";
+var revealsVariants = (settings) => settings.viewOptions?.displayActions !== false && settings.productOptions?.showVariantOptions === "default";
+var contentMutator = (effect, variable, operator) => ({
+  effect,
+  variable,
+  when: { operator, type: "content" }
+});
 var buildVariants = (settings) => {
   if (settings.viewOptions?.displayActions === false) return [];
   if (settings.productOptions?.showVariantOptions === "never") return [];
@@ -3245,8 +3272,16 @@ var buildVariants = (settings) => {
   return [
     {
       hideOutOfStockVariants: !!settings.productOptions?.hideOutOfStockVariants,
+      ...revealsVariants(settings) && {
+        mutators: [
+          contentMutator("set_false", REVEAL_PENDING, "is_empty"),
+          contentMutator("set_true", REVEAL_PENDING, "is_not_empty")
+        ]
+      },
       ...selector && { selector: VARIANT_SELECTOR[selector] },
-      sectionType: "variants"
+      sectionType: "variants",
+      variantMode: "single",
+      ...revealsVariants(settings) && { visibility: { variable: SHOW_VARIANTS, visibleWhen: true } }
     }
   ];
 };
@@ -3303,8 +3338,25 @@ var buildSubscriptionButton = (settings) => {
   ];
 };
 var BUTTON_KINDS2 = ["plain", "primary", "secondary"];
-var buildAddButton = (settings) => {
+var buttonKind = (settings) => {
   const kind = settings.button?.kind;
+  return BUTTON_KINDS2.includes(kind) ? kind : "primary";
+};
+var buildRevealButton = (settings) => revealsVariants(settings) ? [
+  {
+    buttonStyle: buttonKind(settings),
+    sections: [
+      { buttonField: "buttonLabel", content: { en: "{{variantOptionsLabel}}" }, sectionType: "text" }
+    ],
+    sectionType: "button",
+    variableEffects: [
+      { effect: "set_false", variable: REVEAL_PENDING },
+      { effect: "set_true", variable: SHOW_VARIANTS }
+    ],
+    visibility: { variable: REVEAL_PENDING, visibleWhen: true }
+  }
+] : [];
+var buildAddButton = (settings) => {
   const slot = (buttonField, override) => ({
     buttonField,
     content: localizedContent(OFFER_LABELS[buttonField], override, ADD_LABEL_TOKENS),
@@ -3312,7 +3364,7 @@ var buildAddButton = (settings) => {
   });
   return {
     action: "addToOrder",
-    buttonStyle: BUTTON_KINDS2.includes(kind) ? kind : "primary",
+    buttonStyle: buttonKind(settings),
     sections: [
       slot("addToCart", settings.language?.addToCart),
       slot("addingToCart", settings.language?.addingToCart),
@@ -3321,14 +3373,10 @@ var buildAddButton = (settings) => {
       // Off-checkout Buy Now: the label the button shows once it links to the created checkout.
       slot("redirectToCheckout", settings.language?.redirectToCheckout)
     ],
-    sectionType: "button"
+    sectionType: "button",
+    ...revealsVariants(settings) && { visibility: { variable: REVEAL_PENDING, visibleWhen: false } }
   };
 };
-var rowsLayout = (sections) => ({
-  direction: "rows",
-  sections,
-  sectionType: "layout"
-});
 var buildOfferCard = (settings, horizontal) => {
   const image = buildImage(settings);
   const title = buildTitle(settings);
@@ -3339,18 +3387,33 @@ var buildOfferCard = (settings, horizontal) => {
   const variants = buildVariants(settings);
   const quantity = buildQuantity(settings);
   const subscription = buildSubscriptionButton(settings);
+  const reveal = buildRevealButton(settings);
   const addButton = buildAddButton(settings);
   const controls = [...description, ...quantity, ...variants, ...subscription];
-  if (!horizontal) return [gridCardImage(image), title, ...variantTitle, ...reviews, price, ...controls, addButton];
-  const info = rowsLayout([title, ...variantTitle, ...reviews, price]);
-  const card = {
+  const info = detailBlock([title, ...variantTitle, ...reviews, price], horizontal, variantTitle.length > 0);
+  const card = (sections) => [
+    {
+      alignment: { horizontal: horizontal ? "start" : "center", vertical: "top" },
+      direction: "rows",
+      name: "card",
+      sections,
+      sectionType: "layout",
+      spacing: "base",
+      ...revealsVariants(settings) && {
+        variables: [SHOW_VARIANTS, REVEAL_PENDING].map((name) => ({ defaultValue: false, name }))
+      }
+    }
+  ];
+  if (!horizontal) return card([gridCardImage(image), info, ...controls, ...reveal, addButton]);
+  const action = reveal.length ? { direction: "rows", name: "action", sections: [...reveal, addButton], sectionType: "layout" } : addButton;
+  const row = {
     alignment: { horizontal: "start", vertical: "middle" },
     direction: "grid",
     grid: { columns: [COMPACT_CARD_IMAGE_PX, "fill", "auto"], rows: ["auto"] },
-    sections: [image, info, addButton],
+    sections: [image, info, action],
     sectionType: "layout"
   };
-  return [card, ...controls];
+  return card([row, ...controls]);
 };
 
 // src/transforms/offerV1/convertOfferToV2.ts

package/dist/transforms/index.cjs

@@ -3052,16 +3052,35 @@ var buildPrice = () => ({
   content: { en: buildPriceContent() },
   sectionType: "text"
 });
+var HAS_VARIANT_TITLE = "hasVariantTitle";
 var buildVariantTitle = (settings) => {
   const show = settings.productOptions?.showVariantTitle;
   if (!show || show === "hide") return [];
   return [
     {
       content: { en: buildStyledText("{{variantTitle}}", settings.displaySettings?.variant) },
-      sectionType: "text"
+      mutators: [
+        { effect: "set_false", variable: HAS_VARIANT_TITLE, when: { operator: "is_empty", type: "content" } },
+        {
+          effect: "set_true",
+          variable: HAS_VARIANT_TITLE,
+          when: { operator: "is_not_empty", type: "content" }
+        }
+      ],
+      sectionType: "text",
+      visibility: { variable: HAS_VARIANT_TITLE, visibleWhen: true }
     }
   ];
 };
+var detailBlock = (sections, horizontal, hasVariantTitleLine) => ({
+  alignment: { horizontal: horizontal ? "start" : "center", vertical: "top" },
+  direction: "rows",
+  name: "detail",
+  sections,
+  sectionType: "layout",
+  spacing: "none",
+  ...hasVariantTitleLine && { variables: [{ defaultValue: false, name: HAS_VARIANT_TITLE }] }
+});
 var SHOW_DESCRIPTION = "showDescription";
 var HAS_DESCRIPTION = "hasDescription";
 var buildDescription = (settings) => {
@@ -3104,6 +3123,14 @@ var buildDescription = (settings) => {
     }
   ];
 };
+var SHOW_VARIANTS = "showVariants";
+var REVEAL_PENDING = "revealPending";
+var revealsVariants = (settings) => settings.viewOptions?.displayActions !== false && settings.productOptions?.showVariantOptions === "default";
+var contentMutator = (effect, variable, operator) => ({
+  effect,
+  variable,
+  when: { operator, type: "content" }
+});
 var buildVariants = (settings) => {
   if (settings.viewOptions?.displayActions === false) return [];
   if (settings.productOptions?.showVariantOptions === "never") return [];
@@ -3111,8 +3138,16 @@ var buildVariants = (settings) => {
   return [
     {
       hideOutOfStockVariants: !!settings.productOptions?.hideOutOfStockVariants,
+      ...revealsVariants(settings) && {
+        mutators: [
+          contentMutator("set_false", REVEAL_PENDING, "is_empty"),
+          contentMutator("set_true", REVEAL_PENDING, "is_not_empty")
+        ]
+      },
       ...selector && { selector: VARIANT_SELECTOR[selector] },
-      sectionType: "variants"
+      sectionType: "variants",
+      variantMode: "single",
+      ...revealsVariants(settings) && { visibility: { variable: SHOW_VARIANTS, visibleWhen: true } }
     }
   ];
 };
@@ -3169,8 +3204,25 @@ var buildSubscriptionButton = (settings) => {
   ];
 };
 var BUTTON_KINDS2 = ["plain", "primary", "secondary"];
-var buildAddButton = (settings) => {
+var buttonKind = (settings) => {
   const kind = settings.button?.kind;
+  return BUTTON_KINDS2.includes(kind) ? kind : "primary";
+};
+var buildRevealButton = (settings) => revealsVariants(settings) ? [
+  {
+    buttonStyle: buttonKind(settings),
+    sections: [
+      { buttonField: "buttonLabel", content: { en: "{{variantOptionsLabel}}" }, sectionType: "text" }
+    ],
+    sectionType: "button",
+    variableEffects: [
+      { effect: "set_false", variable: REVEAL_PENDING },
+      { effect: "set_true", variable: SHOW_VARIANTS }
+    ],
+    visibility: { variable: REVEAL_PENDING, visibleWhen: true }
+  }
+] : [];
+var buildAddButton = (settings) => {
   const slot = (buttonField, override) => ({
     buttonField,
     content: localizedContent(OFFER_LABELS[buttonField], override, ADD_LABEL_TOKENS),
@@ -3178,7 +3230,7 @@ var buildAddButton = (settings) => {
   });
   return {
     action: "addToOrder",
-    buttonStyle: BUTTON_KINDS2.includes(kind) ? kind : "primary",
+    buttonStyle: buttonKind(settings),
     sections: [
       slot("addToCart", settings.language?.addToCart),
       slot("addingToCart", settings.language?.addingToCart),
@@ -3187,14 +3239,10 @@ var buildAddButton = (settings) => {
       // Off-checkout Buy Now: the label the button shows once it links to the created checkout.
       slot("redirectToCheckout", settings.language?.redirectToCheckout)
     ],
-    sectionType: "button"
+    sectionType: "button",
+    ...revealsVariants(settings) && { visibility: { variable: REVEAL_PENDING, visibleWhen: false } }
   };
 };
-var rowsLayout = (sections) => ({
-  direction: "rows",
-  sections,
-  sectionType: "layout"
-});
 var buildOfferCard = (settings, horizontal) => {
   const image = buildImage(settings);
   const title = buildTitle(settings);
@@ -3205,18 +3253,33 @@ var buildOfferCard = (settings, horizontal) => {
   const variants = buildVariants(settings);
   const quantity = buildQuantity(settings);
   const subscription = buildSubscriptionButton(settings);
+  const reveal = buildRevealButton(settings);
   const addButton = buildAddButton(settings);
   const controls = [...description, ...quantity, ...variants, ...subscription];
-  if (!horizontal) return [gridCardImage(image), title, ...variantTitle, ...reviews, price, ...controls, addButton];
-  const info = rowsLayout([title, ...variantTitle, ...reviews, price]);
-  const card = {
+  const info = detailBlock([title, ...variantTitle, ...reviews, price], horizontal, variantTitle.length > 0);
+  const card = (sections) => [
+    {
+      alignment: { horizontal: horizontal ? "start" : "center", vertical: "top" },
+      direction: "rows",
+      name: "card",
+      sections,
+      sectionType: "layout",
+      spacing: "base",
+      ...revealsVariants(settings) && {
+        variables: [SHOW_VARIANTS, REVEAL_PENDING].map((name) => ({ defaultValue: false, name }))
+      }
+    }
+  ];
+  if (!horizontal) return card([gridCardImage(image), info, ...controls, ...reveal, addButton]);
+  const action = reveal.length ? { direction: "rows", name: "action", sections: [...reveal, addButton], sectionType: "layout" } : addButton;
+  const row = {
     alignment: { horizontal: "start", vertical: "middle" },
     direction: "grid",
     grid: { columns: [COMPACT_CARD_IMAGE_PX, "fill", "auto"], rows: ["auto"] },
-    sections: [image, info, addButton],
+    sections: [image, info, action],
     sectionType: "layout"
   };
-  return [card, ...controls];
+  return card([row, ...controls]);
 };
 
 // src/transforms/offerV1/convertOfferToV2.ts

package/dist/transforms/index.mjs

@@ -2993,16 +2993,35 @@ var buildPrice = () => ({
   content: { en: buildPriceContent() },
   sectionType: "text"
 });
+var HAS_VARIANT_TITLE = "hasVariantTitle";
 var buildVariantTitle = (settings) => {
   const show = settings.productOptions?.showVariantTitle;
   if (!show || show === "hide") return [];
   return [
     {
       content: { en: buildStyledText("{{variantTitle}}", settings.displaySettings?.variant) },
-      sectionType: "text"
+      mutators: [
+        { effect: "set_false", variable: HAS_VARIANT_TITLE, when: { operator: "is_empty", type: "content" } },
+        {
+          effect: "set_true",
+          variable: HAS_VARIANT_TITLE,
+          when: { operator: "is_not_empty", type: "content" }
+        }
+      ],
+      sectionType: "text",
+      visibility: { variable: HAS_VARIANT_TITLE, visibleWhen: true }
     }
   ];
 };
+var detailBlock = (sections, horizontal, hasVariantTitleLine) => ({
+  alignment: { horizontal: horizontal ? "start" : "center", vertical: "top" },
+  direction: "rows",
+  name: "detail",
+  sections,
+  sectionType: "layout",
+  spacing: "none",
+  ...hasVariantTitleLine && { variables: [{ defaultValue: false, name: HAS_VARIANT_TITLE }] }
+});
 var SHOW_DESCRIPTION = "showDescription";
 var HAS_DESCRIPTION = "hasDescription";
 var buildDescription = (settings) => {
@@ -3045,6 +3064,14 @@ var buildDescription = (settings) => {
     }
   ];
 };
+var SHOW_VARIANTS = "showVariants";
+var REVEAL_PENDING = "revealPending";
+var revealsVariants = (settings) => settings.viewOptions?.displayActions !== false && settings.productOptions?.showVariantOptions === "default";
+var contentMutator = (effect, variable, operator) => ({
+  effect,
+  variable,
+  when: { operator, type: "content" }
+});
 var buildVariants = (settings) => {
   if (settings.viewOptions?.displayActions === false) return [];
   if (settings.productOptions?.showVariantOptions === "never") return [];
@@ -3052,8 +3079,16 @@ var buildVariants = (settings) => {
   return [
     {
       hideOutOfStockVariants: !!settings.productOptions?.hideOutOfStockVariants,
+      ...revealsVariants(settings) && {
+        mutators: [
+          contentMutator("set_false", REVEAL_PENDING, "is_empty"),
+          contentMutator("set_true", REVEAL_PENDING, "is_not_empty")
+        ]
+      },
       ...selector && { selector: VARIANT_SELECTOR[selector] },
-      sectionType: "variants"
+      sectionType: "variants",
+      variantMode: "single",
+      ...revealsVariants(settings) && { visibility: { variable: SHOW_VARIANTS, visibleWhen: true } }
     }
   ];
 };
@@ -3110,8 +3145,25 @@ var buildSubscriptionButton = (settings) => {
   ];
 };
 var BUTTON_KINDS2 = ["plain", "primary", "secondary"];
-var buildAddButton = (settings) => {
+var buttonKind = (settings) => {
   const kind = settings.button?.kind;
+  return BUTTON_KINDS2.includes(kind) ? kind : "primary";
+};
+var buildRevealButton = (settings) => revealsVariants(settings) ? [
+  {
+    buttonStyle: buttonKind(settings),
+    sections: [
+      { buttonField: "buttonLabel", content: { en: "{{variantOptionsLabel}}" }, sectionType: "text" }
+    ],
+    sectionType: "button",
+    variableEffects: [
+      { effect: "set_false", variable: REVEAL_PENDING },
+      { effect: "set_true", variable: SHOW_VARIANTS }
+    ],
+    visibility: { variable: REVEAL_PENDING, visibleWhen: true }
+  }
+] : [];
+var buildAddButton = (settings) => {
   const slot = (buttonField, override) => ({
     buttonField,
     content: localizedContent(OFFER_LABELS[buttonField], override, ADD_LABEL_TOKENS),
@@ -3119,7 +3171,7 @@ var buildAddButton = (settings) => {
   });
   return {
     action: "addToOrder",
-    buttonStyle: BUTTON_KINDS2.includes(kind) ? kind : "primary",
+    buttonStyle: buttonKind(settings),
     sections: [
       slot("addToCart", settings.language?.addToCart),
       slot("addingToCart", settings.language?.addingToCart),
@@ -3128,14 +3180,10 @@ var buildAddButton = (settings) => {
       // Off-checkout Buy Now: the label the button shows once it links to the created checkout.
       slot("redirectToCheckout", settings.language?.redirectToCheckout)
     ],
-    sectionType: "button"
+    sectionType: "button",
+    ...revealsVariants(settings) && { visibility: { variable: REVEAL_PENDING, visibleWhen: false } }
   };
 };
-var rowsLayout = (sections) => ({
-  direction: "rows",
-  sections,
-  sectionType: "layout"
-});
 var buildOfferCard = (settings, horizontal) => {
   const image = buildImage(settings);
   const title = buildTitle(settings);
@@ -3146,18 +3194,33 @@ var buildOfferCard = (settings, horizontal) => {
   const variants = buildVariants(settings);
   const quantity = buildQuantity(settings);
   const subscription = buildSubscriptionButton(settings);
+  const reveal = buildRevealButton(settings);
   const addButton = buildAddButton(settings);
   const controls = [...description, ...quantity, ...variants, ...subscription];
-  if (!horizontal) return [gridCardImage(image), title, ...variantTitle, ...reviews, price, ...controls, addButton];
-  const info = rowsLayout([title, ...variantTitle, ...reviews, price]);
-  const card = {
+  const info = detailBlock([title, ...variantTitle, ...reviews, price], horizontal, variantTitle.length > 0);
+  const card = (sections) => [
+    {
+      alignment: { horizontal: horizontal ? "start" : "center", vertical: "top" },
+      direction: "rows",
+      name: "card",
+      sections,
+      sectionType: "layout",
+      spacing: "base",
+      ...revealsVariants(settings) && {
+        variables: [SHOW_VARIANTS, REVEAL_PENDING].map((name) => ({ defaultValue: false, name }))
+      }
+    }
+  ];
+  if (!horizontal) return card([gridCardImage(image), info, ...controls, ...reveal, addButton]);
+  const action = reveal.length ? { direction: "rows", name: "action", sections: [...reveal, addButton], sectionType: "layout" } : addButton;
+  const row = {
     alignment: { horizontal: "start", vertical: "middle" },
     direction: "grid",
     grid: { columns: [COMPACT_CARD_IMAGE_PX, "fill", "auto"], rows: ["auto"] },
-    sections: [image, info, addButton],
+    sections: [image, info, action],
     sectionType: "layout"
   };
-  return [card, ...controls];
+  return card([row, ...controls]);
 };
 
 // src/transforms/offerV1/convertOfferToV2.ts

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@rebuy/rebuy",
-    "version": "3.22.0",
+    "version": "3.23.0-rc.1",
     "description": "Shared zod schemas, legacy-to-CAB widget transforms, and server orchestrators for Rebuy's Shopify consumers (rebuy-api, admin-nextjs, rebuy-shopify-extensions)",
     "license": "MIT",
     "author": "Rebuy, Inc.",