@salesgenterp/ui-components 0.4.553 → 0.4.555

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/dist/index.js +369 -231
  2. package/dist/index.js.map +1 -1
  3. package/dist/index.modern.js +372 -234
  4. package/dist/index.modern.js.map +1 -1
  5. package/package.json +1 -1
package/dist/index.modern.js CHANGED
@@ -1,8 +1,8 @@
1
- import { Skeleton as Skeleton$1, CircularProgress, TextField, Button, IconButton, Stack, Typography, Grid, InputAdornment, Popover, TableHead, TableRow, TableSortLabel, Paper, TableContainer as TableContainer$4, Table, TableBody, TableCell, TablePagination, Dialog, DialogContent, DialogActions, DialogTitle as DialogTitle$1, RadioGroup, Radio, FormControlLabel, FormLabel, FormControl, FormHelperText, Select as Select$1, InputLabel, MenuItem, CardMedia, Divider, Tabs, Tooltip, Box, Tab, CardContent, ListItemIcon, ListItem, Collapse, List, ListItemText, Checkbox as Checkbox$1, Card as Card$1, CardHeader as CardHeader$1, CssBaseline, Toolbar, Drawer, useMediaQuery as useMediaQuery$1, Pagination, CardActionArea, Avatar as Avatar$1, alpha, Stepper, Step, StepLabel, StepContent, Container as Container$4 } from '@mui/material';
1
+ import { Skeleton as Skeleton$1, CircularProgress, TextField, Button, IconButton, Stack, Typography, Grid, InputAdornment, Popover, TableHead, TableRow, TableSortLabel, Paper, TableContainer as TableContainer$4, Table, TableBody, TableCell, TablePagination, Dialog, DialogContent, DialogActions, DialogTitle as DialogTitle$1, RadioGroup, Radio, FormControlLabel, FormLabel, FormControl, FormHelperText, Select as Select$1, InputLabel, MenuItem, CardMedia, Divider, Tabs, Box, Tab, CardContent, ListItemIcon, ListItem, Collapse, List, ListItemText, Checkbox as Checkbox$1, Card as Card$1, CardHeader as CardHeader$1, CssBaseline, Toolbar, Drawer, useMediaQuery as useMediaQuery$1, Tooltip, Pagination, CardActionArea, Avatar as Avatar$1, alpha, Stepper, Step, StepLabel, StepContent, Container as Container$4 } from '@mui/material';
2
2
  import { styled as styled$1 } from '@mui/material/styles';
3
3
  import useMediaQuery from '@mui/material/useMediaQuery';
4
4
  import React__default, { useState, useEffect, forwardRef, memo, createElement, useCallback, Fragment as Fragment$1, useRef, useMemo } from 'react';
5
- import { MdVisibilityOff, MdVisibility, MdClose, MdMonetizationOn, MdAdd, MdOutlineStorefront, MdRemoveRedEye, MdOutlineFileDownload, MdPersonOutline, MdOutlineCall, MdMailOutline, MdExpandMore, MdExpandLess, MdStore, MdOutlineMenuOpen, MdMenu, MdDarkMode, MdOutlineDarkMode, MdLocalOffer, MdDelete, MdCheckCircle, MdArrowBack, MdOutlineCircle, MdOutlineStickyNote2, MdOutlineNumbers, MdDateRange, MdOutlineWarehouse } from 'react-icons/md';
5
+ import { MdVisibilityOff, MdVisibility, MdClose, MdMonetizationOn, MdOutlineStorefront, MdRemoveRedEye, MdOutlineFileDownload, MdPersonOutline, MdOutlineCall, MdMailOutline, MdExpandMore, MdExpandLess, MdStore, MdOutlineMenuOpen, MdMenu, MdDarkMode, MdOutlineDarkMode, MdLocalOffer, MdDelete, MdCheckCircle, MdArrowBack, MdOutlineCircle, MdOutlineStickyNote2, MdOutlineNumbers, MdDateRange, MdOutlineWarehouse } from 'react-icons/md';
6
6
  import styled, { css, ThemeProvider, keyframes } from 'styled-components';
7
7
  import { isEmpty, isString, toNumber, reduce, concat, omit, replace, template, isArray, some, toLower, isPlainObject, includes, values, cloneDeep, filter, sortBy, isObject, sumBy, get, isNumber, remove } from 'lodash';
8
8
  import axios from 'axios';
@@ -49,7 +49,7 @@ import TableRow$1 from '@mui/material/TableRow';
49
49
  import { Virtuoso } from 'react-virtuoso';
50
50
  import Box$1 from '@mui/material/Box';
51
51
  import TableSortLabel$1 from '@mui/material/TableSortLabel';
52
- import { FiZap, FiCheck, FiCopy, FiShoppingCart, FiGift, FiArrowRight, FiPlusCircle, FiTag, FiPercent, FiLayers, FiTruck } from 'react-icons/fi';
52
+ import { FiZap, FiCheck, FiCopy, FiShoppingCart, FiPercent, FiGift, FiArrowRight, FiPlusCircle, FiTag, FiLayers, FiTruck } from 'react-icons/fi';
53
53
  import { createPortal } from 'react-dom';
54
54
  import { HiSparkles, HiChevronUpDown } from 'react-icons/hi2';
55
55
  import { paramCase } from 'param-case';
@@ -2937,6 +2937,21 @@ var saveExcessPayment = function saveExcessPayment(_ref2) {
2937
2937
  return Promise.reject(e);
2938
2938
  }
2939
2939
  };
2940
+ var verifyExcessPaymentToken = function verifyExcessPaymentToken(_ref3) {
2941
+ var apiEndPoint = _ref3.apiEndPoint,
2942
+ token = _ref3.token,
2943
+ excessPaymentToken = _ref3.excessPaymentToken;
2944
+ try {
2945
+ return Promise.resolve(API({
2946
+ url: "/ecommerce/customer/verifyExcessPaymentLink?token=" + excessPaymentToken,
2947
+ apiEndPoint: apiEndPoint,
2948
+ token: token,
2949
+ method: 'POST'
2950
+ }));
2951
+ } catch (e) {
2952
+ return Promise.reject(e);
2953
+ }
2954
+ };
2940
2955
 
2941
2956
  var ExcessPaymentForm = function ExcessPaymentForm(_ref) {
2942
2957
  var paymentMethods = _ref.paymentMethods,
@@ -3030,7 +3045,8 @@ var ExcessPaymentDialog = function ExcessPaymentDialog(_ref2) {
3030
3045
  token = _ref2.token,
3031
3046
  styles = _ref2.styles,
3032
3047
  onSave = _ref2.onSave,
3033
- customerData = _ref2.customerData;
3048
+ customerData = _ref2.customerData,
3049
+ excessPaymentToken = _ref2.excessPaymentToken;
3034
3050
  var _useForm = useForm({
3035
3051
  defaultValues: {
3036
3052
  paymentModeId: '',
@@ -3101,26 +3117,51 @@ var ExcessPaymentDialog = function ExcessPaymentDialog(_ref2) {
3101
3117
  token: token,
3102
3118
  asyncService: function asyncService() {
3103
3119
  try {
3104
- return Promise.resolve(getPaymentMethods({
3120
+ return Promise.resolve(verifyExcessPaymentToken({
3105
3121
  apiEndPoint: apiEndPoint,
3106
- token: token
3122
+ token: token,
3123
+ excessPaymentToken: excessPaymentToken
3107
3124
  }));
3108
3125
  } catch (e) {
3109
3126
  return Promise.reject(e);
3110
3127
  }
3111
3128
  }
3112
3129
  }, function (data) {
3113
- var paymentMethods = (data === null || data === void 0 ? void 0 : data.filter(function (item) {
3114
- return item === null || item === void 0 ? void 0 : item.ecommerce;
3115
- })) || [];
3116
- return /*#__PURE__*/React__default.createElement(ExcessPaymentForm, {
3117
- loading: loading,
3118
- paymentMethods: paymentMethods,
3119
- control: control,
3120
- styles: styles,
3121
- handleSubmit: handleSubmit,
3122
- onSubmit: onSubmit,
3123
- onClose: onClose
3130
+ if (data === false) {
3131
+ return /*#__PURE__*/React__default.createElement("div", {
3132
+ style: {
3133
+ color: 'red',
3134
+ textAlign: 'center',
3135
+ padding: '16px 8px'
3136
+ }
3137
+ }, "This excess payment link has already been used. An excess payment was previously added using this link.");
3138
+ }
3139
+ return /*#__PURE__*/React__default.createElement(AsyncDataLoadComponent, {
3140
+ apiEndPoint: apiEndPoint,
3141
+ token: token,
3142
+ asyncService: function asyncService() {
3143
+ try {
3144
+ return Promise.resolve(getPaymentMethods({
3145
+ apiEndPoint: apiEndPoint,
3146
+ token: token
3147
+ }));
3148
+ } catch (e) {
3149
+ return Promise.reject(e);
3150
+ }
3151
+ }
3152
+ }, function (paymentMethodsData) {
3153
+ var paymentMethods = (paymentMethodsData === null || paymentMethodsData === void 0 ? void 0 : paymentMethodsData.filter(function (item) {
3154
+ return item === null || item === void 0 ? void 0 : item.ecommerce;
3155
+ })) || [];
3156
+ return /*#__PURE__*/React__default.createElement(ExcessPaymentForm, {
3157
+ loading: loading,
3158
+ paymentMethods: paymentMethods,
3159
+ control: control,
3160
+ styles: styles,
3161
+ handleSubmit: handleSubmit,
3162
+ onSubmit: onSubmit,
3163
+ onClose: onClose
3164
+ });
3124
3165
  });
3125
3166
  })));
3126
3167
  };
@@ -3143,7 +3184,7 @@ var totalIcons = [{
3143
3184
  icon: /*#__PURE__*/React__default.createElement(TbFileDollar, null)
3144
3185
  }];
3145
3186
  var Dashboard = function Dashboard(_ref) {
3146
- var _customerData$custome, _selectDates$salesOrd, _selectDates$recentIn, _selectDates$salesOrd2, _selectDates$recentIn2, _customerData$custome2, _customerData$custome3, _customerData$custome4;
3187
+ var _queryParams$excessPa, _customerData$custome, _selectDates$salesOrd, _selectDates$recentIn, _selectDates$salesOrd2, _selectDates$recentIn2, _customerData$custome2, _customerData$custome3, _customerData$custome4;
3147
3188
  var apiEndPoint = _ref.apiEndPoint,
3148
3189
  serviceApiEndPoint = _ref.serviceApiEndPoint,
3149
3190
  token = _ref.token,
@@ -3171,8 +3212,7 @@ var Dashboard = function Dashboard(_ref) {
3171
3212
  showOnlyRecentOrder = _ref$showOnlyRecentOr === void 0 ? false : _ref$showOnlyRecentOr,
3172
3213
  hidePayActionButton = _ref.hidePayActionButton,
3173
3214
  hideInvoiceTab = _ref.hideInvoiceTab,
3174
- hideSalesOrderTab = _ref.hideSalesOrderTab,
3175
- hideAddAccessPaymentButton = _ref.hideAddAccessPaymentButton;
3215
+ hideSalesOrderTab = _ref.hideSalesOrderTab;
3176
3216
  var _useState = useState({}),
3177
3217
  customerData = _useState[0],
3178
3218
  setCustomerData = _useState[1];
@@ -3459,6 +3499,19 @@ var Dashboard = function Dashboard(_ref) {
3459
3499
  Promise.reject(e);
3460
3500
  }
3461
3501
  }, [queryParams]);
3502
+ useEffect(function () {
3503
+ try {
3504
+ try {
3505
+ if (queryParams !== null && queryParams !== void 0 && queryParams.excessModal) {
3506
+ setIsExcessPaymentModal({
3507
+ open: true
3508
+ });
3509
+ }
3510
+ } catch (error) {}
3511
+ } catch (e) {
3512
+ Promise.reject(e);
3513
+ }
3514
+ }, [queryParams]);
3462
3515
  var totalDataSource = filter(convertCamCaseToSnake(dashboardData) || [], function (data) {
3463
3516
  var list = ['totalNumberOfOrders', 'totalAmountSpend'];
3464
3517
  return hideTotalCardInDashboardSummary ? !includesCaseInsensitive(list, data === null || data === void 0 ? void 0 : data.name) : data;
@@ -3498,6 +3551,7 @@ var Dashboard = function Dashboard(_ref) {
3498
3551
  setTriggerTableData: setTriggerTableData,
3499
3552
  styles: styles
3500
3553
  }), (isExcessPaymentModal === null || isExcessPaymentModal === void 0 ? void 0 : isExcessPaymentModal.open) && /*#__PURE__*/React__default.createElement(ExcessPaymentDialog, {
3554
+ excessPaymentToken: (_queryParams$excessPa = queryParams === null || queryParams === void 0 ? void 0 : queryParams.excessPayment) != null ? _queryParams$excessPa : '',
3501
3555
  customerData: customerData,
3502
3556
  apiEndPoint: apiEndPoint,
3503
3557
  token: token,
@@ -3539,7 +3593,6 @@ var Dashboard = function Dashboard(_ref) {
3539
3593
  }, totalDataSource === null || totalDataSource === void 0 ? void 0 : totalDataSource.map(function (data) {
3540
3594
  var _data$name, _data$name2, _data$name3, _totalIcons$find;
3541
3595
  var isAmount = (data === null || data === void 0 ? void 0 : (_data$name = data.name) === null || _data$name === void 0 ? void 0 : _data$name.indexOf('Amount')) > 1 || (data === null || data === void 0 ? void 0 : (_data$name2 = data.name) === null || _data$name2 === void 0 ? void 0 : _data$name2.indexOf('Credit')) > 1 || (data === null || data === void 0 ? void 0 : (_data$name3 = data.name) === null || _data$name3 === void 0 ? void 0 : _data$name3.indexOf('Price')) > 1 || (data === null || data === void 0 ? void 0 : data.name) === 'Excess Payment';
3542
- var isExcessPayment = (data === null || data === void 0 ? void 0 : data.name) === 'Excess Payment';
3543
3596
  return /*#__PURE__*/React__default.createElement(Grid, {
3544
3597
  item: true,
3545
3598
  xs: 12,
@@ -3563,19 +3616,7 @@ var Dashboard = function Dashboard(_ref) {
3563
3616
  style: {
3564
3617
  flex: 1
3565
3618
  }
3566
- }, /*#__PURE__*/React__default.createElement("p", null, data === null || data === void 0 ? void 0 : data.name), /*#__PURE__*/React__default.createElement("h3", null, "" + (isAmount ? renderMoney(data === null || data === void 0 ? void 0 : data.value) : data === null || data === void 0 ? void 0 : data.value))), isExcessPayment && !hideAddAccessPaymentButton && /*#__PURE__*/React__default.createElement(Tooltip, {
3567
- title: "Add Excess Payment",
3568
- arrow: true
3569
- }, /*#__PURE__*/React__default.createElement(AddExcessPaymentButton, {
3570
- className: "add-excess-payment-btn",
3571
- primaryColor: primaryColor,
3572
- onClick: function onClick() {
3573
- return setIsExcessPaymentModal({
3574
- open: true
3575
- });
3576
- },
3577
- "aria-label": "Add excess payment"
3578
- }, /*#__PURE__*/React__default.createElement(MdAdd, null), /*#__PURE__*/React__default.createElement("span", null, "Add")))));
3619
+ }, /*#__PURE__*/React__default.createElement("p", null, data === null || data === void 0 ? void 0 : data.name), /*#__PURE__*/React__default.createElement("h3", null, "" + (isAmount ? renderMoney(data === null || data === void 0 ? void 0 : data.value) : data === null || data === void 0 ? void 0 : data.value)))));
3579
3620
  }))), !hideBannerSection && /*#__PURE__*/React__default.createElement(BannerContainer, null, /*#__PURE__*/React__default.createElement(Grid, {
3580
3621
  container: true,
3581
3622
  spacing: 3,
@@ -8158,6 +8199,10 @@ var formatCurrency = function formatCurrency(amount) {
8158
8199
  maximumFractionDigits: 2
8159
8200
  });
8160
8201
  };
8202
+ var getPerQuantitySaveLabel = function getPerQuantitySaveLabel(amount, coupon) {
8203
+ var prefix = (coupon === null || coupon === void 0 ? void 0 : coupon.maxAllowedDiscount) > 0 ? 'Save up to' : 'Save';
8204
+ return prefix + " $" + formatCurrency(amount) + " per quantity";
8205
+ };
8161
8206
  var getUnitSaving = function getUnitSaving(coupon, productPrice) {
8162
8207
  if (coupon !== null && coupon !== void 0 && coupon.percentage && coupon !== null && coupon !== void 0 && coupon.offPercentage && productPrice > 0) {
8163
8208
  return productPrice * (coupon.offPercentage / 100);
@@ -8176,10 +8221,19 @@ var formatCartCount = function formatCartCount(cartQuantity) {
8176
8221
  var formatRemainingQuantity = function formatRemainingQuantity(remaining) {
8177
8222
  return remaining + " more " + (remaining === 1 ? 'quantity' : 'quantities');
8178
8223
  };
8224
+ var formatQuantityLabel = function formatQuantityLabel(count) {
8225
+ return count + " " + (count === 1 ? 'quantity' : 'quantities');
8226
+ };
8179
8227
  var isBuyXGetFreeProduct = function isBuyXGetFreeProduct(coupon) {
8180
8228
  var _coupon$freeProducts;
8181
8229
  return (coupon === null || coupon === void 0 ? void 0 : coupon.discountType) === 'BuyXGetFreeProduct' || (coupon === null || coupon === void 0 ? void 0 : (_coupon$freeProducts = coupon.freeProducts) === null || _coupon$freeProducts === void 0 ? void 0 : _coupon$freeProducts.length) > 0 && (coupon === null || coupon === void 0 ? void 0 : coupon.quantityToBuy) > 0;
8182
8230
  };
8231
+ var isBuyXGetDiscount = function isBuyXGetDiscount(coupon) {
8232
+ if ((coupon === null || coupon === void 0 ? void 0 : coupon.discountType) === 'BuyXGetDiscount') return true;
8233
+ if (isBuyXGetFreeProduct(coupon)) return false;
8234
+ if (!((coupon === null || coupon === void 0 ? void 0 : coupon.quantityToBuy) > 0) || (coupon === null || coupon === void 0 ? void 0 : coupon.quantityToGet) > 0) return false;
8235
+ return Boolean(coupon === null || coupon === void 0 ? void 0 : coupon.offPercentage) || Boolean(coupon === null || coupon === void 0 ? void 0 : coupon.offAmount);
8236
+ };
8183
8237
  var getBuyXGetFreeProductOffPercent = function getBuyXGetFreeProductOffPercent(coupon) {
8184
8238
  var pct = Number(coupon === null || coupon === void 0 ? void 0 : coupon.offPercentage);
8185
8239
  if (Number.isFinite(pct) && pct > 0) return pct;
@@ -8193,6 +8247,22 @@ var getBuyXGetFreeProductOfferLabel = function getBuyXGetFreeProductOfferLabel(c
8193
8247
  if (offPercent >= 100) return 'free';
8194
8248
  return offPercent + "% off on these products";
8195
8249
  };
8250
+ var getBuyXGetDiscountOffLabel = function getBuyXGetDiscountOffLabel(coupon, productPrice) {
8251
+ if (productPrice === void 0) {
8252
+ productPrice = 0;
8253
+ }
8254
+ if (coupon !== null && coupon !== void 0 && coupon.percentage && coupon !== null && coupon !== void 0 && coupon.offPercentage) {
8255
+ return coupon.offPercentage + "% off";
8256
+ }
8257
+ var unitSaving = getUnitSaving(coupon, productPrice);
8258
+ if (unitSaving) {
8259
+ return "$" + formatCurrency(unitSaving) + " off";
8260
+ }
8261
+ if ((coupon === null || coupon === void 0 ? void 0 : coupon.offAmount) > 0) {
8262
+ return "$" + formatCurrency(coupon.offAmount) + " off";
8263
+ }
8264
+ return 'discount';
8265
+ };
8196
8266
  var getFreeProductHref = function getFreeProductHref(product) {
8197
8267
  return "/product-details/" + paramCase((product === null || product === void 0 ? void 0 : product.productAlias) || (product === null || product === void 0 ? void 0 : product.productName) || '') + "?id=" + (product === null || product === void 0 ? void 0 : product.productId);
8198
8268
  };
@@ -8201,8 +8271,8 @@ var getBuyXGetFreeProductMessages = function getBuyXGetFreeProductMessages(quant
8201
8271
  offPercentage = 100;
8202
8272
  }
8203
8273
  var isFullyFree = offPercentage >= 100;
8204
- var buyTimes = quantityToBuy + " " + (quantityToBuy === 1 ? 'time' : 'times');
8205
- var benefitSummary = isFullyFree ? "Buy this product " + buyTimes + ", get " + quantityToGet + " " + (quantityToGet === 1 ? 'free product' : 'free products') : "Buy this product " + buyTimes + ", get " + offPercentage + "% off on these products";
8274
+ var addQtyLabel = formatQuantityLabel(quantityToBuy);
8275
+ var benefitSummary = isFullyFree ? "Add " + addQtyLabel + " of this product and get " + quantityToGet + " " + (quantityToGet === 1 ? 'free product' : 'free products') : "Add " + addQtyLabel + " of this product and get " + offPercentage + "% off on these products";
8206
8276
  var lines = [benefitSummary];
8207
8277
  if (cartQuantity <= 0) {
8208
8278
  return lines;
@@ -8218,7 +8288,7 @@ var getBuyXGetFreeProductMessages = function getBuyXGetFreeProductMessages(quant
8218
8288
  };
8219
8289
  var getBuyXGetYMessages = function getBuyXGetYMessages(quantityToBuy, quantityToGet, cartQuantity) {
8220
8290
  var totalNeeded = quantityToBuy + quantityToGet;
8221
- var lines = ["Buy " + quantityToBuy + ", get " + quantityToGet + " for free"];
8291
+ var lines = ["Add " + formatQuantityLabel(quantityToBuy) + ", get " + formatQuantityLabel(quantityToGet) + " for free"];
8222
8292
  if (cartQuantity <= 0) {
8223
8293
  return lines;
8224
8294
  }
@@ -8231,8 +8301,34 @@ var getBuyXGetYMessages = function getBuyXGetYMessages(quantityToBuy, quantityTo
8231
8301
  lines.push(formatCartCount(cartQuantity));
8232
8302
  lines.push("Add " + formatRemainingQuantity(_remaining) + " to apply this coupon");
8233
8303
  } else {
8234
- var freeLabel = quantityToGet === 1 ? 'item' : 'items';
8235
- lines.push(formatCartCount(cartQuantity) + " \xB7 Apply this coupon to get " + quantityToGet + " " + freeLabel + " for free");
8304
+ lines.push(formatCartCount(cartQuantity) + " \xB7 Apply this coupon to get " + formatQuantityLabel(quantityToGet) + " for free");
8305
+ }
8306
+ return lines;
8307
+ };
8308
+ var getBuyXGetDiscountMessages = function getBuyXGetDiscountMessages(coupon, _temp) {
8309
+ var _ref = _temp === void 0 ? {} : _temp,
8310
+ _ref$productPrice = _ref.productPrice,
8311
+ productPrice = _ref$productPrice === void 0 ? 0 : _ref$productPrice,
8312
+ _ref$cartQuantity = _ref.cartQuantity,
8313
+ cartQuantity = _ref$cartQuantity === void 0 ? 0 : _ref$cartQuantity;
8314
+ var quantityToBuy = (coupon === null || coupon === void 0 ? void 0 : coupon.quantityToBuy) || 0;
8315
+ var offLabel = getBuyXGetDiscountOffLabel(coupon, productPrice);
8316
+ var addLabel = formatQuantityLabel(quantityToBuy);
8317
+ var unitSaving = getUnitSaving(coupon, productPrice);
8318
+ var lines = ["Add " + addLabel + ", get " + offLabel];
8319
+ if (unitSaving) {
8320
+ lines[0] = "Add " + addLabel + ", get " + offLabel + " \xB7 " + getPerQuantitySaveLabel(unitSaving, coupon);
8321
+ }
8322
+ if (cartQuantity <= 0) {
8323
+ return lines;
8324
+ }
8325
+ if (cartQuantity < quantityToBuy) {
8326
+ var remaining = quantityToBuy - cartQuantity;
8327
+ lines.push(formatCartCount(cartQuantity));
8328
+ lines.push("Add " + formatRemainingQuantity(remaining) + " to qualify");
8329
+ } else {
8330
+ var totalSaving = unitSaving ? unitSaving * cartQuantity : null;
8331
+ lines.push(totalSaving ? formatCartCount(cartQuantity) + " \xB7 Apply this coupon to get $" + formatCurrency(totalSaving) + " off" : formatCartCount(cartQuantity) + " \xB7 Apply this coupon to get " + offLabel);
8236
8332
  }
8237
8333
  return lines;
8238
8334
  };
@@ -8240,10 +8336,21 @@ var getCouponTypeIcon = function getCouponTypeIcon(coupon) {
8240
8336
  if (isBuyXGetFreeProduct(coupon)) {
8241
8337
  return isFullyFreeBuyXOffer(coupon) ? FiGift : FiPercent;
8242
8338
  }
8339
+ if (isBuyXGetDiscount(coupon)) return FiLayers;
8243
8340
  if ((coupon === null || coupon === void 0 ? void 0 : coupon.quantityToBuy) > 0 && (coupon === null || coupon === void 0 ? void 0 : coupon.quantityToGet) > 0) return FiLayers;
8244
8341
  if (coupon !== null && coupon !== void 0 && coupon.offPercentage) return FiPercent;
8245
8342
  return FiTag;
8246
8343
  };
8344
+ var getCouponLimitMessages = function getCouponLimitMessages(coupon) {
8345
+ var lines = [];
8346
+ if ((coupon === null || coupon === void 0 ? void 0 : coupon.maxAllowedDiscount) > 0) {
8347
+ lines.push("Maximum saving is up to $" + formatCurrency(coupon.maxAllowedDiscount) + ".");
8348
+ }
8349
+ if ((coupon === null || coupon === void 0 ? void 0 : coupon.maxAllowedAmount) > 0) {
8350
+ lines.push("Applies when your order is more than $" + formatCurrency(coupon.maxAllowedAmount) + ".");
8351
+ }
8352
+ return lines;
8353
+ };
8247
8354
  var getDetailMeta = function getDetailMeta(line) {
8248
8355
  if (line.includes('added in the cart') && line.includes('Apply')) {
8249
8356
  return {
@@ -8274,15 +8381,21 @@ var getDetailMeta = function getDetailMeta(line) {
8274
8381
  tone: 'info'
8275
8382
  };
8276
8383
  };
8277
- var getCouponBenefit = function getCouponBenefit(coupon, _temp) {
8278
- var _ref = _temp === void 0 ? {} : _temp,
8279
- _ref$productPrice = _ref.productPrice,
8280
- productPrice = _ref$productPrice === void 0 ? 0 : _ref$productPrice,
8281
- _ref$cartQuantity = _ref.cartQuantity,
8282
- cartQuantity = _ref$cartQuantity === void 0 ? 0 : _ref$cartQuantity;
8384
+ var getCouponBenefit = function getCouponBenefit(coupon, _temp2) {
8385
+ var _ref2 = _temp2 === void 0 ? {} : _temp2,
8386
+ _ref2$productPrice = _ref2.productPrice,
8387
+ productPrice = _ref2$productPrice === void 0 ? 0 : _ref2$productPrice,
8388
+ _ref2$cartQuantity = _ref2.cartQuantity,
8389
+ cartQuantity = _ref2$cartQuantity === void 0 ? 0 : _ref2$cartQuantity;
8283
8390
  if (isBuyXGetFreeProduct(coupon)) {
8284
8391
  return getBuyXGetFreeProductMessages(coupon.quantityToBuy, coupon.quantityToGet, cartQuantity, getBuyXGetFreeProductOffPercent(coupon));
8285
8392
  }
8393
+ if (isBuyXGetDiscount(coupon)) {
8394
+ return getBuyXGetDiscountMessages(coupon, {
8395
+ productPrice: productPrice,
8396
+ cartQuantity: cartQuantity
8397
+ });
8398
+ }
8286
8399
  var hasBuyXGetY = (coupon === null || coupon === void 0 ? void 0 : coupon.quantityToBuy) > 0 && (coupon === null || coupon === void 0 ? void 0 : coupon.quantityToGet) > 0;
8287
8400
  if (hasBuyXGetY) {
8288
8401
  return getBuyXGetYMessages(coupon.quantityToBuy, coupon.quantityToGet, cartQuantity);
@@ -8291,9 +8404,9 @@ var getCouponBenefit = function getCouponBenefit(coupon, _temp) {
8291
8404
  if (!unitSaving) return null;
8292
8405
  var lines = [];
8293
8406
  if (coupon !== null && coupon !== void 0 && coupon.offPercentage) {
8294
- lines.push(coupon.offPercentage + "% off \xB7 Save $" + formatCurrency(unitSaving) + " per item");
8407
+ lines.push(coupon.offPercentage + "% off \xB7 " + getPerQuantitySaveLabel(unitSaving, coupon));
8295
8408
  } else {
8296
- lines.push("Save $" + formatCurrency(unitSaving) + " per item");
8409
+ lines.push(getPerQuantitySaveLabel(unitSaving, coupon));
8297
8410
  }
8298
8411
  if (cartQuantity > 0) {
8299
8412
  var totalSaving = unitSaving * cartQuantity;
@@ -8301,47 +8414,44 @@ var getCouponBenefit = function getCouponBenefit(coupon, _temp) {
8301
8414
  }
8302
8415
  return lines;
8303
8416
  };
8304
- var getSuggestionPreviewText = function getSuggestionPreviewText(coupon, _temp2) {
8305
- var _ref2 = _temp2 === void 0 ? {} : _temp2,
8306
- _ref2$productPrice = _ref2.productPrice,
8307
- productPrice = _ref2$productPrice === void 0 ? 0 : _ref2$productPrice,
8308
- _ref2$cartQuantity = _ref2.cartQuantity,
8309
- cartQuantity = _ref2$cartQuantity === void 0 ? 0 : _ref2$cartQuantity;
8417
+ var getSuggestionPreviewText = function getSuggestionPreviewText(coupon, _temp3) {
8418
+ var _ref3 = _temp3 === void 0 ? {} : _temp3,
8419
+ _ref3$productPrice = _ref3.productPrice,
8420
+ productPrice = _ref3$productPrice === void 0 ? 0 : _ref3$productPrice,
8421
+ _ref3$cartQuantity = _ref3.cartQuantity,
8422
+ cartQuantity = _ref3$cartQuantity === void 0 ? 0 : _ref3$cartQuantity;
8310
8423
  if (!coupon) return null;
8311
8424
  if (isBuyXGetFreeProduct(coupon)) {
8312
- var _quantityToBuy = coupon.quantityToBuy || 1;
8425
+ var quantityToBuy = coupon.quantityToBuy || 1;
8313
8426
  var quantityToGet = coupon.quantityToGet || 1;
8314
- var buyTimes = _quantityToBuy + " " + (_quantityToBuy === 1 ? 'time' : 'times');
8427
+ var addQtyLabel = formatQuantityLabel(quantityToBuy);
8315
8428
  var offPercent = getBuyXGetFreeProductOffPercent(coupon);
8316
8429
  if (offPercent >= 100) {
8317
- return "Buy this product " + buyTimes + ", get " + quantityToGet + " " + (quantityToGet === 1 ? 'free product' : 'free products') + ". Click View All offers to know more";
8430
+ return "Add " + addQtyLabel + " of this product and get " + quantityToGet + " " + (quantityToGet === 1 ? 'free product' : 'free products') + ". Click View All offers to know more";
8318
8431
  }
8319
- return "Buy this product " + buyTimes + ", get " + offPercent + "% off on some products. Click View All offers to know more";
8432
+ return "Add " + addQtyLabel + " of this product and get " + offPercent + "% off on some products. Click View All offers to know more";
8320
8433
  }
8321
- var hasBuyXGetY = (coupon === null || coupon === void 0 ? void 0 : coupon.quantityToBuy) > 0 && (coupon === null || coupon === void 0 ? void 0 : coupon.quantityToGet) > 0;
8322
- if (hasBuyXGetY) {
8434
+ if (isBuyXGetDiscount(coupon)) {
8323
8435
  var _getCouponBenefit;
8324
8436
  return ((_getCouponBenefit = getCouponBenefit(coupon, {
8325
8437
  productPrice: productPrice,
8326
8438
  cartQuantity: cartQuantity
8327
8439
  })) === null || _getCouponBenefit === void 0 ? void 0 : _getCouponBenefit[0]) || null;
8328
8440
  }
8329
- var unitSaving = getUnitSaving(coupon, productPrice);
8330
- var quantityToBuy = coupon === null || coupon === void 0 ? void 0 : coupon.quantityToBuy;
8331
- var hasBuyQuantityRequirement = quantityToBuy > 0 && !((coupon === null || coupon === void 0 ? void 0 : coupon.quantityToGet) > 0);
8332
- if (hasBuyQuantityRequirement && coupon !== null && coupon !== void 0 && coupon.offPercentage && unitSaving) {
8333
- var qtyLabel = quantityToBuy === 1 ? 'quantity' : 'quantities';
8334
- return "Buy " + quantityToBuy + " " + qtyLabel + ", get " + coupon.offPercentage + "% off, save $" + formatCurrency(unitSaving) + " per item";
8335
- }
8336
- if (hasBuyQuantityRequirement && unitSaving) {
8337
- var _qtyLabel = quantityToBuy === 1 ? 'quantity' : 'quantities';
8338
- return "Buy " + quantityToBuy + " " + _qtyLabel + ", save $" + formatCurrency(unitSaving) + " per item";
8441
+ var hasBuyXGetY = (coupon === null || coupon === void 0 ? void 0 : coupon.quantityToBuy) > 0 && (coupon === null || coupon === void 0 ? void 0 : coupon.quantityToGet) > 0;
8442
+ if (hasBuyXGetY) {
8443
+ var _getCouponBenefit2;
8444
+ return ((_getCouponBenefit2 = getCouponBenefit(coupon, {
8445
+ productPrice: productPrice,
8446
+ cartQuantity: cartQuantity
8447
+ })) === null || _getCouponBenefit2 === void 0 ? void 0 : _getCouponBenefit2[0]) || null;
8339
8448
  }
8449
+ var unitSaving = getUnitSaving(coupon, productPrice);
8340
8450
  if (coupon !== null && coupon !== void 0 && coupon.offPercentage && unitSaving) {
8341
- return "get " + coupon.offPercentage + "% off, save $" + formatCurrency(unitSaving) + " per item";
8451
+ return "get " + coupon.offPercentage + "% off, " + getPerQuantitySaveLabel(unitSaving, coupon).toLowerCase();
8342
8452
  }
8343
8453
  if (unitSaving) {
8344
- return "save $" + formatCurrency(unitSaving) + " per item";
8454
+ return getPerQuantitySaveLabel(unitSaving, coupon).toLowerCase();
8345
8455
  }
8346
8456
  return null;
8347
8457
  };
@@ -8361,6 +8471,23 @@ var getSavingsBadge = function getSavingsBadge(coupon, productPrice) {
8361
8471
  bottom: 'GIFT'
8362
8472
  };
8363
8473
  }
8474
+ if (isBuyXGetDiscount(coupon)) {
8475
+ if (coupon !== null && coupon !== void 0 && coupon.percentage && coupon !== null && coupon !== void 0 && coupon.offPercentage) {
8476
+ return {
8477
+ variant: 'percent',
8478
+ top: coupon.offPercentage + "%",
8479
+ bottom: 'OFF'
8480
+ };
8481
+ }
8482
+ var _unitSaving = getUnitSaving(coupon, productPrice);
8483
+ if (_unitSaving) {
8484
+ return {
8485
+ variant: 'amount',
8486
+ top: "$" + formatCurrency(_unitSaving),
8487
+ bottom: 'SAVE'
8488
+ };
8489
+ }
8490
+ }
8364
8491
  if ((coupon === null || coupon === void 0 ? void 0 : coupon.quantityToBuy) > 0 && (coupon === null || coupon === void 0 ? void 0 : coupon.quantityToGet) > 0) {
8365
8492
  return {
8366
8493
  variant: 'bogo',
@@ -8405,8 +8532,29 @@ var getProgressInfo = function getProgressInfo(coupon, cartQuantity) {
8405
8532
  target: _target,
8406
8533
  percent: _percent,
8407
8534
  qualified: qualified,
8408
- unitLabel: _target === 1 ? 'Item' : 'Items',
8409
- message: qualified ? "You're eligible — apply your code at checkout!" : _remaining2 === 1 ? "Only 1 more item to unlock " + unlockLabel + "!" : "Only " + _remaining2 + " more items to unlock " + unlockLabel + "!"
8535
+ unitLabel: _target === 1 ? 'Quantity' : 'Quantities',
8536
+ message: qualified ? "You're eligible — apply your code at checkout!" : _remaining2 === 1 ? "Only 1 more quantity to unlock " + unlockLabel + "!" : "Only " + _remaining2 + " more quantities to unlock " + unlockLabel + "!"
8537
+ };
8538
+ }
8539
+ if (isBuyXGetDiscount(coupon)) {
8540
+ var _target2 = coupon.quantityToBuy || 0;
8541
+ if (!_target2) return null;
8542
+ var _current2 = Math.min(cartQuantity, _target2);
8543
+ var _percent2 = Math.min(100, _current2 / _target2 * 100);
8544
+ var _remaining3 = Math.max(0, _target2 - cartQuantity);
8545
+ var _qualified = cartQuantity >= _target2;
8546
+ var offLabel = getBuyXGetDiscountOffLabel(coupon);
8547
+ return {
8548
+ type: 'buyxgetdiscount',
8549
+ current: _current2,
8550
+ target: _target2,
8551
+ percent: _percent2,
8552
+ qualified: _qualified,
8553
+ unitLabel: _target2 === 1 ? 'Quantity' : 'Quantities',
8554
+ showTimeline: true,
8555
+ quantityToBuy: _target2,
8556
+ offLabel: offLabel,
8557
+ message: _qualified ? "You're eligible — apply your code at checkout!" : _remaining3 === 1 ? "Only 1 more quantity to unlock " + offLabel + "!" : "Only " + _remaining3 + " more quantities to unlock " + offLabel + "!"
8410
8558
  };
8411
8559
  }
8412
8560
  var hasBuyXGetY = (coupon === null || coupon === void 0 ? void 0 : coupon.quantityToBuy) > 0 && (coupon === null || coupon === void 0 ? void 0 : coupon.quantityToGet) > 0;
@@ -8424,18 +8572,18 @@ var getProgressInfo = function getProgressInfo(coupon, cartQuantity) {
8424
8572
  };
8425
8573
  }
8426
8574
  if (cartQuantity >= quantityToBuy) {
8427
- var _current2 = cartQuantity;
8428
- var _target2 = totalNeeded;
8429
- var _percent2 = Math.min(100, _current2 / _target2 * 100);
8430
- var _remaining3 = totalNeeded - cartQuantity;
8575
+ var _current3 = cartQuantity;
8576
+ var _target3 = totalNeeded;
8577
+ var _percent3 = Math.min(100, _current3 / _target3 * 100);
8578
+ var _remaining4 = totalNeeded - cartQuantity;
8431
8579
  return {
8432
8580
  type: 'quantity',
8433
- current: _current2,
8434
- target: _target2,
8435
- percent: _percent2,
8581
+ current: _current3,
8582
+ target: _target3,
8583
+ percent: _percent3,
8436
8584
  qualified: false,
8437
- unitLabel: _target2 === 1 ? 'Item' : 'Items',
8438
- message: _remaining3 === 1 ? 'Only 1 more item to apply this coupon' : "Only " + _remaining3 + " more items to apply this coupon",
8585
+ unitLabel: _target3 === 1 ? 'Quantity' : 'Quantities',
8586
+ message: _remaining4 === 1 ? 'Only 1 more quantity to apply this coupon' : "Only " + _remaining4 + " more quantities to apply this coupon",
8439
8587
  showTimeline: true,
8440
8588
  quantityToBuy: quantityToBuy,
8441
8589
  quantityToGet: quantityToGet
@@ -8451,8 +8599,8 @@ var getProgressInfo = function getProgressInfo(coupon, cartQuantity) {
8451
8599
  target: target,
8452
8600
  percent: percent,
8453
8601
  qualified: false,
8454
- unitLabel: target === 1 ? 'Item' : 'Items',
8455
- message: remaining === 1 ? 'Only 1 more item to qualify' : "Only " + remaining + " more items to qualify",
8602
+ unitLabel: target === 1 ? 'Quantity' : 'Quantities',
8603
+ message: remaining === 1 ? 'Only 1 more quantity to qualify' : "Only " + remaining + " more quantities to qualify",
8456
8604
  showTimeline: true,
8457
8605
  quantityToBuy: quantityToBuy,
8458
8606
  quantityToGet: quantityToGet
@@ -8461,17 +8609,17 @@ var getProgressInfo = function getProgressInfo(coupon, cartQuantity) {
8461
8609
  var isProgressDetailLine = function isProgressDetailLine(line) {
8462
8610
  return line === null || line === void 0 ? void 0 : line.startsWith('Add ');
8463
8611
  };
8464
- var DiscountSuggestionsModal = function DiscountSuggestionsModal(_ref3) {
8465
- var open = _ref3.open,
8466
- onClose = _ref3.onClose,
8467
- productName = _ref3.productName,
8468
- _ref3$productDiscount = _ref3.productDiscounts,
8469
- productDiscounts = _ref3$productDiscount === void 0 ? [] : _ref3$productDiscount,
8470
- primaryColor = _ref3.primaryColor,
8471
- _ref3$cartQuantity = _ref3.cartQuantity,
8472
- cartQuantity = _ref3$cartQuantity === void 0 ? 0 : _ref3$cartQuantity,
8473
- _ref3$productPrice = _ref3.productPrice,
8474
- productPrice = _ref3$productPrice === void 0 ? 0 : _ref3$productPrice;
8612
+ var DiscountSuggestionsModal = function DiscountSuggestionsModal(_ref4) {
8613
+ var open = _ref4.open,
8614
+ onClose = _ref4.onClose,
8615
+ productName = _ref4.productName,
8616
+ _ref4$productDiscount = _ref4.productDiscounts,
8617
+ productDiscounts = _ref4$productDiscount === void 0 ? [] : _ref4$productDiscount,
8618
+ primaryColor = _ref4.primaryColor,
8619
+ _ref4$cartQuantity = _ref4.cartQuantity,
8620
+ cartQuantity = _ref4$cartQuantity === void 0 ? 0 : _ref4$cartQuantity,
8621
+ _ref4$productPrice = _ref4.productPrice,
8622
+ productPrice = _ref4$productPrice === void 0 ? 0 : _ref4$productPrice;
8475
8623
  var _useState = useState(null),
8476
8624
  copiedCode = _useState[0],
8477
8625
  setCopiedCode = _useState[1];
@@ -8479,7 +8627,7 @@ var DiscountSuggestionsModal = function DiscountSuggestionsModal(_ref3) {
8479
8627
  var copyCouponCode = useCallback(function (code) {
8480
8628
  try {
8481
8629
  if (!code) return Promise.resolve();
8482
- var _temp3 = _catch(function () {
8630
+ var _temp4 = _catch(function () {
8483
8631
  var _navigator, _navigator$clipboard;
8484
8632
  return Promise.resolve((_navigator = navigator) === null || _navigator === void 0 ? void 0 : (_navigator$clipboard = _navigator.clipboard) === null || _navigator$clipboard === void 0 ? void 0 : _navigator$clipboard.writeText(code)).then(function () {
8485
8633
  var _window;
@@ -8491,7 +8639,7 @@ var DiscountSuggestionsModal = function DiscountSuggestionsModal(_ref3) {
8491
8639
  }, function (error) {
8492
8640
  console.error('Failed to copy coupon code', error);
8493
8641
  });
8494
- return Promise.resolve(_temp3 && _temp3.then ? _temp3.then(function () {}) : void 0);
8642
+ return Promise.resolve(_temp4 && _temp4.then ? _temp4.then(function () {}) : void 0);
8495
8643
  } catch (e) {
8496
8644
  return Promise.reject(e);
8497
8645
  }
@@ -8517,10 +8665,10 @@ var DiscountSuggestionsModal = function DiscountSuggestionsModal(_ref3) {
8517
8665
  };
8518
8666
  document.addEventListener('keydown', handleKeyDown);
8519
8667
  return function () {
8520
- scrollLocks.forEach(function (_ref4) {
8521
- var el = _ref4.el,
8522
- overflow = _ref4.overflow,
8523
- overscrollBehavior = _ref4.overscrollBehavior;
8668
+ scrollLocks.forEach(function (_ref5) {
8669
+ var el = _ref5.el,
8670
+ overflow = _ref5.overflow,
8671
+ overscrollBehavior = _ref5.overscrollBehavior;
8524
8672
  el.style.overflow = overflow;
8525
8673
  el.style.overscrollBehavior = overscrollBehavior;
8526
8674
  });
@@ -8585,8 +8733,9 @@ var DiscountSuggestionsModal = function DiscountSuggestionsModal(_ref3) {
8585
8733
  productPrice: productPrice,
8586
8734
  cartQuantity: cartQuantity
8587
8735
  });
8736
+ var limitMessages = getCouponLimitMessages(coupon);
8588
8737
  var benefitSummary = (benefit === null || benefit === void 0 ? void 0 : benefit[0]) || null;
8589
- var benefitDetails = (benefit === null || benefit === void 0 ? void 0 : benefit.length) > 1 ? benefit.slice(1) : [];
8738
+ var benefitDetails = [].concat((benefit === null || benefit === void 0 ? void 0 : benefit.length) > 1 ? benefit.slice(1) : [], limitMessages);
8590
8739
  var statusDetails = benefitDetails.filter(function (line) {
8591
8740
  return !isProgressDetailLine(line);
8592
8741
  });
@@ -8602,7 +8751,8 @@ var DiscountSuggestionsModal = function DiscountSuggestionsModal(_ref3) {
8602
8751
  var savingsBadge = getSavingsBadge(coupon, productPrice);
8603
8752
  var progressInfo = getProgressInfo(coupon, cartQuantity);
8604
8753
  var hasBuyXGetY = (coupon === null || coupon === void 0 ? void 0 : coupon.quantityToBuy) > 0 && (coupon === null || coupon === void 0 ? void 0 : coupon.quantityToGet) > 0;
8605
- var showTimeline = hasBuyXGetY && ((progressInfo === null || progressInfo === void 0 ? void 0 : progressInfo.showTimeline) || (progressInfo === null || progressInfo === void 0 ? void 0 : progressInfo.type) === 'buyxgety');
8754
+ var isQtyDiscount = isBuyXGetDiscount(coupon);
8755
+ var showTimeline = (hasBuyXGetY || isQtyDiscount) && ((progressInfo === null || progressInfo === void 0 ? void 0 : progressInfo.showTimeline) || (progressInfo === null || progressInfo === void 0 ? void 0 : progressInfo.type) === 'buyxgety' || (progressInfo === null || progressInfo === void 0 ? void 0 : progressInfo.type) === 'buyxgetdiscount');
8606
8756
  return /*#__PURE__*/React__default.createElement(OfferCard, {
8607
8757
  key: (_coupon$discountId = coupon === null || coupon === void 0 ? void 0 : coupon.discountId) != null ? _coupon$discountId : coupon === null || coupon === void 0 ? void 0 : coupon.couponCode,
8608
8758
  $accentColor: accentColor,
@@ -8612,7 +8762,7 @@ var DiscountSuggestionsModal = function DiscountSuggestionsModal(_ref3) {
8612
8762
  $variant: savingsBadge.variant
8613
8763
  }, /*#__PURE__*/React__default.createElement(BadgeTop, null, savingsBadge.top), /*#__PURE__*/React__default.createElement(BadgeBottom, null, savingsBadge.bottom)), /*#__PURE__*/React__default.createElement(CardHeaderCopy, null, /*#__PURE__*/React__default.createElement(CardMetaRow, null, /*#__PURE__*/React__default.createElement(TypePill, {
8614
8764
  $accentColor: accentColor
8615
- }, /*#__PURE__*/React__default.createElement(TypeIcon, null), /*#__PURE__*/React__default.createElement("span", null, isBuyXGetFreeProduct(coupon) ? isFullyFreeOffer ? 'Free Gift' : getBuyXGetFreeProductOffPercent(coupon) + "% Off" : hasBuyXGetY ? 'Buy & Get' : coupon !== null && coupon !== void 0 && coupon.offPercentage ? 'Percent Off' : 'Instant Save')), (progressInfo === null || progressInfo === void 0 ? void 0 : progressInfo.qualified) && /*#__PURE__*/React__default.createElement(QualifiedPill, {
8765
+ }, /*#__PURE__*/React__default.createElement(TypeIcon, null), /*#__PURE__*/React__default.createElement("span", null, isBuyXGetFreeProduct(coupon) ? isFullyFreeOffer ? 'Free Gift' : getBuyXGetFreeProductOffPercent(coupon) + "% Off" : isQtyDiscount ? 'Add & Save' : hasBuyXGetY ? 'Add & Get' : coupon !== null && coupon !== void 0 && coupon.offPercentage ? 'Percent Off' : 'Instant Save')), (progressInfo === null || progressInfo === void 0 ? void 0 : progressInfo.qualified) && /*#__PURE__*/React__default.createElement(QualifiedPill, {
8616
8766
  $accentColor: accentColor
8617
8767
  }, /*#__PURE__*/React__default.createElement(HiSparkles, null), "Ready")), /*#__PURE__*/React__default.createElement(TitleRow, null, /*#__PURE__*/React__default.createElement(OfferTitle, {
8618
8768
  title: coupon === null || coupon === void 0 ? void 0 : coupon.discountName
@@ -8633,36 +8783,24 @@ var DiscountSuggestionsModal = function DiscountSuggestionsModal(_ref3) {
8633
8783
  onClick: function onClick() {
8634
8784
  return copyCouponCode(coupon === null || coupon === void 0 ? void 0 : coupon.couponCode);
8635
8785
  }
8636
- }, isCopied ? /*#__PURE__*/React__default.createElement("div", {
8637
- style: {
8638
- display: 'flex',
8639
- alignItems: 'center',
8640
- gap: '4px'
8641
- }
8642
- }, /*#__PURE__*/React__default.createElement(FiCheck, null), /*#__PURE__*/React__default.createElement("span", null, "Copied")) : /*#__PURE__*/React__default.createElement("div", {
8643
- style: {
8644
- display: 'flex',
8645
- alignItems: 'center',
8646
- gap: '4px'
8647
- }
8648
- }, /*#__PURE__*/React__default.createElement(FiCopy, null), /*#__PURE__*/React__default.createElement("span", null, "Copy")))))))), benefitSummary && /*#__PURE__*/React__default.createElement(OfferDescription, null, benefitSummary), showTimeline && /*#__PURE__*/React__default.createElement(BuyXTimeline, {
8786
+ }, isCopied ? /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement(FiCheck, null), /*#__PURE__*/React__default.createElement("span", null, "Copied")) : /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement(FiCopy, null), /*#__PURE__*/React__default.createElement("span", null, "Copy")))))))), benefitSummary && /*#__PURE__*/React__default.createElement(OfferDescription, null, benefitSummary), showTimeline && /*#__PURE__*/React__default.createElement(BuyXTimeline, {
8649
8787
  $accentColor: accentColor
8650
8788
  }, /*#__PURE__*/React__default.createElement(TimelineStep, null, /*#__PURE__*/React__default.createElement(TimelineIcon, {
8651
8789
  $accentColor: accentColor
8652
- }, /*#__PURE__*/React__default.createElement(FiShoppingCart, null)), /*#__PURE__*/React__default.createElement(TimelineLabel, null, "Buy ", coupon.quantityToBuy)), /*#__PURE__*/React__default.createElement(TimelineTrack, {
8790
+ }, /*#__PURE__*/React__default.createElement(FiShoppingCart, null)), /*#__PURE__*/React__default.createElement(TimelineLabel, null, "Add ", coupon.quantityToBuy)), /*#__PURE__*/React__default.createElement(TimelineTrack, {
8653
8791
  $accentColor: accentColor
8654
8792
  }, /*#__PURE__*/React__default.createElement(TimelineArrow, {
8655
8793
  $accentColor: accentColor
8656
8794
  })), /*#__PURE__*/React__default.createElement(TimelineStep, null, /*#__PURE__*/React__default.createElement(TimelineIcon, {
8657
8795
  $accentColor: accentColor,
8658
8796
  $highlight: true
8659
- }, /*#__PURE__*/React__default.createElement(FiGift, null)), /*#__PURE__*/React__default.createElement(TimelineLabel, null, "Get ", coupon.quantityToGet, " FREE"))), (progressInfo === null || progressInfo === void 0 ? void 0 : progressInfo.type) === 'quantity' && !progressInfo.qualified && /*#__PURE__*/React__default.createElement(ProgressBlock, null, /*#__PURE__*/React__default.createElement(ProgressTrack, {
8797
+ }, isQtyDiscount ? /*#__PURE__*/React__default.createElement(FiPercent, null) : /*#__PURE__*/React__default.createElement(FiGift, null)), /*#__PURE__*/React__default.createElement(TimelineLabel, null, isQtyDiscount ? "Get " + ((progressInfo === null || progressInfo === void 0 ? void 0 : progressInfo.offLabel) || getBuyXGetDiscountOffLabel(coupon, productPrice)) : "Get " + coupon.quantityToGet + " FREE"))), ((progressInfo === null || progressInfo === void 0 ? void 0 : progressInfo.type) === 'quantity' || (progressInfo === null || progressInfo === void 0 ? void 0 : progressInfo.type) === 'buyxgetdiscount') && !progressInfo.qualified && /*#__PURE__*/React__default.createElement(ProgressBlock, null, /*#__PURE__*/React__default.createElement(ProgressTrack, {
8660
8798
  $accentColor: accentColor,
8661
8799
  role: "progressbar",
8662
8800
  "aria-valuenow": progressInfo.current,
8663
8801
  "aria-valuemin": 0,
8664
8802
  "aria-valuemax": progressInfo.target,
8665
- "aria-label": progressInfo.current + " of " + progressInfo.target + " items toward eligibility"
8803
+ "aria-label": progressInfo.current + " of " + progressInfo.target + " quantities toward eligibility"
8666
8804
  }, /*#__PURE__*/React__default.createElement(ProgressFill, {
8667
8805
  $accentColor: accentColor,
8668
8806
  $percent: progressInfo.percent
@@ -8704,95 +8842,95 @@ var DialogTitle = styled.h2(_templateObject11$3 || (_templateObject11$3 = _tagge
8704
8842
  var CloseButton = styled.button(_templateObject12$2 || (_templateObject12$2 = _taggedTemplateLiteralLoose(["\n position: absolute;\n top: 0.5rem;\n right: 0.5rem;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 2rem;\n height: 2rem;\n padding: 0;\n border: none;\n border-radius: 50%;\n background: transparent;\n color: rgba(0, 0, 0, 0.54);\n cursor: pointer;\n transition: background-color 0.2s ease;\n\n svg {\n font-size: 1.25rem;\n }\n\n &:hover {\n background-color: rgba(0, 0, 0, 0.04);\n }\n\n &:focus-visible {\n outline: 2px solid #437c0f;\n outline-offset: 1px;\n }\n"])));
8705
8843
  var ScrollableBody = styled.div(_templateObject13$2 || (_templateObject13$2 = _taggedTemplateLiteralLoose(["\n flex: 1 1 auto;\n min-height: 0;\n overflow-y: auto;\n overscroll-behavior: contain;\n -webkit-overflow-scrolling: touch;\n padding: 0.85rem;\n"])));
8706
8844
  var EmptyState$1 = styled.p(_templateObject14$2 || (_templateObject14$2 = _taggedTemplateLiteralLoose(["\n margin: 0;\n padding: 1.5rem 0.5rem;\n text-align: center;\n font-size: 0.9rem;\n font-weight: 600;\n color: #5a6354;\n"])));
8707
- var SavingsCenter = styled.section(_templateObject15$2 || (_templateObject15$2 = _taggedTemplateLiteralLoose(["\n --accent: ", ";\n position: relative;\n width: 100%;\n border-radius: 0.85rem;\n border: 1px solid ", ";\n background: linear-gradient(165deg, #ffffff 0%, #fafcf7 45%, #f6f9f2 100%);\n overflow: hidden;\n box-shadow: 0 1px 2px rgba(16, 22, 10, 0.04),\n 0 8px 24px ", ";\n animation: ", " 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;\n font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI',\n 'Inter', Roboto, sans-serif;\n ", "\n"])), function (_ref5) {
8708
- var $accentColor = _ref5.$accentColor;
8709
- return $accentColor;
8710
- }, function (_ref6) {
8845
+ var SavingsCenter = styled.section(_templateObject15$2 || (_templateObject15$2 = _taggedTemplateLiteralLoose(["\n --accent: ", ";\n position: relative;\n width: 100%;\n border-radius: 0.85rem;\n border: 1px solid ", ";\n background: linear-gradient(165deg, #ffffff 0%, #fafcf7 45%, #f6f9f2 100%);\n overflow: hidden;\n box-shadow: 0 1px 2px rgba(16, 22, 10, 0.04),\n 0 8px 24px ", ";\n animation: ", " 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;\n font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI',\n 'Inter', Roboto, sans-serif;\n ", "\n"])), function (_ref6) {
8711
8846
  var $accentColor = _ref6.$accentColor;
8712
- return $accentColor + "20";
8847
+ return $accentColor;
8713
8848
  }, function (_ref7) {
8714
8849
  var $accentColor = _ref7.$accentColor;
8850
+ return $accentColor + "20";
8851
+ }, function (_ref8) {
8852
+ var $accentColor = _ref8.$accentColor;
8715
8853
  return $accentColor + "10";
8716
8854
  }, fadeSlideUp, reducedMotion);
8717
- var AmbientGlow = styled.div(_templateObject16$2 || (_templateObject16$2 = _taggedTemplateLiteralLoose(["\n position: absolute;\n top: -40%;\n right: -15%;\n width: 55%;\n height: 80%;\n background: radial-gradient(\n circle,\n ", " 0%,\n transparent 70%\n );\n pointer-events: none;\n"])), function (_ref8) {
8718
- var $accentColor = _ref8.$accentColor;
8855
+ var AmbientGlow = styled.div(_templateObject16$2 || (_templateObject16$2 = _taggedTemplateLiteralLoose(["\n position: absolute;\n top: -40%;\n right: -15%;\n width: 55%;\n height: 80%;\n background: radial-gradient(\n circle,\n ", " 0%,\n transparent 70%\n );\n pointer-events: none;\n"])), function (_ref9) {
8856
+ var $accentColor = _ref9.$accentColor;
8719
8857
  return $accentColor + "18";
8720
8858
  });
8721
- var Sparkle = styled.span(_templateObject17$2 || (_templateObject17$2 = _taggedTemplateLiteralLoose(["\n position: absolute;\n top: ", ";\n left: ", ";\n width: ", ";\n height: ", ";\n border-radius: 50%;\n background: ", ";\n box-shadow: 0 0 12px ", ";\n animation: ", " 4s ease-in-out infinite;\n animation-delay: ", ";\n pointer-events: none;\n opacity: 0.3;\n\n ", "\n"])), function (_ref9) {
8722
- var $top = _ref9.$top;
8859
+ var Sparkle = styled.span(_templateObject17$2 || (_templateObject17$2 = _taggedTemplateLiteralLoose(["\n position: absolute;\n top: ", ";\n left: ", ";\n width: ", ";\n height: ", ";\n border-radius: 50%;\n background: ", ";\n box-shadow: 0 0 12px ", ";\n animation: ", " 4s ease-in-out infinite;\n animation-delay: ", ";\n pointer-events: none;\n opacity: 0.3;\n\n ", "\n"])), function (_ref10) {
8860
+ var $top = _ref10.$top;
8723
8861
  return $top;
8724
- }, function (_ref10) {
8725
- var $left = _ref10.$left;
8726
- return $left;
8727
8862
  }, function (_ref11) {
8728
- var $size = _ref11.$size;
8729
- return $size === 'sm' ? '4px' : '6px';
8863
+ var $left = _ref11.$left;
8864
+ return $left;
8730
8865
  }, function (_ref12) {
8731
8866
  var $size = _ref12.$size;
8732
8867
  return $size === 'sm' ? '4px' : '6px';
8733
8868
  }, function (_ref13) {
8734
- var $accentColor = _ref13.$accentColor;
8735
- return $accentColor;
8869
+ var $size = _ref13.$size;
8870
+ return $size === 'sm' ? '4px' : '6px';
8736
8871
  }, function (_ref14) {
8737
8872
  var $accentColor = _ref14.$accentColor;
8873
+ return $accentColor;
8874
+ }, function (_ref15) {
8875
+ var $accentColor = _ref15.$accentColor;
8738
8876
  return $accentColor + "80";
8739
- }, sparkleFloat, function (_ref15) {
8740
- var $delay = _ref15.$delay;
8877
+ }, sparkleFloat, function (_ref16) {
8878
+ var $delay = _ref16.$delay;
8741
8879
  return $delay;
8742
8880
  }, reducedMotion);
8743
- var SectionHeader = styled.header(_templateObject18$2 || (_templateObject18$2 = _taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n gap: 0.6rem;\n padding: 0.65rem 0.8rem;\n background: linear-gradient(\n 135deg,\n ", " 0%,\n ", " 55%,\n transparent 100%\n );\n border-bottom: 1px solid ", ";\n position: relative;\n overflow: hidden;\n\n &::after {\n content: '';\n position: absolute;\n inset: 0;\n background: linear-gradient(\n 105deg,\n transparent 38%,\n rgba(255, 255, 255, 0.45) 50%,\n transparent 62%\n );\n background-size: 200% 100%;\n animation: ", " 6s ease-in-out infinite;\n pointer-events: none;\n }\n\n ", "\n"])), function (_ref16) {
8744
- var $accentColor = _ref16.$accentColor;
8745
- return $accentColor + "16";
8746
- }, function (_ref17) {
8881
+ var SectionHeader = styled.header(_templateObject18$2 || (_templateObject18$2 = _taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n gap: 0.6rem;\n padding: 0.65rem 0.8rem;\n background: linear-gradient(\n 135deg,\n ", " 0%,\n ", " 55%,\n transparent 100%\n );\n border-bottom: 1px solid ", ";\n position: relative;\n overflow: hidden;\n\n &::after {\n content: '';\n position: absolute;\n inset: 0;\n background: linear-gradient(\n 105deg,\n transparent 38%,\n rgba(255, 255, 255, 0.45) 50%,\n transparent 62%\n );\n background-size: 200% 100%;\n animation: ", " 6s ease-in-out infinite;\n pointer-events: none;\n }\n\n ", "\n"])), function (_ref17) {
8747
8882
  var $accentColor = _ref17.$accentColor;
8748
- return $accentColor + "05";
8883
+ return $accentColor + "16";
8749
8884
  }, function (_ref18) {
8750
8885
  var $accentColor = _ref18.$accentColor;
8886
+ return $accentColor + "05";
8887
+ }, function (_ref19) {
8888
+ var $accentColor = _ref19.$accentColor;
8751
8889
  return $accentColor + "12";
8752
8890
  }, shimmer, reducedMotion);
8753
- var HeaderIconWrap = styled.div(_templateObject19$2 || (_templateObject19$2 = _taggedTemplateLiteralLoose(["\n --icon-shadow: ", ";\n display: flex;\n align-items: center;\n justify-content: center;\n width: 2rem;\n height: 2rem;\n border-radius: 0.55rem;\n flex-shrink: 0;\n color: #fff;\n background: linear-gradient(\n 145deg,\n ", " 0%,\n ", " 100%\n );\n box-shadow: 0 4px 12px var(--icon-shadow);\n z-index: 1;\n\n svg {\n font-size: 1.05rem;\n }\n"])), function (_ref19) {
8754
- var $accentColor = _ref19.$accentColor;
8755
- return $accentColor + "40";
8756
- }, function (_ref20) {
8891
+ var HeaderIconWrap = styled.div(_templateObject19$2 || (_templateObject19$2 = _taggedTemplateLiteralLoose(["\n --icon-shadow: ", ";\n display: flex;\n align-items: center;\n justify-content: center;\n width: 2rem;\n height: 2rem;\n border-radius: 0.55rem;\n flex-shrink: 0;\n color: #fff;\n background: linear-gradient(\n 145deg,\n ", " 0%,\n ", " 100%\n );\n box-shadow: 0 4px 12px var(--icon-shadow);\n z-index: 1;\n\n svg {\n font-size: 1.05rem;\n }\n"])), function (_ref20) {
8757
8892
  var $accentColor = _ref20.$accentColor;
8758
- return $accentColor;
8893
+ return $accentColor + "40";
8759
8894
  }, function (_ref21) {
8760
8895
  var $accentColor = _ref21.$accentColor;
8896
+ return $accentColor;
8897
+ }, function (_ref22) {
8898
+ var $accentColor = _ref22.$accentColor;
8761
8899
  return $accentColor + "cc";
8762
8900
  });
8763
8901
  var HeaderCopy = styled.div(_templateObject20$1 || (_templateObject20$1 = _taggedTemplateLiteralLoose(["\n flex: 1;\n min-width: 0;\n z-index: 1;\n"])));
8764
- var Eyebrow = styled.span(_templateObject21$1 || (_templateObject21$1 = _taggedTemplateLiteralLoose(["\n display: inline-flex;\n align-items: center;\n gap: 0.25rem;\n font-size: 0.6rem;\n font-weight: 700;\n text-transform: uppercase;\n letter-spacing: 0.08em;\n color: ", ";\n\n svg {\n font-size: 0.65rem;\n }\n"])), function (_ref22) {
8765
- var $accentColor = _ref22.$accentColor;
8902
+ var Eyebrow = styled.span(_templateObject21$1 || (_templateObject21$1 = _taggedTemplateLiteralLoose(["\n display: inline-flex;\n align-items: center;\n gap: 0.25rem;\n font-size: 0.6rem;\n font-weight: 700;\n text-transform: uppercase;\n letter-spacing: 0.08em;\n color: ", ";\n\n svg {\n font-size: 0.65rem;\n }\n"])), function (_ref23) {
8903
+ var $accentColor = _ref23.$accentColor;
8766
8904
  return $accentColor;
8767
8905
  });
8768
8906
  var SectionHeading = styled.h3(_templateObject22$1 || (_templateObject22$1 = _taggedTemplateLiteralLoose(["\n margin: 0.1rem 0 0;\n font-size: 0.95rem;\n font-weight: 800;\n letter-spacing: -0.02em;\n color: #12180d;\n line-height: 1.2;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n"])));
8769
- var OfferCountBadge = styled.div(_templateObject23$1 || (_templateObject23$1 = _taggedTemplateLiteralLoose(["\n flex-shrink: 0;\n display: inline-flex;\n align-items: center;\n gap: 0.28rem;\n padding: 0.28rem 0.55rem;\n border-radius: 999px;\n background: rgba(18, 24, 13, 0.92);\n color: #f8fff0;\n font-size: 0.65rem;\n font-weight: 600;\n z-index: 1;\n\n strong {\n font-size: 0.82rem;\n font-weight: 800;\n line-height: 1;\n }\n\n svg {\n font-size: 0.72rem;\n color: ", ";\n }\n"])), function (_ref23) {
8770
- var $accentColor = _ref23.$accentColor;
8907
+ var OfferCountBadge = styled.div(_templateObject23$1 || (_templateObject23$1 = _taggedTemplateLiteralLoose(["\n flex-shrink: 0;\n display: inline-flex;\n align-items: center;\n gap: 0.28rem;\n padding: 0.28rem 0.55rem;\n border-radius: 999px;\n background: rgba(18, 24, 13, 0.92);\n color: #f8fff0;\n font-size: 0.65rem;\n font-weight: 600;\n z-index: 1;\n\n strong {\n font-size: 0.82rem;\n font-weight: 800;\n line-height: 1;\n }\n\n svg {\n font-size: 0.72rem;\n color: ", ";\n }\n"])), function (_ref24) {
8908
+ var $accentColor = _ref24.$accentColor;
8771
8909
  return $accentColor;
8772
8910
  });
8773
8911
  var OfferStack = styled.div(_templateObject24$1 || (_templateObject24$1 = _taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n padding: 0.55rem;\n"])));
8774
- var OfferCard = styled.article(_templateObject25$1 || (_templateObject25$1 = _taggedTemplateLiteralLoose(["\n border-radius: 0.7rem;\n border: 1px solid ", ";\n background: #fff;\n box-shadow: 0 1px 4px rgba(16, 20, 12, 0.04);\n opacity: 0;\n animation: ", " 0.38s cubic-bezier(0.22, 1, 0.36, 1) forwards;\n animation-delay: ", "s;\n transition: box-shadow 0.2s ease, border-color 0.2s ease;\n overflow: hidden;\n\n &:hover {\n border-color: ", ";\n box-shadow: 0 4px 14px ", ";\n }\n\n &:focus-within {\n outline: 2px solid ", ";\n outline-offset: 1px;\n }\n\n ", "\n"])), function (_ref24) {
8775
- var $accentColor = _ref24.$accentColor;
8912
+ var OfferCard = styled.article(_templateObject25$1 || (_templateObject25$1 = _taggedTemplateLiteralLoose(["\n border-radius: 0.7rem;\n border: 1px solid ", ";\n background: #fff;\n box-shadow: 0 1px 4px rgba(16, 20, 12, 0.04);\n opacity: 0;\n animation: ", " 0.38s cubic-bezier(0.22, 1, 0.36, 1) forwards;\n animation-delay: ", "s;\n transition: box-shadow 0.2s ease, border-color 0.2s ease;\n overflow: hidden;\n\n &:hover {\n border-color: ", ";\n box-shadow: 0 4px 14px ", ";\n }\n\n &:focus-within {\n outline: 2px solid ", ";\n outline-offset: 1px;\n }\n\n ", "\n"])), function (_ref25) {
8913
+ var $accentColor = _ref25.$accentColor;
8776
8914
  return $accentColor + "20";
8777
- }, fadeSlideUp, function (_ref25) {
8778
- var $index = _ref25.$index;
8915
+ }, fadeSlideUp, function (_ref26) {
8916
+ var $index = _ref26.$index;
8779
8917
  return 0.06 + $index * 0.04;
8780
- }, function (_ref26) {
8781
- var $accentColor = _ref26.$accentColor;
8782
- return $accentColor + "45";
8783
8918
  }, function (_ref27) {
8784
8919
  var $accentColor = _ref27.$accentColor;
8785
- return $accentColor + "12";
8920
+ return $accentColor + "45";
8786
8921
  }, function (_ref28) {
8787
8922
  var $accentColor = _ref28.$accentColor;
8923
+ return $accentColor + "12";
8924
+ }, function (_ref29) {
8925
+ var $accentColor = _ref29.$accentColor;
8788
8926
  return $accentColor + "50";
8789
8927
  }, reducedMotion);
8790
8928
  var CardBody = styled.div(_templateObject26$1 || (_templateObject26$1 = _taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n gap: 0.35rem;\n padding: 0.6rem 0.65rem;\n"])));
8791
8929
  var CardHeader = styled.div(_templateObject27$1 || (_templateObject27$1 = _taggedTemplateLiteralLoose(["\n display: flex;\n align-items: flex-start;\n gap: 0.55rem;\n"])));
8792
8930
  var CardHeaderCopy = styled.div(_templateObject28$1 || (_templateObject28$1 = _taggedTemplateLiteralLoose(["\n flex: 1;\n min-width: 0;\n display: flex;\n flex-direction: column;\n gap: 0.15rem;\n"])));
8793
- var SavingsBadge = styled.div(_templateObject29$1 || (_templateObject29$1 = _taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n min-width: 3.1rem;\n padding: 0.3rem 0.35rem;\n border-radius: 0.5rem;\n flex-shrink: 0;\n text-align: center;\n color: #fff;\n line-height: 1;\n background: ", ";\n box-shadow: 0 3px 10px ", ";\n"])), function (_ref29) {
8794
- var $accentColor = _ref29.$accentColor,
8795
- $variant = _ref29.$variant;
8931
+ var SavingsBadge = styled.div(_templateObject29$1 || (_templateObject29$1 = _taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n min-width: 3.1rem;\n padding: 0.3rem 0.35rem;\n border-radius: 0.5rem;\n flex-shrink: 0;\n text-align: center;\n color: #fff;\n line-height: 1;\n background: ", ";\n box-shadow: 0 3px 10px ", ";\n"])), function (_ref30) {
8932
+ var $accentColor = _ref30.$accentColor,
8933
+ $variant = _ref30.$variant;
8796
8934
  if ($variant === 'gift') {
8797
8935
  return "linear-gradient(145deg, #e8a317 0%, #c47d0a 100%)";
8798
8936
  }
@@ -8800,152 +8938,152 @@ var SavingsBadge = styled.div(_templateObject29$1 || (_templateObject29$1 = _tag
8800
8938
  return "linear-gradient(145deg, " + $accentColor + " 0%, #2d5f0a 100%)";
8801
8939
  }
8802
8940
  return "linear-gradient(145deg, " + $accentColor + " 0%, " + $accentColor + "cc 100%)";
8803
- }, function (_ref30) {
8804
- var $accentColor = _ref30.$accentColor;
8941
+ }, function (_ref31) {
8942
+ var $accentColor = _ref31.$accentColor;
8805
8943
  return $accentColor + "28";
8806
8944
  });
8807
8945
  var BadgeTop = styled.span(_templateObject30$1 || (_templateObject30$1 = _taggedTemplateLiteralLoose(["\n font-size: 0.82rem;\n font-weight: 900;\n letter-spacing: -0.02em;\n"])));
8808
8946
  var BadgeBottom = styled.span(_templateObject31$1 || (_templateObject31$1 = _taggedTemplateLiteralLoose(["\n margin-top: 0.1rem;\n font-size: 0.52rem;\n font-weight: 800;\n letter-spacing: 0.08em;\n opacity: 0.92;\n"])));
8809
8947
  var CardMetaRow = styled.div(_templateObject32$1 || (_templateObject32$1 = _taggedTemplateLiteralLoose(["\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: 0.28rem;\n"])));
8810
- var TypePill = styled.span(_templateObject33$1 || (_templateObject33$1 = _taggedTemplateLiteralLoose(["\n display: inline-flex;\n align-items: center;\n gap: 0.22rem;\n padding: 0.12rem 0.4rem;\n border-radius: 999px;\n font-size: 0.6rem;\n font-weight: 700;\n text-transform: uppercase;\n letter-spacing: 0.05em;\n color: ", ";\n background: ", ";\n border: 1px solid ", ";\n\n svg {\n font-size: 0.65rem;\n }\n"])), function (_ref31) {
8811
- var $accentColor = _ref31.$accentColor;
8812
- return $accentColor;
8813
- }, function (_ref32) {
8948
+ var TypePill = styled.span(_templateObject33$1 || (_templateObject33$1 = _taggedTemplateLiteralLoose(["\n display: inline-flex;\n align-items: center;\n gap: 0.22rem;\n padding: 0.12rem 0.4rem;\n border-radius: 999px;\n font-size: 0.6rem;\n font-weight: 700;\n text-transform: uppercase;\n letter-spacing: 0.05em;\n color: ", ";\n background: ", ";\n border: 1px solid ", ";\n\n svg {\n font-size: 0.65rem;\n }\n"])), function (_ref32) {
8814
8949
  var $accentColor = _ref32.$accentColor;
8815
- return $accentColor + "10";
8950
+ return $accentColor;
8816
8951
  }, function (_ref33) {
8817
8952
  var $accentColor = _ref33.$accentColor;
8953
+ return $accentColor + "10";
8954
+ }, function (_ref34) {
8955
+ var $accentColor = _ref34.$accentColor;
8818
8956
  return $accentColor + "22";
8819
8957
  });
8820
- var QualifiedPill = styled.span(_templateObject34$1 || (_templateObject34$1 = _taggedTemplateLiteralLoose(["\n display: inline-flex;\n align-items: center;\n gap: 0.2rem;\n padding: 0.12rem 0.4rem;\n border-radius: 999px;\n font-size: 0.6rem;\n font-weight: 700;\n color: ", ";\n background: ", ";\n border: 1px solid ", ";\n\n svg {\n font-size: 0.62rem;\n }\n"])), function (_ref34) {
8821
- var $accentColor = _ref34.$accentColor;
8822
- return $accentColor;
8823
- }, function (_ref35) {
8958
+ var QualifiedPill = styled.span(_templateObject34$1 || (_templateObject34$1 = _taggedTemplateLiteralLoose(["\n display: inline-flex;\n align-items: center;\n gap: 0.2rem;\n padding: 0.12rem 0.4rem;\n border-radius: 999px;\n font-size: 0.6rem;\n font-weight: 700;\n color: ", ";\n background: ", ";\n border: 1px solid ", ";\n\n svg {\n font-size: 0.62rem;\n }\n"])), function (_ref35) {
8824
8959
  var $accentColor = _ref35.$accentColor;
8825
- return $accentColor + "12";
8960
+ return $accentColor;
8826
8961
  }, function (_ref36) {
8827
8962
  var $accentColor = _ref36.$accentColor;
8963
+ return $accentColor + "12";
8964
+ }, function (_ref37) {
8965
+ var $accentColor = _ref37.$accentColor;
8828
8966
  return $accentColor + "30";
8829
8967
  });
8830
8968
  var TitleRow = styled.div(_templateObject35 || (_templateObject35 = _taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 0.45rem;\n min-width: 0;\n flex-wrap: wrap;\n"])));
8831
8969
  var OfferTitle = styled.h4(_templateObject36 || (_templateObject36 = _taggedTemplateLiteralLoose(["\n margin: 0;\n flex: 1;\n min-width: 0;\n font-size: 0.88rem;\n font-weight: 800;\n letter-spacing: -0.015em;\n color: #141a10;\n line-height: 1.25;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n"])));
8832
8970
  var OfferDescription = styled.p(_templateObject37 || (_templateObject37 = _taggedTemplateLiteralLoose(["\n margin: 0;\n font-size: 0.74rem;\n font-weight: 500;\n color: #4a5540;\n line-height: 1.35;\n"])));
8833
- var BuyXTimeline = styled.div(_templateObject38 || (_templateObject38 = _taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n gap: 0.35rem;\n padding: 0.4rem 0.55rem;\n border-radius: 0.5rem;\n background: ", ";\n border: 1px solid ", ";\n"])), function (_ref37) {
8834
- var $accentColor = _ref37.$accentColor;
8835
- return $accentColor + "07";
8836
- }, function (_ref38) {
8971
+ var BuyXTimeline = styled.div(_templateObject38 || (_templateObject38 = _taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n gap: 0.35rem;\n padding: 0.4rem 0.55rem;\n border-radius: 0.5rem;\n background: ", ";\n border: 1px solid ", ";\n"])), function (_ref38) {
8837
8972
  var $accentColor = _ref38.$accentColor;
8973
+ return $accentColor + "07";
8974
+ }, function (_ref39) {
8975
+ var $accentColor = _ref39.$accentColor;
8838
8976
  return $accentColor + "14";
8839
8977
  });
8840
8978
  var TimelineStep = styled.div(_templateObject39 || (_templateObject39 = _taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n gap: 0.25rem;\n min-width: 0;\n"])));
8841
- var TimelineIcon = styled.div(_templateObject40 || (_templateObject40 = _taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n justify-content: center;\n width: 1.45rem;\n height: 1.45rem;\n border-radius: 0.35rem;\n color: ", ";\n background: ", ";\n\n svg {\n font-size: 0.72rem;\n }\n"])), function (_ref39) {
8842
- var $accentColor = _ref39.$accentColor,
8843
- $highlight = _ref39.$highlight;
8844
- return $highlight ? '#fff' : $accentColor;
8845
- }, function (_ref40) {
8979
+ var TimelineIcon = styled.div(_templateObject40 || (_templateObject40 = _taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n justify-content: center;\n width: 1.45rem;\n height: 1.45rem;\n border-radius: 0.35rem;\n color: ", ";\n background: ", ";\n\n svg {\n font-size: 0.72rem;\n }\n"])), function (_ref40) {
8846
8980
  var $accentColor = _ref40.$accentColor,
8847
8981
  $highlight = _ref40.$highlight;
8982
+ return $highlight ? '#fff' : $accentColor;
8983
+ }, function (_ref41) {
8984
+ var $accentColor = _ref41.$accentColor,
8985
+ $highlight = _ref41.$highlight;
8848
8986
  return $highlight ? $accentColor : $accentColor + "14";
8849
8987
  });
8850
8988
  var TimelineLabel = styled.span(_templateObject41 || (_templateObject41 = _taggedTemplateLiteralLoose(["\n font-size: 0.65rem;\n font-weight: 700;\n color: #3a4334;\n white-space: nowrap;\n"])));
8851
8989
  var TimelineTrack = styled.div(_templateObject42 || (_templateObject42 = _taggedTemplateLiteralLoose(["\n flex: 1;\n display: flex;\n align-items: center;\n min-width: 2rem;\n padding: 0 0.15rem;\n"])));
8852
- var TimelineArrow = styled.div(_templateObject43 || (_templateObject43 = _taggedTemplateLiteralLoose(["\n width: 100%;\n height: 2px;\n border-radius: 999px;\n background: linear-gradient(\n 90deg,\n ", ",\n ", "\n );\n position: relative;\n\n &::after {\n content: '';\n position: absolute;\n right: -1px;\n top: 50%;\n transform: translateY(-50%);\n border: 5px solid transparent;\n border-left-color: ", ";\n }\n"])), function (_ref41) {
8853
- var $accentColor = _ref41.$accentColor;
8854
- return $accentColor + "44";
8855
- }, function (_ref42) {
8990
+ var TimelineArrow = styled.div(_templateObject43 || (_templateObject43 = _taggedTemplateLiteralLoose(["\n width: 100%;\n height: 2px;\n border-radius: 999px;\n background: linear-gradient(\n 90deg,\n ", ",\n ", "\n );\n position: relative;\n\n &::after {\n content: '';\n position: absolute;\n right: -1px;\n top: 50%;\n transform: translateY(-50%);\n border: 5px solid transparent;\n border-left-color: ", ";\n }\n"])), function (_ref42) {
8856
8991
  var $accentColor = _ref42.$accentColor;
8857
- return $accentColor;
8992
+ return $accentColor + "44";
8858
8993
  }, function (_ref43) {
8859
8994
  var $accentColor = _ref43.$accentColor;
8860
8995
  return $accentColor;
8996
+ }, function (_ref44) {
8997
+ var $accentColor = _ref44.$accentColor;
8998
+ return $accentColor;
8861
8999
  });
8862
9000
  var ProgressBlock = styled.div(_templateObject44 || (_templateObject44 = _taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n gap: 0.25rem;\n"])));
8863
9001
  var ProgressTrack = styled.div(_templateObject45 || (_templateObject45 = _taggedTemplateLiteralLoose(["\n width: 100%;\n height: 0.35rem;\n border-radius: 999px;\n background: #e8ede3;\n overflow: hidden;\n"])));
8864
- var ProgressFill = styled.div(_templateObject46 || (_templateObject46 = _taggedTemplateLiteralLoose(["\n height: 100%;\n width: ", "%;\n border-radius: 999px;\n background: linear-gradient(\n 90deg,\n ", " 0%,\n ", " 100%\n );\n animation: ", " 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;\n transition: width 0.4s ease;\n\n ", "\n"])), function (_ref44) {
8865
- var $percent = _ref44.$percent;
9002
+ var ProgressFill = styled.div(_templateObject46 || (_templateObject46 = _taggedTemplateLiteralLoose(["\n height: 100%;\n width: ", "%;\n border-radius: 999px;\n background: linear-gradient(\n 90deg,\n ", " 0%,\n ", " 100%\n );\n animation: ", " 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;\n transition: width 0.4s ease;\n\n ", "\n"])), function (_ref45) {
9003
+ var $percent = _ref45.$percent;
8866
9004
  return $percent;
8867
- }, function (_ref45) {
8868
- var $accentColor = _ref45.$accentColor;
8869
- return $accentColor + "cc";
8870
9005
  }, function (_ref46) {
8871
9006
  var $accentColor = _ref46.$accentColor;
9007
+ return $accentColor + "cc";
9008
+ }, function (_ref47) {
9009
+ var $accentColor = _ref47.$accentColor;
8872
9010
  return $accentColor;
8873
9011
  }, progressGrow, reducedMotion);
8874
9012
  var ProgressMeta = styled.div(_templateObject47 || (_templateObject47 = _taggedTemplateLiteralLoose(["\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n justify-content: space-between;\n gap: 0.2rem 0.5rem;\n"])));
8875
9013
  var ProgressCount = styled.div(_templateObject48 || (_templateObject48 = _taggedTemplateLiteralLoose(["\n font-size: 0.7rem;\n font-weight: 600;\n color: #2f3829;\n\n strong {\n font-size: 0.78rem;\n font-weight: 800;\n }\n\n span {\n color: #6a7364;\n }\n"])));
8876
9014
  var ProgressHint = styled.span(_templateObject49 || (_templateObject49 = _taggedTemplateLiteralLoose(["\n font-size: 0.68rem;\n font-weight: 600;\n color: #7a5e12;\n line-height: 1.3;\n"])));
8877
- var SuccessBanner = styled.div(_templateObject50 || (_templateObject50 = _taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n gap: 0.3rem;\n padding: 0.32rem 0.5rem;\n border-radius: 0.45rem;\n font-size: 0.7rem;\n font-weight: 600;\n color: ", ";\n background: ", ";\n border: 1px solid ", ";\n\n svg {\n flex-shrink: 0;\n font-size: 0.75rem;\n }\n"])), function (_ref47) {
8878
- var $accentColor = _ref47.$accentColor;
8879
- return $accentColor;
8880
- }, function (_ref48) {
9015
+ var SuccessBanner = styled.div(_templateObject50 || (_templateObject50 = _taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n gap: 0.3rem;\n padding: 0.32rem 0.5rem;\n border-radius: 0.45rem;\n font-size: 0.7rem;\n font-weight: 600;\n color: ", ";\n background: ", ";\n border: 1px solid ", ";\n\n svg {\n flex-shrink: 0;\n font-size: 0.75rem;\n }\n"])), function (_ref48) {
8881
9016
  var $accentColor = _ref48.$accentColor;
8882
- return $accentColor + "10";
9017
+ return $accentColor;
8883
9018
  }, function (_ref49) {
8884
9019
  var $accentColor = _ref49.$accentColor;
9020
+ return $accentColor + "10";
9021
+ }, function (_ref50) {
9022
+ var $accentColor = _ref50.$accentColor;
8885
9023
  return $accentColor + "25";
8886
9024
  });
8887
9025
  var StatusList = styled.div(_templateObject51 || (_templateObject51 = _taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n gap: 0.25rem;\n"])));
8888
- var StatusItem = styled.div(_templateObject52 || (_templateObject52 = _taggedTemplateLiteralLoose(["\n display: flex;\n align-items: flex-start;\n gap: 0.3rem;\n padding: 0.28rem 0.45rem;\n border-radius: 0.45rem;\n font-size: 0.7rem;\n font-weight: 600;\n line-height: 1.35;\n opacity: 0;\n animation: ", " 0.28s ease forwards;\n animation-delay: ", "s;\n\n background-color: ", ";\n\n color: ", ";\n\n border: 1px solid\n ", ";\n\n svg {\n flex-shrink: 0;\n margin-top: 0.1rem;\n font-size: 0.82rem;\n }\n\n ", "\n"])), chipIn, function (_ref50) {
8889
- var $chipIndex = _ref50.$chipIndex;
9026
+ var StatusItem = styled.div(_templateObject52 || (_templateObject52 = _taggedTemplateLiteralLoose(["\n display: flex;\n align-items: flex-start;\n gap: 0.3rem;\n padding: 0.28rem 0.45rem;\n border-radius: 0.45rem;\n font-size: 0.7rem;\n font-weight: 600;\n line-height: 1.35;\n opacity: 0;\n animation: ", " 0.28s ease forwards;\n animation-delay: ", "s;\n\n background-color: ", ";\n\n color: ", ";\n\n border: 1px solid\n ", ";\n\n svg {\n flex-shrink: 0;\n margin-top: 0.1rem;\n font-size: 0.82rem;\n }\n\n ", "\n"])), chipIn, function (_ref51) {
9027
+ var $chipIndex = _ref51.$chipIndex;
8890
9028
  return 0.1 + $chipIndex * 0.05;
8891
- }, function (_ref51) {
8892
- var $accentColor = _ref51.$accentColor,
8893
- $tone = _ref51.$tone;
8894
- if ($tone === 'warning') return '#fff8eb';
8895
- if ($tone === 'success') return $accentColor + "10";
8896
- return '#f4f6f1';
8897
9029
  }, function (_ref52) {
8898
9030
  var $accentColor = _ref52.$accentColor,
8899
9031
  $tone = _ref52.$tone;
8900
- if ($tone === 'warning') return '#8a6400';
8901
- if ($tone === 'success') return $accentColor;
8902
- return '#45503c';
9032
+ if ($tone === 'warning') return '#fff8eb';
9033
+ if ($tone === 'success') return $accentColor + "10";
9034
+ return '#f4f6f1';
8903
9035
  }, function (_ref53) {
8904
9036
  var $accentColor = _ref53.$accentColor,
8905
9037
  $tone = _ref53.$tone;
9038
+ if ($tone === 'warning') return '#8a6400';
9039
+ if ($tone === 'success') return $accentColor;
9040
+ return '#45503c';
9041
+ }, function (_ref54) {
9042
+ var $accentColor = _ref54.$accentColor,
9043
+ $tone = _ref54.$tone;
8906
9044
  if ($tone === 'warning') return '#f0d48a';
8907
9045
  if ($tone === 'success') return $accentColor + "28";
8908
9046
  return '#e0e5da';
8909
9047
  }, reducedMotion);
8910
9048
  var GiftSection = styled.div(_templateObject53 || (_templateObject53 = _taggedTemplateLiteralLoose(["\n padding-top: 0.35rem;\n border-top: 1px solid #eef1e9;\n"])));
8911
- var GiftSectionHeader = styled.div(_templateObject54 || (_templateObject54 = _taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n gap: 0.28rem;\n margin-bottom: 0.3rem;\n font-size: 0.62rem;\n font-weight: 800;\n text-transform: uppercase;\n letter-spacing: 0.06em;\n color: ", ";\n\n svg {\n font-size: 0.72rem;\n }\n"])), function (_ref54) {
8912
- var $accentColor = _ref54.$accentColor;
9049
+ var GiftSectionHeader = styled.div(_templateObject54 || (_templateObject54 = _taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n gap: 0.28rem;\n margin-bottom: 0.3rem;\n font-size: 0.62rem;\n font-weight: 800;\n text-transform: uppercase;\n letter-spacing: 0.06em;\n color: ", ";\n\n svg {\n font-size: 0.72rem;\n }\n"])), function (_ref55) {
9050
+ var $accentColor = _ref55.$accentColor;
8913
9051
  return $accentColor;
8914
9052
  });
8915
9053
  var GiftList = styled.div(_templateObject55 || (_templateObject55 = _taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n gap: 0.22rem;\n"])));
8916
- var GiftLink = styled.a(_templateObject56 || (_templateObject56 = _taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 0.35rem;\n padding: 0.32rem 0.45rem;\n border-radius: 0.4rem;\n border: 1px solid ", ";\n background: #fafcf8;\n color: #2a3325;\n font-size: 0.72rem;\n font-weight: 600;\n line-height: 1.3;\n text-decoration: none;\n cursor: pointer;\n transition: background-color 0.18s ease, border-color 0.18s ease;\n\n span {\n flex: 1;\n min-width: 0;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n\n svg {\n flex-shrink: 0;\n font-size: 0.72rem;\n color: ", ";\n transition: transform 0.18s ease;\n }\n\n &:hover {\n border-color: ", ";\n background: ", ";\n\n svg {\n transform: translateX(2px);\n }\n }\n\n &:focus-visible {\n outline: 2px solid ", ";\n outline-offset: 1px;\n }\n\n ", "\n"])), function (_ref55) {
8917
- var $accentColor = _ref55.$accentColor;
8918
- return $accentColor + "1e";
8919
- }, function (_ref56) {
9054
+ var GiftLink = styled.a(_templateObject56 || (_templateObject56 = _taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 0.35rem;\n padding: 0.32rem 0.45rem;\n border-radius: 0.4rem;\n border: 1px solid ", ";\n background: #fafcf8;\n color: #2a3325;\n font-size: 0.72rem;\n font-weight: 600;\n line-height: 1.3;\n text-decoration: none;\n cursor: pointer;\n transition: background-color 0.18s ease, border-color 0.18s ease;\n\n span {\n flex: 1;\n min-width: 0;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n\n svg {\n flex-shrink: 0;\n font-size: 0.72rem;\n color: ", ";\n transition: transform 0.18s ease;\n }\n\n &:hover {\n border-color: ", ";\n background: ", ";\n\n svg {\n transform: translateX(2px);\n }\n }\n\n &:focus-visible {\n outline: 2px solid ", ";\n outline-offset: 1px;\n }\n\n ", "\n"])), function (_ref56) {
8920
9055
  var $accentColor = _ref56.$accentColor;
8921
- return $accentColor;
9056
+ return $accentColor + "1e";
8922
9057
  }, function (_ref57) {
8923
9058
  var $accentColor = _ref57.$accentColor;
8924
9059
  return $accentColor;
8925
9060
  }, function (_ref58) {
8926
9061
  var $accentColor = _ref58.$accentColor;
8927
- return $accentColor + "08";
9062
+ return $accentColor;
8928
9063
  }, function (_ref59) {
8929
9064
  var $accentColor = _ref59.$accentColor;
9065
+ return $accentColor + "08";
9066
+ }, function (_ref60) {
9067
+ var $accentColor = _ref60.$accentColor;
8930
9068
  return $accentColor;
8931
9069
  }, reducedMotion);
8932
9070
  var CodeRow = styled.div(_templateObject57 || (_templateObject57 = _taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n gap: 0.3rem;\n flex-shrink: 0;\n"])));
8933
- var CodeValue = styled.code(_templateObject58 || (_templateObject58 = _taggedTemplateLiteralLoose(["\n min-width: 0;\n max-width: 8.5rem;\n padding: 0.28rem 0.45rem;\n border-radius: 0.4rem;\n border: 1.5px dashed ", ";\n background: #fff;\n font-family: 'SF Mono', 'JetBrains Mono', Menlo, Consolas, monospace;\n font-size: 0.68rem;\n font-weight: 800;\n letter-spacing: 0.04em;\n color: #141a10;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n"])), function (_ref60) {
8934
- var $accentColor = _ref60.$accentColor;
9071
+ var CodeValue = styled.code(_templateObject58 || (_templateObject58 = _taggedTemplateLiteralLoose(["\n min-width: 0;\n max-width: 8.5rem;\n padding: 0.28rem 0.45rem;\n border-radius: 0.4rem;\n border: 1.5px dashed ", ";\n background: #fff;\n font-family: 'SF Mono', 'JetBrains Mono', Menlo, Consolas, monospace;\n font-size: 0.68rem;\n font-weight: 800;\n letter-spacing: 0.04em;\n color: #141a10;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n"])), function (_ref61) {
9072
+ var $accentColor = _ref61.$accentColor;
8935
9073
  return $accentColor;
8936
9074
  });
8937
- var PrimaryCopyButton = styled.button(_templateObject59 || (_templateObject59 = _taggedTemplateLiteralLoose(["\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: 0.22rem;\n flex-shrink: 0;\n height: 1.7rem;\n padding: 0 0.55rem;\n border: none;\n border-radius: 0.4rem;\n font-size: 0.68rem;\n font-weight: 800;\n color: #fff;\n cursor: pointer;\n background: ", ";\n box-shadow: 0 2px 8px ", ";\n transition: transform 0.15s ease, background 0.2s ease;\n animation: ", " 0.35s ease;\n\n svg {\n font-size: 0.72rem;\n }\n\n &:hover {\n transform: translateY(-1px);\n }\n\n &:active {\n transform: scale(0.98);\n }\n\n &:focus-visible {\n outline: 2px solid ", ";\n outline-offset: 2px;\n }\n\n ", "\n"])), function (_ref61) {
8938
- var $accentColor = _ref61.$accentColor,
8939
- $copied = _ref61.$copied;
9075
+ var PrimaryCopyButton = styled.button(_templateObject59 || (_templateObject59 = _taggedTemplateLiteralLoose(["\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: 0.22rem;\n flex-shrink: 0;\n height: 1.7rem;\n padding: 0 0.55rem;\n border: none;\n border-radius: 0.4rem;\n font-size: 0.68rem;\n font-weight: 800;\n color: #fff;\n cursor: pointer;\n background: ", ";\n box-shadow: 0 2px 8px ", ";\n transition: transform 0.15s ease, background 0.2s ease;\n animation: ", " 0.35s ease;\n\n svg {\n font-size: 0.72rem;\n }\n\n &:hover {\n transform: translateY(-1px);\n }\n\n &:active {\n transform: scale(0.98);\n }\n\n &:focus-visible {\n outline: 2px solid ", ";\n outline-offset: 2px;\n }\n\n ", "\n"])), function (_ref62) {
9076
+ var $accentColor = _ref62.$accentColor,
9077
+ $copied = _ref62.$copied;
8940
9078
  return $copied ? "linear-gradient(145deg, " + $accentColor + " 0%, " + $accentColor + "dd 100%)" : 'linear-gradient(145deg, #1a2114 0%, #0f140c 100%)';
8941
- }, function (_ref62) {
8942
- var $accentColor = _ref62.$accentColor;
8943
- return $accentColor + "28";
8944
9079
  }, function (_ref63) {
8945
- var $copied = _ref63.$copied;
8946
- return $copied ? copyPop : 'none';
9080
+ var $accentColor = _ref63.$accentColor;
9081
+ return $accentColor + "28";
8947
9082
  }, function (_ref64) {
8948
- var $accentColor = _ref64.$accentColor;
9083
+ var $copied = _ref64.$copied;
9084
+ return $copied ? copyPop : 'none';
9085
+ }, function (_ref65) {
9086
+ var $accentColor = _ref65.$accentColor;
8949
9087
  return $accentColor;
8950
9088
  }, reducedMotion);
8951
9089
 
@@ -9193,7 +9331,7 @@ var CardRow = function CardRow(_ref3) {
9193
9331
  discountName: row === null || row === void 0 ? void 0 : row.couponCode
9194
9332
  }), showDiscountSuggestions && showDiscountButton && firstSuggestion && /*#__PURE__*/React__default.createElement(DiscountSuggestionPreview, {
9195
9333
  coupon: firstSuggestion,
9196
- productPrice: (row === null || row === void 0 ? void 0 : row.standardPrice) || 0,
9334
+ productPrice: (row === null || row === void 0 ? void 0 : row.tierPrice) || (row === null || row === void 0 ? void 0 : row.standardPrice) || 0,
9197
9335
  cartQuantity: (row === null || row === void 0 ? void 0 : row.quantity) || 0,
9198
9336
  primaryColor: accentColor,
9199
9337
  loading: loading,
@@ -9297,7 +9435,7 @@ var CardRow = function CardRow(_ref3) {
9297
9435
  productDiscounts: productDiscounts,
9298
9436
  primaryColor: accentColor,
9299
9437
  cartQuantity: (row === null || row === void 0 ? void 0 : row.quantity) || 0,
9300
- productPrice: (row === null || row === void 0 ? void 0 : row.standardPrice) || 0
9438
+ productPrice: (row === null || row === void 0 ? void 0 : row.tierPrice) || (row === null || row === void 0 ? void 0 : row.standardPrice) || 0
9301
9439
  })));
9302
9440
  };
9303
9441
 
@@ -9751,7 +9889,7 @@ var CartPageProductCard = function CartPageProductCard(_ref3) {
9751
9889
  discountAmount: item === null || item === void 0 ? void 0 : item.discountAmount
9752
9890
  }))), showDiscountSuggestions && showDiscountButton && firstSuggestion && /*#__PURE__*/React__default.createElement(DiscountSuggestionPreview, {
9753
9891
  coupon: firstSuggestion,
9754
- productPrice: (item === null || item === void 0 ? void 0 : item.standardPrice) || 0,
9892
+ productPrice: (item === null || item === void 0 ? void 0 : item.tierPrice) || (item === null || item === void 0 ? void 0 : item.standardPrice) || 0,
9755
9893
  cartQuantity: (item === null || item === void 0 ? void 0 : item.quantity) || 0,
9756
9894
  primaryColor: accentColor,
9757
9895
  loading: loading,
@@ -9815,7 +9953,7 @@ var CartPageProductCard = function CartPageProductCard(_ref3) {
9815
9953
  productDiscounts: productDiscounts,
9816
9954
  primaryColor: accentColor,
9817
9955
  cartQuantity: (item === null || item === void 0 ? void 0 : item.quantity) || 0,
9818
- productPrice: (item === null || item === void 0 ? void 0 : item.standardPrice) || 0
9956
+ productPrice: (item === null || item === void 0 ? void 0 : item.tierPrice) || (item === null || item === void 0 ? void 0 : item.standardPrice) || 0
9819
9957
  }));
9820
9958
  };
9821
9959
 
@@ -13632,7 +13770,7 @@ var Step2 = function Step2(_ref) {
13632
13770
  icon: /*#__PURE__*/React__default.createElement(FiTruck, {
13633
13771
  className: "icon"
13634
13772
  })
13635
- }), /*#__PURE__*/React__default.createElement(StepsContent, null, showShipping && /*#__PURE__*/React__default.createElement(Fragment$1, null, /*#__PURE__*/React__default.createElement(Grid, {
13773
+ }), /*#__PURE__*/React__default.createElement(StepsContent, null, showShipping && /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement(Grid, {
13636
13774
  container: true
13637
13775
  }, /*#__PURE__*/React__default.createElement(Grid, {
13638
13776
  item: true,