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

package/src/components/checkout/model.ts

@@ -12,7 +12,6 @@ import {
   IkasOrderCustomer,
   IkasCartCampaignOfferStatus,
   IkasProduct,
-  IkasProductVariant,
   IkasCartCampaignOffer,
   IkasCheckout,
   IkasStockLocation,
@@ -20,7 +19,6 @@ import {
   IkasTransactionStatus,
   IkasCampaignOfferTargetPageType,
   IkasCampaignOfferProduct,
-  IkasOrderShippingMethod,
 } from "../../models";
 import { IkasOrderAddress } from "../../models/data/order/address";
 import {
@@ -93,8 +91,8 @@ export default class CheckoutViewModel {
 
   stripeResponse: CreateStripePaymentIntentResponse | null = null;
 
-  checkoutCampaignOffer?: CampaignOfferType;
-  postCheckoutCampaignOffer?: CampaignOfferType;
+  checkoutCampaignOffer: CampaignOfferType | undefined;
+  postCheckoutCampaignOffer: CampaignOfferType | undefined;
 
   returnPolicy: string;
   privacyPolicy: string;
@@ -175,11 +173,6 @@ 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,
@@ -256,6 +249,12 @@ 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);
@@ -366,9 +365,7 @@ export default class CheckoutViewModel {
 
   get canProceedToShipping() {
     return (
-      (this.isDigitalOnly
-        ? this.checkout.billingAddress?.isValid
-        : this.checkout.shippingAddress?.isValid) &&
+      this.checkout.shippingAddress?.isValid &&
       this.checkout.hasValidCustomerEmail &&
       this.error?.type !== ErrorType.NO_SHIPPING_ERROR
     );
@@ -434,12 +431,6 @@ export default class CheckoutViewModel {
     );
   }
 
-  get isDigitalOnly() {
-    return (
-      this.checkout.shippingMethod === IkasOrderShippingMethod.DIGITAL_DELIVERY
-    );
-  }
-
   // VALIDATIONS END
 
   saveCart = async () => {
@@ -449,18 +440,10 @@ export default class CheckoutViewModel {
       input = await this.inStockDeliveryInputData(input);
     }
 
-    if (
-      (this.step === CheckoutStep.INFO ||
-        this.step === CheckoutStep.SHIPPING) &&
-      !this.isDigitalOnly
-    ) {
+    if (this.step === CheckoutStep.INFO) {
       input.billingAddress = null;
     }
 
-    if (this.isDigitalOnly) {
-      input.shippingAddress = null;
-    }
-
     const response = await CartStoreAPI.saveCart({ input });
 
     if (response?.graphQLErrors && response.graphQLErrors.length) {
@@ -473,7 +456,6 @@ export default class CheckoutViewModel {
       } else {
         throw {
           type: ErrorType.API_ERROR,
-          data: response.firstErrorMessage,
         };
       }
     }
@@ -528,7 +510,6 @@ export default class CheckoutViewModel {
     if (!checkStocksResponse.isSuccess) {
       throw {
         type: ErrorType.API_ERROR,
-        data: checkStocksResponse.firstErrorMessage,
       };
     }
 
@@ -574,7 +555,6 @@ export default class CheckoutViewModel {
       if (!response.isSuccess || !response.data?.length) {
         this.error = {
           type: ErrorType.API_ERROR,
-          data: response.firstErrorMessage,
         };
         return;
       }
@@ -628,7 +608,7 @@ export default class CheckoutViewModel {
     try {
       await this.checkStocks();
     } catch (err) {
-      if (typeof err.type !== undefined) {
+      if (err.type) {
         this.error = err;
       } else {
         console.log(err);
@@ -652,7 +632,6 @@ export default class CheckoutViewModel {
     ) {
       this.error = {
         type: ErrorType.API_ERROR,
-        data: paymentGatewaysResponse.firstErrorMessage,
       };
       return;
     }
@@ -725,29 +704,18 @@ export default class CheckoutViewModel {
       this.checkout.customer = new IkasOrderCustomer(
         this.store.customerStore.customer as any
       );
-    } else {
-      this.checkout.customer = new IkasOrderCustomer(
-        this.checkout.customer || {}
-      );
-    }
+    } else if (!this.checkout.customer)
+      this.checkout.customer = new IkasOrderCustomer({});
   };
 
   createShippingAddress = () => {
-    if (this.isDigitalOnly) return;
-
     if (!this.checkout.shippingAddress) {
-      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.checkout.shippingAddress = new IkasOrderAddress(
-        _cloneDeep(this.checkout.shippingAddress) || {}
+      const customerAddresses = this.store.customerStore.customer?.addresses;
+      this.onSelectedShippingAddressIdChange(
+        customerAddresses?.length ? customerAddresses[0].id! : "-1"
       );
+    } else {
+      this.selectedShippingAddressId = this.checkout.shippingAddress.id || "-1";
       this.checkout.shippingAddress.checkoutSettings = this.checkoutSettings;
     }
   };
@@ -758,21 +726,25 @@ export default class CheckoutViewModel {
         USE_DIFFERENT_ADDRESS_KEY
       );
 
-      if (!this.checkout.billingAddress) {
-        if (!!this.store.customerStore.customer) {
-          const customerAddresses = this.store.customerStore.customer.addresses;
-          this.onSelectedBillingAddressIdChange(
-            customerAddresses?.length ? customerAddresses[0].id! : "-1"
+      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) || {}
           );
         } else {
-          this.onSelectedBillingAddressIdChange("-1");
+          this.checkout.billingAddress = new IkasOrderAddress(
+            _cloneDeep(this.checkout.shippingAddress) || {}
+          );
         }
-      } else {
-        this.checkout.billingAddress = new IkasOrderAddress(
-          _cloneDeep(this.checkout.billingAddress) || {}
-        );
-        this.checkout.billingAddress.checkoutSettings = this.checkoutSettings;
       }
+      this.checkout.billingAddress.checkoutSettings = this.checkoutSettings;
     }
   };
 
@@ -787,8 +759,6 @@ 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;
   };
 
@@ -1013,9 +983,6 @@ 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;
@@ -1068,34 +1035,6 @@ 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;
@@ -1124,7 +1063,7 @@ export default class CheckoutViewModel {
       this.error = undefined;
       this.changeStep(CheckoutStep.PAYMENT);
     } catch (err) {
-      if (typeof err.type !== undefined) {
+      if (err.type) {
         this.error = err;
       } else {
         console.log(err);
@@ -1166,46 +1105,6 @@ 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) {
@@ -1295,7 +1194,6 @@ export default class CheckoutViewModel {
         process.env.NEXT_PUBLIC_BASE_URL + response.data.returnSlug;
     } else {
       throw {
-        data: response.firstErrorMessage,
         type: ErrorType.UNKNOWN,
       };
     }
@@ -1418,25 +1316,32 @@ export default class CheckoutViewModel {
     this.isContactModalVisible = value;
   };
 
-  getWaitingForActionCampaignOffers = (
+  getWaitingForActionCampaignOffer = (
     targetPage: IkasCampaignOfferTargetPageType
   ) => {
-    if (!this.checkout.campaignOffers || !this.checkout.campaignOffers.length)
-      return;
+    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)
+      );
 
-    const filteredCampaignOffers = this.checkout.campaignOffers.filter(
-      (co) =>
-        co.status === IkasCartCampaignOfferStatus.WAITING_FOR_ACTION &&
-        co.campaignOffer?.targetPageTypes.some((tpt) => tpt === targetPage)
-    );
-    return filteredCampaignOffers;
+      if (filteredCampaignOffer.length) {
+        return filteredCampaignOffer[0];
+      }
+    }
+
+    return null;
   };
 
   getOffer = (waitingForActionCampaignOffer: IkasCartCampaignOffer) => {
-    if (!waitingForActionCampaignOffer.campaignOffer) return null;
-    return waitingForActionCampaignOffer.campaignOffer.offers.find(
-      (o) => o.id === waitingForActionCampaignOffer.campaignOfferProductId
-    );
+    if (waitingForActionCampaignOffer.campaignOffer) {
+      return waitingForActionCampaignOffer.campaignOffer.offers.find(
+        (o) => o.id === waitingForActionCampaignOffer.campaignOfferProductId
+      );
+    }
+
+    return null;
   };
 
   getProduct = async (productId: string) => {
@@ -1446,88 +1351,61 @@ export default class CheckoutViewModel {
       },
     });
 
-    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;
-
-        variants.push(v);
+    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,
       });
-    } else {
-      variants.push(...product.variants.filter((v) => v.hasStock));
+
+      return productDetail;
     }
 
-    return variants;
+    return null;
   };
 
   getCampaignOfferProducts = async (
     targetPage: IkasCampaignOfferTargetPageType
-  ): Promise<CampaignOfferType | undefined> => {
-    const waitingForActionCampaignOffers =
-      this.getWaitingForActionCampaignOffers(targetPage);
+  ) => {
+    const waitingForActionCampaignOffer =
+      this.getWaitingForActionCampaignOffer(targetPage);
 
     if (
-      !waitingForActionCampaignOffers ||
-      !waitingForActionCampaignOffers.length
-    )
-      return;
-
-    for (let i = 0; i < waitingForActionCampaignOffers.length; i++) {
-      const waitingForActionCampaignOffer = waitingForActionCampaignOffers[i];
-
+      waitingForActionCampaignOffer &&
+      waitingForActionCampaignOffer.campaignOffer
+    ) {
       const offer = this.getOffer(waitingForActionCampaignOffer);
-      if (!offer) continue;
 
-      const product = await this.getProduct(offer.productId);
-      if (!product) continue;
+      if (offer) {
+        const productDetail = await this.getProduct(offer.productId);
 
-      const variants: IkasProductVariant[] = this.getOfferProductVariants({
-        offer,
-        product,
-      });
-      if (!variants.length) continue;
-
-      return {
-        product,
-        variants,
-        campaignOffer: waitingForActionCampaignOffer,
-        offer,
-      };
+        if (productDetail) {
+          return {
+            productDetail,
+            campaignOffer: waitingForActionCampaignOffer,
+            offer,
+          };
+        }
+      }
     }
+
+    return undefined;
   };
 
   getCampaignOffer = async () => {
-    this.checkoutCampaignOffer = await this.getCampaignOfferProducts(
+    this.checkoutCampaignOffer = (await this.getCampaignOfferProducts(
       IkasCampaignOfferTargetPageType.CHECKOUT
-    );
-    this.postCheckoutCampaignOffer = await this.getCampaignOfferProducts(
+    )) as any;
+    this.postCheckoutCampaignOffer = (await this.getCampaignOfferProducts(
       IkasCampaignOfferTargetPageType.POST_CHECKOUT
-    );
+    )) as any;
   };
 
   updateCartCampaignOffer = async (props: UpdateCartCampaignOfferInput) => {
@@ -1583,7 +1461,6 @@ 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,9 +31,7 @@ const CheckoutStepInfo: React.FC<Props> = ({ vm }) => {
   );
 
   const customerAddressesViewModel = React.useMemo(() => {
-    return vm.isDigitalOnly
-      ? new CustomerAddressesViewModel(vm, "billing")
-      : new CustomerAddressesViewModel(vm, "shipping");
+    return new CustomerAddressesViewModel(vm, "shipping");
   }, [vm]);
 
   return (
@@ -72,16 +70,12 @@ const CheckoutStepInfo: React.FC<Props> = ({ vm }) => {
             marginTop: vm.store.customerStore.customer ? "0px" : "32px",
           }}
           text={
-            vm.deliveryMethod === "address" && !vm.isDigitalOnly
+            vm.deliveryMethod === "address"
               ? t("checkout-page:actions.continueWithShipping")
               : t("checkout-page:actions.continueWithPayment")
           }
           isLoading={vm.isStepLoading}
-          onClick={
-            vm.isDigitalOnly
-              ? vm.onProceedToDigitalOnlyPaymentClick
-              : vm.onProceedToShippingClick
-          }
+          onClick={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.isDigitalOnly && (
+        {vm.deliveryMethod === "address" && (
           <Checkbox
             value={!vm.useDifferentAddress}
             hasError={vm.isErrorsVisible && !vm.isTermsAndConditionsChecked}

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

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

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

@@ -12,20 +12,15 @@ import { CreditCardForm } from "../../../components/credit-card-form";
 import { Installments } from "./installments";
 import SelectBox from "../../../components/select-box";
 import styles from "./style.module.scss";
-import { formatCurrency, useTranslation } from "../../../../../utils";
+import { formatMoney, 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 dynamic from "next/dynamic";
+import { StripeForm } from "../../../components/stripe";
 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;
 };
@@ -55,11 +50,7 @@ export const PaymentGateways: React.FC<Props> = observer(({ vm }) => {
 
     return `${
       ap.amountType === IkasPaymentGatewayTransactionFeeType.AMOUNT
-        ? formatCurrency(
-            ap.amount,
-            vm.checkout.currencyCode,
-            vm.checkout.currencySymbol
-          )
+        ? formatMoney(ap.amount, vm.checkout.currencyCode)
         : " %" + 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 { formatCurrency, useTranslation } from "../../../../../../utils";
+import { formatMoney, useTranslation } from "../../../../../../utils";
 import styles from "./style.module.scss";
 import { Toggle } from "../../../../../../components/checkout/components/toggle";
 
@@ -33,19 +33,17 @@ export const Installments: React.FC<Props> = observer(({ vm }) => {
               </div>
               {ip.installmentCount !== 1 && (
                 <div className={styles.InstallmentPrice}>
-                  {formatCurrency(
+                  {formatMoney(
                     ip.installmentPrice!,
                     vm.checkout!.currencyCode,
-                    vm.checkout!.currencySymbol
                   )}
                 </div>
               )}
             </div>
             <div className={styles.Price}>
-              {formatCurrency(
+              {formatMoney(
                 ip.totalPrice!,
                 vm.checkout!.currencyCode,
-                vm.checkout!.currencySymbol
               )}
             </div>
           </div>

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

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