@ikas/storefront 4.0.0-alpha.43 → 4.0.0-alpha.45

package/package.json

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

package/src/components/checkout/components/address-form/model.ts

@@ -169,6 +169,7 @@ export default class AddressFormViewModel {
         id: this.allowedCountryIds?.length
           ? { in: this.allowedCountryIds }
           : undefined,
+        locale: IkasStorefrontConfig.getCurrentLocale(),
       });
       let countries = response.data || [];
 

package/src/components/checkout/components/button/style.module.scss

@@ -39,7 +39,7 @@
   }
 
   &.FullWidthMobile {
-    @media only screen and(max-width: $breakpoint) {
+    @media only screen and (max-width: $breakpoint) {
       width: 100%;
     }
   }
@@ -100,4 +100,4 @@
     }
   }
 
-}
+}

package/src/components/checkout/components/cart-summary/cart-item/index.tsx

@@ -26,18 +26,6 @@ export const CartItem: React.FC<Props> = observer(
     const [isOptionsModalVisible, setOptionsModalVisible] =
       React.useState(false);
 
-    const adjustmentAmounts = vm.checkout.orderAdjustments?.map(
-      (a) =>
-        a.appliedOrderLines
-          ?.filter((aol) => aol.orderLineId === cartItem.id)
-          .reduce((total, current) => total + (current.amount || 0), 0) || 0
-    );
-
-    const adjustmentTotal = adjustmentAmounts?.reduce(
-      (total, current) => total + current,
-      0
-    );
-
     const formatDateTheme = (val: string) => {
       const date = formatDate(new Date(val)).split(" ");
       date.splice(-1);
@@ -130,12 +118,10 @@ export const CartItem: React.FC<Props> = observer(
             className={styles.Image}
             src={cartItem.variant.mainImage?.thumbnailSrc}
           />
+          <div className={styles.QuantityCircle}>{cartItem.quantity}</div>
         </div>
-        <div className={styles.Right}>
+        <div className={styles.Center}>
           <div className={styles.Name}>{cartItem.variant.name}</div>
-          <div className={styles.LightText}>
-            {`${t("checkout-page:quantity")}: ` + cartItem.quantity}
-          </div>
           <div className={styles.LightText}>
             {cartItem.variant.variantValues
               ?.map((vv) => vv.variantValueName)
@@ -158,23 +144,22 @@ export const CartItem: React.FC<Props> = observer(
               onClose={() => setOptionsModalVisible(false)}
             />
           )}
+        </div>
 
+        <div className={styles.Right}>
           <div className={styles.Price}>
             {!!cartItem.overridenPriceWithQuantity && (
               <span className={styles.GrayPrice}>
-                {!!adjustmentTotal
-                  ? cartItem.formattedFinalPriceWithQuantity
-                  : cartItem.formattedOverridenPriceWithQuantity}
+                {cartItem.formattedOverridenPriceWithQuantity}
               </span>
             )}
-            {!!adjustmentTotal
-              ? formatCurrency(
-                  cartItem.finalPriceWithQuantity - adjustmentTotal,
-                  currencyCode,
-                  cartItem.currencySymbol
-                )
-              : cartItem.formattedFinalPriceWithQuantity}
+            {cartItem.formattedFinalPriceWithQuantity}
           </div>
+          {cartItem.unitPriceText && (
+            <div className={[styles.LightText, styles.Small].join(" ")}>
+              {cartItem.unitPriceText}
+            </div>
+          )}
         </div>
       </div>
     );

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

@@ -5,21 +5,47 @@
   width: 100%;
   margin-bottom: 24px;
 
+  &:last-child {
+    margin-bottom: 0;
+  }
+
   .ImageContainer {
     flex: 0 0 auto;
-    width: 114px;
+    width: 72px;
     position: relative;
     margin-right: 16px;
+    overflow: visible;
+
+    @media only screen and (max-width: 375px) {
+      width: 56px;
+    }
 
     .Image {
       width: 100%;
       object-fit: contain;
       border-radius: 8px;
     }
+
+    .QuantityCircle { 
+      width: 20px;
+      height: 20px;
+      border-radius: 10px;
+      background-color: $buttonBgColor;
+      color: $buttonTextColor;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      font-size: 12px;
+      font-weight: 500;
+      position: absolute;
+      top: -10px;
+      right: -10px;
+    }
   }
 
-  .Right {
+  .Center {
     position: relative;
+    flex: 1 1 auto;
 
     .Name {
       font-size: 16px;
@@ -35,12 +61,7 @@
       -webkit-box-orient: vertical;
     }
 
-    .LightText {
-      font-size: 14px;
-      color: $secondaryTextColor;
-      line-height: 20px;
-      margin-top: 2px;
-    }
+    
 
     .OptionsText {
       font-size: 14px;
@@ -56,17 +77,36 @@
     }
   }
 
-  .Price {
-    font-size: 14px;
+  .Right {
+    flex: 0 0 auto;
     display: flex;
-    align-items: center;
-    color: $primaryTextColor;
+    flex-direction: column;
+    align-items: flex-end;
+
+    .Price {
+      font-size: 14px;
+      display: flex;
+      flex-direction: column;
+      align-items: flex-end;
+      color: $primaryTextColor;
+    }
 
     .GrayPrice {
       font-size: 14px;
       color: $secondaryTextColor;
       text-decoration: line-through;
-      margin-right: 8px;
+      // margin-right: 8px;
+    }
+  }
+
+  .LightText {
+    font-size: 14px;
+    color: $secondaryTextColor;
+    line-height: 20px;
+    margin-top: 2px;
+
+    &.Small {
+      font-size: 12px;
     }
   }
 

package/src/components/checkout/components/cart-summary/index.tsx

@@ -113,15 +113,16 @@ export const CartSummary: React.FC<Props> = observer(({ vm, allowExpand }) => {
       <div className={cartSummaryClasses}>
         <div className={styles.DetailsContainer} style={detailsContainerStyle}>
           <div className={styles.Details} ref={setDetailsContainer}>
-            {checkout.items.map((item, index) => (
-              <div key={index}>
+            <div className={styles.ItemsContainer}>
+              {checkout.items.map((item, index) => (
                 <CartItem
+                  key={index}
                   vm={vm}
                   cartItem={item}
                   currencyCode={checkout.currencyCode}
                 />
-              </div>
-            ))}
+              ))}
+            </div>
             <div className={styles.Divider} />
             <div className={styles.SubTotalInfo}>
               {hasCouponError && (
@@ -149,12 +150,7 @@ export const CartSummary: React.FC<Props> = observer(({ vm, allowExpand }) => {
                   }
                 />
               )}
-              {!!checkout.totalTax && !!vm.customizationProps?.showTax && (
-                <InfoRow
-                  label={t("checkout-page:cartTaxTitle")}
-                  value={checkout.formattedTotalTax}
-                />
-              )}
+
               {!!vm.installmentExtraPrice && (
                 <InfoRow
                   label={t("checkout-page:cartInterest")}
@@ -194,12 +190,23 @@ export const CartSummary: React.FC<Props> = observer(({ vm, allowExpand }) => {
               <div className={styles.TitleContainer}>
                 <div className={styles.Title}>{t("checkout-page:total")}</div>
               </div>
-              <div className={styles.TotalPrice}>
-                {formatCurrency(
-                  vm.finalPrice || 0,
-                  checkout.currencyCode,
-                  checkout.currencySymbol
-                )}
+              <div>
+                <div className={styles.TotalPricesContainer}>
+                  <div className={styles.TotalPrice}>
+                    {formatCurrency(
+                      vm.finalPrice || 0,
+                      checkout.currencyCode,
+                      checkout.currencySymbol
+                    )}
+                  </div>
+                  {!!checkout.$totalTax && !!vm.customizationProps?.showTax && (
+                    <div className={[styles.TotalTax].join(" ")}>
+                      {t("checkout-page:cartTaxTitle") +
+                        " " +
+                        checkout.$formattedTotalTax}
+                    </div>
+                  )}
+                </div>
               </div>
             </div>
 

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

@@ -56,12 +56,45 @@
     background-color: $cardBgColor;
   }
 
-  .HideOnDesktop {
+  &.HideOnDesktop {
     @media only screen and (min-width: $breakpoint) {
       display: none;
     }
   }
 
+  .ItemsContainer {
+    max-height: 320px;
+    overflow-y: auto;
+    padding-top: 10px;
+    margin-bottom: 24px;
+
+    @media only screen and (max-width: $breakpoint) {
+      max-height: unset;
+    }
+
+    &::-webkit-scrollbar {
+      width: 10px;
+    }
+
+    /* Track */
+    &::-webkit-scrollbar-track {
+      box-shadow: inset 0 0 10px 10px #E3E7EF;
+      border: solid 3px transparent;
+    }
+
+    /* Handle */
+    &::-webkit-scrollbar-thumb {
+      box-shadow: inset 0 0 10px 10px #000000;
+      border: solid 3px transparent;
+    }
+
+    // /* Handle on hover */
+    // &::-webkit-scrollbar-thumb:hover {
+    //   box-shadow: inset 0 0 10px 10px #000000;
+    //   border: solid 3px transparent;
+    // }
+  }
+
   .DetailsContainer {
     overflow: hidden;
     width: 100%;
@@ -75,6 +108,7 @@
 
   .Details {
     overflow: hidden;
+    padding-top: 10px;
 
     @media only screen and (max-width: $breakpoint) {
       padding-top: $mobileHorizontalPadding;
@@ -141,7 +175,7 @@
   .TotalContainer {
     display: flex;
     justify-content: space-between;
-    align-items: center;
+    // align-items: center;
     margin-top: 12px;
 
     .TitleContainer {
@@ -151,14 +185,25 @@
       }
     }
 
+    .TotalPricesContainer {
+      display: flex;
+      flex-direction: column;
+      align-items: flex-end;
+    }
+
     .TotalPrice {
       font-size: 20px;
       font-weight: 600;
     }
 
+    .TotalTax {
+      font-size: 14px;
+      line-height: 24px;
+      color: $secondaryTextColor;
+    }
+
     @media only screen and (max-width: $breakpoint) {
       height: 64px;
-      margin-top: 0px;
     }
   }
 

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

@@ -87,6 +87,7 @@ const CustomerAddresses: React.FC<Props> = ({ vm }) => {
   return (
     <React.Fragment>
       {!!IkasStorefrontConfig.getPickupStockLocationIds() &&
+        !vm.vm.isDigitalOnly &&
         vm.vm.availableStockLocations.length > 0 &&
         vm.vm.step !== CheckoutStep.PAYMENT && (
           <>

package/src/components/checkout/components/customer-addresses/model.ts

@@ -54,9 +54,10 @@ export default class CustomerAddressesViewModel {
   };
 
   onDeleteAddressClick = async () => {
-    const addressIndex = this.vm.store.customerStore.customer?.addresses?.findIndex(
-      (a) => a.id === this.editingCustomerAddress?.id
-    );
+    const addressIndex =
+      this.vm.store.customerStore.customer?.addresses?.findIndex(
+        (a) => a.id === this.editingCustomerAddress?.id
+      );
 
     if (addressIndex !== -1 && addressIndex !== undefined) {
       const customer = _cloneDeep(this.vm.store.customerStore.customer)!;
@@ -86,9 +87,10 @@ export default class CustomerAddressesViewModel {
       return;
     }
 
-    const addressIndex = this.vm.store.customerStore.customer?.addresses?.findIndex(
-      (a) => a.id === this.editingCustomerAddress?.id
-    );
+    const addressIndex =
+      this.vm.store.customerStore.customer?.addresses?.findIndex(
+        (a) => a.id === this.editingCustomerAddress?.id
+      );
 
     if (addressIndex !== -1 && addressIndex !== undefined) {
       const customer = _cloneDeep(this.vm.store.customerStore.customer)!;
@@ -113,13 +115,19 @@ export default class CustomerAddressesViewModel {
   };
 
   firstNameChangeCallback = (value: string) => {
-    if (!this.vm.checkout.hasCustomer && this.addressType === "shipping") {
+    if (
+      (!this.vm.checkout.hasCustomer && this.addressType === "shipping") ||
+      this.vm.isDigitalOnly
+    ) {
       this.vm.checkout.customer!.firstName = value;
     }
   };
 
   lastNameChangeCallback = (value: string) => {
-    if (!this.vm.checkout.hasCustomer && this.addressType === "shipping") {
+    if (
+      (!this.vm.checkout.hasCustomer && this.addressType === "shipping") ||
+      this.vm.isDigitalOnly
+    ) {
       this.vm.checkout.customer!.lastName = value;
     }
   };

package/src/components/checkout/components/error/index.tsx

@@ -31,7 +31,7 @@ const Errors: React.FC<CommonProps> = ({ vm }) => {
       break;
     case ErrorType.API_ERROR:
     case ErrorType.UNKNOWN:
-      error = <UnknownError onClose={onErrorClose} />;
+      error = <UnknownError error={vm.error} onClose={onErrorClose} />;
       break;
 
     default:

package/src/components/checkout/components/error/unknown-error/index.tsx

@@ -2,17 +2,19 @@ import * as React from "react";
 import { observer } from "mobx-react-lite";
 import NotificationBox from "../../notification-box";
 import { useTranslation } from "../../../../../utils";
+import { CheckoutError } from "../../../model";
 
 type Props = {
+  error?: CheckoutError | null;
   onClose: () => void;
 };
 
-export const UnknownError: React.FC<Props> = observer(({ onClose }) => {
+export const UnknownError: React.FC<Props> = observer(({ error, onClose }) => {
   const { t } = useTranslation();
   return (
     <NotificationBox
       type="error"
-      content={<div>{t("checkout-page:errorUnknown")}</div>}
+      content={<div>{error?.data || t("checkout-page:errorUnknown")}</div>}
       onClose={onClose}
     />
   );

package/src/components/checkout/index.tsx

@@ -355,7 +355,7 @@ const Steps: React.FC<CommonProps> = observer(({ vm }) => {
     ),
   ];
 
-  if (vm.deliveryMethod === "address") {
+  if (vm.deliveryMethod === "address" && !vm.isDigitalOnly) {
     steps.splice(
       1,
       0,
@@ -393,10 +393,13 @@ const Steps: React.FC<CommonProps> = observer(({ vm }) => {
 const StepSummaryAddress: React.FC<CommonProps> = observer(({ vm }) => {
   const { t } = useTranslation();
 
-  const customerName =
-    (vm.checkout.shippingAddress?.firstName || "") +
-    " " +
-    (vm.checkout.shippingAddress?.lastName || "");
+  const customerName = vm.isDigitalOnly
+    ? (vm.checkout.billingAddress?.firstName || "") +
+      " " +
+      (vm.checkout.billingAddress?.lastName || "")
+    : (vm.checkout.shippingAddress?.firstName || "") +
+      " " +
+      (vm.checkout.shippingAddress?.lastName || "");
 
   return (
     <div className={styles.Address}>
@@ -415,7 +418,9 @@ const StepSummaryAddress: React.FC<CommonProps> = observer(({ vm }) => {
       )}
 
       <div className={[styles.Text, styles.Gray].join(" ")}>
-        {vm.checkout.shippingAddress?.phone}
+        {vm.isDigitalOnly
+          ? vm.checkout.billingAddress?.phone
+          : vm.checkout.shippingAddress?.phone}
       </div>
 
       {vm.deliveryMethod === "in-store" && (
@@ -426,7 +431,9 @@ const StepSummaryAddress: React.FC<CommonProps> = observer(({ vm }) => {
         </>
       )}
       <div className={[styles.Text, styles.Gray].join(" ")}>
-        {vm.checkout.shippingAddress?.addressText}
+        {vm.isDigitalOnly
+          ? vm.checkout.billingAddress?.addressText
+          : vm.checkout.shippingAddress?.addressText}
       </div>
     </div>
   );