ordering-ui-external 10.4.0 → 10.5.0

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

@@ -62,7 +62,7 @@ var mapConfigs = {
   }
 };
 var CheckoutUI = function CheckoutUI(props) {
-  var _businessDetails$busi, _businessDetails$busi2, _configs$table_numer_, _businessConfigs$find, _businessConfigs$find2, _configs$cash_wallet, _configs$wallet_enabl, _theme$header, _validationFields$fie, _validationFields$fie2, _cart$comment, _validationFields$fie3, _validationFields$fie4, _paymethodSelected$da, _paymethodSelected$da2, _cardList$cards, _cartState$cart, _validationFields$fie5, _validationFields$fie6, _configs$driver_tip_o, _configs$driver_tip_o2, _configs$driver_tip_o3, _instructionsOptions$, _theme$checkout, _theme$checkout2, _theme$checkout3, _theme$checkout4, _validationFields$fie7, _loyaltyPlansState$re, _creditPointPlan$busi, _options$address, _businessDetails$busi3, _theme$images, _configs$google_maps_, _customerState$user, _customerState$user2, _Object$values, _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, _ref, _creditPointPlanOnBus, _configs$driver_tip_t3, _configs$driver_tip_u2, _configs$driver_tip_t4, _validationFields$fie12, _validationFields$fie13, _customerState$user3;
+  var _businessDetails$busi, _businessDetails$busi2, _configs$table_numer_, _businessConfigs$find, _businessConfigs$find2, _configs$cash_wallet, _configs$wallet_enabl, _theme$header, _checkoutFieldsState$, _validationFields$fie, _validationFields$fie2, _cart$comment, _validationFields$fie3, _validationFields$fie4, _validationFields$fie5, _validationFields$fie6, _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, _validationFields$fie7, _loyaltyPlansState$re, _creditPointPlan$busi, _options$address, _businessDetails$busi3, _theme$images, _configs$google_maps_, _customerState$user, _customerState$user2, _Object$values, _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$business2, _cart$products2, _ref, _creditPointPlanOnBus, _configs$driver_tip_t3, _configs$driver_tip_u2, _configs$driver_tip_t4, _customerState$user3;
   var cart = props.cart,
     errors = props.errors,
     placing = props.placing,
@@ -83,7 +83,8 @@ var CheckoutUI = function CheckoutUI(props) {
     handleStoreRedirect = props.handleStoreRedirect,
     onPlaceOrderClick = props.onPlaceOrderClick,
     setPlaceSpotNumber = props.setPlaceSpotNumber,
-    placeSpotNumber = props.placeSpotNumber;
+    placeSpotNumber = props.placeSpotNumber,
+    checkoutFieldsState = props.checkoutFieldsState;
   var theme = (0, _styledComponents.useTheme)();
   var _useValidationFields = (0, _orderingComponentsExternal.useValidationFields)(),
     _useValidationFields2 = _slicedToArray(_useValidationFields, 1),
@@ -183,16 +184,36 @@ var CheckoutUI = function CheckoutUI(props) {
   })) === null || _businessConfigs$find2 === void 0 ? void 0 : _businessConfigs$find2.value) === '1';
   var isWalletEnabled = (configs === null || configs === void 0 || (_configs$cash_wallet = configs.cash_wallet) === null || _configs$cash_wallet === void 0 ? void 0 : _configs$cash_wallet.value) && (configs === null || configs === void 0 || (_configs$wallet_enabl = configs.wallet_enabled) === null || _configs$wallet_enabl === void 0 ? void 0 : _configs$wallet_enabl.value) === '1' && (isWalletCashEnabled || isWalletCreditPointsEnabled) && !useKioskApp && !isCustomerMode;
   var isMultiDriverTips = (theme === null || theme === void 0 || (_theme$header = theme.header) === null || _theme$header === void 0 || (_theme$header = _theme$header.components) === null || _theme$header === void 0 || (_theme$header = _theme$header.layout) === null || _theme$header === void 0 || (_theme$header = _theme$header.type) === null || _theme$header === void 0 ? void 0 : _theme$header.toLowerCase()) === 'chew';
+  var notFields = ['coupon', 'driver_tip', 'mobile_phone', 'address', 'zipcode', 'address_notes', 'comments'];
   var placeSpotTypes = [3, 4, 5];
   var placeSpotsEnabled = placeSpotTypes.includes(options === null || options === void 0 ? void 0 : options.type) && !useKioskApp;
   var isGiftCardCart = !(cart !== null && cart !== void 0 && cart.business_id);
+  var guestCheckoutDriveTip = checkoutFieldsState === null || checkoutFieldsState === void 0 || (_checkoutFieldsState$ = checkoutFieldsState.fields) === null || _checkoutFieldsState$ === void 0 ? void 0 : _checkoutFieldsState$.find(function (field) {
+    var _field$validation_fie;
+    return field.order_type_id === 1 && (field === null || field === void 0 || (_field$validation_fie = field.validation_field) === null || _field$validation_fie === void 0 ? void 0 : _field$validation_fie.code) === 'driver_tip';
+  });
+  var guestCheckoutComment = (0, _react.useMemo)(function () {
+    var _checkoutFieldsState$2;
+    return checkoutFieldsState === null || checkoutFieldsState === void 0 || (_checkoutFieldsState$2 = checkoutFieldsState.fields) === null || _checkoutFieldsState$2 === void 0 ? void 0 : _checkoutFieldsState$2.find(function (field) {
+      var _field$validation_fie2;
+      return field.order_type_id === (options === null || options === void 0 ? void 0 : options.type) && (field === null || field === void 0 || (_field$validation_fie2 = field.validation_field) === null || _field$validation_fie2 === void 0 ? void 0 : _field$validation_fie2.code) === 'comments';
+    });
+  }, [checkoutFieldsState, options]);
+  var guestCheckoutCupon = (0, _react.useMemo)(function () {
+    var _checkoutFieldsState$3;
+    return checkoutFieldsState === null || checkoutFieldsState === void 0 || (_checkoutFieldsState$3 = checkoutFieldsState.fields) === null || _checkoutFieldsState$3 === void 0 ? void 0 : _checkoutFieldsState$3.find(function (field) {
+      var _field$validation_fie3;
+      return field.order_type_id === (options === null || options === void 0 ? void 0 : options.type) && (field === null || field === void 0 || (_field$validation_fie3 = field.validation_field) === null || _field$validation_fie3 === void 0 ? void 0 : _field$validation_fie3.code) === 'coupon';
+    });
+  }, [checkoutFieldsState, options]);
   // const [hasBusinessPlaces, setHasBusinessPlaces] = useState(null)
 
-  var validateCommentsCartField = (validationFields === null || validationFields === void 0 || (_validationFields$fie = validationFields.fields) === null || _validationFields$fie === void 0 || (_validationFields$fie = _validationFields$fie.checkout) === null || _validationFields$fie === void 0 || (_validationFields$fie = _validationFields$fie.comments) === null || _validationFields$fie === void 0 ? void 0 : _validationFields$fie.enabled) && (validationFields === null || validationFields === void 0 || (_validationFields$fie2 = validationFields.fields) === null || _validationFields$fie2 === void 0 || (_validationFields$fie2 = _validationFields$fie2.checkout) === null || _validationFields$fie2 === void 0 || (_validationFields$fie2 = _validationFields$fie2.comments) === null || _validationFields$fie2 === void 0 ? void 0 : _validationFields$fie2.required) && ((cart === null || cart === void 0 ? void 0 : cart.comment) === null || (cart === null || cart === void 0 || (_cart$comment = cart.comment) === null || _cart$comment === void 0 ? void 0 : _cart$comment.trim().length) === 0);
-  var validateZipcodeCard = (validationFields === null || validationFields === void 0 || (_validationFields$fie3 = validationFields.fields) === null || _validationFields$fie3 === void 0 || (_validationFields$fie3 = _validationFields$fie3.card) === null || _validationFields$fie3 === void 0 || (_validationFields$fie3 = _validationFields$fie3.zipcode) === null || _validationFields$fie3 === void 0 ? void 0 : _validationFields$fie3.enabled) && (validationFields === null || validationFields === void 0 || (_validationFields$fie4 = validationFields.fields) === null || _validationFields$fie4 === void 0 || (_validationFields$fie4 = _validationFields$fie4.card) === null || _validationFields$fie4 === void 0 || (_validationFields$fie4 = _validationFields$fie4.zipcode) === null || _validationFields$fie4 === void 0 ? void 0 : _validationFields$fie4.required) && (paymethodSelected === null || paymethodSelected === void 0 ? void 0 : paymethodSelected.gateway) === 'stripe' && (paymethodSelected === null || paymethodSelected === void 0 || (_paymethodSelected$da = paymethodSelected.data) === null || _paymethodSelected$da === void 0 ? void 0 : _paymethodSelected$da.card) && !(paymethodSelected !== null && paymethodSelected !== void 0 && (_paymethodSelected$da2 = paymethodSelected.data) !== null && _paymethodSelected$da2 !== void 0 && (_paymethodSelected$da2 = _paymethodSelected$da2.card) !== null && _paymethodSelected$da2 !== void 0 && _paymethodSelected$da2.zipcode);
+  var validateCommentsCartField = (!(user !== null && user !== void 0 && user.guest_id) ? (validationFields === null || validationFields === void 0 || (_validationFields$fie = validationFields.fields) === null || _validationFields$fie === void 0 || (_validationFields$fie = _validationFields$fie.checkout) === null || _validationFields$fie === void 0 || (_validationFields$fie = _validationFields$fie.comments) === null || _validationFields$fie === void 0 ? void 0 : _validationFields$fie.enabled) && (validationFields === null || validationFields === void 0 || (_validationFields$fie2 = validationFields.fields) === null || _validationFields$fie2 === void 0 || (_validationFields$fie2 = _validationFields$fie2.checkout) === null || _validationFields$fie2 === void 0 || (_validationFields$fie2 = _validationFields$fie2.comments) === null || _validationFields$fie2 === void 0 ? void 0 : _validationFields$fie2.required) : (guestCheckoutComment === null || guestCheckoutComment === void 0 ? void 0 : guestCheckoutComment.enabled) && (guestCheckoutComment === null || guestCheckoutComment === void 0 ? void 0 : guestCheckoutComment.required)) && ((cart === null || cart === void 0 ? void 0 : cart.comment) === null || (cart === null || cart === void 0 || (_cart$comment = cart.comment) === null || _cart$comment === void 0 ? void 0 : _cart$comment.trim().length) === 0);
+  var validateDriverTipField = options.type === 1 && (!(user !== null && user !== void 0 && user.guest_id) ? (validationFields === null || validationFields === void 0 || (_validationFields$fie3 = validationFields.fields) === null || _validationFields$fie3 === void 0 || (_validationFields$fie3 = _validationFields$fie3.checkout) === null || _validationFields$fie3 === void 0 || (_validationFields$fie3 = _validationFields$fie3.driver_tip) === null || _validationFields$fie3 === void 0 ? void 0 : _validationFields$fie3.enabled) && (validationFields === null || validationFields === void 0 || (_validationFields$fie4 = validationFields.fields) === null || _validationFields$fie4 === void 0 || (_validationFields$fie4 = _validationFields$fie4.checkout) === null || _validationFields$fie4 === void 0 || (_validationFields$fie4 = _validationFields$fie4.driver_tip) === null || _validationFields$fie4 === void 0 ? void 0 : _validationFields$fie4.required) : (guestCheckoutDriveTip === null || guestCheckoutDriveTip === void 0 ? void 0 : guestCheckoutDriveTip.enabled) && (guestCheckoutDriveTip === null || guestCheckoutDriveTip === void 0 ? void 0 : guestCheckoutDriveTip.required)) && Number(cart === null || cart === void 0 ? void 0 : cart.driver_tip) <= 0;
+  var validateZipcodeCard = (validationFields === null || validationFields === void 0 || (_validationFields$fie5 = validationFields.fields) === null || _validationFields$fie5 === void 0 || (_validationFields$fie5 = _validationFields$fie5.card) === null || _validationFields$fie5 === void 0 || (_validationFields$fie5 = _validationFields$fie5.zipcode) === null || _validationFields$fie5 === void 0 ? void 0 : _validationFields$fie5.enabled) && (validationFields === null || validationFields === void 0 || (_validationFields$fie6 = validationFields.fields) === null || _validationFields$fie6 === void 0 || (_validationFields$fie6 = _validationFields$fie6.card) === null || _validationFields$fie6 === void 0 || (_validationFields$fie6 = _validationFields$fie6.zipcode) === null || _validationFields$fie6 === void 0 ? void 0 : _validationFields$fie6.required) && (paymethodSelected === null || paymethodSelected === void 0 ? void 0 : paymethodSelected.gateway) === 'stripe' && (paymethodSelected === null || paymethodSelected === void 0 || (_paymethodSelected$da = paymethodSelected.data) === null || _paymethodSelected$da === void 0 ? void 0 : _paymethodSelected$da.card) && !(paymethodSelected !== null && paymethodSelected !== void 0 && (_paymethodSelected$da2 = paymethodSelected.data) !== null && _paymethodSelected$da2 !== void 0 && (_paymethodSelected$da2 = _paymethodSelected$da2.card) !== null && _paymethodSelected$da2 !== void 0 && _paymethodSelected$da2.zipcode);
   var isDisablePlaceOrderButton = !(cart !== null && cart !== void 0 && cart.valid) || !paymethodSelected && (cart === null || cart === void 0 ? void 0 : cart.balance) > 0 || cardsMethods.includes(paymethodSelected === null || paymethodSelected === void 0 ? void 0 : paymethodSelected.gateway) && (cardList === null || cardList === void 0 || (_cardList$cards = cardList.cards) === null || _cardList$cards === void 0 ? void 0 : _cardList$cards.length) === 0 || placing || errorCash || loading || isTableNumberEnabled === '1' && (options === null || options === void 0 ? void 0 : options.type) === 3 && !(cartState !== null && cartState !== void 0 && (_cartState$cart = cartState.cart) !== null && _cartState$cart !== void 0 && _cartState$cart.spot_number || cart !== null && cart !== void 0 && cart.spot_number || placeSpotNumber) || !(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) ||
   // (((placeSpotTypes.includes(options?.type) && !cart?.place) && hasBusinessPlaces)) ||
-  options.type === 1 && (validationFields === null || validationFields === void 0 || (_validationFields$fie5 = validationFields.fields) === null || _validationFields$fie5 === void 0 || (_validationFields$fie5 = _validationFields$fie5.checkout) === null || _validationFields$fie5 === void 0 || (_validationFields$fie5 = _validationFields$fie5.driver_tip) === null || _validationFields$fie5 === void 0 ? void 0 : _validationFields$fie5.enabled) && (validationFields === null || validationFields === void 0 || (_validationFields$fie6 = validationFields.fields) === null || _validationFields$fie6 === void 0 || (_validationFields$fie6 = _validationFields$fie6.checkout) === null || _validationFields$fie6 === void 0 || (_validationFields$fie6 = _validationFields$fie6.driver_tip) === null || _validationFields$fie6 === void 0 ? void 0 : _validationFields$fie6.required) && Number(cart === null || cart === void 0 ? void 0 : cart.driver_tip) <= 0 || validateCommentsCartField || validateZipcodeCard;
+  validateDriverTipField && !isGiftCardCart || validateCommentsCartField || validateZipcodeCard;
   var driverTipsOptions = typeof (configs === null || configs === void 0 || (_configs$driver_tip_o = configs.driver_tip_options) === null || _configs$driver_tip_o === void 0 ? void 0 : _configs$driver_tip_o.value) === 'string' ? JSON.parse(configs === null || configs === void 0 || (_configs$driver_tip_o2 = configs.driver_tip_options) === null || _configs$driver_tip_o2 === void 0 ? void 0 : _configs$driver_tip_o2.value) || [] : (configs === null || configs === void 0 || (_configs$driver_tip_o3 = configs.driver_tip_options) === null || _configs$driver_tip_o3 === void 0 ? void 0 : _configs$driver_tip_o3.value) || [];
   var deliveryOptions = (instructionsOptions === null || instructionsOptions === void 0 ? void 0 : instructionsOptions.result) && Array.isArray(instructionsOptions === null || instructionsOptions === void 0 ? void 0 : instructionsOptions.result) && (instructionsOptions === null || instructionsOptions === void 0 || (_instructionsOptions$ = instructionsOptions.result) === null || _instructionsOptions$ === void 0 || (_instructionsOptions$ = _instructionsOptions$.filter(function (option) {
     return option === null || option === void 0 ? void 0 : option.enabled;
@@ -207,7 +228,7 @@ var CheckoutUI = function CheckoutUI(props) {
   var hideBusinessDetails = theme === null || theme === void 0 || (_theme$checkout2 = theme.checkout) === null || _theme$checkout2 === void 0 || (_theme$checkout2 = _theme$checkout2.components) === null || _theme$checkout2 === void 0 || (_theme$checkout2 = _theme$checkout2.business) === null || _theme$checkout2 === void 0 ? void 0 : _theme$checkout2.hidden;
   var hideBusinessMap = theme === null || theme === void 0 || (_theme$checkout3 = theme.checkout) === null || _theme$checkout3 === void 0 || (_theme$checkout3 = _theme$checkout3.components) === null || _theme$checkout3 === void 0 || (_theme$checkout3 = _theme$checkout3.map) === null || _theme$checkout3 === void 0 ? void 0 : _theme$checkout3.hidden;
   var hideCustomerDetails = theme === null || theme === void 0 || (_theme$checkout4 = theme.checkout) === null || _theme$checkout4 === void 0 || (_theme$checkout4 = _theme$checkout4.components) === null || _theme$checkout4 === void 0 || (_theme$checkout4 = _theme$checkout4.customer) === null || _theme$checkout4 === void 0 ? void 0 : _theme$checkout4.hidden;
-  var driverTipsField = !cartState.loading && cart && (cart === null || cart === void 0 ? void 0 : cart.business_id) && options.type === 1 && (cart === null || cart === void 0 ? void 0 : cart.status) !== 2 && (validationFields === null || validationFields === void 0 || (_validationFields$fie7 = validationFields.fields) === null || _validationFields$fie7 === void 0 || (_validationFields$fie7 = _validationFields$fie7.checkout) === null || _validationFields$fie7 === void 0 || (_validationFields$fie7 = _validationFields$fie7.driver_tip) === null || _validationFields$fie7 === void 0 ? void 0 : _validationFields$fie7.enabled) && driverTipsOptions.length > 0 && !useKioskApp;
+  var driverTipsField = !cartState.loading && cart && (cart === null || cart === void 0 ? void 0 : cart.business_id) && options.type === 1 && (cart === null || cart === void 0 ? void 0 : cart.status) !== 2 && (!(user !== null && user !== void 0 && user.guest_id) && (validationFields === null || validationFields === void 0 || (_validationFields$fie7 = validationFields.fields) === null || _validationFields$fie7 === void 0 || (_validationFields$fie7 = _validationFields$fie7.checkout) === null || _validationFields$fie7 === void 0 || (_validationFields$fie7 = _validationFields$fie7.driver_tip) === null || _validationFields$fie7 === void 0 ? void 0 : _validationFields$fie7.enabled) || (user === null || user === void 0 ? void 0 : user.guest_id) && (guestCheckoutDriveTip === null || guestCheckoutDriveTip === void 0 ? void 0 : guestCheckoutDriveTip.enabled)) && driverTipsOptions.length > 0 && !useKioskApp;
   var creditPointPlan = loyaltyPlansState === null || loyaltyPlansState === void 0 || (_loyaltyPlansState$re = loyaltyPlansState.result) === null || _loyaltyPlansState$re === void 0 ? void 0 : _loyaltyPlansState$re.find(function (loyal) {
     return loyal.type === 'credit_point';
   });
@@ -223,7 +244,7 @@ var CheckoutUI = function CheckoutUI(props) {
       }));
       return;
     }
-    if (!userErrors.length && (!(requiredFields !== null && requiredFields !== void 0 && requiredFields.length) || allowedGuest && ((paymethodSelected === null || paymethodSelected === void 0 ? void 0 : paymethodSelected.gateway) === 'cash' || (paymethodSelected === null || paymethodSelected === void 0 ? void 0 : paymethodSelected.gateway) === 'card_delivery'))) {
+    if (!userErrors.length && !(requiredFields !== null && requiredFields !== void 0 && requiredFields.length)) {
       var body = {};
       if (behalfName) {
         body.on_behalf_of = behalfName;
@@ -258,11 +279,29 @@ var CheckoutUI = function CheckoutUI(props) {
     });
     setIsUserDetailsEdit(false);
   };
+  var checkGuestValidationFields = function checkGuestValidationFields() {
+    var _checkoutFieldsState$4, _configs$verification;
+    var userSelected = isCustomerMode ? customerState.user : user;
+    var _requiredFields = checkoutFieldsState === null || checkoutFieldsState === void 0 ? void 0 : checkoutFieldsState.fields.filter(function (field) {
+      var _field$validation_fie4, _field$validation_fie5;
+      return (field === null || field === void 0 ? void 0 : field.order_type_id) === (options === null || options === void 0 ? void 0 : options.type) && (field === null || field === void 0 ? void 0 : field.enabled) && (field === null || field === void 0 ? void 0 : field.required) && !notFields.includes(field === null || field === void 0 || (_field$validation_fie4 = field.validation_field) === null || _field$validation_fie4 === void 0 ? void 0 : _field$validation_fie4.code) && userSelected && !userSelected[field === null || field === void 0 || (_field$validation_fie5 = field.validation_field) === null || _field$validation_fie5 === void 0 ? void 0 : _field$validation_fie5.code];
+    }).map(function (item) {
+      var _item$validation_fiel;
+      return item === null || item === void 0 || (_item$validation_fiel = item.validation_field) === null || _item$validation_fiel === void 0 ? void 0 : _item$validation_fiel.code;
+    });
+    var guestCheckoutCellPhone = checkoutFieldsState === null || checkoutFieldsState === void 0 || (_checkoutFieldsState$4 = checkoutFieldsState.fields) === null || _checkoutFieldsState$4 === void 0 ? void 0 : _checkoutFieldsState$4.find(function (field) {
+      var _field$validation_fie6;
+      return field.order_type_id === (options === null || options === void 0 ? void 0 : options.type) && (field === null || field === void 0 || (_field$validation_fie6 = field.validation_field) === null || _field$validation_fie6 === void 0 ? void 0 : _field$validation_fie6.code) === 'mobile_phone';
+    });
+    if (userSelected && !(userSelected !== null && userSelected !== void 0 && userSelected.cellphone) && (guestCheckoutCellPhone !== null && guestCheckoutCellPhone !== void 0 && guestCheckoutCellPhone.enabled && guestCheckoutCellPhone !== null && guestCheckoutCellPhone !== void 0 && guestCheckoutCellPhone.required || (configs === null || configs === void 0 || (_configs$verification = configs.verification_phone_required) === null || _configs$verification === void 0 ? void 0 : _configs$verification.value) === '1')) {
+      _requiredFields.push('cellphone');
+    }
+    setRequiredFields(_requiredFields);
+  };
   var checkValidationFields = function checkValidationFields() {
-    var _validationFields$fie8, _validationFields$fie9, _validationFields$fie10, _configs$verification;
+    var _validationFields$fie8, _validationFields$fie9, _validationFields$fie10, _configs$verification2;
     setUserErrors([]);
     var errors = [];
-    var notFields = ['coupon', 'driver_tip', 'mobile_phone', 'address', 'zipcode', 'address_notes', 'comments'];
     var userSelected = isCustomerMode ? customerState.user : user;
     var _requiredFields = [];
     Object.values(validationFields === null || validationFields === void 0 || (_validationFields$fie8 = validationFields.fields) === null || _validationFields$fie8 === void 0 ? void 0 : _validationFields$fie8.checkout).map(function (field) {
@@ -272,7 +311,7 @@ var CheckoutUI = function CheckoutUI(props) {
         }
       }
     });
-    if (userSelected && !(userSelected !== null && userSelected !== void 0 && userSelected.cellphone) && (validationFields !== null && validationFields !== void 0 && (_validationFields$fie9 = validationFields.fields) !== null && _validationFields$fie9 !== void 0 && (_validationFields$fie9 = _validationFields$fie9.checkout) !== null && _validationFields$fie9 !== void 0 && (_validationFields$fie9 = _validationFields$fie9.cellphone) !== null && _validationFields$fie9 !== void 0 && _validationFields$fie9.enabled && validationFields !== null && validationFields !== void 0 && (_validationFields$fie10 = validationFields.fields) !== null && _validationFields$fie10 !== void 0 && (_validationFields$fie10 = _validationFields$fie10.checkout) !== null && _validationFields$fie10 !== void 0 && (_validationFields$fie10 = _validationFields$fie10.cellphone) !== null && _validationFields$fie10 !== void 0 && _validationFields$fie10.required || (configs === null || configs === void 0 || (_configs$verification = configs.verification_phone_required) === null || _configs$verification === void 0 ? void 0 : _configs$verification.value) === '1')) {
+    if (userSelected && !(userSelected !== null && userSelected !== void 0 && userSelected.cellphone) && (validationFields !== null && validationFields !== void 0 && (_validationFields$fie9 = validationFields.fields) !== null && _validationFields$fie9 !== void 0 && (_validationFields$fie9 = _validationFields$fie9.checkout) !== null && _validationFields$fie9 !== void 0 && (_validationFields$fie9 = _validationFields$fie9.cellphone) !== null && _validationFields$fie9 !== void 0 && _validationFields$fie9.enabled && validationFields !== null && validationFields !== void 0 && (_validationFields$fie10 = validationFields.fields) !== null && _validationFields$fie10 !== void 0 && (_validationFields$fie10 = _validationFields$fie10.checkout) !== null && _validationFields$fie10 !== void 0 && (_validationFields$fie10 = _validationFields$fie10.cellphone) !== null && _validationFields$fie10 !== void 0 && _validationFields$fie10.required || (configs === null || configs === void 0 || (_configs$verification2 = configs.verification_phone_required) === null || _configs$verification2 === void 0 ? void 0 : _configs$verification2.value) === '1')) {
       _requiredFields.push('cellphone');
     }
     setRequiredFields(_requiredFields);
@@ -318,6 +357,10 @@ var CheckoutUI = function CheckoutUI(props) {
       checkValidationFields();
     }
   }, [validationFields, user, customerState]);
+  (0, _react.useEffect)(function () {
+    if (checkoutFieldsState !== null && checkoutFieldsState !== void 0 && checkoutFieldsState.loading || !(user !== null && user !== void 0 && user.guest_id) || customerState.loading || userLoading) return;
+    checkGuestValidationFields();
+  }, [user, checkoutFieldsState, customerState]);
   (0, _react.useEffect)(function () {
     if (errors) {
       setAlertState({
@@ -334,17 +377,17 @@ var CheckoutUI = function CheckoutUI(props) {
     }
   }, [isResetPaymethod]);
   (0, _react.useEffect)(function () {
-    var _cart$products, _cart$business;
+    var _cart$products;
     if (cart !== null && cart !== void 0 && (_cart$products = cart.products) !== null && _cart$products !== void 0 && _cart$products.length) return;
-    if (cart !== null && cart !== void 0 && (_cart$business = cart.business) !== null && _cart$business !== void 0 && _cart$business.slug) {
-      var _cart$business2;
-      handleStoreRedirect(cart === null || cart === void 0 || (_cart$business2 = cart.business) === null || _cart$business2 === void 0 ? void 0 : _cart$business2.slug);
+    if ((cart === null || cart === void 0 ? void 0 : cart.business_id) !== null) {
+      var _cart$business;
+      handleStoreRedirect(cart === null || cart === void 0 || (_cart$business = cart.business) === null || _cart$business === void 0 ? void 0 : _cart$business.slug);
     } else {
       events.emit('go_to_page', {
         page: 'wallets'
       });
     }
-  }, [cart === null || cart === void 0 ? void 0 : cart.products]);
+  }, [JSON.stringify(cart === null || cart === void 0 ? void 0 : cart.products)]);
   (0, _react.useEffect)(function () {
     window.scrollTo(0, 0);
   }, []);
@@ -531,10 +574,10 @@ var CheckoutUI = function CheckoutUI(props) {
     spotNumberDefault: (_cartState$cart$spot_ = cartState === null || cartState === void 0 || (_cartState$cart2 = cartState.cart) === null || _cartState$cart2 === void 0 ? void 0 : _cartState$cart2.spot_number) !== null && _cartState$cart$spot_ !== void 0 ? _cartState$cart$spot_ : cart === null || cart === void 0 ? void 0 : cart.spot_number,
     vehicleDefault: cart === null || cart === void 0 ? void 0 : cart.vehicle,
     setPlaceSpotNumber: setPlaceSpotNumber
-  })), !cartState.loading && cart && /*#__PURE__*/_react.default.createElement(_styles.CartContainer, null, /*#__PURE__*/_react.default.createElement(_styles.CartHeader, null, /*#__PURE__*/_react.default.createElement("h1", null, t('MOBILE_FRONT_YOUR_ORDER', 'Your order')), (cart === null || cart === void 0 || (_cart$business3 = cart.business) === null || _cart$business3 === void 0 ? void 0 : _cart$business3.slug) && /*#__PURE__*/_react.default.createElement("span", {
+  })), !cartState.loading && cart && /*#__PURE__*/_react.default.createElement(_styles.CartContainer, null, /*#__PURE__*/_react.default.createElement(_styles.CartHeader, null, /*#__PURE__*/_react.default.createElement("h1", null, t('MOBILE_FRONT_YOUR_ORDER', 'Your order')), (cart === null || cart === void 0 || (_cart$business2 = cart.business) === null || _cart$business2 === void 0 ? void 0 : _cart$business2.slug) && /*#__PURE__*/_react.default.createElement("span", {
     onClick: function onClick() {
-      var _cart$business4, _cart$business5;
-      return (cart === null || cart === void 0 || (_cart$business4 = cart.business) === null || _cart$business4 === void 0 ? void 0 : _cart$business4.slug) && handleStoreRedirect && handleStoreRedirect(cart === null || cart === void 0 || (_cart$business5 = cart.business) === null || _cart$business5 === void 0 ? void 0 : _cart$business5.slug);
+      var _cart$business3, _cart$business4;
+      return (cart === null || cart === void 0 || (_cart$business3 = cart.business) === null || _cart$business3 === void 0 ? void 0 : _cart$business3.slug) && handleStoreRedirect && handleStoreRedirect(cart === null || cart === void 0 || (_cart$business4 = cart.business) === null || _cart$business4 === void 0 ? void 0 : _cart$business4.slug);
     }
   }, t('ADD_PRODUCTS', 'Add products'))), /*#__PURE__*/_react.default.createElement(_Cart.Cart, {
     isCartPending: (cart === null || cart === void 0 ? void 0 : cart.status) === 2,
@@ -544,7 +587,9 @@ var CheckoutUI = function CheckoutUI(props) {
     isProducts: (cart === null || cart === void 0 || (_cart$products2 = cart.products) === null || _cart$products2 === void 0 ? void 0 : _cart$products2.length) || 0,
     viewString: "checkout",
     businessConfigs: businessConfigs,
-    loyaltyRewardRate: (_ref = (_creditPointPlanOnBus = creditPointPlanOnBusiness === null || creditPointPlanOnBusiness === void 0 ? void 0 : creditPointPlanOnBusiness.accumulation_rate) !== null && _creditPointPlanOnBus !== void 0 ? _creditPointPlanOnBus : !!creditPointPlanOnBusiness && (creditPointPlan === null || creditPointPlan === void 0 ? void 0 : creditPointPlan.accumulation_rate)) !== null && _ref !== void 0 ? _ref : 0
+    loyaltyRewardRate: (_ref = (_creditPointPlanOnBus = creditPointPlanOnBusiness === null || creditPointPlanOnBusiness === void 0 ? void 0 : creditPointPlanOnBusiness.accumulation_rate) !== null && _creditPointPlanOnBus !== void 0 ? _creditPointPlanOnBus : !!creditPointPlanOnBusiness && (creditPointPlan === null || creditPointPlan === void 0 ? void 0 : creditPointPlan.accumulation_rate)) !== null && _ref !== void 0 ? _ref : 0,
+    guestCheckoutComment: guestCheckoutComment,
+    guestCheckoutCupon: guestCheckoutCupon
   })), !!(isMultiDriverTips && driverTipsField) && /*#__PURE__*/_react.default.createElement(_styles.DriverTipContainer, null, /*#__PURE__*/_react.default.createElement("h1", null, t('DRIVER_TIPS', 'Driver Tips')), /*#__PURE__*/_react.default.createElement("p", null, t('100%_OF_THE_TIP_YOUR_DRIVER', '100% of the tip goes to your driver')), /*#__PURE__*/_react.default.createElement(_DriverTips.DriverTips, {
     businessId: cart === null || cart === void 0 ? void 0 : cart.business_id,
     driverTipsOptions: driverTipsOptions,
@@ -559,7 +604,7 @@ var CheckoutUI = function CheckoutUI(props) {
     onClick: function onClick() {
       return 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', 'Placing') : 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.')), options.type === 1 && (validationFields === null || validationFields === void 0 || (_validationFields$fie12 = validationFields.fields) === null || _validationFields$fie12 === void 0 || (_validationFields$fie12 = _validationFields$fie12.checkout) === null || _validationFields$fie12 === void 0 || (_validationFields$fie12 = _validationFields$fie12.driver_tip) === null || _validationFields$fie12 === void 0 ? void 0 : _validationFields$fie12.enabled) && (validationFields === null || validationFields === void 0 || (_validationFields$fie13 = validationFields.fields) === null || _validationFields$fie13 === void 0 || (_validationFields$fie13 = _validationFields$fie13.checkout) === null || _validationFields$fie13 === void 0 || (_validationFields$fie13 = _validationFields$fie13.driver_tip) === null || _validationFields$fie13 === void 0 ? void 0 : _validationFields$fie13.required) && Number(cart === null || cart === void 0 ? void 0 : cart.driver_tip) <= 0 && /*#__PURE__*/_react.default.createElement(_styles.WarningText, null, t('WARNING_INVALID_DRIVER_TIP', 'Driver Tip 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')), (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', 'Placing') : 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.')), 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')), (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() {
@@ -702,8 +747,8 @@ var Checkout = function Checkout(props) {
     return (cart === null || cart === void 0 ? void 0 : cart.products) && (cart === null || cart === void 0 || (_cart$products3 = cart.products) === null || _cart$products3 === void 0 ? void 0 : _cart$products3.length);
   })) || null);
   var carts = businessSlug ? cartsWithProducts.filter(function (cart) {
-    var _cart$business6;
-    return (cart === null || cart === void 0 || (_cart$business6 = cart.business) === null || _cart$business6 === void 0 ? void 0 : _cart$business6.slug) === businessSlug || businessSlug === (cart === null || cart === void 0 ? void 0 : cart.business_id);
+    var _cart$business5;
+    return (cart === null || cart === void 0 || (_cart$business5 = cart.business) === null || _cart$business5 === void 0 ? void 0 : _cart$business5.slug) === businessSlug || businessSlug === (cart === null || cart === void 0 ? void 0 : cart.business_id);
   }) : cartsWithProducts;
   var closeAlert = function closeAlert() {
     setAlertState({

package/_modules/themes/five/src/components/GiftCard/GiftCardOrdersList/index.js

@@ -0,0 +1,53 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.GiftCardOrdersList = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _orderingComponentsExternal = require("ordering-components-external");
+var _HorizontalGiftCardOrdersLayout = require("../HorizontalGiftCardOrdersLayout");
+var _styles = require("./styles");
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _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(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+var GiftCardOrdersList = function GiftCardOrdersList(props) {
+  var _useLanguage = (0, _orderingComponentsExternal.useLanguage)(),
+    _useLanguage2 = _slicedToArray(_useLanguage, 2),
+    t = _useLanguage2[1];
+  var _useState = (0, _react.useState)(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isEmptyPending = _useState2[0],
+    setIsEmptyPending = _useState2[1];
+  var _useState3 = (0, _react.useState)(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    isEmptySent = _useState4[0],
+    setIsEmptySent = _useState4[1];
+  var _useState5 = (0, _react.useState)(false),
+    _useState6 = _slicedToArray(_useState5, 2),
+    isEmptyRedeemed = _useState6[0],
+    setIsEmptyRedeemed = _useState6[1];
+  return /*#__PURE__*/_react.default.createElement(_styles.Container, null, /*#__PURE__*/_react.default.createElement(_HorizontalGiftCardOrdersLayout.HorizontalGiftCardOrdersLayout, {
+    title: t('PENDING', 'Pending'),
+    defaultStatus: "pending",
+    setIsEmpty: setIsEmptyPending,
+    scrollId: "pendingGifts"
+  }), isEmptyPending && isEmptySent && isEmptyRedeemed && /*#__PURE__*/_react.default.createElement(_styles.Divider, null), /*#__PURE__*/_react.default.createElement(_HorizontalGiftCardOrdersLayout.HorizontalGiftCardOrdersLayout, {
+    title: t('SENT', 'Sent'),
+    defaultStatus: "sent",
+    setIsEmpty: setIsEmptySent,
+    scrollId: "sentGifts"
+  }), /*#__PURE__*/_react.default.createElement(_HorizontalGiftCardOrdersLayout.HorizontalGiftCardOrdersLayout, {
+    title: t('REDEEMED', 'Redeemed'),
+    defaultStatus: "activated",
+    setIsEmpty: setIsEmptyRedeemed,
+    scrollId: "redeemedgGifts"
+  }), isEmptyPending && isEmptySent && isEmptyRedeemed && /*#__PURE__*/_react.default.createElement(_styles.NoOrdersWrapper, null, /*#__PURE__*/_react.default.createElement("p", null, t('YOU_DONT_HAVE_CARDS', 'You don\'t have cards'))));
+};
+exports.GiftCardOrdersList = GiftCardOrdersList;

package/_modules/themes/five/src/components/GiftCard/GiftCardOrdersList/styles.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.NoOrdersWrapper = exports.Divider = exports.Container = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _templateObject, _templateObject2, _templateObject3;
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  h2 {\n    font-size: 24px;\n    font-weight: 600;\n    margin: 40px 0 20px 0;\n  }\n"])));
+exports.Container = Container;
+var Divider = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  margin-top: 25px;\n  background: #F8F9FA;\n  height: 8px;\n  width: 100%;\n"])));
+exports.Divider = Divider;
+var NoOrdersWrapper = _styledComponents.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  padding: 50px 0px;\n  box-sizing: border-box;\n  min-height: calc(100% - 120px);\n  width: 100%;\n\n  > p {\n    font-weight: 500;\n    font-size: 16px;\n    line-height: 24px;\n    margin-top: 0px;\n    margin-bottom: 25px;\n  }\n"])));
+exports.NoOrdersWrapper = NoOrdersWrapper;

package/_modules/themes/five/src/components/GiftCard/HorizontalGiftCardOrdersLayout/index.js

@@ -0,0 +1,69 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.HorizontalGiftCardOrdersLayout = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _orderingComponentsExternal = require("ordering-components-external");
+var _reactLoadingSkeleton = _interopRequireDefault(require("react-loading-skeleton"));
+var _AutoScroll = require("../../AutoScroll");
+var _SingleGiftCard = require("../SingleGiftCard");
+var _Pagination = require("../../Pagination");
+var _styles = require("./styles");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+var HorizontalGiftCardOrdersLayoutUI = function HorizontalGiftCardOrdersLayoutUI(props) {
+  var _giftCards$list2, _giftCards$list3;
+  var giftCards = props.giftCards,
+    paginationProps = props.paginationProps,
+    goToPage = props.goToPage,
+    title = props.title,
+    setIsEmpty = props.setIsEmpty,
+    scrollId = props.scrollId;
+  (0, _react.useEffect)(function () {
+    var _giftCards$list;
+    if (giftCards.loading) return;
+    if (((_giftCards$list = giftCards.list) === null || _giftCards$list === void 0 ? void 0 : _giftCards$list.length) === 0) setIsEmpty(true);
+  }, [giftCards]);
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, giftCards.loading ? /*#__PURE__*/_react.default.createElement(_reactLoadingSkeleton.default, {
+    width: 100,
+    height: 24
+  }) : ((_giftCards$list2 = giftCards.list) === null || _giftCards$list2 === void 0 ? void 0 : _giftCards$list2.length) > 0 && /*#__PURE__*/_react.default.createElement("h2", null, title), /*#__PURE__*/_react.default.createElement(_styles.ProductsListContainer, null, /*#__PURE__*/_react.default.createElement(_styles.ProductsList, null, /*#__PURE__*/_react.default.createElement(_AutoScroll.AutoScroll, {
+    scrollId: scrollId
+  }, giftCards.loading ? _toConsumableArray(Array(10).keys()).map(function (i) {
+    return /*#__PURE__*/_react.default.createElement(_SingleGiftCard.SingleGiftCard, {
+      isSkeleton: true,
+      key: i
+    });
+  }) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, giftCards.list.map(function (card) {
+    return /*#__PURE__*/_react.default.createElement(_SingleGiftCard.SingleGiftCard, {
+      key: card.id,
+      card: card
+    });
+  }))))), ((_giftCards$list3 = giftCards.list) === null || _giftCards$list3 === void 0 ? void 0 : _giftCards$list3.length) > 0 && Math.ceil(paginationProps === null || paginationProps === void 0 ? void 0 : paginationProps.totalPages) > 1 && /*#__PURE__*/_react.default.createElement(_styles.PaginationWrapper, null, /*#__PURE__*/_react.default.createElement(_Pagination.Pagination, {
+    currentPage: paginationProps.currentPage,
+    totalPages: Math.ceil(paginationProps === null || paginationProps === void 0 ? void 0 : paginationProps.totalPages),
+    handleChangePage: goToPage
+  })));
+};
+var HorizontalGiftCardOrdersLayout = function HorizontalGiftCardOrdersLayout(props) {
+  var giftCardsProps = _objectSpread(_objectSpread({}, props), {}, {
+    UIComponent: HorizontalGiftCardOrdersLayoutUI
+  });
+  return /*#__PURE__*/_react.default.createElement(_orderingComponentsExternal.GiftCardOrdersList, giftCardsProps);
+};
+exports.HorizontalGiftCardOrdersLayout = HorizontalGiftCardOrdersLayout;

package/_modules/themes/five/src/components/GiftCard/HorizontalGiftCardOrdersLayout/styles.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ProductsListContainer = exports.ProductsList = exports.PaginationWrapper = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _templateObject, _templateObject2, _templateObject3;
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+var ProductsListContainer = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  margin-top: 10px;\n  display: flex;\n  overflow: scroll hidden;\n"])));
+exports.ProductsListContainer = ProductsListContainer;
+var ProductsList = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  box-sizing: border-box;\n\n  .product-card {\n    width: 270px;\n    max-width: 270px;\n    margin: 10px;\n    border: 1px solid #E9ECEF;\n  }\n\n  @media(min-width: 480px){\n    .product-card {\n      width: 400px;\n      max-width: 400px;\n    }\n  }\n"])));
+exports.ProductsList = ProductsList;
+var PaginationWrapper = _styledComponents.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  margin: 20px 0;\n"])));
+exports.PaginationWrapper = PaginationWrapper;

package/_modules/themes/five/src/components/GiftCard/SingleGiftCard/index.js

@@ -0,0 +1,90 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SingleGiftCard = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _orderingComponentsExternal = require("ordering-components-external");
+var _reactLoadingSkeleton = _interopRequireDefault(require("react-loading-skeleton"));
+var _styledComponents = require("styled-components");
+var _BsDot = _interopRequireDefault(require("@meronex/icons/bs/BsDot"));
+var _styles = require("./styles");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _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(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+var SingleGiftCard = function SingleGiftCard(props) {
+  var _card$order_product2, _theme$images, _card$order_product3, _card$order_product4, _card$order_product5;
+  var card = props.card,
+    isSkeleton = props.isSkeleton;
+  var theme = (0, _styledComponents.useTheme)();
+  var _useLanguage = (0, _orderingComponentsExternal.useLanguage)(),
+    _useLanguage2 = _slicedToArray(_useLanguage, 2),
+    t = _useLanguage2[1];
+  var _useEvent = (0, _orderingComponentsExternal.useEvent)(),
+    _useEvent2 = _slicedToArray(_useEvent, 1),
+    events = _useEvent2[0];
+  var _useUtils = (0, _orderingComponentsExternal.useUtils)(),
+    _useUtils2 = _slicedToArray(_useUtils, 1),
+    _useUtils2$ = _useUtils2[0],
+    parsePrice = _useUtils2$.parsePrice,
+    optimizeImage = _useUtils2$.optimizeImage,
+    parseDate = _useUtils2$.parseDate;
+  var getGiftCardStatus = function getGiftCardStatus(status) {
+    switch (status) {
+      case 'pending':
+        return t('PENDING', 'Pending');
+      case 'activated':
+        return t('REDEEMED');
+      default:
+        return status;
+    }
+  };
+  var handleClickGiftCardOrder = function handleClickGiftCardOrder(card) {
+    var _card$order_product;
+    events.emit('go_to_page', {
+      page: 'order_detail',
+      params: {
+        orderId: (_card$order_product = card.order_product) === null || _card$order_product === void 0 ? void 0 : _card$order_product.order_id
+      }
+    });
+  };
+  return /*#__PURE__*/_react.default.createElement(_styles.CardContainer, {
+    className: "product-card",
+    onClick: function onClick() {
+      return handleClickGiftCardOrder(card);
+    }
+  }, isSkeleton ? /*#__PURE__*/_react.default.createElement(_reactLoadingSkeleton.default, {
+    height: 86,
+    width: 86
+  }) : /*#__PURE__*/_react.default.createElement(_styles.CardLogo, {
+    bgimage: optimizeImage((card === null || card === void 0 || (_card$order_product2 = card.order_product) === null || _card$order_product2 === void 0 ? void 0 : _card$order_product2.images) || (theme === null || theme === void 0 || (_theme$images = theme.images) === null || _theme$images === void 0 || (_theme$images = _theme$images.dummies) === null || _theme$images === void 0 ? void 0 : _theme$images.product), 'h_86,c_limit')
+  }), /*#__PURE__*/_react.default.createElement(_styles.CardInfo, null, /*#__PURE__*/_react.default.createElement("div", null, isSkeleton ? /*#__PURE__*/_react.default.createElement(_reactLoadingSkeleton.default, {
+    height: 16,
+    width: 100
+  }) : /*#__PURE__*/_react.default.createElement("span", {
+    className: "name"
+  }, card === null || card === void 0 || (_card$order_product3 = card.order_product) === null || _card$order_product3 === void 0 ? void 0 : _card$order_product3.name), isSkeleton ? /*#__PURE__*/_react.default.createElement(_reactLoadingSkeleton.default, {
+    height: 16,
+    width: 80
+  }) : /*#__PURE__*/_react.default.createElement("span", null, parsePrice(card === null || card === void 0 || (_card$order_product4 = card.order_product) === null || _card$order_product4 === void 0 ? void 0 : _card$order_product4.price))), isSkeleton ? /*#__PURE__*/_react.default.createElement("p", {
+    className: "date"
+  }, /*#__PURE__*/_react.default.createElement(_reactLoadingSkeleton.default, {
+    width: 150,
+    height: 14
+  })) : /*#__PURE__*/_react.default.createElement("p", {
+    className: "date"
+  }, t('ORDER_NUM', 'Order No.'), " ", card === null || card === void 0 || (_card$order_product5 = card.order_product) === null || _card$order_product5 === void 0 ? void 0 : _card$order_product5.order_id, /*#__PURE__*/_react.default.createElement(_BsDot.default, null), parseDate(card === null || card === void 0 ? void 0 : card.created_at)), isSkeleton ? /*#__PURE__*/_react.default.createElement("p", {
+    className: "status"
+  }, /*#__PURE__*/_react.default.createElement(_reactLoadingSkeleton.default, {
+    width: 80,
+    height: 14
+  })) : /*#__PURE__*/_react.default.createElement("p", {
+    className: "status"
+  }, getGiftCardStatus(card === null || card === void 0 ? void 0 : card.status))));
+};
+exports.SingleGiftCard = SingleGiftCard;

package/_modules/themes/five/src/components/GiftCard/SingleGiftCard/styles.js

@@ -0,0 +1,43 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CardLogo = exports.CardInfo = exports.CardContainer = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+var CardContainer = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  background: ", ";\n  display: flex;\n  cursor: pointer;\n  padding: 10px;\n  border-radius: 7.6px;\n\n  &:hover {\n    box-shadow: rgb(0 0 0 / 20%) 0px 8px 24px;\n  }\n"])), function (props) {
+  var _props$theme$colors;
+  return (_props$theme$colors = props.theme.colors) === null || _props$theme$colors === void 0 ? void 0 : _props$theme$colors.backgroundPage;
+});
+exports.CardContainer = CardContainer;
+var CardLogoStyled = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  box-sizing: border-box;\n  position: relative;\n  background-repeat: no-repeat, repeat;\n  background-size: cover;\n  background-position: center;\n  object-fit: cover;\n  height: 86px;\n  width: 86px;\n  min-width: 86px;\n  min-height: 86px;\n  border-radius: 8px;\n  box-shadow: 0px 1px 4px rgba(0,0,0,0.1);\n"])));
+var CardLogo = function CardLogo(props) {
+  var style = {};
+  if (props.bgimage) {
+    style.backgroundImage = "url(".concat(props.bgimage, ")");
+  }
+  if (props.soldOut) {
+    style.filter = 'brightness(70%)';
+  }
+  return /*#__PURE__*/_react.default.createElement(CardLogoStyled, _extends({}, props, {
+    style: style
+  }), props.children);
+};
+exports.CardLogo = CardLogo;
+var CardInfo = _styledComponents.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  ", "\n\n  flex: 1;\n  > div {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    font-size: 16px;\n    font-weight: 600;\n    span.name {\n      overflow: hidden;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n    }\n  }\n  \n  p.date {\n    font-size: 14px;\n    color: ", ";\n    margin: 7px 0;\n    line-height: 24px;\n    display: flex;\n    align-items: center;\n  }\n  p.status {\n    font-size: 14px;\n    line-height: 24px;\n    color: ", ";\n    margin: 0;\n  }\n"])), function (props) {
+  var _props$theme;
+  return (_props$theme = props.theme) !== null && _props$theme !== void 0 && _props$theme.rtl ? (0, _styledComponents.css)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    margin-right: 15px;\n  "]))) : (0, _styledComponents.css)(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n    margin-left: 15px;\n  "])));
+}, function (props) {
+  return props.theme.colors.darkGray;
+}, function (props) {
+  return props.theme.colors.primary;
+});
+exports.CardInfo = CardInfo;