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

package/package.json

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

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

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

@@ -8,12 +8,14 @@
   .ImageContainer {
     flex: 0 0 auto;
     width: 114px;
+    height: 114px;
     position: relative;
     margin-right: 16px;
 
     .Image {
       width: 100%;
-      object-fit: contain;
+      height: 100%;
+      object-fit: cover;
       border-radius: 8px;
     }
   }
@@ -53,6 +55,7 @@
         cursor: pointer;
         text-decoration: underline;
       }
+
     }
   }
 
@@ -61,7 +64,7 @@
     display: flex;
     align-items: center;
     color: $primaryTextColor;
-
+  
     .GrayPrice {
       font-size: 14px;
       color: $secondaryTextColor;
@@ -75,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;
@@ -101,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 />
@@ -136,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 && (
@@ -144,7 +140,10 @@ 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")
                   }
                 />
@@ -152,16 +151,15 @@ export const CartSummary: React.FC<Props> = observer(({ vm, allowExpand }) => {
               {!!checkout.totalTax && !!vm.customizationProps?.showTax && (
                 <InfoRow
                   label={t("checkout-page:cartTaxTitle")}
-                  value={checkout.formattedTotalTax}
+                  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
                   )}
                 />
               )}
@@ -195,11 +193,7 @@ export const CartSummary: React.FC<Props> = observer(({ vm, allowExpand }) => {
                 <div className={styles.Title}>{t("checkout-page:total")}</div>
               </div>
               <div className={styles.TotalPrice}>
-                {formatCurrency(
-                  vm.finalPrice || 0,
-                  checkout.currencyCode,
-                  checkout.currencySymbol
-                )}
+                {formatMoney(vm.finalPrice || 0, checkout.currencyCode)}
               </div>
             </div>
 
@@ -279,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>
@@ -314,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>
@@ -332,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>
       ))}
@@ -430,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>
         )}

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

@@ -143,9 +143,7 @@ const CustomerAddresses: React.FC<Props> = ({ vm }) => {
 
       {!!vm.vm.store.customerStore.customer &&
         !vm.editingCustomerAddress &&
-        (vm.vm.deliveryMethod === "address" ||
-          (vm.vm.step === CheckoutStep.PAYMENT &&
-            vm.vm.deliveryMethod === "in-store")) && (
+        vm.vm.deliveryMethod === "address" && (
           <div className={checkoutStyles.RowPB}>
             {vm.vm.store.customerStore.customer.addresses?.map((address) => (
               <SelectBox
@@ -185,9 +183,7 @@ const CustomerAddresses: React.FC<Props> = ({ vm }) => {
       vm.vm.step === CheckoutStep.INFO &&
       vm.vm.deliveryMethod === "address"
         ? addressForm
-        : vm.vm.step === CheckoutStep.PAYMENT &&
-          !vm.vm.store.customerStore.customer &&
-          addressForm}
+        : vm.vm.step === CheckoutStep.PAYMENT && addressForm}
 
       {vm.vm.deliveryMethod === "in-store" && (
         <div className={checkoutStyles.RowPB}>

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

@@ -7,7 +7,6 @@ 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();
@@ -109,14 +108,17 @@ export const FormItem: React.FC<Props> = observer((props) => {
             />
           )}
           {vm.type === FormItemType.TEL && (
-            <PhoneNumberInput
-              key={props.currentCountryCode || "1"}
-              disabled={vm.disabled}
-              defaultCountry={props.currentCountryCode}
-              placeholder={t("checkout-page:enterPhoneNumber")}
-              value={vm.value ? vm.value : ""}
-              onChange={vm.onPhoneChange}
-            />
+            <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}
+            // />
           )}
           {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,9 +132,7 @@ 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 { formatCurrency } from "../../../../utils/currency";
+import { formatMoney } 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.variants[0]);
+    React.useState<IkasProductVariant>(campaignOffer!.product.selectedVariant);
 
   const acceptOffer = () => {
     vm.updateCartCampaignOffer({
@@ -43,7 +43,7 @@ const OfferProduct: React.FC<Props> = ({ vm, campaignOffer }) => {
   };
 
   const onVariantChange = (value: string) => {
-    const variant = campaignOffer.variants.find((v) => v.id === value);
+    const variant = campaignOffer.product.variants.find((v) => v.id === value);
 
     if (variant) {
       setSelectedVariant(variant);
@@ -95,32 +95,35 @@ const OfferProduct: React.FC<Props> = ({ vm, campaignOffer }) => {
               <span className={styles.Discount}>
                 {selectedVariant.price.formattedFinalPrice}
               </span>{" "}
-              {formatCurrency(
+              {formatMoney(
                 selectedVariant.price.finalPrice -
                   (selectedVariant.price.finalPrice *
                     (campaignOffer.offer.discountAmount || 100)) /
                     100,
-                vm.checkout!.currencyCode,
-                vm.checkout!.currencySymbol
+                vm.checkout!.currencyCode
               )}
             </div>
             <div className={styles.Actions}>
-              {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,
-                  }))}
-                />
-              )}
+              {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,
+                      }))}
+                  />
+                )}
               <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,6 +62,7 @@
 }
 
 .ImageContainer {
+  height: 136px;
   width: 136px;
   position: relative;
   background-color: #fff;
@@ -72,7 +73,8 @@
 
 .Image {
   width: 100%;
-  object-fit: contain;
+  height: 100%;
+  object-fit: cover;
   border-radius: 8px;
 }
 

package/src/components/checkout/components/phone-number-input/get-countries.ts

@@ -1,50 +1,18 @@
-import { IkasStorefrontConfig } from "@ikas/storefront-config";
 import { CountryCode, getCountries as categories } from "libphonenumber-js";
 import compareStrings from "./compare-strings";
 
-export type CountryType = {
+import en from "./locale/en";
+
+type CountryType = {
   value: CountryCode;
   label: string | undefined;
 };
 
-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();
-
+const getCountries = (): CountryType[] => {
   return categories()
     .map((country) => ({
       value: country,
-      label: lang[country],
+      label: en[country],
     }))
     .sort((a, b) => compareStrings(a.label, b.label));
 };