@ikas/storefront 4.0.0-alpha.4 → 4.0.0-alpha.41

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ikas/storefront",
-  "version": "4.0.0-alpha.4",
+  "version": "4.0.0-alpha.41",
   "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.4",
-    "@ikas/storefront-config": "^4.0.0-alpha.4",
-    "@ikas/storefront-model-functions": "^4.0.0-alpha.4",
-    "@ikas/storefront-models": "^4.0.0-alpha.4",
-    "@ikas/storefront-providers": "^4.0.0-alpha.4",
+    "@ikas/storefront-api": "^4.0.0-alpha.41",
+    "@ikas/storefront-config": "^4.0.0-alpha.41",
+    "@ikas/storefront-model-functions": "^4.0.0-alpha.41",
+    "@ikas/storefront-models": "^4.0.0-alpha.41",
+    "@ikas/storefront-providers": "^4.0.0-alpha.41",
     "@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.4",
-    "@ikas/storefront-config": "^4.0.0-alpha.4",
-    "@ikas/storefront-model-functions": "^4.0.0-alpha.4",
-    "@ikas/storefront-models": "^4.0.0-alpha.4",
-    "@ikas/storefront-providers": "^4.0.0-alpha.4",
+    "@ikas/storefront-api": "^4.0.0-alpha.41",
+    "@ikas/storefront-config": "^4.0.0-alpha.41",
+    "@ikas/storefront-model-functions": "^4.0.0-alpha.41",
+    "@ikas/storefront-models": "^4.0.0-alpha.41",
+    "@ikas/storefront-providers": "^4.0.0-alpha.41",
     "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 = {

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/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";
 
@@ -159,19 +163,17 @@ export const CartItem: React.FC<Props> = observer(
             {!!cartItem.overridenPriceWithQuantity && (
               <span className={styles.GrayPrice}>
                 {!!adjustmentTotal
-                  ? formatMoney(cartItem.finalPriceWithQuantity, currencyCode)
-                  : formatMoney(
-                      cartItem.overridenPriceWithQuantity,
-                      currencyCode
-                    )}
+                  ? cartItem.formattedFinalPriceWithQuantity
+                  : cartItem.formattedOverridenPriceWithQuantity}
               </span>
             )}
             {!!adjustmentTotal
-              ? formatMoney(
+              ? formatCurrency(
                   cartItem.finalPriceWithQuantity - adjustmentTotal,
-                  currencyCode
+                  currencyCode,
+                  cartItem.currencySymbol
                 )
-              : formatMoney(cartItem.finalPriceWithQuantity, currencyCode)}
+              : cartItem.formattedFinalPriceWithQuantity}
           </div>
         </div>
       </div>

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/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 />
@@ -132,7 +136,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,10 +144,7 @@ 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")
                   }
                 />
@@ -151,15 +152,16 @@ export const CartSummary: React.FC<Props> = observer(({ vm, allowExpand }) => {
               {!!checkout.totalTax && !!vm.customizationProps?.showTax && (
                 <InfoRow
                   label={t("checkout-page:cartTaxTitle")}
-                  value={formatMoney(checkout.totalTax, checkout.currencyCode)}
+                  value={checkout.formattedTotalTax}
                 />
               )}
               {!!vm.installmentExtraPrice && (
                 <InfoRow
                   label={t("checkout-page:cartInterest")}
-                  value={formatMoney(
+                  value={formatCurrency(
                     vm.installmentExtraPrice,
-                    checkout.currencyCode
+                    checkout.currencyCode,
+                    checkout.currencySymbol
                   )}
                 />
               )}
@@ -193,7 +195,11 @@ export const CartSummary: React.FC<Props> = observer(({ vm, allowExpand }) => {
                 <div className={styles.Title}>{t("checkout-page:total")}</div>
               </div>
               <div className={styles.TotalPrice}>
-                {formatMoney(vm.finalPrice || 0, checkout.currencyCode)}
+                {formatCurrency(
+                  vm.finalPrice || 0,
+                  checkout.currencyCode,
+                  checkout.currencySymbol
+                )}
               </div>
             </div>
 
@@ -273,7 +279,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 +314,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 +332,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 +430,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>
         )}

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/form-item/index.tsx

@@ -7,6 +7,7 @@ import styles from "./style.module.scss";
 
 import { useTranslation } from "../../../../utils";
 import ReactTooltip from "react-tooltip";
+import { PhoneNumberInput } from "../phone-number-input";
 
 export const FormItem: React.FC<Props> = observer((props) => {
   const { t } = useTranslation();
@@ -108,17 +109,14 @@ export const FormItem: React.FC<Props> = observer((props) => {
             />
           )}
           {vm.type === FormItemType.TEL && (
-            <div></div>
-            // <PhoneInput
-            //   key={props.currentCountryCode || "1"}
-            //   disabled={vm.disabled}
-            //   defaultCountry={props.currentCountryCode}
-            //   placeholder={t("checkout-page:enterPhoneNumber")}
-            //   value={vm.value ? vm.value : ""}
-            //   onChange={vm.onPhoneChange}
-            //   international={true}
-            //   addInternationalOption={false}
-            // />
+            <PhoneNumberInput
+              key={props.currentCountryCode || "1"}
+              disabled={vm.disabled}
+              defaultCountry={props.currentCountryCode}
+              placeholder={t("checkout-page:enterPhoneNumber")}
+              value={vm.value ? vm.value : ""}
+              onChange={vm.onPhoneChange}
+            />
           )}
           {vm.type === FormItemType.TEXT_AREA && <TextArea vm={vm} />}
           {vm.type === FormItemType.SELECT && (

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/index.tsx

@@ -8,7 +8,7 @@ import SVGCross from "../svg/cross";
 import styles from "./style.module.scss";
 import { useTranslation } from "../../../../utils/i18n";
 import { IkasProductVariant } from "../../../../models";
-import { formatMoney } from "../../../../utils/currency";
+import { formatCurrency } from "../../../../utils/currency";
 
 type Props = {
   vm: CheckoutViewModel;
@@ -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);
@@ -95,35 +95,32 @@ const OfferProduct: React.FC<Props> = ({ vm, campaignOffer }) => {
               <span className={styles.Discount}>
                 {selectedVariant.price.formattedFinalPrice}
               </span>{" "}
-              {formatMoney(
+              {formatCurrency(
                 selectedVariant.price.finalPrice -
                   (selectedVariant.price.finalPrice *
                     (campaignOffer.offer.discountAmount || 100)) /
                     100,
-                vm.checkout!.currencyCode
+                vm.checkout!.currencyCode,
+                vm.checkout!.currencySymbol
               )}
             </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/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/components/phone-number-input/get-countries.ts

@@ -1,18 +1,50 @@
+import { IkasStorefrontConfig } from "@ikas/storefront-config";
 import { CountryCode, getCountries as categories } from "libphonenumber-js";
 import compareStrings from "./compare-strings";
 
-import en from "./locale/en";
-
-type CountryType = {
+export type CountryType = {
   value: CountryCode;
   label: string | undefined;
 };
 
-const getCountries = (): CountryType[] => {
+const getUrl = () => {
+  const languages = [
+    "de",
+    "el",
+    "en",
+    "es",
+    "fi",
+    "fr",
+    "it",
+    "nb",
+    "pl",
+    "pt-BR",
+    "pt",
+    "ru",
+    "sv",
+    "tr",
+    "ua",
+    "vi",
+  ];
+
+  let locale = IkasStorefrontConfig.getCurrentLocale();
+
+  if (!languages.some((language) => language === locale)) {
+    locale = "en";
+  }
+
+  return `https://cdn.myikas.com/sf/static/locale/country/${locale}.json`;
+};
+
+const getCountries = async (): Promise<CountryType[]> => {
+  const url = getUrl();
+  const response = await fetch(url);
+  const lang = await response.json();
+
   return categories()
     .map((country) => ({
       value: country,
-      label: en[country],
+      label: lang[country],
     }))
     .sort((a, b) => compareStrings(a.label, b.label));
 };