ordering-ui-external 14.1.80 → 14.1.82

package/_modules/styles/Toast/index.js

@@ -40,7 +40,7 @@ var Toast = exports.Toast = function Toast() {
     toast.style.animation = 'fadein 0.5s, fadeout 0.5s 2.5s';
     setTimeout(function () {
       toast.style.visibility = 'hidden';
-      hideToast();
+      hideToast && hideToast();
     }, duration);
   }, [toastConfig]);
   if (!toastConfig) {

package/_modules/themes/five/index.js

@@ -465,6 +465,12 @@ Object.defineProperty(exports, "PaymentOptionStripe", {
     return _PaymentOptionStripe.PaymentOptionStripe;
   }
 });
+Object.defineProperty(exports, "PaymentOptionStripeLink", {
+  enumerable: true,
+  get: function get() {
+    return _PaymentOptionStripeLink.PaymentOptionStripeLink;
+  }
+});
 Object.defineProperty(exports, "PaymentOptionWallet", {
   enumerable: true,
   get: function get() {
@@ -849,6 +855,7 @@ var _PageBanner = require("./src/components/PageBanner");
 var _PaymentOptionCash = require("./src/components/PaymentOptionCash");
 var _PaymentOptions = require("./src/components/PaymentOptions");
 var _PaymentOptionStripe = require("./src/components/PaymentOptionStripe");
+var _PaymentOptionStripeLink = require("./src/components/PaymentOptionStripeLink");
 var _PaymentOptionWallet = require("./src/components/PaymentOptionWallet");
 var _PlaceSpot = require("./src/components/PlaceSpot");
 var _ProductForm = require("./src/components/ProductForm");

package/_modules/themes/five/src/components/Checkout/index.js

@@ -13,6 +13,7 @@ var _Modal = require("../Modal");
 var _orderingComponentsExternal = require("ordering-components-external");
 var _useWindowSize = require("../../../../../hooks/useWindowSize");
 var _UpsellingPage = require("../UpsellingPage");
+var _PaymentOptionStripeLink = require("../PaymentOptionStripeLink");
 var _libphonenumberJs = _interopRequireDefault(require("libphonenumber-js"));
 var _reactRouterDom = require("react-router-dom");
 var _reactBootstrapIcons = require("react-bootstrap-icons");
@@ -66,7 +67,7 @@ var mapConfigs = {
 };
 var driverTipsTypes = [1, 2];
 var CheckoutUI = function CheckoutUI(props) {
-  var _ordering$project, _businessDetails$busi, _businessDetails$busi2, _configs$table_numer_, _businessConfigs$find, _businessConfigs$find2, _configs$cash_wallet, _configs$wallet_enabl, _theme$header, _theme$colors, _theme$colors$split, _configs$driver_tip_a, _cart$comment, _cart$offers, _paymethodSelected$da, _paymethodSelected$da2, _cardList$cards, _cartState$cart, _configs$driver_tip_o, _configs$driver_tip_o2, _configs$driver_tip_o3, _instructionsOptions$, _theme$checkout, _theme$checkout2, _theme$checkout3, _theme$checkout4, _loyaltyPlansState$re, _creditPointPlan$busi, _cart$business2, _businessDetails$busi3, _theme$images, _configs$google_maps_, _customerState$user, _customerState$user2, _Object$values2, _businessDetails$busi4, _businessDetails$busi5, _businessDetails$busi6, _businessDetails$busi7, _businessDetails$busi8, _businessDetails$busi9, _businessDetails$erro, _businessDetails$erro2, _businessDetails$busi10, _businessDetails$busi11, _businessDetails$busi12, _configs$driver_tip_t, _configs$driver_tip_u, _configs$driver_tip_t2, _cartState$cart$spot_, _cartState$cart2, _cart$business3, _cart$products2, _ref2, _creditPointPlanOnBus, _configs$driver_tip_t3, _configs$driver_tip_u2, _configs$driver_tip_t4, _customerState$user3, _theme$colors2, _options$address;
+  var _businessDetails$busi, _businessDetails$busi2, _configs$table_numer_, _businessConfigs$find, _businessConfigs$find2, _configs$cash_wallet, _configs$wallet_enabl, _theme$header, _theme$colors, _theme$colors$split, _configs$driver_tip_a, _cart$comment, _cart$offers, _paymethodSelected$da, _paymethodSelected$da2, _cardList$cards, _cartState$cart, _configs$driver_tip_o, _configs$driver_tip_o2, _configs$driver_tip_o3, _instructionsOptions$, _theme$checkout, _theme$checkout2, _theme$checkout3, _theme$checkout4, _loyaltyPlansState$re, _creditPointPlan$busi, _cart$business2, _businessDetails$busi3, _theme$images, _configs$google_maps_, _customerState$user, _customerState$user2, _Object$values2, _businessDetails$busi4, _businessDetails$busi5, _businessDetails$busi6, _businessDetails$busi7, _businessDetails$busi8, _businessDetails$busi9, _businessDetails$erro, _businessDetails$erro2, _businessDetails$busi10, _businessDetails$busi11, _businessDetails$busi12, _configs$driver_tip_t, _configs$driver_tip_u, _configs$driver_tip_t2, _cartState$cart$spot_, _cartState$cart2, _cart$business3, _cart$products2, _ref2, _creditPointPlanOnBus, _configs$driver_tip_t3, _configs$driver_tip_u2, _configs$driver_tip_t4, _customerState$user3, _theme$colors2, _options$address, _businessDetails$busi13, _businessDetails$busi14, _cart$paymethod_data;
   var cart = props.cart,
     errors = props.errors,
     placing = props.placing,
@@ -161,7 +162,8 @@ var CheckoutUI = function CheckoutUI(props) {
   var _useState17 = (0, _react.useState)({
       login: false,
       signup: false,
-      isGuest: false
+      isGuest: false,
+      stripeLink: false
     }),
     _useState18 = _slicedToArray(_useState17, 2),
     openModal = _useState18[0],
@@ -182,7 +184,7 @@ var CheckoutUI = function CheckoutUI(props) {
     _useState26 = _slicedToArray(_useState25, 2),
     productLoading = _useState26[0],
     setProductLoading = _useState26[1];
-  var shouldActivateOrderDetailModal = ordering === null || ordering === void 0 || (_ordering$project = ordering.project) === null || _ordering$project === void 0 ? void 0 : _ordering$project.includes('alsea');
+  var shouldActivateOrderDetailModal = isCustomerMode && (paymethodSelected === null || paymethodSelected === void 0 ? void 0 : paymethodSelected.gateway) !== 'stripe_link';
   var orderTypeList = [t('DELIVERY', 'Delivery'), t('PICKUP', 'Pickup'), t('EAT_IN', 'Eat in'), t('CURBSIDE', 'Curbside'), t('DRIVE_THRU', 'Drive thru')];
   var cardsMethods = ['stripe', 'credomatic'];
   var stripePaymethods = ['stripe', 'stripe_connect', 'stripe_redirect'];
@@ -279,6 +281,11 @@ var CheckoutUI = function CheckoutUI(props) {
       if (behalfName) {
         body.on_behalf_of = behalfName;
       }
+      if ((paymethodSelected === null || paymethodSelected === void 0 ? void 0 : paymethodSelected.gateway) === 'stripe_link') {
+        setOpenModal(_objectSpread(_objectSpread({}, openModal), {}, {
+          stripeLink: true
+        }));
+      }
       handlerClickPlaceOrder && handlerClickPlaceOrder(null, body);
       return;
     }
@@ -686,7 +693,14 @@ var CheckoutUI = function CheckoutUI(props) {
         orderDetail: true
       })) : handlePlaceOrder();
     }
-  }, !(cart !== null && cart !== void 0 && cart.valid_maximum) ? "".concat(t('MAXIMUM_SUBTOTAL_ORDER', 'Maximum subtotal order'), ": ").concat(parsePrice(cart === null || cart === void 0 ? void 0 : cart.maximum)) : !(cart !== null && cart !== void 0 && cart.valid_minimum) && !((cart === null || cart === void 0 ? void 0 : cart.discount_type) === 1 && (cart === null || cart === void 0 ? void 0 : cart.discount_rate) === 100) ? "".concat(t('MINIMUN_SUBTOTAL_ORDER', 'Minimum subtotal order:'), " ").concat(parsePrice(cart === null || cart === void 0 ? void 0 : cart.minimum)) : placing ? t('PLACING_ORDER', 'Placing order') : t('PLACE_ORDER', 'Place Order'))), !(cart !== null && cart !== void 0 && cart.valid_address) && (cart === null || cart === void 0 ? void 0 : cart.status) !== 2 && /*#__PURE__*/_react.default.createElement(_styles.WarningText, null, t('INVALID_CART_ADDRESS', 'Selected address is invalid, please select a closer address.')), !paymethodSelected && (cart === null || cart === void 0 ? void 0 : cart.balance) > 0 && (cart === null || cart === void 0 ? void 0 : cart.status) !== 2 && /*#__PURE__*/_react.default.createElement(_styles.WarningText, null, t('WARNING_NOT_PAYMENT_SELECTED', 'Please, select a payment method to place order.')), !(cart !== null && cart !== void 0 && cart.valid_products) && (cart === null || cart === void 0 ? void 0 : cart.status) !== 2 && /*#__PURE__*/_react.default.createElement(_styles.WarningText, null, t('WARNING_INVALID_PRODUCTS', 'Some products are invalid, please check them.')), isTableNumberEnabled === '1' && (options === null || options === void 0 ? void 0 : options.type) === 3 && !(cart !== null && cart !== void 0 && cart.spot_number || placeSpotNumber) && /*#__PURE__*/_react.default.createElement(_styles.WarningText, null, t('WARNING_PLACE_SPOT', 'Please, select your spot to place order.')), validateDriverTipField && !isGiftCardCart && /*#__PURE__*/_react.default.createElement(_styles.WarningText, null, t('WARNING_INVALID_DRIVER_TIP', 'Driver Tip is required.')), validateCouponField && /*#__PURE__*/_react.default.createElement(_styles.WarningText, null, t('WARNING_INVALID_COUPON_FIELD', 'Coupon is required.')), validateCommentsCartField && /*#__PURE__*/_react.default.createElement(_styles.WarningText, null, t('WARNING_INVALID_CART_COMMENTS', 'Cart comments is required.')), validateZipcodeCard && /*#__PURE__*/_react.default.createElement(_styles.WarningText, null, t('WARNING_CARD_ZIPCODE_REQUIRED', 'Your card selected has not zipcode')), !!alseaCheckPriceError && /*#__PURE__*/_react.default.createElement(_styles.WarningText, null, alseaCheckPriceError), isLoadingCheckprice && /*#__PURE__*/_react.default.createElement(_styles.WarningText, null, t('RECALCULATING_TOTAL_PRICE', 'Recalculating total price')), (cart === null || cart === void 0 ? void 0 : cart.valid_preorder) !== undefined && !(cart !== null && cart !== void 0 && cart.valid_preorder) && /*#__PURE__*/_react.default.createElement(_styles.WarningText, null, t('INVALID_CART_MOMENT', 'Selected schedule time is invalid, please select a schedule into the business schedule interval.'))), windowSize.width < 576 && !cartState.loading && cart && (cart === null || cart === void 0 ? void 0 : cart.status) !== 2 && /*#__PURE__*/_react.default.createElement(_styles.MobileWrapperPlaceOrderButton, null, /*#__PURE__*/_react.default.createElement("span", null, parsePrice(cart === null || cart === void 0 ? void 0 : cart.total)), /*#__PURE__*/_react.default.createElement(_Buttons.Button, {
+  }, !(cart !== null && cart !== void 0 && cart.valid_maximum) ? "".concat(t('MAXIMUM_SUBTOTAL_ORDER', 'Maximum subtotal order'), ": ").concat(parsePrice(cart === null || cart === void 0 ? void 0 : cart.maximum)) : !(cart !== null && cart !== void 0 && cart.valid_minimum) && !((cart === null || cart === void 0 ? void 0 : cart.discount_type) === 1 && (cart === null || cart === void 0 ? void 0 : cart.discount_rate) === 100) ? "".concat(t('MINIMUN_SUBTOTAL_ORDER', 'Minimum subtotal order:'), " ").concat(parsePrice(cart === null || cart === void 0 ? void 0 : cart.minimum)) : placing ? t('PLACING_ORDER', 'Placing order') : t('PLACE_ORDER', 'Place Order'))), isCustomerMode && (paymethodSelected === null || paymethodSelected === void 0 ? void 0 : paymethodSelected.gateway) === 'stripe_link' && (cart === null || cart === void 0 ? void 0 : cart.status) === 2 && /*#__PURE__*/_react.default.createElement(_styles.WrapperPlaceOrderButton, null, /*#__PURE__*/_react.default.createElement(_Buttons.Button, {
+    color: "secundary",
+    onClick: function onClick() {
+      return setOpenModal(_objectSpread(_objectSpread({}, openModal), {}, {
+        stripeLink: true
+      }));
+    }
+  }, t('RESEND_STRIPE_LIKE', 'Resend stripe link'))), !(cart !== null && cart !== void 0 && cart.valid_address) && (cart === null || cart === void 0 ? void 0 : cart.status) !== 2 && /*#__PURE__*/_react.default.createElement(_styles.WarningText, null, t('INVALID_CART_ADDRESS', 'Selected address is invalid, please select a closer address.')), !paymethodSelected && (cart === null || cart === void 0 ? void 0 : cart.balance) > 0 && (cart === null || cart === void 0 ? void 0 : cart.status) !== 2 && /*#__PURE__*/_react.default.createElement(_styles.WarningText, null, t('WARNING_NOT_PAYMENT_SELECTED', 'Please, select a payment method to place order.')), !(cart !== null && cart !== void 0 && cart.valid_products) && (cart === null || cart === void 0 ? void 0 : cart.status) !== 2 && /*#__PURE__*/_react.default.createElement(_styles.WarningText, null, t('WARNING_INVALID_PRODUCTS', 'Some products are invalid, please check them.')), isTableNumberEnabled === '1' && (options === null || options === void 0 ? void 0 : options.type) === 3 && !(cart !== null && cart !== void 0 && cart.spot_number || placeSpotNumber) && /*#__PURE__*/_react.default.createElement(_styles.WarningText, null, t('WARNING_PLACE_SPOT', 'Please, select your spot to place order.')), validateDriverTipField && !isGiftCardCart && /*#__PURE__*/_react.default.createElement(_styles.WarningText, null, t('WARNING_INVALID_DRIVER_TIP', 'Driver Tip is required.')), validateCouponField && /*#__PURE__*/_react.default.createElement(_styles.WarningText, null, t('WARNING_INVALID_COUPON_FIELD', 'Coupon is required.')), validateCommentsCartField && /*#__PURE__*/_react.default.createElement(_styles.WarningText, null, t('WARNING_INVALID_CART_COMMENTS', 'Cart comments is required.')), validateZipcodeCard && /*#__PURE__*/_react.default.createElement(_styles.WarningText, null, t('WARNING_CARD_ZIPCODE_REQUIRED', 'Your card selected has not zipcode')), !!alseaCheckPriceError && /*#__PURE__*/_react.default.createElement(_styles.WarningText, null, alseaCheckPriceError), isLoadingCheckprice && /*#__PURE__*/_react.default.createElement(_styles.WarningText, null, t('RECALCULATING_TOTAL_PRICE', 'Recalculating total price')), (cart === null || cart === void 0 ? void 0 : cart.valid_preorder) !== undefined && !(cart !== null && cart !== void 0 && cart.valid_preorder) && /*#__PURE__*/_react.default.createElement(_styles.WarningText, null, t('INVALID_CART_MOMENT', 'Selected schedule time is invalid, please select a schedule into the business schedule interval.'))), windowSize.width < 576 && !cartState.loading && cart && (cart === null || cart === void 0 ? void 0 : cart.status) !== 2 && /*#__PURE__*/_react.default.createElement(_styles.MobileWrapperPlaceOrderButton, null, /*#__PURE__*/_react.default.createElement("span", null, parsePrice(cart === null || cart === void 0 ? void 0 : cart.total)), /*#__PURE__*/_react.default.createElement(_Buttons.Button, {
     color: !(cart !== null && cart !== void 0 && cart.valid_maximum) || !(cart !== null && cart !== void 0 && cart.valid_minimum) && !((cart === null || cart === void 0 ? void 0 : cart.discount_type) === 1 && (cart === null || cart === void 0 ? void 0 : cart.discount_rate) === 100) ? 'secundary' : 'primary',
     disabled: isDisablePlaceOrderButton,
     onClick: function onClick() {
@@ -791,6 +805,22 @@ var CheckoutUI = function CheckoutUI(props) {
     orderType: options === null || options === void 0 ? void 0 : options.type,
     customerAddress: options === null || options === void 0 || (_options$address = options.address) === null || _options$address === void 0 ? void 0 : _options$address.address,
     onClick: handlePlaceOrder
+  })), /*#__PURE__*/_react.default.createElement(_Modal.Modal, {
+    open: openModal.stripeLink,
+    width: "650px",
+    padding: "30px 10px",
+    onClose: function onClose() {
+      return setOpenModal(_objectSpread(_objectSpread({}, openModal), {}, {
+        stripeLink: false
+      }));
+    },
+    title: t('SEND_SMS_WHATSAPP', 'Send SMS/WhatsApp'),
+    modalIconStyle: {
+      top: 20
+    }
+  }, /*#__PURE__*/_react.default.createElement(_PaymentOptionStripeLink.PaymentOptionStripeLink, {
+    businessConfigs: (_businessDetails$busi13 = businessDetails === null || businessDetails === void 0 || (_businessDetails$busi14 = businessDetails.business) === null || _businessDetails$busi14 === void 0 ? void 0 : _businessDetails$busi14.configs) !== null && _businessDetails$busi13 !== void 0 ? _businessDetails$busi13 : [],
+    paymentURL: cart === null || cart === void 0 || (_cart$paymethod_data = cart.paymethod_data) === null || _cart$paymethod_data === void 0 || (_cart$paymethod_data = _cart$paymethod_data.result) === null || _cart$paymethod_data === void 0 ? void 0 : _cart$paymethod_data.payment_url
   })));
 };
 var Checkout = exports.Checkout = function Checkout(props) {

package/_modules/themes/five/src/components/InputPhoneNumber/index.js

@@ -102,7 +102,9 @@ var InputPhoneNumber = exports.InputPhoneNumber = function InputPhoneNumber(prop
     disabled: disabled,
     isValid: value ? isValidPhoneNumber(value) : true,
     isError: isError
-  }, !useProfileFormStyle && /*#__PURE__*/_react.default.createElement(_styles.InputBeforeIconWrapper, null, /*#__PURE__*/_react.default.createElement(_BsPhone.default, null)), /*#__PURE__*/_react.default.createElement(_reactPhoneNumberInput.default, {
+  }, !useProfileFormStyle && /*#__PURE__*/_react.default.createElement(_styles.InputBeforeIconWrapper, {
+    className: "input-icon"
+  }, /*#__PURE__*/_react.default.createElement(_BsPhone.default, null)), /*#__PURE__*/_react.default.createElement(_reactPhoneNumberInput.default, {
     ref: phoneRef,
     disabled: disabled,
     placeholder: t('PHONE_NUMBER', 'Phone number'),

package/_modules/themes/five/src/components/Modal/index.js

@@ -75,7 +75,8 @@ var ModalUI = function ModalUI(props) {
     disableOverflowX: disableOverflowX,
     style: props.customStyle
   }, isProductForm && /*#__PURE__*/_react.default.createElement(_styles.ModalBackHeader, null), !hideCloseDefault && /*#__PURE__*/_react.default.createElement(_styles.ModalIconWrapper, null, /*#__PURE__*/_react.default.createElement(_styles.ModalIcon, {
-    isProductForm: isProductForm
+    isProductForm: isProductForm,
+    style: props.modalIconStyle
   }, authModal && onRemove ? /*#__PURE__*/_react.default.createElement(_MdClose.default, {
     onClick: function onClick() {
       return onRemove();

package/_modules/themes/five/src/components/PaymentOptionStripeLink/index.js

@@ -0,0 +1,293 @@
+"use strict";
+
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.PaymentOptionStripeLinkUI = exports.PaymentOptionStripeLink = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _libphonenumberJs = _interopRequireDefault(require("libphonenumber-js"));
+var _reactPhoneNumberInput = require("react-phone-number-input");
+var _reactBootstrapIcons = require("react-bootstrap-icons");
+var _orderingComponentsExternal = require("ordering-components-external");
+var _Confirm = require("../Confirm");
+var _InputPhoneNumber = require("../InputPhoneNumber");
+var _Inputs = require("../../styles/Inputs");
+var _Buttons = require("../../styles/Buttons");
+var _styles = require("./styles");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+var PaymentOptionStripeLinkUI = exports.PaymentOptionStripeLinkUI = function PaymentOptionStripeLinkUI(props) {
+  var _businessConfigs$find, _businessConfigs$find2, _ref, _userInfo$name, _ref2, _userInfo$lastname, _stripeLinkState$paym, _stripeLinkState$paym2;
+  var userInfo = props.userInfo,
+    businessConfigs = props.businessConfigs,
+    stripeLinkState = props.stripeLinkState,
+    setStripeLinkState = props.setStripeLinkState,
+    handleSendStripeLink = props.handleSendStripeLink,
+    handleChangeUserInfo = props.handleChangeUserInfo;
+  var _useLanguage = (0, _orderingComponentsExternal.useLanguage)(),
+    _useLanguage2 = _slicedToArray(_useLanguage, 2),
+    t = _useLanguage2[1];
+  var _useCustomer = (0, _orderingComponentsExternal.useCustomer)(),
+    _useCustomer2 = _slicedToArray(_useCustomer, 1),
+    user = _useCustomer2[0].user;
+  var _useConfig = (0, _orderingComponentsExternal.useConfig)(),
+    _useConfig2 = _slicedToArray(_useConfig, 1),
+    configs = _useConfig2[0].configs;
+  var _useState = (0, _react.useState)({
+      open: false,
+      content: []
+    }),
+    _useState2 = _slicedToArray(_useState, 2),
+    alertState = _useState2[0],
+    setAlertState = _useState2[1];
+  var _useState3 = (0, _react.useState)(null),
+    _useState4 = _slicedToArray(_useState3, 2),
+    isValidPhoneNumber = _useState4[0],
+    setIsValidPhoneNumber = _useState4[1];
+  var _useState5 = (0, _react.useState)(null),
+    _useState6 = _slicedToArray(_useState5, 2),
+    userPhoneNumber = _useState6[0],
+    setUserPhoneNumber = _useState6[1];
+  var _useState7 = (0, _react.useState)(false),
+    _useState8 = _slicedToArray(_useState7, 2),
+    showCountdown = _useState8[0],
+    setShowCountdown = _useState8[1];
+  var _useState9 = (0, _react.useState)(59),
+    _useState10 = _slicedToArray(_useState9, 2),
+    countdown = _useState10[0],
+    setCountdown = _useState10[1];
+  var isWhatappEnabled = (businessConfigs === null || businessConfigs === void 0 || (_businessConfigs$find = businessConfigs.find(function (config) {
+    return (config === null || config === void 0 ? void 0 : config.key) === 'allow_text_messages_whatsapp';
+  })) === null || _businessConfigs$find === void 0 ? void 0 : _businessConfigs$find.value) === '1';
+  var isSmsEnabled = (businessConfigs === null || businessConfigs === void 0 || (_businessConfigs$find2 = businessConfigs.find(function (config) {
+    return (config === null || config === void 0 ? void 0 : config.key) === 'allow_text_messages_sms';
+  })) === null || _businessConfigs$find2 === void 0 ? void 0 : _businessConfigs$find2.value) === '1';
+  var setUserCellPhone = function setUserCellPhone(_user) {
+    if (userPhoneNumber && !userPhoneNumber.includes('null')) {
+      setUserPhoneNumber(userPhoneNumber);
+      return;
+    }
+    var cellphone = _user !== null && _user !== void 0 && _user.guest_id ? _user === null || _user === void 0 ? void 0 : _user.guest_cellphone : _user === null || _user === void 0 ? void 0 : _user.cellphone;
+    if (cellphone) {
+      var phone = null;
+      if (_user !== null && _user !== void 0 && _user.country_phone_code) {
+        phone = "+".concat(_user === null || _user === void 0 ? void 0 : _user.country_phone_code, " ").concat(cellphone);
+      } else {
+        phone = cellphone;
+      }
+      setUserPhoneNumber(phone);
+      handleChangeUserInfo({
+        name: user === null || user === void 0 ? void 0 : user.name,
+        lastname: user === null || user === void 0 ? void 0 : user.lastname,
+        country_phone_code: _user === null || _user === void 0 ? void 0 : _user.country_phone_code,
+        cellphone: cellphone
+      });
+      return;
+    }
+    setUserPhoneNumber(cellphone || '');
+  };
+  var handleChangePhoneNumber = function handleChangePhoneNumber(number, isValid, rawNumber) {
+    setUserPhoneNumber(number);
+    var phoneNumberParser = null;
+    var phoneNumber = {
+      country_phone_code: '',
+      cellphone: ''
+    };
+    if (isValid) {
+      var _configs$validation_p, _configs$validation_p2;
+      phoneNumberParser = (0, _libphonenumberJs.default)(number);
+      if (!parseInt((_configs$validation_p = configs === null || configs === void 0 || (_configs$validation_p2 = configs.validation_phone_number_lib) === null || _configs$validation_p2 === void 0 ? void 0 : _configs$validation_p2.value) !== null && _configs$validation_p !== void 0 ? _configs$validation_p : 1, 10)) {
+        var _phoneNumberParser, _formatPhoneNumber, _formatPhoneNumber$re;
+        if ((_phoneNumberParser = phoneNumberParser) !== null && _phoneNumberParser !== void 0 && _phoneNumberParser.nationalNumber) phoneNumberParser.nationalNumber = (_formatPhoneNumber = (0, _reactPhoneNumberInput.formatPhoneNumber)(number)) === null || _formatPhoneNumber === void 0 || (_formatPhoneNumber$re = _formatPhoneNumber.replace) === null || _formatPhoneNumber$re === void 0 ? void 0 : _formatPhoneNumber$re.call(_formatPhoneNumber, /\s/g, '');
+      }
+    }
+    if (phoneNumberParser) {
+      var _phoneNumberParser2, _phoneNumberParser3;
+      phoneNumber = {
+        country_phone_code: (_phoneNumberParser2 = phoneNumberParser) === null || _phoneNumberParser2 === void 0 ? void 0 : _phoneNumberParser2.countryCallingCode,
+        cellphone: (_phoneNumberParser3 = phoneNumberParser) === null || _phoneNumberParser3 === void 0 ? void 0 : _phoneNumberParser3.nationalNumber
+      };
+    }
+    handleChangeUserInfo(_objectSpread({}, phoneNumber));
+  };
+  var closeAlert = function closeAlert() {
+    setAlertState({
+      open: false,
+      content: []
+    });
+    setStripeLinkState(_objectSpread(_objectSpread({}, stripeLinkState), {}, {
+      error: null
+    }));
+  };
+  var onSubmit = function onSubmit(type) {
+    var isPhoneNumberValid = userPhoneNumber ? isValidPhoneNumber : true;
+    var content = [];
+    if (!userPhoneNumber) {
+      content.push(t('VALIDATION_ERROR_MOBILE_PHONE_REQUIRED', 'The field Phone Number is required.'));
+      setAlertState({
+        open: true,
+        content: content
+      });
+      return;
+    }
+    if (!isPhoneNumberValid && userPhoneNumber) {
+      if (user !== null && user !== void 0 && user.country_phone_code) {
+        content.push(t('INVALID_ERROR_PHONE_NUMBER', 'The Phone Number field is invalid'));
+        setAlertState({
+          open: true,
+          content: content
+        });
+        return;
+      }
+      content.push(t('INVALID_ERROR_COUNTRY_CODE_PHONE_NUMBER', 'The country code of the phone number is invalid'));
+      setAlertState({
+        open: true,
+        content: content
+      });
+      return;
+    }
+    if (Object.keys(userInfo).length > 0 && isPhoneNumberValid) {
+      if ((content === null || content === void 0 ? void 0 : content.length) > 0) {
+        setAlertState({
+          open: true,
+          content: content
+        });
+        return;
+      }
+      if (!(stripeLinkState !== null && stripeLinkState !== void 0 && stripeLinkState.paymentURL)) {
+        setAlertState({
+          open: true,
+          content: [t('ERROR_LINK_NOT_AVAILABLE', 'The link is not available please reload the page')]
+        });
+        return;
+      }
+      handleSendStripeLink(type, function () {
+        setShowCountdown(true);
+      });
+    }
+  };
+  (0, _react.useEffect)(function () {
+    var timer;
+    if (showCountdown && countdown > 0) {
+      timer = setTimeout(function () {
+        return setCountdown(countdown - 1);
+      }, 1000);
+    } else if (countdown === 0) {
+      setShowCountdown(false);
+      setCountdown(59);
+    }
+    return function () {
+      return clearTimeout(timer);
+    };
+  }, [showCountdown, countdown]);
+  (0, _react.useEffect)(function () {
+    if (user) {
+      setUserCellPhone(user);
+    }
+  }, [user]);
+  (0, _react.useEffect)(function () {
+    if (!(stripeLinkState !== null && stripeLinkState !== void 0 && stripeLinkState.loading) && stripeLinkState !== null && stripeLinkState !== void 0 && stripeLinkState.error) {
+      setAlertState({
+        open: true,
+        content: (stripeLinkState === null || stripeLinkState === void 0 ? void 0 : stripeLinkState.error) || [t('ERROR', 'Error')]
+      });
+    }
+  }, [stripeLinkState === null || stripeLinkState === void 0 ? void 0 : stripeLinkState.loading]);
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, showCountdown ? /*#__PURE__*/_react.default.createElement(_styles.CodeSentContainer, null, /*#__PURE__*/_react.default.createElement("h3", null, t('CODE_HAS_BEEN_SENT_TO', 'Link has been sent to _phone_').replace('_phone_', userPhoneNumber)), /*#__PURE__*/_react.default.createElement("div", {
+    className: "countdown"
+  }, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("p", null, countdown))), /*#__PURE__*/_react.default.createElement(_Buttons.Button, {
+    color: "primary",
+    disabled: true
+  }, t('RESEND_LINK', 'Resend link'))) : /*#__PURE__*/_react.default.createElement(_styles.StripeLinkContainer, null, /*#__PURE__*/_react.default.createElement("p", {
+    className: "message"
+  }, t('SEND_SMS_WHATSAPP_MESSAGE', 'The link will be send to the following number')), /*#__PURE__*/_react.default.createElement("div", {
+    className: "user-info"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "inputs-wrapper"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "first-input"
+  }, /*#__PURE__*/_react.default.createElement(_styles.InputBeforeIconWrapper, null, /*#__PURE__*/_react.default.createElement(_reactBootstrapIcons.Person, null)), /*#__PURE__*/_react.default.createElement(_Inputs.Input, {
+    type: "text",
+    name: "name",
+    className: "form",
+    placeholder: t('NAME', 'Name'),
+    defaultValue: (_ref = (_userInfo$name = userInfo === null || userInfo === void 0 ? void 0 : userInfo.name) !== null && _userInfo$name !== void 0 ? _userInfo$name : user === null || user === void 0 ? void 0 : user.name) !== null && _ref !== void 0 ? _ref : '',
+    onChange: function onChange(e) {
+      return handleChangeUserInfo({
+        name: e.target.value
+      });
+    },
+    autoComplete: "off"
+  })), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_styles.InputBeforeIconWrapper, null, /*#__PURE__*/_react.default.createElement(_reactBootstrapIcons.Person, null)), /*#__PURE__*/_react.default.createElement(_Inputs.Input, {
+    type: "text",
+    name: "lastname",
+    className: "form",
+    placeholder: t('LAST_NAME', 'Last name'),
+    defaultValue: (_ref2 = (_userInfo$lastname = userInfo === null || userInfo === void 0 ? void 0 : userInfo.lastname) !== null && _userInfo$lastname !== void 0 ? _userInfo$lastname : user === null || user === void 0 ? void 0 : user.lastname) !== null && _ref2 !== void 0 ? _ref2 : '',
+    onChange: function onChange(e) {
+      return handleChangeUserInfo({
+        lastname: e.target.value
+      });
+    },
+    autoComplete: "off"
+  }))), /*#__PURE__*/_react.default.createElement(_styles.InputPhoneNumberWrapper, null, /*#__PURE__*/_react.default.createElement(_InputPhoneNumber.InputPhoneNumber, {
+    user: user,
+    value: userPhoneNumber,
+    setValue: handleChangePhoneNumber,
+    handleIsValid: setIsValidPhoneNumber
+  }))), /*#__PURE__*/_react.default.createElement("div", {
+    className: "buttons-wrapper"
+  }, isSmsEnabled && /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_Buttons.Button, {
+    color: "primary",
+    onClick: function onClick() {
+      return onSubmit('sms');
+    },
+    disabled: stripeLinkState.loading
+  }, t('SEND_SMS', 'Send SMS'))), isWhatappEnabled && /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_Buttons.Button, {
+    color: "primary",
+    outline: true,
+    onClick: function onClick() {
+      return onSubmit('whatsapp');
+    },
+    disabled: stripeLinkState.loading
+  }, t('SEND_WHATSAPP', 'Send WhatsApp'))), !isSmsEnabled && !isWhatappEnabled && /*#__PURE__*/_react.default.createElement("div", {
+    className: "url-link"
+  }, stripeLinkState !== null && stripeLinkState !== void 0 && stripeLinkState.loading ? /*#__PURE__*/_react.default.createElement("div", {
+    className: "loading"
+  }, /*#__PURE__*/_react.default.createElement("p", null, t('LOADING', 'Loading...'))) : /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("a", {
+    href: (_stripeLinkState$paym = stripeLinkState === null || stripeLinkState === void 0 ? void 0 : stripeLinkState.paymentURL) !== null && _stripeLinkState$paym !== void 0 ? _stripeLinkState$paym : '',
+    rel: "noopener noreferrer",
+    target: "_blank"
+  }, (_stripeLinkState$paym2 = stripeLinkState === null || stripeLinkState === void 0 ? void 0 : stripeLinkState.paymentURL) !== null && _stripeLinkState$paym2 !== void 0 ? _stripeLinkState$paym2 : ''))))), /*#__PURE__*/_react.default.createElement(_Confirm.Alert, {
+    title: t('ERROR', 'Error'),
+    content: alertState.content,
+    acceptText: t('ACCEPT', 'Accept'),
+    open: alertState.open,
+    onClose: function onClose() {
+      return closeAlert();
+    },
+    onAccept: function onAccept() {
+      return closeAlert();
+    },
+    closeOnBackdrop: false
+  }));
+};
+var PaymentOptionStripeLink = exports.PaymentOptionStripeLink = function PaymentOptionStripeLink(props) {
+  var paymentOptionStripeProps = _objectSpread(_objectSpread({}, props), {}, {
+    UIComponent: PaymentOptionStripeLinkUI
+  });
+  return /*#__PURE__*/_react.default.createElement(_orderingComponentsExternal.PaymentOptionStripeLink, paymentOptionStripeProps);
+};

package/_modules/themes/five/src/components/PaymentOptionStripeLink/styles.js

@@ -0,0 +1,28 @@
+"use strict";
+
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.WarningMessage = exports.StripeLinkContainer = exports.InputPhoneNumberWrapper = exports.InputBeforeIconWrapper = exports.CodeSentContainer = void 0;
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
+var StripeLinkContainer = exports.StripeLinkContainer = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  padding: 20px;\n\n  .message {\n    font-size: 14px;\n  }\n\n  .user-info {\n    display: flex;\n    flex-direction: column;\n\n    .inputs-wrapper {\n      display: flex;\n      > div {\n        width: 50%\n      }\n      input {\n        width: 100%;\n        padding: 7px 15px 7px 34px;\n      }\n      .first-input {\n        margin-right: 25px;\n      }\n    }\n  }\n  .buttons-wrapper {\n    display: flex;\n    padding-top: 20px;\n    gap: 10px;\n\n    div {\n      flex: 1;\n\n      p {\n        text-align: center;\n      }\n    }\n\n    button {\n      width: 100%;\n      min-height: 45px;\n    }\n  }\n\n  .loading {\n    text-align: center;\n\n    p {\n      margin: 0;\n    }\n  }\n\n  .url-link {\n    text-align: center;\n  }\n"])));
+var WarningMessage = exports.WarningMessage = _styledComponents.default.p(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  color: #D81212;\n  font-size: 24px;\n  padding-left: 10px;\n  font-weight: bold;\n  opacity: 0.8;\n  ", "\n"])), function (props) {
+  var _props$theme;
+  return ((_props$theme = props.theme) === null || _props$theme === void 0 ? void 0 : _props$theme.rtl) && (0, _styledComponents.css)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    padding-right: 10px;\n    padding-left: 0;\n  "])));
+});
+var InputPhoneNumberWrapper = exports.InputPhoneNumberWrapper = _styledComponents.default.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  width: 100%;\n  padding-top: 10px;\n  p {\n    font-weight: 500;\n    font-size: 20px;\n    color: ", ";\n    width: 100%;\n    text-align: left;\n    margin: 0 0 7px 0;\n  }\n\n  .input-icon {\n    top: 8px;\n  }\n"])), function (props) {
+  return props.theme.colors.darkTextColor;
+});
+var InputBeforeIconWrapper = exports.InputBeforeIconWrapper = _styledComponents.default.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  position: absolute;\n  padding: 6px 6px 6px 10px;\n\n  ", "\n\n  svg {\n    color: #B1BCCC;\n    font-size: 16px;\n  }\n"])), function (props) {
+  return props.theme.rtl && (0, _styledComponents.css)(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n    right: 100px;\n    left: initial;\n  "])));
+});
+var CodeSentContainer = exports.CodeSentContainer = _styledComponents.default.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  padding: 20px;\n\n  h3 {\n    font-size: 20px;\n  }\n\n  .countdown {\n    display: flex;\n    justify-content: center;\n    width: 100%;\n    padding: 20px 0;\n\n    div {\n      width: 30%;\n      background-color: ", ";\n      padding: 10px 10px;\n      p {\n        text-align: center;\n        font-size: 32px;\n        color: ", ";\n        margin: 0;\n      }\n    }\n  }\n\n  button {\n    width: 100%;\n    min-height: 45px;\n  }\n"])), function (props) {
+  return props.theme.colors.grayDividerColor;
+}, function (props) {
+  return props.theme.colors.success500;
+});

package/_modules/themes/five/src/components/PaymentOptions/index.js

@@ -252,7 +252,7 @@ var PaymentOptionsUI = function PaymentOptionsUI(props) {
     var _isOpenMethod$paymeth;
     return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, {
       key: paymethod.id
-    }, ((!isCustomerMode || isAlsea && isCustomerMode) && paymethod.gateway || isCustomerMode && (paymethod.gateway === 'card_delivery' || paymethod.gateway === 'cash')) && /*#__PURE__*/_react.default.createElement(_styles.PayCard, {
+    }, ((!isCustomerMode || isAlsea && isCustomerMode) && paymethod.gateway || isCustomerMode && ['cash', 'card_delivery', 'stripe_link'].includes(paymethod === null || paymethod === void 0 ? void 0 : paymethod.gateway)) && /*#__PURE__*/_react.default.createElement(_styles.PayCard, {
       isDisabled: isDisabled,
       className: "".concat(((paymethodSelected === null || paymethodSelected === void 0 ? void 0 : paymethodSelected.id) || (isOpenMethod === null || isOpenMethod === void 0 || (_isOpenMethod$paymeth = isOpenMethod.paymethod) === null || _isOpenMethod$paymeth === void 0 ? void 0 : _isOpenMethod$paymeth.id)) === paymethod.id ? 'active' : ''),
       onClick: function onClick() {

package/_modules/utils/index.js

@@ -147,7 +147,8 @@ var getTraduction = exports.getTraduction = function getTraduction(key) {
     ERROR_PLACE_PAY_WITH_PAYPAL_CAPTURE: 'An error occurred while trying to pay by PayPal',
     ERROR_ADD_PRODUCT_VERY_FAR_FOR_DELIVERY: 'Error adding product, very far for delivery',
     ERROR_INVALID_OFFER: 'The offer doesn\'t exist',
-    ERROR_CASH_WALLET_FEATURE_DISABLED: 'Cash wallet feature is disabled'
+    ERROR_CASH_WALLET_FEATURE_DISABLED: 'Cash wallet feature is disabled',
+    ERROR_TWILIO_SERVICE_BAD_SETTINGS: 'Twilio service bad settings'
   };
   return keyList[key] ? t(key, keyList[key]) : t(key);
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ordering-ui-external",
-  "version": "14.1.80",
+  "version": "14.1.82",
   "description": "Ordering UI Components",
   "main": "./_modules/index.js",
   "exports": {
@@ -88,7 +88,7 @@
     "lodash": "^4.17.19",
     "moment": "^2.29.4",
     "nanoid": "^4.0.0",
-    "ordering-components-external": "13.2.11",
+    "ordering-components-external": "13.2.16",
     "payment": "^2.4.6",
     "polished": "^3.6.6",
     "react-bootstrap-icons": "^1.7.2",

package/src/styles/Toast/index.js

@@ -70,7 +70,7 @@ export const Toast = () => {
     toast.style.animation = 'fadein 0.5s, fadeout 0.5s 2.5s'
     setTimeout(() => {
       toast.style.visibility = 'hidden'
-      hideToast()
+      hideToast && hideToast()
     }, duration)
   }, [toastConfig])
 

package/src/themes/five/index.js

@@ -64,6 +64,7 @@ import { PageBanner } from './src/components/PageBanner'
 import { PaymentOptionCash } from './src/components/PaymentOptionCash'
 import { PaymentOptions } from './src/components/PaymentOptions'
 import { PaymentOptionStripe } from './src/components/PaymentOptionStripe'
+import { PaymentOptionStripeLink } from './src/components/PaymentOptionStripeLink'
 import { PaymentOptionWallet } from './src/components/PaymentOptionWallet'
 import { PlaceSpot } from './src/components/PlaceSpot'
 import { ProductForm } from './src/components/ProductForm'
@@ -196,6 +197,7 @@ export {
   PageBanner,
   PaymentOptionCash,
   PaymentOptionStripe,
+  PaymentOptionStripeLink,
   PaymentOptionWallet,
   PaymentOptions,
   PlaceSpot,

package/src/themes/five/src/components/Checkout/index.js

@@ -16,6 +16,7 @@ import {
 } from 'ordering-components-external'
 import { useWindowSize } from '../../../../../hooks/useWindowSize'
 import { UpsellingPage } from '../UpsellingPage'
+import { PaymentOptionStripeLink } from '../PaymentOptionStripeLink'
 import parsePhoneNumber from 'libphonenumber-js'
 import { useHistory } from 'react-router-dom'
 import { ArrowLeft } from 'react-bootstrap-icons'
@@ -131,13 +132,13 @@ const CheckoutUI = (props) => {
   const [isOpen, setIsOpen] = useState(false)
   const [requiredFields, setRequiredFields] = useState([])
   const [isSuccess, setIsSuccess] = useState(false)
-  const [openModal, setOpenModal] = useState({ login: false, signup: false, isGuest: false })
+  const [openModal, setOpenModal] = useState({ login: false, signup: false, isGuest: false, stripeLink: false })
   const [allowedGuest, setAllowedGuest] = useState(false)
   const [cardList, setCardList] = useState([])
   const [paymethodClicked, setPaymethodClicked] = useState(null)
   const [productLoading, setProductLoading] = useState(false)
 
-  const shouldActivateOrderDetailModal = ordering?.project?.includes('alsea')
+  const shouldActivateOrderDetailModal = isCustomerMode && paymethodSelected?.gateway !== 'stripe_link'
   const orderTypeList = [t('DELIVERY', 'Delivery'), t('PICKUP', 'Pickup'), t('EAT_IN', 'Eat in'), t('CURBSIDE', 'Curbside'), t('DRIVE_THRU', 'Drive thru')]
   const cardsMethods = ['stripe', 'credomatic']
   const stripePaymethods = ['stripe', 'stripe_connect', 'stripe_redirect']
@@ -214,6 +215,9 @@ const CheckoutUI = (props) => {
       if (behalfName) {
         body.on_behalf_of = behalfName
       }
+      if (paymethodSelected?.gateway === 'stripe_link') {
+        setOpenModal({ ...openModal, stripeLink: true })
+      }
       handlerClickPlaceOrder && handlerClickPlaceOrder(null, body)
       return
     }
@@ -716,6 +720,17 @@ const CheckoutUI = (props) => {
           </WrapperPlaceOrderButton>
         )}
 
+        {isCustomerMode && paymethodSelected?.gateway === 'stripe_link' && cart?.status === 2 && (
+          <WrapperPlaceOrderButton>
+            <Button
+              color='secundary'
+              onClick={() => setOpenModal({ ...openModal, stripeLink: true })}
+            >
+              {t('RESEND_STRIPE_LIKE', 'Resend stripe link')}
+            </Button>
+          </WrapperPlaceOrderButton>
+        )}
+
         {!cart?.valid_address && cart?.status !== 2 && (
           <WarningText>
             {t('INVALID_CART_ADDRESS', 'Selected address is invalid, please select a closer address.')}
@@ -893,6 +908,19 @@ const CheckoutUI = (props) => {
           onClick={handlePlaceOrder}
         />
       </Modal>
+      <Modal
+        open={openModal.stripeLink}
+        width='650px'
+        padding='30px 10px'
+        onClose={() => setOpenModal({ ...openModal, stripeLink: false })}
+        title={t('SEND_SMS_WHATSAPP', 'Send SMS/WhatsApp')}
+        modalIconStyle={{ top: 20 }}
+      >
+        <PaymentOptionStripeLink
+          businessConfigs={businessDetails?.business?.configs ?? []}
+          paymentURL={cart?.paymethod_data?.result?.payment_url}
+        />
+      </Modal>
     </Container>
   )
 }