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

package/package.json

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

package/src/analytics/analytics.ts

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

package/src/analytics/googleUniversal.ts

@@ -8,12 +8,23 @@ 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) {
@@ -79,7 +90,6 @@ 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,8 +79,7 @@ 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('send', 'pageview');`,
+              ga('require', 'ec');`,
             }}
           />
           <script

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
@@ -181,21 +190,30 @@ export default class IkasAnalytics {
       } else {
         await this.createSessionId();
       }
+
+      IkasStorefrontConfig.init({
+        sessionId: this.sessionId || "",
+      });
     } catch (err) {
       console.error(err);
     }
   }
 
-  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);
       }
+
+      IkasStorefrontConfig.init({
+        visitorId: this.visitorId,
+      });
     } catch (err) {
       console.error(err);
     }
@@ -299,7 +317,7 @@ export default class IkasAnalytics {
   static async sendEvents(events: Event[]) {
     try {
       await this.checkSessionId();
-      this.checkVisitorId();
+      await this.checkVisitorId();
 
       const store = IkasBaseStore.getInstance();
       const cloudFrontEvent: CloudFrontEvent = {
@@ -429,7 +447,7 @@ export default class IkasAnalytics {
     };
 
     await this.sendEvents([event]);
-    this.createSessionId();
+    await 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-level3"
+      autocomplete="address-level2"
       label={t("checkout-page:city")}
       value={vm.city?.name || ""}
       onChange={vm.onCityInputChange}

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

@@ -4,7 +4,11 @@ import {
   IkasOrderLineItem,
   IkasProductOptionType,
 } from "../../../../../models";
-import { formatDate, formatMoney, useTranslation } from "../../../../../utils";
+import {
+  formatDate,
+  formatCurrency,
+  useTranslation,
+} from "../../../../../utils";
 import CheckoutViewModel from "../../../../../components/checkout/model";
 import { Modal } from "../../modal";
 
@@ -22,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);
@@ -126,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)
@@ -154,25 +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
-                  ? formatMoney(cartItem.finalPriceWithQuantity, currencyCode)
-                  : formatMoney(
-                      cartItem.overridenPriceWithQuantity,
-                      currencyCode
-                    )}
+                {cartItem.formattedOverridenPriceWithQuantity}
               </span>
             )}
-            {!!adjustmentTotal
-              ? formatMoney(
-                  cartItem.finalPriceWithQuantity - adjustmentTotal,
-                  currencyCode
-                )
-              : formatMoney(cartItem.finalPriceWithQuantity, currencyCode)}
+            {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,23 +5,47 @@
   width: 100%;
   margin-bottom: 24px;
 
+  &:last-child {
+    margin-bottom: 0;
+  }
+
   .ImageContainer {
     flex: 0 0 auto;
-    width: 114px;
-    height: 114px;
+    width: 72px;
     position: relative;
     margin-right: 16px;
+    overflow: visible;
+
+    @media only screen and (max-width: 375px) {
+      width: 56px;
+    }
 
     .Image {
       width: 100%;
-      height: 100%;
-      object-fit: cover;
+      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;
@@ -37,12 +61,7 @@
       -webkit-box-orient: vertical;
     }
 
-    .LightText {
-      font-size: 14px;
-      color: $secondaryTextColor;
-      line-height: 20px;
-      margin-top: 2px;
-    }
+    
 
     .OptionsText {
       font-size: 14px;
@@ -55,21 +74,39 @@
         cursor: pointer;
         text-decoration: underline;
       }
-
     }
   }
 
-  .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;
     }
   }
 
@@ -78,25 +115,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 +141,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 { formatMoney, useTranslation } from "../../../../utils";
+import { formatCurrency, useTranslation } from "../../../../utils";
 import { CartItem } from "./cart-item";
 import { FormItem } from "../form-item";
 import { FormItemType } from "../form-item/model";
@@ -95,9 +95,13 @@ 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}>
-                {`${formatMoney(vm.finalPrice || 0, checkout.currencyCode)} (${
-                  checkout.items.length
-                } ${t("checkout-page:cartItemProduct")})`}
+                {`${formatCurrency(
+                  vm.finalPrice || 0,
+                  checkout.currencyCode,
+                  checkout.currencySymbol
+                )} (${checkout.items.length} ${t(
+                  "checkout-page:cartItemProduct"
+                )})`}
               </span>
               <span className={arrowDownClasses}>
                 <SVGArrowDown />
@@ -109,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 && (
@@ -132,7 +137,7 @@ export const CartSummary: React.FC<Props> = observer(({ vm, allowExpand }) => {
               )}
               <InfoRow
                 label={t("checkout-page:subtotal")}
-                value={formatMoney(checkout.totalPrice, checkout.currencyCode)}
+                value={checkout.formattedTotalPrice}
                 tooltipText={t("checkout-page:subtotalTooltip")}
               />
               {!!checkout.shippingLines?.length && (
@@ -140,26 +145,19 @@ export const CartSummary: React.FC<Props> = observer(({ vm, allowExpand }) => {
                   label={t("checkout-page:cartShippingTitle")}
                   value={
                     checkout.shippingTotal
-                      ? formatMoney(
-                          checkout.shippingTotal,
-                          checkout.currencyCode
-                        )
+                      ? checkout.formattedShippingTotal
                       : 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={formatMoney(
+                  value={formatCurrency(
                     vm.installmentExtraPrice,
-                    checkout.currencyCode
+                    checkout.currencyCode,
+                    checkout.currencySymbol
                   )}
                 />
               )}
@@ -192,8 +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}>
-                {formatMoney(vm.finalPrice || 0, checkout.currencyCode)}
+              <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>
 
@@ -273,7 +286,11 @@ const Adjustments: React.FC<CommonProps> = observer(({ vm }) => {
             <div className={styles.Value}>
               <span>{adjustment.type === "DECREMENT" ? "- " : ""}</span>{" "}
               <span>
-                {formatMoney(adjustment.amount, vm.checkout.currencyCode)}
+                {formatCurrency(
+                  adjustment.amount,
+                  vm.checkout.currencyCode,
+                  vm.checkout.currencySymbol
+                )}
               </span>
             </div>
           </div>
@@ -304,7 +321,11 @@ const CalculatedAdditionalPrices: React.FC<CommonProps> = observer(({ vm }) => {
               <div className={styles.Value}>
                 <span>{adjustment.type === "DECREMENT" ? "- " : ""}</span>{" "}
                 <span>
-                  {formatMoney(adjustment.amount, vm.checkout!.currencyCode)}
+                  {formatCurrency(
+                    adjustment.amount,
+                    vm.checkout!.currencyCode,
+                    vm.checkout!.currencySymbol
+                  )}
                 </span>
               </div>
             </div>
@@ -318,7 +339,13 @@ const CalculatedAdditionalPrices: React.FC<CommonProps> = observer(({ vm }) => {
             </div>
           </div>
           <div className={styles.Value}>
-            <span>{formatMoney(gpl.price, vm.checkout.currencyCode)}</span>
+            <span>
+              {formatCurrency(
+                gpl.price,
+                vm.checkout.currencyCode,
+                vm.checkout!.currencySymbol
+              )}
+            </span>
           </div>
         </div>
       ))}
@@ -410,7 +437,11 @@ const Coupon: React.FC<CouponProps> = observer(
           <div className={styles.Value}>
             <span>{adjustment?.type === "DECREMENT" ? "- " : ""}</span>{" "}
             <span>
-              {formatMoney(adjustment?.amount || 0, vm.checkout.currencyCode)}
+              {formatCurrency(
+                adjustment?.amount || 0,
+                vm.checkout.currencyCode,
+                vm.checkout.currencySymbol
+              )}
             </span>
           </div>
         )}