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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ikas/storefront",
-  "version": "4.0.0-alpha.49",
+  "version": "4.0.0-alpha.5",
   "description": "Storefront functionality for ikas storefront themes.",
   "author": "Umut Ozan Yıldırım",
   "license": "ISC",
@@ -24,18 +24,18 @@
     "libphonenumber-js": "^1.10.6"
   },
   "devDependencies": {
-    "@ikas/storefront-api": "^4.0.0-alpha.49",
-    "@ikas/storefront-config": "^4.0.0-alpha.49",
-    "@ikas/storefront-model-functions": "^4.0.0-alpha.49",
-    "@ikas/storefront-models": "^4.0.0-alpha.49",
-    "@ikas/storefront-providers": "^4.0.0-alpha.49",
+    "@ikas/storefront-api": "^4.0.0-alpha.5",
+    "@ikas/storefront-config": "^4.0.0-alpha.5",
+    "@ikas/storefront-model-functions": "^4.0.0-alpha.5",
+    "@ikas/storefront-models": "^4.0.0-alpha.5",
+    "@ikas/storefront-providers": "^4.0.0-alpha.5",
     "@rollup/plugin-commonjs": "^22.0.0",
     "@rollup/plugin-json": "^4.1.0",
     "@rollup/plugin-node-resolve": "^13.3.0",
     "@types/react-phone-number-input": "^3.0.10",
     "mobx": "^6.1.3",
     "mobx-react-lite": "^3.1.5",
-    "next": "12.2.0",
+    "next": "canary",
     "prettier": "^2.2.1",
     "react": "17.0.2",
     "react-dom": "17.0.2",
@@ -52,14 +52,14 @@
     "html-react-parser": "^1.4.0"
   },
   "peerDependencies": {
-    "@ikas/storefront-api": "^4.0.0-alpha.49",
-    "@ikas/storefront-config": "^4.0.0-alpha.49",
-    "@ikas/storefront-model-functions": "^4.0.0-alpha.49",
-    "@ikas/storefront-models": "^4.0.0-alpha.49",
-    "@ikas/storefront-providers": "^4.0.0-alpha.49",
+    "@ikas/storefront-api": "^4.0.0-alpha.5",
+    "@ikas/storefront-config": "^4.0.0-alpha.5",
+    "@ikas/storefront-model-functions": "^4.0.0-alpha.5",
+    "@ikas/storefront-models": "^4.0.0-alpha.5",
+    "@ikas/storefront-providers": "^4.0.0-alpha.5",
     "mobx": "^6.1.3",
     "mobx-react-lite": "^3.1.5",
-    "next": "12.2.0",
+    "next": "canary",
     "react": "17.0.2",
     "react-dom": "17.0.2",
     "lodash": "^4.17.20",

package/src/analytics/analytics.ts

@@ -54,7 +54,6 @@ export class Analytics {
       const customerInfo = await Analytics.getCustomerInfo();
 
       GoogleTagManager.pageView(url);
-      GoogleUniversal.pageView(window.location.pathname);
       IkasAnalytics.pageView(pageType);
 
       tryForEach(Analytics.subscribers, (s) => {
@@ -195,7 +194,7 @@ export class Analytics {
     try {
       localStorage.removeItem(LS_BEGIN_CHECKOUT_KEY);
 
-      FacebookPixel.purchase(checkout, transaction.id || "");
+      FacebookPixel.purchase(checkout, checkout.orderNumber || "");
       GoogleTagManager.purchase(checkout, checkout.orderNumber || "");
       IkasAnalytics.orderSuccess(checkout);
       GoogleAnalytics.purchase(checkout, checkout.orderNumber || "");

package/src/analytics/googleUniversal.ts

@@ -8,23 +8,12 @@ export class GoogleUniversal {
     makeAutoObservable(this);
   }
 
-  static pageView(url: string) {
-    try {
-      if (!isServer && (window as any).ga) {
-        (window as any).ga("set", "page", url);
-        (window as any).ga("send", "pageview");
-      }
-      return;
-    } catch (err) {
-      console.error(err);
-    }
-  }
-
   static productView(productDetail: IkasProduct) {
     try {
       if (!isServer && (window as any).ga) {
         (window as any).ga("ec:addProduct", productToGUItem(productDetail));
         (window as any).ga("ec:setAction", "detail");
+        (window as any).ga("send", "pageview");
       }
       return;
     } catch (err) {
@@ -90,6 +79,7 @@ export class GoogleUniversal {
           shipping: "" + checkout.shippingTotal,
           coupon: checkout.couponCode,
         });
+        (window as any).ga("send", "pageview");
       }
       return;
     } catch (err) {

package/src/analytics/head/index.tsx

@@ -79,7 +79,8 @@ export const AnalyticsHead: React.FC<HeadProps> = observer(({ blockHTML }) => {
             dangerouslySetInnerHTML={{
               __html: `window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
               ga('create', '${universalAnalyticsId}', 'auto');
-              ga('require', 'ec');`,
+              ga('require', 'ec');
+              ga('send', 'pageview');`,
             }}
           />
           <script

package/src/analytics/ikas.ts

@@ -144,18 +144,10 @@ 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: await this.createUUID(),
+        id: Date.now() + "",
         expiry: Date.now() + this.EXPIRY_LENGTH,
       };
 
@@ -175,8 +167,7 @@ export default class IkasAnalytics {
       if (existingSessionIdData) {
         const idWithExpiry = JSON.parse(existingSessionIdData) as IdWithExpiry;
 
-        // Remove old ids so that they can be replaced with UUIDs (length 13 check)
-        if (idWithExpiry.expiry < Date.now() || idWithExpiry.id.length <= 13) {
+        if (idWithExpiry.expiry < Date.now()) {
           await this.createSessionId();
         } else {
           // Extend the duration of the sessionId
@@ -190,30 +181,21 @@ export default class IkasAnalytics {
       } else {
         await this.createSessionId();
       }
-
-      IkasStorefrontConfig.init({
-        sessionId: this.sessionId || "",
-      });
     } catch (err) {
       console.error(err);
     }
   }
 
-  static async checkVisitorId() {
+  static checkVisitorId() {
     try {
       const existingVisitorId = localStorage.getItem(this.VISITOR_ID_KEY);
 
-      // Remove old ids so that they can be replaced with UUIDs (length 13 check)
-      if (existingVisitorId && existingVisitorId.length > 13) {
+      if (existingVisitorId) {
         this.visitorId = existingVisitorId;
       } else {
-        this.visitorId = await this.createUUID();
+        this.visitorId = Date.now() + "";
         localStorage.setItem(this.VISITOR_ID_KEY, this.visitorId);
       }
-
-      IkasStorefrontConfig.init({
-        visitorId: this.visitorId,
-      });
     } catch (err) {
       console.error(err);
     }
@@ -317,7 +299,7 @@ export default class IkasAnalytics {
   static async sendEvents(events: Event[]) {
     try {
       await this.checkSessionId();
-      await this.checkVisitorId();
+      this.checkVisitorId();
 
       const store = IkasBaseStore.getInstance();
       const cloudFrontEvent: CloudFrontEvent = {
@@ -447,7 +429,7 @@ export default class IkasAnalytics {
     };
 
     await this.sendEvents([event]);
-    await this.createSessionId();
+    this.createSessionId();
   }
 
   static async beginCheckout(checkout: IkasCheckout) {

package/src/components/checkout/components/address-form/index.tsx

@@ -315,7 +315,7 @@ const CityInput: React.FC<FormItemProps> = observer(({ vm }) => {
   return (
     <FormItem
       type={FormItemType.TEXT}
-      autocomplete="address-level2"
+      autocomplete="address-level3"
       label={t("checkout-page:city")}
       value={vm.city?.name || ""}
       onChange={vm.onCityInputChange}

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

@@ -169,7 +169,6 @@ 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

@@ -4,11 +4,7 @@ import {
   IkasOrderLineItem,
   IkasProductOptionType,
 } from "../../../../../models";
-import {
-  formatDate,
-  formatCurrency,
-  useTranslation,
-} from "../../../../../utils";
+import { formatDate, formatMoney, useTranslation } from "../../../../../utils";
 import CheckoutViewModel from "../../../../../components/checkout/model";
 import { Modal } from "../../modal";
 
@@ -26,6 +22,18 @@ 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);
@@ -118,10 +126,12 @@ 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.Center}>
+        <div className={styles.Right}>
           <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)
@@ -144,22 +154,25 @@ 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}>
-                {cartItem.formattedOverridenPriceWithQuantity}
+                {!!adjustmentTotal
+                  ? formatMoney(cartItem.finalPriceWithQuantity, currencyCode)
+                  : formatMoney(
+                      cartItem.overridenPriceWithQuantity,
+                      currencyCode
+                    )}
               </span>
             )}
-            {cartItem.formattedFinalPriceWithQuantity}
+            {!!adjustmentTotal
+              ? formatMoney(
+                  cartItem.finalPriceWithQuantity - adjustmentTotal,
+                  currencyCode
+                )
+              : formatMoney(cartItem.finalPriceWithQuantity, currencyCode)}
           </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,47 +5,23 @@
   width: 100%;
   margin-bottom: 24px;
 
-  &:last-child {
-    margin-bottom: 0;
-  }
-
   .ImageContainer {
     flex: 0 0 auto;
-    width: 72px;
+    width: 114px;
+    height: 114px;
     position: relative;
     margin-right: 16px;
-    overflow: visible;
-
-    @media only screen and (max-width: 375px) {
-      width: 56px;
-    }
 
     .Image {
       width: 100%;
-      object-fit: contain;
+      height: 100%;
+      object-fit: cover;
       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;
-    }
   }
 
-  .Center {
+  .Right {
     position: relative;
-    flex: 1 1 auto;
 
     .Name {
       font-size: 16px;
@@ -61,7 +37,12 @@
       -webkit-box-orient: vertical;
     }
 
-    
+    .LightText {
+      font-size: 14px;
+      color: $secondaryTextColor;
+      line-height: 20px;
+      margin-top: 2px;
+    }
 
     .OptionsText {
       font-size: 14px;
@@ -74,39 +55,21 @@
         cursor: pointer;
         text-decoration: underline;
       }
+
     }
   }
 
-  .Right {
-    flex: 0 0 auto;
+  .Price {
+    font-size: 14px;
     display: flex;
-    flex-direction: column;
-    align-items: flex-end;
-
-    .Price {
-      font-size: 14px;
-      display: flex;
-      flex-direction: column;
-      align-items: flex-end;
-      color: $primaryTextColor;
-    }
-
+    align-items: center;
+    color: $primaryTextColor;
+  
     .GrayPrice {
       font-size: 14px;
       color: $secondaryTextColor;
       text-decoration: line-through;
-      // margin-right: 8px;
-    }
-  }
-
-  .LightText {
-    font-size: 14px;
-    color: $secondaryTextColor;
-    line-height: 20px;
-    margin-top: 2px;
-
-    &.Small {
-      font-size: 12px;
+      margin-right: 8px;
     }
   }
 
@@ -115,25 +78,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;
@@ -141,4 +104,4 @@
       margin-right: 4px;
     }
   }
-}
+}

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

@@ -5,7 +5,7 @@ import _sortBy from "lodash/sortBy";
 import InputWithButton from "../input-with-button";
 import NotificationBox from "../notification-box";
 import CheckoutViewModel, { CheckoutStep } from "../../model";
-import { formatCurrency, useTranslation } from "../../../../utils";
+import { formatMoney, useTranslation } from "../../../../utils";
 import { CartItem } from "./cart-item";
 import { FormItem } from "../form-item";
 import { FormItemType } from "../form-item/model";
@@ -95,13 +95,9 @@ export const CartSummary: React.FC<Props> = observer(({ vm, allowExpand }) => {
             <div className={styles.Left}>{t("checkout-page:summary")}</div>
             <div className={styles.Price}>
               <span className={styles.PriceText}>
-                {`${formatCurrency(
-                  vm.finalPrice || 0,
-                  checkout.currencyCode,
-                  checkout.currencySymbol
-                )} (${checkout.items.length} ${t(
-                  "checkout-page:cartItemProduct"
-                )})`}
+                {`${formatMoney(vm.finalPrice || 0, checkout.currencyCode)} (${
+                  checkout.items.length
+                } ${t("checkout-page:cartItemProduct")})`}
               </span>
               <span className={arrowDownClasses}>
                 <SVGArrowDown />
@@ -113,16 +109,15 @@ export const CartSummary: React.FC<Props> = observer(({ vm, allowExpand }) => {
       <div className={cartSummaryClasses}>
         <div className={styles.DetailsContainer} style={detailsContainerStyle}>
           <div className={styles.Details} ref={setDetailsContainer}>
-            <div className={styles.ItemsContainer}>
-              {checkout.items.map((item, index) => (
+            {checkout.items.map((item, index) => (
+              <div key={index}>
                 <CartItem
-                  key={index}
                   vm={vm}
                   cartItem={item}
                   currencyCode={checkout.currencyCode}
                 />
-              ))}
-            </div>
+              </div>
+            ))}
             <div className={styles.Divider} />
             <div className={styles.SubTotalInfo}>
               {hasCouponError && (
@@ -137,7 +132,7 @@ export const CartSummary: React.FC<Props> = observer(({ vm, allowExpand }) => {
               )}
               <InfoRow
                 label={t("checkout-page:subtotal")}
-                value={checkout.formattedTotalPrice}
+                value={formatMoney(checkout.totalPrice, checkout.currencyCode)}
                 tooltipText={t("checkout-page:subtotalTooltip")}
               />
               {!!checkout.shippingLines?.length && (
@@ -145,19 +140,26 @@ export const CartSummary: React.FC<Props> = observer(({ vm, allowExpand }) => {
                   label={t("checkout-page:cartShippingTitle")}
                   value={
                     checkout.shippingTotal
-                      ? checkout.formattedShippingTotal
+                      ? formatMoney(
+                          checkout.shippingTotal,
+                          checkout.currencyCode
+                        )
                       : t("checkout-page:free")
                   }
                 />
               )}
-
+              {!!checkout.totalTax && !!vm.customizationProps?.showTax && (
+                <InfoRow
+                  label={t("checkout-page:cartTaxTitle")}
+                  value={formatMoney(checkout.totalTax, checkout.currencyCode)}
+                />
+              )}
               {!!vm.installmentExtraPrice && (
                 <InfoRow
                   label={t("checkout-page:cartInterest")}
-                  value={formatCurrency(
+                  value={formatMoney(
                     vm.installmentExtraPrice,
-                    checkout.currencyCode,
-                    checkout.currencySymbol
+                    checkout.currencyCode
                   )}
                 />
               )}
@@ -190,23 +192,8 @@ export const CartSummary: React.FC<Props> = observer(({ vm, allowExpand }) => {
               <div className={styles.TitleContainer}>
                 <div className={styles.Title}>{t("checkout-page:total")}</div>
               </div>
-              <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 className={styles.TotalPrice}>
+                {formatMoney(vm.finalPrice || 0, checkout.currencyCode)}
               </div>
             </div>
 
@@ -286,11 +273,7 @@ const Adjustments: React.FC<CommonProps> = observer(({ vm }) => {
             <div className={styles.Value}>
               <span>{adjustment.type === "DECREMENT" ? "- " : ""}</span>{" "}
               <span>
-                {formatCurrency(
-                  adjustment.amount,
-                  vm.checkout.currencyCode,
-                  vm.checkout.currencySymbol
-                )}
+                {formatMoney(adjustment.amount, vm.checkout.currencyCode)}
               </span>
             </div>
           </div>
@@ -321,11 +304,7 @@ const CalculatedAdditionalPrices: React.FC<CommonProps> = observer(({ vm }) => {
               <div className={styles.Value}>
                 <span>{adjustment.type === "DECREMENT" ? "- " : ""}</span>{" "}
                 <span>
-                  {formatCurrency(
-                    adjustment.amount,
-                    vm.checkout!.currencyCode,
-                    vm.checkout!.currencySymbol
-                  )}
+                  {formatMoney(adjustment.amount, vm.checkout!.currencyCode)}
                 </span>
               </div>
             </div>
@@ -339,13 +318,7 @@ const CalculatedAdditionalPrices: React.FC<CommonProps> = observer(({ vm }) => {
             </div>
           </div>
           <div className={styles.Value}>
-            <span>
-              {formatCurrency(
-                gpl.price,
-                vm.checkout.currencyCode,
-                vm.checkout!.currencySymbol
-              )}
-            </span>
+            <span>{formatMoney(gpl.price, vm.checkout.currencyCode)}</span>
           </div>
         </div>
       ))}
@@ -437,11 +410,7 @@ const Coupon: React.FC<CouponProps> = observer(
           <div className={styles.Value}>
             <span>{adjustment?.type === "DECREMENT" ? "- " : ""}</span>{" "}
             <span>
-              {formatCurrency(
-                adjustment?.amount || 0,
-                vm.checkout.currencyCode,
-                vm.checkout.currencySymbol
-              )}
+              {formatMoney(adjustment?.amount || 0, vm.checkout.currencyCode)}
             </span>
           </div>
         )}