@ikas/storefront 4.0.0-alpha.35 → 4.0.0-alpha.36

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ikas/storefront",
-  "version": "4.0.0-alpha.35",
+  "version": "4.0.0-alpha.36",
   "description": "Storefront functionality for ikas storefront themes.",
   "author": "Umut Ozan Yıldırım",
   "license": "ISC",
@@ -24,11 +24,11 @@
     "libphonenumber-js": "^1.10.6"
   },
   "devDependencies": {
-    "@ikas/storefront-api": "^4.0.0-alpha.35",
-    "@ikas/storefront-config": "^4.0.0-alpha.35",
-    "@ikas/storefront-model-functions": "^4.0.0-alpha.35",
-    "@ikas/storefront-models": "^4.0.0-alpha.35",
-    "@ikas/storefront-providers": "^4.0.0-alpha.35",
+    "@ikas/storefront-api": "^4.0.0-alpha.36",
+    "@ikas/storefront-config": "^4.0.0-alpha.36",
+    "@ikas/storefront-model-functions": "^4.0.0-alpha.36",
+    "@ikas/storefront-models": "^4.0.0-alpha.36",
+    "@ikas/storefront-providers": "^4.0.0-alpha.36",
     "@rollup/plugin-commonjs": "^22.0.0",
     "@rollup/plugin-json": "^4.1.0",
     "@rollup/plugin-node-resolve": "^13.3.0",
@@ -52,11 +52,11 @@
     "html-react-parser": "^1.4.0"
   },
   "peerDependencies": {
-    "@ikas/storefront-api": "^4.0.0-alpha.35",
-    "@ikas/storefront-config": "^4.0.0-alpha.35",
-    "@ikas/storefront-model-functions": "^4.0.0-alpha.35",
-    "@ikas/storefront-models": "^4.0.0-alpha.35",
-    "@ikas/storefront-providers": "^4.0.0-alpha.35",
+    "@ikas/storefront-api": "^4.0.0-alpha.36",
+    "@ikas/storefront-config": "^4.0.0-alpha.36",
+    "@ikas/storefront-model-functions": "^4.0.0-alpha.36",
+    "@ikas/storefront-models": "^4.0.0-alpha.36",
+    "@ikas/storefront-providers": "^4.0.0-alpha.36",
     "mobx": "^6.1.3",
     "mobx-react-lite": "^3.1.5",
     "next": "12.2.0",

package/src/analytics/ikas.ts

@@ -144,10 +144,18 @@ export default class IkasAnalytics {
   static sessionId?: string | null;
   static visitorId?: string | null;
 
+  static async createUUID() {
+    const response = await fetch(
+      `${process.env.NEXT_PUBLIC_BASE_URL}/generate-id/1`
+    );
+    const responseJson = await response.json();
+    return responseJson.data[0] as string;
+  }
+
   static async createSessionId() {
     try {
       const idWithExpiry: IdWithExpiry = {
-        id: Date.now() + "",
+        id: await this.createUUID(),
         expiry: Date.now() + this.EXPIRY_LENGTH,
       };
 
@@ -167,7 +175,8 @@ export default class IkasAnalytics {
       if (existingSessionIdData) {
         const idWithExpiry = JSON.parse(existingSessionIdData) as IdWithExpiry;
 
-        if (idWithExpiry.expiry < Date.now()) {
+        // Remove old ids so that they can be replaced with UUIDs (length 13 check)
+        if (idWithExpiry.expiry < Date.now() || idWithExpiry.id.length <= 13) {
           await this.createSessionId();
         } else {
           // Extend the duration of the sessionId
@@ -190,14 +199,15 @@ export default class IkasAnalytics {
     }
   }
 
-  static checkVisitorId() {
+  static async checkVisitorId() {
     try {
       const existingVisitorId = localStorage.getItem(this.VISITOR_ID_KEY);
 
-      if (existingVisitorId) {
+      // Remove old ids so that they can be replaced with UUIDs (length 13 check)
+      if (existingVisitorId && existingVisitorId.length > 13) {
         this.visitorId = existingVisitorId;
       } else {
-        this.visitorId = Date.now() + "";
+        this.visitorId = await this.createUUID();
         localStorage.setItem(this.VISITOR_ID_KEY, this.visitorId);
       }
 

package/src/components/checkout/components/customer-addresses/index.tsx

@@ -143,7 +143,9 @@ const CustomerAddresses: React.FC<Props> = ({ vm }) => {
 
       {!!vm.vm.store.customerStore.customer &&
         !vm.editingCustomerAddress &&
-        vm.vm.deliveryMethod === "address" && (
+        (vm.vm.deliveryMethod === "address" ||
+          (vm.vm.step === CheckoutStep.PAYMENT &&
+            vm.vm.deliveryMethod === "in-store")) && (
           <div className={checkoutStyles.RowPB}>
             {vm.vm.store.customerStore.customer.addresses?.map((address) => (
               <SelectBox
@@ -183,7 +185,9 @@ const CustomerAddresses: React.FC<Props> = ({ vm }) => {
       vm.vm.step === CheckoutStep.INFO &&
       vm.vm.deliveryMethod === "address"
         ? addressForm
-        : vm.vm.step === CheckoutStep.PAYMENT && addressForm}
+        : vm.vm.step === CheckoutStep.PAYMENT &&
+          !vm.vm.store.customerStore.customer &&
+          addressForm}
 
       {vm.vm.deliveryMethod === "in-store" && (
         <div className={checkoutStyles.RowPB}>

package/src/components/checkout/components/offer-product/index.tsx

@@ -18,7 +18,7 @@ type Props = {
 const OfferProduct: React.FC<Props> = ({ vm, campaignOffer }) => {
   const { t } = useTranslation();
   const [selectedVariant, setSelectedVariant] =
-    React.useState<IkasProductVariant>(campaignOffer!.product.selectedVariant);
+    React.useState<IkasProductVariant>(campaignOffer.variants[0]);
 
   const acceptOffer = () => {
     vm.updateCartCampaignOffer({
@@ -43,7 +43,7 @@ const OfferProduct: React.FC<Props> = ({ vm, campaignOffer }) => {
   };
 
   const onVariantChange = (value: string) => {
-    const variant = campaignOffer.product.variants.find((v) => v.id === value);
+    const variant = campaignOffer.variants.find((v) => v.id === value);
 
     if (variant) {
       setSelectedVariant(variant);
@@ -105,26 +105,22 @@ const OfferProduct: React.FC<Props> = ({ vm, campaignOffer }) => {
               )}
             </div>
             <div className={styles.Actions}>
-              {campaignOffer.product.hasVariant &&
-                campaignOffer.product.hasStock && (
-                  <Select
-                    value={selectedVariant.id}
-                    onSelectChange={onVariantChange}
-                    options={campaignOffer.product.variants
-                      .filter((v) => v.hasStock)
-                      .map((v) => ({
-                        label: v.variantValues.map((vv) => vv.name).join(", "),
-                        value: v.id,
-                      }))}
-                  />
-                )}
+              {campaignOffer.variants.length > 1 && (
+                <Select
+                  value={selectedVariant.id}
+                  onSelectChange={onVariantChange}
+                  options={campaignOffer.variants.map((v) => ({
+                    label: v.variantValues.map((vv) => vv.name).join(", "),
+                    value: v.id,
+                  }))}
+                />
+              )}
               <Button
                 style={{
                   width: "100%",
                   height: 44,
                   fontSize: 14,
                 }}
-                isDisabled={!campaignOffer.product.hasStock}
                 text={t("checkout-page:actions.addToCart")}
                 onClick={acceptOffer}
               />

package/src/components/checkout/model.ts

@@ -12,6 +12,7 @@ import {
   IkasOrderCustomer,
   IkasCartCampaignOfferStatus,
   IkasProduct,
+  IkasProductVariant,
   IkasCartCampaignOffer,
   IkasCheckout,
   IkasStockLocation,
@@ -91,8 +92,8 @@ export default class CheckoutViewModel {
 
   stripeResponse: CreateStripePaymentIntentResponse | null = null;
 
-  checkoutCampaignOffer: CampaignOfferType | undefined;
-  postCheckoutCampaignOffer: CampaignOfferType | undefined;
+  checkoutCampaignOffer?: CampaignOfferType;
+  postCheckoutCampaignOffer?: CampaignOfferType;
 
   returnPolicy: string;
   privacyPolicy: string;
@@ -252,6 +253,9 @@ export default class CheckoutViewModel {
     if (this.step === CheckoutStep.PAYMENT) {
       if (this.isInStoreDelivery) {
         this.checkout.billingAddress = new IkasOrderAddress();
+        if (this.checkoutSettings) {
+          this.checkout.billingAddress.checkoutSettings = this.checkoutSettings;
+        }
       }
     }
 
@@ -737,7 +741,7 @@ export default class CheckoutViewModel {
         this.checkout.billingAddress =
           this.checkout.billingAddress || new IkasOrderAddress();
       } else {
-        if (this.isInStoreDelivery) {
+        if (this.isInStoreDelivery || this.checkout.billingAddress) {
           this.checkout.billingAddress = new IkasOrderAddress(
             _cloneDeep(this.checkout.billingAddress) || {}
           );
@@ -747,6 +751,7 @@ export default class CheckoutViewModel {
           );
         }
       }
+
       this.checkout.billingAddress.checkoutSettings = this.checkoutSettings;
     }
   };
@@ -1324,32 +1329,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) => {
@@ -1359,61 +1357,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) => {
@@ -1469,6 +1494,7 @@ export type StockErrorData = {
 
 export type CampaignOfferType = {
   product: IkasProduct;
+  variants: IkasProductVariant[];
   campaignOffer: IkasCartCampaignOffer;
   offer: IkasCampaignOfferProduct;
 };

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

@@ -16,11 +16,16 @@ 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;
 };

package/src/models/data/category/path-item/index.ts

@@ -3,6 +3,8 @@ import { IkasBaseModel } from "../../base";
 import { IkasCategoryPathItem as ICategoryPathItem } from "@ikas/storefront-models";
 import { computed, makeObservable, observable } from "mobx";
 import { IkasCategoryPathItemFunctions } from "@ikas/storefront-model-functions";
+import { IkasCategoryTranslation } from "../translations";
+import { IkasStorefrontConfig } from "@ikas/storefront-config";
 
 export class IkasCategoryPathItem
   extends IkasBaseModel
@@ -12,6 +14,7 @@ export class IkasCategoryPathItem
   description: string | null;
   imageId: string | null;
   name: string;
+  translations?: IkasCategoryTranslation[] | null = null;
 
   constructor(data: ICategoryPathItem) {
     super(data);
@@ -20,6 +23,7 @@ export class IkasCategoryPathItem
     this.description = data.description || null;
     this.imageId = data.imageId || null;
     this.name = data.name;
+    this.translations = data.translations || null;
 
     makeObservable(this, {
       metaData: observable,

package/src/models/data/product/filter/index.ts

@@ -205,12 +205,14 @@ export class IkasProductFilterSettings implements IProductFilterSettings {
   showCollapsedOnDesktop: boolean;
   showCollapsedOnMobile: boolean;
   sortType: IkasProductFilterSortType;
+  customSortedValues: string[] | null;
 
   constructor(data: Partial<IkasProductFilterSettings>) {
     this.useAndFilter = data.useAndFilter || false;
     this.showCollapsedOnDesktop = data.showCollapsedOnDesktop || false;
     this.showCollapsedOnMobile = data.showCollapsedOnMobile || false;
     this.sortType = data.sortType || IkasProductFilterSortType.ALPHABETICAL_ASC;
+    this.customSortedValues = data.customSortedValues || null;
 
     makeAutoObservable(this);
   }

package/src/utils/constants.ts

@@ -1,2 +1,2 @@
-export const FREE_TEXT_CITY_COUNTRY_LIST = ["DE", "US"];
+export const FREE_TEXT_CITY_COUNTRY_LIST = ["DE", "US", "AT"];
 export const DISTRICT_HIDDEN_COUNTRY_LIST = ["US"];