@12-apps/discounts 1.16.0 → 1.18.0

package/src/react/combo-preview.ts

@@ -0,0 +1,217 @@
+import { comboSlotAcceptsLine, freshComboPool, matchCombo } from "../engine/combo-match";
+import type { ComboRequirement, DiscountCartLine, DiscountRule } from "../engine/types";
+import { buildTargetPath } from "../server/collections";
+
+import type { WireTarget, WireTargetGroup } from "./api";
+import type { ComboReward } from "./form-kind";
+
+/**
+ * "Como fica no carrinho" — what one combo's items sum to and what the buyer
+ * pays for them, worked out from the store's own prices while the operator is
+ * still typing (FUT-4417).
+ *
+ * The figures are the ENGINE's, not a second derivation of them: each end of
+ * the range is a small synthetic cart — every group filled with its cheapest
+ * product, then with its dearest — handed to `matchCombo`, so the rounding of a
+ * percentage, the cap of a fixed amount at the group's total and the closed
+ * price's "never more than the items" (`applicationReward`,
+ * `engine/combo-match.ts`) are the ones the cart will apply.
+ *
+ * It is ONE application, before the cart-level clamps (R4's remainders and
+ * R9's payable floor, `ComboMatch.rewardCents`): a preview of the offer, not
+ * of a particular cart.
+ *
+ * Prices come from the targets endpoint's ITEM rows (`priceRangeCents`, its own
+ * price and its variations'); a group that can take no priced product makes
+ * the whole preview `null`, because a sum with a missing term is not a figure
+ * worth showing.
+ */
+
+/** The reward as numbers; a value left blank or invalid is `null`. */
+export interface ComboRewardValue {
+  type: ComboReward;
+  percentOffBp: number | null;
+  amountOffCents: number | null;
+  bundlePriceCents: number | null;
+}
+
+/** One end of the range: the combo filled with the cheapest (or dearest) products. */
+export interface ComboPreviewEnd {
+  /** What the matched items cost before the reward. */
+  groupCents: number;
+  /** What the reward takes off them. 0 when the reward's value is not typed yet. */
+  savingCents: number;
+  /** What the buyer pays for this combo. */
+  paysCents: number;
+}
+
+export interface ComboPreview {
+  /** How many units one combo takes. */
+  units: number;
+  cheapest: ComboPreviewEnd;
+  dearest: ComboPreviewEnd;
+  /** Whether the reward has a usable value; without one only the items sum means anything. */
+  rewardTyped: boolean;
+  /**
+   * For a ONE-group combo: the quantity and the product names at each end
+   * (as the catalog stores them), for the example line. `null` for several groups.
+   */
+  single: {
+    quantity: number;
+    cheapestName: string;
+    dearestName: string;
+  } | null;
+}
+
+interface PricedItem {
+  target: WireTarget;
+  line: DiscountCartLine;
+  minCents: number;
+  maxCents: number;
+}
+
+/** Every priced ITEM row as the cart line the matcher would see for it. */
+function pricedItems(groups: readonly WireTargetGroup[]): PricedItem[] {
+  const parents = new Map<string, string | null>(
+    groups
+      .filter((group) => group.targetType === "CATEGORY")
+      .flatMap((group) => group.targets)
+      .map((target) => [target.id, target.parentId ?? null] as const),
+  );
+  return groups
+    .filter((group) => group.targetType === "ITEM")
+    .flatMap((group) => group.targets)
+    .flatMap((target) => {
+      const range = target.priceRangeCents;
+      if (!range || range.minCents < 0 || range.maxCents < range.minCents) return [];
+      const line: DiscountCartLine = {
+        lineId: target.id,
+        menuItemId: target.id,
+        variationMenuItemId: null,
+        categoryPath: buildTargetPath(target.categoryId ?? null, parents),
+        quantity: 1,
+        unitPriceCents: range.minCents,
+      };
+      return [{ target, line, minCents: range.minCents, maxCents: range.maxCents }];
+    });
+}
+
+/** The rule the synthetic carts are matched against: this combo, applied once. */
+function previewRule(slots: readonly ComboRequirement[], reward: ComboRewardValue): DiscountRule {
+  const typed = rewardIsTyped(reward);
+  return {
+    id: "preview",
+    name: "preview",
+    // An untyped reward is matched as a zero percentage, which takes nothing
+    // off and still sums the group.
+    type: typed ? reward.type : "PERCENTAGE",
+    percentOffBp: typed ? reward.percentOffBp : 0,
+    amountOffCents: reward.amountOffCents,
+    bundlePriceCents: reward.bundlePriceCents,
+    scope: "COMBO",
+    targetCategoryIds: [],
+    targetMenuItemIds: [],
+    comboRequirements: slots,
+    maxComboApplications: 1,
+    trigger: "AUTOMATIC",
+    code: null,
+    active: true,
+    startsAt: null,
+    endsAt: null,
+    minSubtotalCents: null,
+    usageLimit: null,
+    usageCount: 0,
+    perBuyerLimit: null,
+    buyerUsageCount: 0,
+    stackable: true,
+    createdAt: new Date(0),
+  };
+}
+
+function rewardIsTyped(reward: ComboRewardValue): boolean {
+  if (reward.type === "PERCENTAGE") return reward.percentOffBp !== null && reward.percentOffBp > 0;
+  if (reward.type === "FIXED_AMOUNT")
+    return reward.amountOffCents !== null && reward.amountOffCents > 0;
+  return reward.bundlePriceCents !== null && reward.bundlePriceCents > 0;
+}
+
+/** One end: each group filled by `pick`'s product, priced at `price`, then matched. */
+function endOf(
+  slots: readonly ComboRequirement[],
+  picks: readonly PricedItem[],
+  price: (item: PricedItem) => number,
+  rule: DiscountRule,
+): ComboPreviewEnd | null {
+  const lines = picks.map((item, index) => ({
+    ...item.line,
+    lineId: `${index}:${item.target.id}`,
+    quantity: slots[index]?.quantity ?? 0,
+    unitPriceCents: price(item),
+  }));
+  const match = matchCombo(rule, freshComboPool(lines));
+  if (match === null) return null;
+  return {
+    groupCents: match.groupCents,
+    savingCents: match.rewardCents,
+    paysCents: match.groupCents - match.rewardCents,
+  };
+}
+
+/** The cheapest and the dearest product one group can take, or null when it can take none. */
+function extremesFor(
+  slot: ComboRequirement,
+  items: readonly PricedItem[],
+): { cheapest: PricedItem; dearest: PricedItem } | null {
+  // The matcher's own predicate, asked one group at a time.
+  const fits = items.filter((item) => comboSlotAcceptsLine(slot, item.line));
+  if (fits.length === 0) return null;
+  const cheapest = fits.reduce((best, item) => (item.minCents < best.minCents ? item : best));
+  const dearest = fits.reduce((best, item) => (item.maxCents > best.maxCents ? item : best));
+  return { cheapest, dearest };
+}
+
+export function comboPreviewOf(
+  slots: readonly ComboRequirement[],
+  groups: readonly WireTargetGroup[],
+  reward: ComboRewardValue,
+): ComboPreview | null {
+  if (
+    slots.length === 0 ||
+    slots.some((slot) => !Number.isInteger(slot.quantity) || slot.quantity <= 0)
+  ) {
+    return null;
+  }
+  const items = pricedItems(groups);
+  const extremes = slots.map((slot) => extremesFor(slot, items));
+  if (extremes.some((pair) => pair === null)) return null;
+  const pairs = extremes as { cheapest: PricedItem; dearest: PricedItem }[];
+  const rule = previewRule(slots, reward);
+  const cheapest = endOf(
+    slots,
+    pairs.map((pair) => pair.cheapest),
+    (item) => item.minCents,
+    rule,
+  );
+  const dearest = endOf(
+    slots,
+    pairs.map((pair) => pair.dearest),
+    (item) => item.maxCents,
+    rule,
+  );
+  if (cheapest === null || dearest === null) return null;
+  const [only] = pairs;
+  return {
+    units: slots.reduce((total, slot) => total + slot.quantity, 0),
+    cheapest,
+    dearest,
+    rewardTyped: rewardIsTyped(reward),
+    single:
+      slots.length === 1 && only
+        ? {
+            quantity: slots[0]?.quantity ?? 0,
+            cheapestName: only.cheapest.target.name,
+            dearestName: only.dearest.target.name,
+          }
+        : null,
+  };
+}

package/src/react/combo-reward-copy.ts

@@ -0,0 +1,59 @@
+import type { ComboReward } from "./form-kind";
+
+/**
+ * The combo reward's words (FUT-4417): the three choices, the sentence under
+ * each, and "Como fica no carrinho" — what the group's items sum to and what
+ * the buyer pays for them under this reward.
+ *
+ * A group of its own rather than more `form` keys because the preview is a
+ * small grammar of its own: which sentence is said depends on the reward, on
+ * whether the items' prices are one figure or a range, and on whether the form
+ * is wide enough to put the preview in its own column (where it reads in short
+ * sentences plus an example line) or under the field (one sentence carrying
+ * the range). Each placeholder is a figure the package has already formatted.
+ */
+export interface DiscountsComboPreviewCopy {
+  /** The box's heading. */
+  readonly title: string;
+  /** `{units}` ("5 itens"), `{min}`, `{max}`: what one combo's items sum to. */
+  readonly itemsRange: string;
+  /** The same when every item the groups can take costs the same. `{units}`, `{sum}`. */
+  readonly itemsExact: string;
+  /** `{min}`, `{max}`: what the buyer pays, as a range. */
+  readonly paysRange: string;
+  /** `{min}`, `{max}`, `{off}` (the rate, "10%"): the percentage's range, under the field. */
+  readonly paysRangeOff: string;
+  /** `{pays}`: one figure. */
+  readonly paysExact: string;
+  /** `{pays}`, `{off}`: one figure, at a rate. */
+  readonly paysExactOff: string;
+  /** `{off}` — "10%" or "R$ 15,00": the reward itself, in the wide layout. */
+  readonly paysOff: string;
+  /** Closed price under every items sum: `{price}`, `{min}`, `{max}` (the saving's range). */
+  readonly paysPriceSaving: string;
+  /** The same with one saving figure: `{price}`, `{saving}`. */
+  readonly paysPriceSavingExact: string;
+  /**
+   * Closed price EQUAL to the cheapest sum: the cheapest combo saves nothing,
+   * so the saving reads "up to" rather than "from R$ 0,00 to": `{price}`, `{max}`.
+   */
+  readonly paysPriceSavingUpTo: string;
+  /** Closed price between the cheapest and dearest sums: `{min}`, `{price}`, `{max}` (most saved). */
+  readonly paysUpToPrice: string;
+  /** Closed price at or above the dearest sum: nothing is saved. */
+  readonly noSaving: string;
+  /** The wide layout's third line: `{cheapest}` and `{dearest}`, each an `example`. */
+  readonly examples: string;
+  /** `{quantity}`, `{name}` (as the catalog stores it), `{pays}`. */
+  readonly example: string;
+  /** The same with what it saves: `{quantity}`, `{name}`, `{pays}`, `{saving}`. */
+  readonly exampleSaving: string;
+}
+
+export interface DiscountsComboRewardsCopy {
+  /** The toggle's three choices, in `COMBO_REWARDS` order. */
+  readonly labels: Readonly<Record<ComboReward, string>>;
+  /** The sentence under the reward's field, one per choice. */
+  readonly hints: Readonly<Record<ComboReward, string>>;
+  readonly preview: DiscountsComboPreviewCopy;
+}

package/src/react/combo-reward-fields.tsx

@@ -0,0 +1,162 @@
+"use client";
+
+import { useLayoutEffect, useRef, useState, type JSX, type RefObject } from "react";
+
+import { Fields, useFormContext } from "@12-apps/ui/form/total-form";
+import { Box } from "@12-apps/ui/mui/Box";
+import { Stack } from "@12-apps/ui/mui/Stack";
+import { Text } from "@12-apps/ui/typography/Text";
+
+import type { DiscountsWebCopy } from "./copy";
+import { InlineComboCartPreview } from "./combo-cart-preview";
+import type { CurrencyFieldComponent } from "./discount-form-fields";
+import { COMBO_REWARDS, comboRewardOf } from "./form-kind";
+import { useElementWidth } from "./kind-field";
+import { PercentField } from "./number-fields";
+
+/**
+ * A combo's reward: which of the three, how much, and what it comes to in the
+ * cart (FUT-4417).
+ *
+ * All of it is here rather than split between the top of the form and the
+ * bottom, because to a merchant it is one sentence — "este combo dá 15% de
+ * desconto", "…sai por R$ 120". "Preço fechado" is the third choice: the
+ * matched group costs exactly the price typed, whatever its items cost. That
+ * used to be refused as a choice because it goes on charging the same when an
+ * item's price changes — which is the point of a closed price, so the hint says
+ * it in those words and the preview shows it against the store's real prices.
+ *
+ * **One line at every width** (ADR 0190 in the host), like the kind question
+ * (`./kind-field`): a segmented control of three equal parts where they fit,
+ * the same field as a select where they do not. The value's field sits beside
+ * the choices where both fit on one row, and under them otherwise.
+ */
+
+/**
+ * What one part needs before a label wraps inside it, when nothing could
+ * measure it (a test DOM): the kind toggle's own figure for "Porcentagem".
+ */
+const FALLBACK_PART_PX = 136;
+
+/** The gap between the choices and the value's field, `gap: 2`. */
+const ROW_GAP_PX = 16;
+
+const PART_SELECTOR = '[data-testid^="total-form-field-comboReward-item-"]';
+
+/**
+ * A part's width with its label on ONE line: a hidden, unwrapped clone of it,
+ * measured beside it so it inherits the same type.
+ */
+function naturalWidth(part: HTMLElement): number {
+  const clone = part.cloneNode(true) as HTMLElement;
+  Object.assign(clone.style, {
+    position: "absolute",
+    visibility: "hidden",
+    width: "auto",
+    minWidth: "0",
+    flex: "none",
+    whiteSpace: "nowrap",
+  });
+  (part.parentElement ?? document.body).appendChild(clone);
+  const width = clone.getBoundingClientRect().width;
+  clone.remove();
+  return width;
+}
+
+/**
+ * The width the three equal parts need, measured off the toggle the first time
+ * it is on screen — the theme decides the type size and the padding, so a
+ * figure typed here would be wrong in the next density mode. Parts are equal,
+ * so the widest label sizes all three; the group's own padding and gaps are
+ * added on top.
+ */
+function useTogglePartsWidth(box: RefObject<HTMLElement | null>): number {
+  const [measured, setMeasured] = useState<number | null>(null);
+  useLayoutEffect(() => {
+    if (measured !== null || box.current === null) return;
+    const parts = [...box.current.querySelectorAll<HTMLElement>(PART_SELECTOR)];
+    const group = parts[0]?.parentElement;
+    if (parts.length === 0 || !group) return;
+    const widest = Math.max(...parts.map(naturalWidth));
+    if (widest <= 0) return;
+    const style = getComputedStyle(group);
+    const chrome =
+      (parseFloat(style.paddingLeft) || 0) +
+      (parseFloat(style.paddingRight) || 0) +
+      (parseFloat(style.columnGap) || 0) * (parts.length - 1);
+    // +1 px a part: sub-pixel widths round the other way often enough to wrap.
+    setMeasured(Math.ceil((widest + 1) * parts.length + chrome));
+  });
+  return measured ?? COMBO_REWARDS.length * FALLBACK_PART_PX;
+}
+
+/** The value's input for the chosen reward; the other two are unmounted (`discounts_value_check`). */
+function RewardValueField({
+  reward,
+  copy,
+  currencyField,
+}: {
+  reward: string;
+  copy: DiscountsWebCopy;
+  currencyField: CurrencyFieldComponent;
+}): JSX.Element {
+  const Currency = currencyField;
+  if (reward === "BUNDLE_PRICE")
+    return <Currency name="bundlePrice" label={copy.form.bundlePrice} />;
+  if (reward === "FIXED_AMOUNT") return <Currency name="amountOff" label={copy.form.amountOff} />;
+  return <PercentField copy={copy} />;
+}
+
+export function ComboRewardFields({
+  copy,
+  currencyField,
+}: {
+  copy: DiscountsWebCopy;
+  currencyField: CurrencyFieldComponent;
+}): JSX.Element {
+  const { values } = useFormContext();
+  const box = useRef<HTMLDivElement>(null);
+  const width = useElementWidth(box);
+  const needed = useTogglePartsWidth(box);
+  const reward = comboRewardOf({ type: values.comboReward ?? "" });
+  const options = COMBO_REWARDS.map((value) => ({
+    value,
+    label: copy.comboRewards.labels[value],
+  }));
+  const sideBySide = width === null || width >= 2 * needed + ROW_GAP_PX;
+  const column = width === null ? null : sideBySide ? (width - ROW_GAP_PX) / 2 : width;
+  const fits = column === null || column >= needed;
+  return (
+    <Stack spacing={0.5} ref={box} sx={{ minWidth: 0 }}>
+      <Box
+        data-testid="combo-reward-row"
+        sx={{
+          display: "grid",
+          gap: 2,
+          gridTemplateColumns: sideBySide ? "1fr 1fr" : "1fr",
+        }}
+      >
+        <Box sx={{ minWidth: 0 }}>
+          {fits ? (
+            <Fields.ToggleField
+              name="comboReward"
+              label={copy.form.comboReward}
+              options={options}
+            />
+          ) : (
+            <Fields.SelectField
+              name="comboReward"
+              label={copy.form.comboReward}
+              options={options}
+            />
+          )}
+        </Box>
+        <RewardValueField reward={reward} copy={copy} currencyField={currencyField} />
+      </Box>
+      <Text variant="caption" data-testid="combo-reward-hint">
+        {copy.comboRewards.hints[reward]}
+      </Text>
+      <InlineComboCartPreview />
+    </Stack>
+  );
+}

package/src/react/combo-slot-builder.tsx

@@ -1,10 +1,9 @@
 "use client";
 
-import type { JSX } from "react";
+import { useRef, type JSX } from "react";
 
 import { Button } from "@12-apps/ui/form/Button";
 import { FormControl, FormLabel, FormMessage } from "@12-apps/ui/form/Form";
-import { Input } from "@12-apps/ui/form/Input";
 import { Box } from "@12-apps/ui/mui/Box";
 import { Stack } from "@12-apps/ui/mui/Stack";
 import { Text } from "@12-apps/ui/typography/Text";
@@ -13,6 +12,7 @@ import type { ComboRequirement } from "../engine/types";
 
 import type { WireTargetGroup } from "./api";
 import { fill, type DiscountsWebCopy } from "./copy";
+import { CountInput } from "./number-fields";
 import { TargetPickerField } from "./target-picker-field";
 
 /**
@@ -48,11 +48,45 @@ export function comboUnits(slots: readonly ComboRequirement[]): number {
   return slots.reduce((total, slot) => total + (Number.isFinite(slot.quantity) ? slot.quantity : 0), 0);
 }
 
+/** "1 item" or "4 itens": the pack's one form for exactly 1, its other form otherwise. */
+function counted(count: number, one: string, other: string): string {
+  return fill(count === 1 ? one : other, { count });
+}
+
+/** The read-back sentence, both nouns in the right number. */
+function comboSummary(slots: readonly ComboRequirement[], copy: DiscountsWebCopy): string {
+  const { combo } = copy;
+  return fill(combo.summary, {
+    units: counted(comboUnits(slots), combo.unitsOne, combo.unitsOther),
+    groups: counted(slots.length, combo.groupsOne, combo.groupsOther),
+  });
+}
+
 /** An empty group: one unit, nothing chosen yet. */
 export function blankSlot(): ComboRequirement {
   return { quantity: 1, categoryIds: [], menuItemIds: [] };
 }
 
+/**
+ * One screen-only id per group, in list order (FUT-4143).
+ *
+ * A group has no id until the database gives it one, and an index key hands a
+ * removed row's component — and its half-typed draft — to the row that moves
+ * up. These ids live here and nowhere else: the wire still carries the plain
+ * `ComboRequirement`s. Appends get a fresh id; a removal drops its own (see
+ * `onRemove`); a list replaced from outside is padded or cut to length.
+ */
+function useRowIds(length: number): { current: number[] } {
+  const ids = useRef<number[]>([]);
+  const next = useRef(0);
+  while (ids.current.length < length) {
+    ids.current = [...ids.current, next.current];
+    next.current += 1;
+  }
+  if (ids.current.length > length) ids.current = ids.current.slice(0, length);
+  return ids;
+}
+
 /** Replace one group, leaving the rest (and their order) alone. */
 function replaceAt(
   slots: readonly ComboRequirement[],
@@ -75,8 +109,9 @@ function withIds(slot: ComboRequirement, targetType: string, ids: string[]): Com
  * One group: its quantity, one picker per registered collection, and the
  * control that removes it.
  *
- * The quantity is a `number` input rather than a masked one — it counts units,
- * not money, so there is no locale in it. It is held as a NUMBER in state
+ * The quantity is a digits-only text box (`CountInput`, FUT-4143) rather than
+ * `type="number"`, which read "2,5" by the browser's language — as 25 in an
+ * English one. It is held as a NUMBER in state
  * rather than as the form's string, because the summary line above adds them up
  * and the validator compares them against `freeUnits`; parsing on every read
  * would put the same `Number()` in three places.
@@ -117,12 +152,13 @@ function ComboSlotRow({
         </Button>
       </Stack>
       <Stack spacing={2} sx={{ mt: 1 }}>
-        <Input
-          type="number"
+        <CountInput
           label={copy.combo.quantity}
-          value={String(slot.quantity)}
-          onChange={(event) => onChange({ ...slot, quantity: Number(event.target.value) })}
-          data-testid={`combo-slot-${index}-quantity`}
+          value={slot.quantity}
+          copy={copy}
+          invalidMessage={copy.form.invalidComboQuantity}
+          dataTestId={`combo-slot-${index}-quantity`}
+          onChange={(quantity) => onChange({ ...slot, quantity })}
         />
         {groups.map((group) => (
           <TargetPickerField
@@ -170,6 +206,7 @@ export function ComboSlotBuilder({
   copy: DiscountsWebCopy;
   onChange: (next: ComboRequirement[]) => void;
 }): JSX.Element {
+  const rowIds = useRowIds(slots.length);
   return (
     <FormControl fullWidth>
       <FormLabel>{copy.combo.title}</FormLabel>
@@ -177,17 +214,19 @@ export function ComboSlotBuilder({
       <Stack spacing={2} sx={{ mt: 1 }} data-testid="combo-slots">
         {slots.map((slot, index) => (
           <ComboSlotRow
-            // The index IS the identity here: `position` is the array index,
-            // and a group carries no id of its own until the database gives it
-            // one. Removing a group renumbers the rest, which is exactly what
-            // the operator sees happen.
-            key={index}
+            // `position` is the array index, and removing a group renumbers
+            // the rest — but the ROW is keyed by a screen-only id, so the
+            // group below does not inherit the removed one's draft.
+            key={rowIds.current[index]}
             slot={slot}
             index={index}
             groups={groups}
             copy={copy}
             onChange={(next) => onChange(replaceAt(slots, index, next))}
-            onRemove={() => onChange(slots.filter((_, position) => position !== index))}
+            onRemove={() => {
+              rowIds.current = rowIds.current.filter((_, position) => position !== index);
+              onChange(slots.filter((_, position) => position !== index));
+            }}
           />
         ))}
         {slots.length === 0 && (
@@ -195,20 +234,27 @@ export function ComboSlotBuilder({
             {copy.combo.empty}
           </Text>
         )}
-        <Stack direction="row" alignItems="center" justifyContent="space-between" spacing={2}>
-          <Button
-            variant="outline"
-            onClick={() => onChange([...slots, blankSlot()])}
-            data-testid="combo-add-slot"
-          >
-            {copy.combo.addSlot}
-          </Button>
+        {/* Wraps as a ROW, never inside the button: where the note does not
+            fit beside "Adicionar grupo" it takes the line below, and the
+            button's own label stays on one line (FUT-4143 UI review). */}
+        <Box sx={{ display: "flex", flexWrap: "wrap", alignItems: "center", columnGap: 2, rowGap: 1 }}>
+          <Box sx={{ flexShrink: 0, "& > button": { whiteSpace: "nowrap" } }}>
+            <Button
+              variant="outline"
+              onClick={() => onChange([...slots, blankSlot()])}
+              data-testid="combo-add-slot"
+            >
+              {copy.combo.addSlot}
+            </Button>
+          </Box>
           {slots.length > 0 && (
-            <Text variant="caption" data-testid="combo-summary">
-              {fill(copy.combo.summary, { units: comboUnits(slots), groups: slots.length })}
-            </Text>
+            <Box sx={{ flex: "1 1 200px", minWidth: 0 }}>
+              <Text variant="caption" data-testid="combo-summary">
+                {comboSummary(slots, copy)}
+              </Text>
+            </Box>
           )}
-        </Stack>
+        </Box>
       </Stack>
     </FormControl>
   );