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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ikas/storefront",
-  "version": "4.0.0-alpha.33",
+  "version": "4.0.0-alpha.35",
   "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.33",
-    "@ikas/storefront-config": "^4.0.0-alpha.33",
-    "@ikas/storefront-model-functions": "^4.0.0-alpha.33",
-    "@ikas/storefront-models": "^4.0.0-alpha.33",
-    "@ikas/storefront-providers": "^4.0.0-alpha.33",
+    "@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",
     "@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.33",
-    "@ikas/storefront-config": "^4.0.0-alpha.33",
-    "@ikas/storefront-model-functions": "^4.0.0-alpha.33",
-    "@ikas/storefront-models": "^4.0.0-alpha.33",
-    "@ikas/storefront-providers": "^4.0.0-alpha.33",
+    "@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",
     "mobx": "^6.1.3",
     "mobx-react-lite": "^3.1.5",
     "next": "12.2.0",

package/src/components/checkout/components/cart-summary/cart-item/style.module.scss

@@ -8,14 +8,12 @@
   .ImageContainer {
     flex: 0 0 auto;
     width: 114px;
-    height: 114px;
     position: relative;
     margin-right: 16px;
 
     .Image {
       width: 100%;
-      height: 100%;
-      object-fit: cover;
+      object-fit: contain;
       border-radius: 8px;
     }
   }
@@ -55,7 +53,6 @@
         cursor: pointer;
         text-decoration: underline;
       }
-
     }
   }
 
@@ -64,7 +61,7 @@
     display: flex;
     align-items: center;
     color: $primaryTextColor;
-  
+
     .GrayPrice {
       font-size: 14px;
       color: $secondaryTextColor;
@@ -78,25 +75,25 @@
     flex-direction: column;
     margin-bottom: 24px;
     max-width: 400px;
-  
+
     .OptionName {
       font-size: 14px;
       color: $primaryTextColor;
       margin-right: 8px;
       font-weight: 500;
     }
-  
+
     .OptionValue {
       font-size: 14px;
       color: $secondaryTextColor;
     }
-  
+
     .OptionsHorContainer {
       display: flex;
       align-items: center;
       flex-wrap: wrap;
     }
-  
+
     .OptionColorValue {
       width: 24px;
       height: 24px;
@@ -104,4 +101,4 @@
       margin-right: 4px;
     }
   }
-}
+}

package/src/components/checkout/components/master-pass/credit-card-form/index.tsx

@@ -132,7 +132,9 @@ const CreditCardFormMasterPass = observer(({ vm }: Props) => {
             <div className={checkoutStyles.RowPB}>
               <FormItem
                 name="masterPassPhoneNumber"
+                autocomplete="tel"
                 type={FormItemType.TEL}
+                currentCountryCode={vm.store.currentCountryCode}
                 disabled={
                   vm.mpVM.isSaveCardToMasterPassPhoneNumberInputDisabled
                 }

package/src/components/checkout/components/offer-product/style.module.scss

@@ -62,7 +62,6 @@
 }
 
 .ImageContainer {
-  height: 136px;
   width: 136px;
   position: relative;
   background-color: #fff;
@@ -73,8 +72,7 @@
 
 .Image {
   width: 100%;
-  height: 100%;
-  object-fit: cover;
+  object-fit: contain;
   border-radius: 8px;
 }
 

package/src/components/checkout/index.tsx

@@ -366,15 +366,16 @@ const Steps: React.FC<CommonProps> = observer(({ vm }) => {
         vm.step === CheckoutStep.PAYMENT ? (
           <div className={styles.AdressStepInfo}>
             <StepSummaryShipping vm={vm} />
-            {vm.checkout.availableShippingMethods &&
-              vm.checkout.availableShippingMethods.length > 1 && (
-                <div
-                  className={styles.EditBtn}
-                  onClick={vm.onBackToShippingClick}
-                >
-                  {t("checkout-page:actions.edit")}
-                </div>
-              )}
+            {((vm.checkout.availableShippingMethods &&
+              vm.checkout.availableShippingMethods.length > 1) ||
+              vm.checkoutSettings.isGiftPackageEnabled) && (
+              <div
+                className={styles.EditBtn}
+                onClick={vm.onBackToShippingClick}
+              >
+                {t("checkout-page:actions.edit")}
+              </div>
+            )}
           </div>
         ) : undefined,
         vm.step === CheckoutStep.PAYMENT ? (

package/src/components/checkout/model.ts

@@ -762,6 +762,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;
   };
 
@@ -986,6 +988,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;

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

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;

package/src/components/page-editor/model.ts

@@ -627,10 +627,7 @@ export default class IkasPageEditorViewModel {
       prop
     );
 
-    if (
-      propValue &&
-      (propValue.linkType || JSON.stringify(propValue)?.includes("linkType"))
-    )
+    if (propValue && JSON.stringify(propValue).includes("href"))
       await this.pageDataProvider.setLinkSlugs();
 
     pageComponentPropValues.propValues[propName] =

package/src/models/data/cart/campaign-offer/index.ts

@@ -3,7 +3,7 @@ import {
   IkasCartCampaignOfferStatus,
   IkasCartCampaignOffer as ICartCampaignOffer,
 } from "@ikas/storefront-models";
-import { makeAutoObservable } from "mobx";
+import { makeAutoObservable, makeObservable, observable } from "mobx";
 import { IkasBaseModel } from "../../base";
 import { IkasCampaignOffer } from "../../campaign-offer";
 
@@ -36,7 +36,18 @@ export class IkasCartCampaignOffer
     this.targetPageTypes = data.targetPageTypes;
     this.triggerSourceOrderLineId = data.triggerSourceOrderLineId;
 
-    makeAutoObservable(this);
+    // makeAutoObservable(this);
+    makeObservable(this, {
+      appliedOrderLineId: observable,
+      campaignOfferId: observable,
+      campaignOffer: observable,
+      campaignOfferProductId: observable,
+      offerEndDate: observable,
+      offerStartDate: observable,
+      status: observable,
+      targetPageTypes: observable,
+      triggerSourceOrderLineId: observable,
+    });
   }
 }
 

package/src/models/data/checkout/index.ts

@@ -20,6 +20,10 @@ export class IkasCheckout extends IkasCart implements ICheckout {
   constructor(data: Partial<IkasCheckoutConstructorData>) {
     super(data);
 
+    this.appliedCouponCode = data.couponCode;
+    this.selectedPaymentGateway = data.selectedPaymentGateway;
+    this.masterPassPaymentGateway = data.masterPassPaymentGateway;
+
     makeObservable(this, {
       appliedCouponCode: observable,
       selectedPaymentGateway: observable,

package/src/models/data/merchant-settings/index.ts

@@ -26,6 +26,9 @@ export class IkasMerchantSettings implements IMerchantSettings {
     this.address = data.address || null;
 
     this.logo = data.logo ? new IkasImage(data.logo) : null;
+    if (!this.logo && this.logoId) {
+      this.logo = new IkasImage({ id: this.logoId, isVideo: false });
+    }
 
     makeAutoObservable(this);
   }

package/src/models/data/order/index.ts

@@ -94,6 +94,8 @@ export class IkasOrder extends IkasBaseModel implements IOrder {
     this.shippingAddress = data.shippingAddress
       ? new IkasOrderAddress(data.shippingAddress)
       : null;
+    this.shippingLines =
+      data.shippingLines?.map((sl) => new IkasOrderShippingLine(sl)) || null;
     this.shippingMethod =
       data.shippingMethod || IkasOrderShippingMethod.SHIPMENT;
     this.status = data.status || IkasOrderStatus.CREATED;

package/src/models/data/order/line-item/index.ts

@@ -71,6 +71,8 @@ export class IkasOrderLineItem extends IkasBaseModel implements IOrderLineItem {
       taxValue: observable,
       variant: observable,
       orderedAt: observable,
+      //@ts-ignore
+      _refundQuantity: observable,
 
       priceWithQuantity: computed,
       formattedPriceWithQuantity: computed,

package/src/models/data/order/line-item/variant/value/index.ts

@@ -16,7 +16,7 @@ export class IkasOrderLineVariantVariantValue
     this.variantTypeId = data.variantTypeId;
     this.variantTypeName = data.variantTypeName || null;
     this.variantValueId = data.variantValueId;
-    this.variantTypeName = data.variantTypeName || null;
+    this.variantValueName = data.variantValueName || null;
 
     makeAutoObservable(this);
   }

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

@@ -160,7 +160,7 @@ export class IkasApplicableProductFilterValue
   resultCount?: number | null;
 
   // Extra
-  private _isSelected: boolean;
+  isSelected: boolean;
 
   constructor(data: IApplicableProductFilterValue) {
     this.id = data.id || "";
@@ -174,7 +174,7 @@ export class IkasApplicableProductFilterValue
         isVideo: false,
       });
 
-    this._isSelected = data.isSelected || false;
+    this.isSelected = data.isSelected || false;
     this.resultCount =
       data.resultCount !== undefined && data.resultCount !== null
         ? data.resultCount
@@ -182,17 +182,6 @@ export class IkasApplicableProductFilterValue
 
     makeAutoObservable(this);
   }
-
-  get isSelected() {
-    return this._isSelected;
-  }
-
-  toJSON() {
-    return {
-      ...this,
-      isSelected: this._isSelected,
-    };
-  }
 }
 
 export class IkasProductFilterValue implements IProductFilterValue {

package/src/models/data/state/index.ts

@@ -1,6 +1,6 @@
 import { IkasBaseModel } from "../base";
 import { IkasState as IState } from "@ikas/storefront-models";
-import { makeAutoObservable } from "mobx";
+import { makeObservable, observable } from "mobx";
 
 export class IkasState extends IkasBaseModel implements IState {
   countryId: string;
@@ -13,6 +13,10 @@ export class IkasState extends IkasBaseModel implements IState {
     this.name = data.name;
     this.stateCode = data.stateCode;
 
-    makeAutoObservable(this);
+    makeObservable(this, {
+      countryId: observable,
+      name: observable,
+      stateCode: observable,
+    });
   }
 }

package/src/store/customer/index.ts

@@ -294,7 +294,7 @@ export class IkasCustomerStore {
     const favoriteProductsResponse =
       await CustomerStoreAPI.listFavoriteProducts();
     if (
-      favoriteProductsResponse.isSuccess ||
+      !favoriteProductsResponse.isSuccess ||
       !favoriteProductsResponse.data?.length
     )
       return [];