@ikas/storefront 4.0.0-alpha.5 → 4.0.0-alpha.50

package/src/components/checkout/model.ts

@@ -12,6 +12,7 @@ import {
   IkasOrderCustomer,
   IkasCartCampaignOfferStatus,
   IkasProduct,
+  IkasProductVariant,
   IkasCartCampaignOffer,
   IkasCheckout,
   IkasStockLocation,
@@ -19,6 +20,7 @@ import {
   IkasTransactionStatus,
   IkasCampaignOfferTargetPageType,
   IkasCampaignOfferProduct,
+  IkasOrderShippingMethod,
 } from "../../models";
 import { IkasOrderAddress } from "../../models/data/order/address";
 import {
@@ -91,8 +93,8 @@ export default class CheckoutViewModel {
 
   stripeResponse: CreateStripePaymentIntentResponse | null = null;
 
-  checkoutCampaignOffer: CampaignOfferType | undefined;
-  postCheckoutCampaignOffer: CampaignOfferType | undefined;
+  checkoutCampaignOffer?: CampaignOfferType;
+  postCheckoutCampaignOffer?: CampaignOfferType;
 
   returnPolicy: string;
   privacyPolicy: string;
@@ -173,6 +175,11 @@ export default class CheckoutViewModel {
         } else {
           return this.changeStep(CheckoutStep.INFO);
         }
+      } else if (
+        this.step === CheckoutStep.SUCCESS &&
+        !this.canProceedToPayment
+      ) {
+        return this.changeStep(CheckoutStep.INFO);
       } else if (
         ![
           CheckoutStep.INFO,
@@ -249,12 +256,6 @@ export default class CheckoutViewModel {
       }
     }
 
-    if (this.step === CheckoutStep.PAYMENT) {
-      if (this.isInStoreDelivery) {
-        this.checkout.billingAddress = new IkasOrderAddress();
-      }
-    }
-
     if (this.step !== CheckoutStep.SUCCESS) {
       if (this.checkout.isComplete) {
         return this.changeStep(CheckoutStep.SUCCESS);
@@ -365,7 +366,9 @@ export default class CheckoutViewModel {
 
   get canProceedToShipping() {
     return (
-      this.checkout.shippingAddress?.isValid &&
+      (this.isDigitalOnly
+        ? this.checkout.billingAddress?.isValid
+        : this.checkout.shippingAddress?.isValid) &&
       this.checkout.hasValidCustomerEmail &&
       this.error?.type !== ErrorType.NO_SHIPPING_ERROR
     );
@@ -431,6 +434,12 @@ export default class CheckoutViewModel {
     );
   }
 
+  get isDigitalOnly() {
+    return (
+      this.checkout.shippingMethod === IkasOrderShippingMethod.DIGITAL_DELIVERY
+    );
+  }
+
   // VALIDATIONS END
 
   saveCart = async () => {
@@ -440,10 +449,18 @@ export default class CheckoutViewModel {
       input = await this.inStockDeliveryInputData(input);
     }
 
-    if (this.step === CheckoutStep.INFO) {
+    if (
+      (this.step === CheckoutStep.INFO ||
+        this.step === CheckoutStep.SHIPPING) &&
+      !this.isDigitalOnly
+    ) {
       input.billingAddress = null;
     }
 
+    if (this.isDigitalOnly) {
+      input.shippingAddress = null;
+    }
+
     const response = await CartStoreAPI.saveCart({ input });
 
     if (response?.graphQLErrors && response.graphQLErrors.length) {
@@ -456,6 +473,7 @@ export default class CheckoutViewModel {
       } else {
         throw {
           type: ErrorType.API_ERROR,
+          data: response.firstErrorMessage,
         };
       }
     }
@@ -510,6 +528,7 @@ export default class CheckoutViewModel {
     if (!checkStocksResponse.isSuccess) {
       throw {
         type: ErrorType.API_ERROR,
+        data: checkStocksResponse.firstErrorMessage,
       };
     }
 
@@ -555,6 +574,7 @@ export default class CheckoutViewModel {
       if (!response.isSuccess || !response.data?.length) {
         this.error = {
           type: ErrorType.API_ERROR,
+          data: response.firstErrorMessage,
         };
         return;
       }
@@ -608,7 +628,7 @@ export default class CheckoutViewModel {
     try {
       await this.checkStocks();
     } catch (err) {
-      if (err.type) {
+      if (typeof err.type !== undefined) {
         this.error = err;
       } else {
         console.log(err);
@@ -632,6 +652,7 @@ export default class CheckoutViewModel {
     ) {
       this.error = {
         type: ErrorType.API_ERROR,
+        data: paymentGatewaysResponse.firstErrorMessage,
       };
       return;
     }
@@ -704,18 +725,29 @@ export default class CheckoutViewModel {
       this.checkout.customer = new IkasOrderCustomer(
         this.store.customerStore.customer as any
       );
-    } else if (!this.checkout.customer)
-      this.checkout.customer = new IkasOrderCustomer({});
+    } else {
+      this.checkout.customer = new IkasOrderCustomer(
+        this.checkout.customer || {}
+      );
+    }
   };
 
   createShippingAddress = () => {
+    if (this.isDigitalOnly) return;
+
     if (!this.checkout.shippingAddress) {
-      const customerAddresses = this.store.customerStore.customer?.addresses;
-      this.onSelectedShippingAddressIdChange(
-        customerAddresses?.length ? customerAddresses[0].id! : "-1"
-      );
+      if (!!this.store.customerStore.customer) {
+        const customerAddresses = this.store.customerStore.customer.addresses;
+        this.onSelectedShippingAddressIdChange(
+          customerAddresses?.length ? customerAddresses[0].id! : "-1"
+        );
+      } else {
+        this.onSelectedShippingAddressIdChange("-1");
+      }
     } else {
-      this.selectedShippingAddressId = this.checkout.shippingAddress.id || "-1";
+      this.checkout.shippingAddress = new IkasOrderAddress(
+        _cloneDeep(this.checkout.shippingAddress) || {}
+      );
       this.checkout.shippingAddress.checkoutSettings = this.checkoutSettings;
     }
   };
@@ -726,25 +758,21 @@ export default class CheckoutViewModel {
         USE_DIFFERENT_ADDRESS_KEY
       );
 
-      if (this.useDifferentAddress) {
-        if (this.checkout.billingAddress) {
-          this.selectedBillingAddressId =
-            this.checkout.billingAddress.id || "-1";
-        }
-        this.checkout.billingAddress =
-          this.checkout.billingAddress || new IkasOrderAddress();
-      } else {
-        if (this.isInStoreDelivery) {
-          this.checkout.billingAddress = new IkasOrderAddress(
-            _cloneDeep(this.checkout.billingAddress) || {}
+      if (!this.checkout.billingAddress) {
+        if (!!this.store.customerStore.customer) {
+          const customerAddresses = this.store.customerStore.customer.addresses;
+          this.onSelectedBillingAddressIdChange(
+            customerAddresses?.length ? customerAddresses[0].id! : "-1"
           );
         } else {
-          this.checkout.billingAddress = new IkasOrderAddress(
-            _cloneDeep(this.checkout.shippingAddress) || {}
-          );
+          this.onSelectedBillingAddressIdChange("-1");
         }
+      } else {
+        this.checkout.billingAddress = new IkasOrderAddress(
+          _cloneDeep(this.checkout.billingAddress) || {}
+        );
+        this.checkout.billingAddress.checkoutSettings = this.checkoutSettings;
       }
-      this.checkout.billingAddress.checkoutSettings = this.checkoutSettings;
     }
   };
 
@@ -759,6 +787,8 @@ export default class CheckoutViewModel {
     const newCart = await this.saveCart();
 
     if (newCart) this.checkout = new IkasCheckout(newCart);
+    if (this.checkout.shippingAddress)
+      this.checkout.shippingAddress.checkoutSettings = this.checkoutSettings;
     this.isChangingShippingMethod = false;
   };
 
@@ -983,6 +1013,9 @@ export default class CheckoutViewModel {
         customer.addresses.push(newAddress);
 
         await this.store.customerStore.saveCustomer(customer);
+        this.store.customerStore.customer.addresses?.forEach(
+          (address) => (address.checkoutSettings = this.checkoutSettings)
+        );
 
         if (type === "shipping") {
           this.checkout.shippingAddress!.id = newAddress.id;
@@ -1035,6 +1068,34 @@ export default class CheckoutViewModel {
       } else {
         this.changeStep(CheckoutStep.PAYMENT);
       }
+    } catch (err) {
+      if (typeof err.type !== undefined) {
+        this.error = err;
+      } else {
+        console.log(err);
+        this.error = {
+          type: ErrorType.UNKNOWN,
+        };
+      }
+      this.isStepLoading = false;
+    }
+  };
+
+  onProceedToDigitalOnlyPaymentClick = async () => {
+    if (!this.canProceedToPayment) {
+      this.isErrorsVisible = true;
+      return;
+    }
+
+    this.isErrorsVisible = false;
+
+    try {
+      this.isStepLoading = true;
+
+      await this.checkStocks();
+      await this.saveCart();
+
+      this.changeStep(CheckoutStep.PAYMENT);
     } catch (err) {
       if (err.type) {
         this.error = err;
@@ -1063,7 +1124,7 @@ export default class CheckoutViewModel {
       this.error = undefined;
       this.changeStep(CheckoutStep.PAYMENT);
     } catch (err) {
-      if (err.type) {
+      if (typeof err.type !== undefined) {
         this.error = err;
       } else {
         console.log(err);
@@ -1105,6 +1166,46 @@ export default class CheckoutViewModel {
         return;
       }
 
+      await this.createSaleTransaction();
+    } catch (err) {
+      if (typeof err.type !== undefined) {
+        this.error = err;
+      } else {
+        this.error = {
+          type: ErrorType.UNKNOWN,
+        };
+      }
+      this.isStepLoading = false;
+    }
+  };
+
+  onCompleteDigitalOnlyPaymentClick = async () => {
+    if (
+      !this.canProceedToPayment ||
+      (this.checkoutSettings.showTermsAndConditionsCheckbox &&
+        !this.isTermsAndConditionsChecked)
+    ) {
+      this.isErrorsVisible = true;
+      return;
+    }
+
+    try {
+      this.isErrorsVisible = false;
+      this.isStepLoading = true;
+
+      await this.checkStocks();
+      await this.saveCart();
+
+      if (this.isCustomFlowStripe) {
+        const stripeFromBtn = document.querySelector("#stripe-form-btn");
+        if (stripeFromBtn) {
+          //@ts-ignore
+          stripeFromBtn.click();
+        }
+
+        return;
+      }
+
       await this.createSaleTransaction();
     } catch (err) {
       if (err.type) {
@@ -1194,6 +1295,7 @@ export default class CheckoutViewModel {
         process.env.NEXT_PUBLIC_BASE_URL + response.data.returnSlug;
     } else {
       throw {
+        data: response.firstErrorMessage,
         type: ErrorType.UNKNOWN,
       };
     }
@@ -1316,32 +1418,25 @@ export default class CheckoutViewModel {
     this.isContactModalVisible = value;
   };
 
-  getWaitingForActionCampaignOffer = (
+  getWaitingForActionCampaignOffers = (
     targetPage: IkasCampaignOfferTargetPageType
   ) => {
-    if (this.checkout.campaignOffers && this.checkout.campaignOffers.length) {
-      const filteredCampaignOffer = this.checkout.campaignOffers.filter(
-        (co) =>
-          co.status === IkasCartCampaignOfferStatus.WAITING_FOR_ACTION &&
-          co.campaignOffer?.targetPageTypes.some((tpt) => tpt === targetPage)
-      );
-
-      if (filteredCampaignOffer.length) {
-        return filteredCampaignOffer[0];
-      }
-    }
+    if (!this.checkout.campaignOffers || !this.checkout.campaignOffers.length)
+      return;
 
-    return null;
+    const filteredCampaignOffers = this.checkout.campaignOffers.filter(
+      (co) =>
+        co.status === IkasCartCampaignOfferStatus.WAITING_FOR_ACTION &&
+        co.campaignOffer?.targetPageTypes.some((tpt) => tpt === targetPage)
+    );
+    return filteredCampaignOffers;
   };
 
   getOffer = (waitingForActionCampaignOffer: IkasCartCampaignOffer) => {
-    if (waitingForActionCampaignOffer.campaignOffer) {
-      return waitingForActionCampaignOffer.campaignOffer.offers.find(
-        (o) => o.id === waitingForActionCampaignOffer.campaignOfferProductId
-      );
-    }
-
-    return null;
+    if (!waitingForActionCampaignOffer.campaignOffer) return null;
+    return waitingForActionCampaignOffer.campaignOffer.offers.find(
+      (o) => o.id === waitingForActionCampaignOffer.campaignOfferProductId
+    );
   };
 
   getProduct = async (productId: string) => {
@@ -1351,61 +1446,88 @@ export default class CheckoutViewModel {
       },
     });
 
-    if (
-      productsResponse.isSuccess &&
-      productsResponse.data &&
-      productsResponse.data.data &&
-      productsResponse.data.data.length
-    ) {
-      const product = productsResponse.data.data[0];
-      const selectedVariant = product.variants.find((v) => v.isActive);
-      const productDetail = new IkasProduct({
-        ...product,
-        selectedVariantValues: (selectedVariant || product.variants[0])
-          .variantValues,
-      });
+    if (!productsResponse.isSuccess || !productsResponse?.data?.data?.length)
+      return null;
+
+    const product = productsResponse.data.data[0];
+    const selectedVariant = product.variants.find((v) => v.isActive);
+    const productDetail = new IkasProduct({
+      ...product,
+      selectedVariantValues: (selectedVariant || product.variants[0])
+        .variantValues,
+    });
+
+    return productDetail;
+  };
+
+  getOfferProductVariants = ({
+    offer,
+    product,
+  }: {
+    offer: IkasCampaignOfferProduct;
+    product: IkasProduct;
+  }) => {
+    const variants: IkasProductVariant[] = [];
+
+    if (offer.excludedVariantIdList?.length) {
+      product.variants.forEach((v) => {
+        const isVariantExcluded = offer!.excludedVariantIdList?.some(
+          (ev) => ev === v.id
+        );
+        if (!v.hasStock || isVariantExcluded) return;
 
-      return productDetail;
+        variants.push(v);
+      });
+    } else {
+      variants.push(...product.variants.filter((v) => v.hasStock));
     }
 
-    return null;
+    return variants;
   };
 
   getCampaignOfferProducts = async (
     targetPage: IkasCampaignOfferTargetPageType
-  ) => {
-    const waitingForActionCampaignOffer =
-      this.getWaitingForActionCampaignOffer(targetPage);
+  ): Promise<CampaignOfferType | undefined> => {
+    const waitingForActionCampaignOffers =
+      this.getWaitingForActionCampaignOffers(targetPage);
 
     if (
-      waitingForActionCampaignOffer &&
-      waitingForActionCampaignOffer.campaignOffer
-    ) {
+      !waitingForActionCampaignOffers ||
+      !waitingForActionCampaignOffers.length
+    )
+      return;
+
+    for (let i = 0; i < waitingForActionCampaignOffers.length; i++) {
+      const waitingForActionCampaignOffer = waitingForActionCampaignOffers[i];
+
       const offer = this.getOffer(waitingForActionCampaignOffer);
+      if (!offer) continue;
 
-      if (offer) {
-        const productDetail = await this.getProduct(offer.productId);
+      const product = await this.getProduct(offer.productId);
+      if (!product) continue;
 
-        if (productDetail) {
-          return {
-            productDetail,
-            campaignOffer: waitingForActionCampaignOffer,
-            offer,
-          };
-        }
-      }
-    }
+      const variants: IkasProductVariant[] = this.getOfferProductVariants({
+        offer,
+        product,
+      });
+      if (!variants.length) continue;
 
-    return undefined;
+      return {
+        product,
+        variants,
+        campaignOffer: waitingForActionCampaignOffer,
+        offer,
+      };
+    }
   };
 
   getCampaignOffer = async () => {
-    this.checkoutCampaignOffer = (await this.getCampaignOfferProducts(
+    this.checkoutCampaignOffer = await this.getCampaignOfferProducts(
       IkasCampaignOfferTargetPageType.CHECKOUT
-    )) as any;
-    this.postCheckoutCampaignOffer = (await this.getCampaignOfferProducts(
+    );
+    this.postCheckoutCampaignOffer = await this.getCampaignOfferProducts(
       IkasCampaignOfferTargetPageType.POST_CHECKOUT
-    )) as any;
+    );
   };
 
   updateCartCampaignOffer = async (props: UpdateCartCampaignOfferInput) => {
@@ -1461,6 +1583,7 @@ export type StockErrorData = {
 
 export type CampaignOfferType = {
   product: IkasProduct;
+  variants: IkasProductVariant[];
   campaignOffer: IkasCartCampaignOffer;
   offer: IkasCampaignOfferProduct;
 };

package/src/components/checkout/modelMasterPass.ts

@@ -6,7 +6,7 @@ import { useTranslation } from "../../utils/i18n";
 import { IkasBaseStore } from "../../store";
 import { IkasCheckout, IkasPaymentGateway } from "../../models";
 import { MasterPassOperationTypeEnum } from "@ikas/storefront-api";
-import { getMasterpassRequestToken } from "@ikas/storefront-api";
+import { getMasterPassRequestToken } from "@ikas/storefront-api";
 import { IkasStorefrontConfig } from "@ikas/storefront-config";
 
 const isServer = typeof localStorage === "undefined";
@@ -437,7 +437,7 @@ export default class MasterPassModel {
     operationType: MasterPassOperationTypeEnum;
     phoneNumber: string;
   }) => {
-    const response = await getMasterpassRequestToken({
+    const response = await getMasterPassRequestToken({
       cartId,
       paymentGatewayId,
       operationType,

package/src/components/checkout/steps/step-info/index.tsx

@@ -31,7 +31,9 @@ const CheckoutStepInfo: React.FC<Props> = ({ vm }) => {
   );
 
   const customerAddressesViewModel = React.useMemo(() => {
-    return new CustomerAddressesViewModel(vm, "shipping");
+    return vm.isDigitalOnly
+      ? new CustomerAddressesViewModel(vm, "billing")
+      : new CustomerAddressesViewModel(vm, "shipping");
   }, [vm]);
 
   return (
@@ -70,12 +72,16 @@ const CheckoutStepInfo: React.FC<Props> = ({ vm }) => {
             marginTop: vm.store.customerStore.customer ? "0px" : "32px",
           }}
           text={
-            vm.deliveryMethod === "address"
+            vm.deliveryMethod === "address" && !vm.isDigitalOnly
               ? t("checkout-page:actions.continueWithShipping")
               : t("checkout-page:actions.continueWithPayment")
           }
           isLoading={vm.isStepLoading}
-          onClick={vm.onProceedToShippingClick}
+          onClick={
+            vm.isDigitalOnly
+              ? vm.onProceedToDigitalOnlyPaymentClick
+              : vm.onProceedToShippingClick
+          }
         />
       )}
     </div>

package/src/components/checkout/steps/step-payment/billing-address/index.tsx

@@ -31,7 +31,7 @@ export const BillingAddress: React.FC<Props> = observer(({ vm }) => {
           marginBottom: vm.useDifferentAddress ? "24px" : "0px",
         }}
       >
-        {vm.deliveryMethod === "address" && (
+        {vm.deliveryMethod === "address" && !vm.isDigitalOnly && (
           <Checkbox
             value={!vm.useDifferentAddress}
             hasError={vm.isErrorsVisible && !vm.isTermsAndConditionsChecked}

package/src/components/checkout/steps/step-payment/index.tsx

@@ -48,7 +48,12 @@ export const CheckoutStepPayment: React.FC<Props> = observer(({ vm }) => {
   const policyLabel = policyInputData.map((p) =>
     p.isVariable ? (
       <span
-        className={styles.TermsLabelSpan}
+        className={[
+          styles.TermsLabelSpan,
+          vm.isErrorsVisible && !vm.isTermsAndConditionsChecked
+            ? styles.Error
+            : "",
+        ].join(" ")}
         onClick={
           p.value === "{{ ackPrivacyPolicy }}"
             ? onShowPrivacyPolicyClick
@@ -88,7 +93,11 @@ export const CheckoutStepPayment: React.FC<Props> = observer(({ vm }) => {
         }}
         text={t("checkout-page:actions.completeOrder")}
         isLoading={vm.isStepLoading}
-        onClick={vm.onCompletePaymentClick}
+        onClick={
+          vm.isDigitalOnly
+            ? vm.onCompleteDigitalOnlyPaymentClick
+            : vm.onCompletePaymentClick
+        }
       />
 
       {!!t("checkout-page:securePaymentTooltip") && (

package/src/components/checkout/steps/step-payment/payment-gateways/index.tsx

@@ -12,15 +12,20 @@ import { CreditCardForm } from "../../../components/credit-card-form";
 import { Installments } from "./installments";
 import SelectBox from "../../../components/select-box";
 import styles from "./style.module.scss";
-import { formatMoney, useTranslation } from "../../../../../utils";
+import { formatCurrency, useTranslation } from "../../../../../utils";
 import SVGExternal from "../../../components/svg/external";
 import SVGMasterCard from "../../../components/master-pass/payment-gateway/svg/master-card";
 import { IkasPaymentGatewayAdditionalPrice } from "../../../../../models/data/payment-gateway/additional-price";
-import { StripeForm } from "../../../components/stripe";
+import dynamic from "next/dynamic";
 import { Card as MasterPassCard } from "../../../modelMasterPass";
 import CreditCardData from "../../../components/credit-card-form/model";
 import CreditCardFormMasterPass from "../../../components/master-pass/credit-card-form";
 
+//@ts-ignore
+const StripeForm = dynamic(() =>
+  import("../../../components/stripe").then((mod) => mod.StripeForm)
+);
+
 type Props = {
   vm: CheckoutViewModel;
 };
@@ -50,7 +55,11 @@ export const PaymentGateways: React.FC<Props> = observer(({ vm }) => {
 
     return `${
       ap.amountType === IkasPaymentGatewayTransactionFeeType.AMOUNT
-        ? formatMoney(ap.amount, vm.checkout.currencyCode)
+        ? formatCurrency(
+            ap.amount,
+            vm.checkout.currencyCode,
+            vm.checkout.currencySymbol
+          )
         : " %" + ap.amount
     }${
       ap.type === IkasPaymentGatewayAdditionalPriceType.DECREMENT

package/src/components/checkout/steps/step-payment/payment-gateways/installments/index.tsx

@@ -2,7 +2,7 @@ import * as React from "react";
 import { observer } from "mobx-react-lite";
 import CheckoutViewModel from "../../../../model";
 
-import { formatMoney, useTranslation } from "../../../../../../utils";
+import { formatCurrency, useTranslation } from "../../../../../../utils";
 import styles from "./style.module.scss";
 import { Toggle } from "../../../../../../components/checkout/components/toggle";
 
@@ -33,17 +33,19 @@ export const Installments: React.FC<Props> = observer(({ vm }) => {
               </div>
               {ip.installmentCount !== 1 && (
                 <div className={styles.InstallmentPrice}>
-                  {formatMoney(
+                  {formatCurrency(
                     ip.installmentPrice!,
                     vm.checkout!.currencyCode,
+                    vm.checkout!.currencySymbol
                   )}
                 </div>
               )}
             </div>
             <div className={styles.Price}>
-              {formatMoney(
+              {formatCurrency(
                 ip.totalPrice!,
                 vm.checkout!.currencyCode,
+                vm.checkout!.currencySymbol
               )}
             </div>
           </div>

package/src/components/checkout/steps/step-payment/style.module.scss

@@ -5,12 +5,17 @@
 
   .TermsLabelSpan {
     color: $primaryTextColor;
+    font-weight: 500;
 
     &:hover {
       text-decoration: underline;
     }
   }
 
+  .Error {
+    color: $errorColor;
+  }
+
   .SecurePaymentContainer {
     width: 100%;
     display: flex;