@ikas/storefront 4.0.0-alpha.18 → 4.0.0-alpha.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ikas/storefront",
-  "version": "4.0.0-alpha.18",
+  "version": "4.0.0-alpha.2",
   "description": "Storefront functionality for ikas storefront themes.",
   "author": "Umut Ozan Yıldırım",
   "license": "ISC",
@@ -20,22 +20,21 @@
     "@stripe/react-stripe-js": "^1.7.2",
     "@stripe/stripe-js": "^1.29.0",
     "query-string": "^6.13.8",
-    "react-tooltip": "^4.2.21",
-    "libphonenumber-js": "^1.10.6"
+    "react-tooltip": "^4.2.21"
   },
   "devDependencies": {
-    "@ikas/storefront-api": "^4.0.0-alpha.18",
-    "@ikas/storefront-config": "^4.0.0-alpha.18",
-    "@ikas/storefront-model-functions": "^4.0.0-alpha.18",
-    "@ikas/storefront-models": "^4.0.0-alpha.18",
-    "@ikas/storefront-providers": "^4.0.0-alpha.18",
+    "@ikas/storefront-api": "^4.0.0-alpha.2",
+    "@ikas/storefront-config": "^4.0.0-alpha.2",
+    "@ikas/storefront-model-functions": "^4.0.0-alpha.2",
+    "@ikas/storefront-models": "^4.0.0-alpha.2",
+    "@ikas/storefront-providers": "^4.0.0-alpha.2",
     "@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.0.7",
+    "next": "canary",
     "prettier": "^2.2.1",
     "react": "17.0.2",
     "react-dom": "17.0.2",
@@ -52,14 +51,14 @@
     "html-react-parser": "^1.4.0"
   },
   "peerDependencies": {
-    "@ikas/storefront-api": "^4.0.0-alpha.18",
-    "@ikas/storefront-config": "^4.0.0-alpha.18",
-    "@ikas/storefront-model-functions": "^4.0.0-alpha.18",
-    "@ikas/storefront-models": "^4.0.0-alpha.18",
-    "@ikas/storefront-providers": "^4.0.0-alpha.18",
+    "@ikas/storefront-api": "^4.0.0-alpha.2",
+    "@ikas/storefront-config": "^4.0.0-alpha.2",
+    "@ikas/storefront-model-functions": "^4.0.0-alpha.2",
+    "@ikas/storefront-models": "^4.0.0-alpha.2",
+    "@ikas/storefront-providers": "^4.0.0-alpha.2",
     "mobx": "^6.1.3",
     "mobx-react-lite": "^3.1.5",
-    "next": "12.0.7",
+    "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

@@ -181,10 +181,6 @@ export default class IkasAnalytics {
       } else {
         await this.createSessionId();
       }
-
-      IkasStorefrontConfig.init({
-        sessionId: this.sessionId || "",
-      });
     } catch (err) {
       console.error(err);
     }
@@ -200,10 +196,6 @@ export default class IkasAnalytics {
         this.visitorId = Date.now() + "";
         localStorage.setItem(this.VISITOR_ID_KEY, this.visitorId);
       }
-
-      IkasStorefrontConfig.init({
-        visitorId: this.visitorId,
-      });
     } catch (err) {
       console.error(err);
     }

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/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/model.ts

@@ -32,6 +32,7 @@ import CreditCardData from "./components/credit-card-form/model";
 import { IkasCheckoutSettings } from "../../models/data/checkout-settings";
 import { TFunction } from "../../utils/i18n";
 import CustomerStoreAPI from "../../store/customer/api";
+import MerchantStore from "../../store/merchant";
 import CheckoutStore from "../../store/checkout";
 import CartStoreAPI from "../../store/cart/api";
 import { IkasCheckoutCustomizationProps } from ".";
@@ -44,7 +45,7 @@ import {
   RetrieveInstallmentInfoResponse,
   TransactionResponse,
   UpdateCartCampaignOfferInput,
-} from "@ikas/storefront-api";
+} from "@ikas/storefront-api/build/__api/types";
 import { IkasBaseStore } from "../../store";
 import { IkasStorefrontConfig } from "@ikas/storefront-config";
 import { Analytics } from "../../analytics";
@@ -53,6 +54,11 @@ import {
   RetrieveInstallmentInfoQueryParams,
   SaveCartInput,
 } from "@ikas/storefront-api";
+import { OrderAddressCountryInputData } from "@ikas/storefront-api/build/__api/models/OrderAddressCountryInput";
+import { OrderAddressCityInputData } from "@ikas/storefront-api/build/__api/models/OrderAddressCityInput";
+import { OrderAddressStateInputData } from "@ikas/storefront-api/build/__api/models/OrderAddressStateInput";
+import { OrderAddressDistrictInputData } from "@ikas/storefront-api/build/__api/models/OrderAddressDistrictInput";
+import { CampaignOfferTargetPageTypeEnum } from "@ikas/storefront-api/build/__api/types";
 
 const NUMBER_ONLY_REGEX = /^\d+$/;
 const MAX_CARD_NUMBER_LENGTH = 16;
@@ -440,10 +446,7 @@ export default class CheckoutViewModel {
       input = await this.inStockDeliveryInputData(input);
     }
 
-    if (
-      this.step === CheckoutStep.INFO ||
-      this.step === CheckoutStep.SHIPPING
-    ) {
+    if (this.step === CheckoutStep.INFO) {
       input.billingAddress = null;
     }
 
@@ -479,11 +482,13 @@ export default class CheckoutViewModel {
       inStoreLocation.address
     ) {
       inputData.shippingAddress.country = inStoreLocation.address
-        .country as any;
-      inputData.shippingAddress.city = inStoreLocation.address.city as any;
-      inputData.shippingAddress.state = inStoreLocation.address.state as any;
+        .country as OrderAddressCountryInputData;
+      inputData.shippingAddress.city = inStoreLocation.address
+        .city as OrderAddressCityInputData;
+      inputData.shippingAddress.state = inStoreLocation.address
+        .state as OrderAddressStateInputData;
       inputData.shippingAddress.district = inStoreLocation.address
-        .district as any;
+        .district as OrderAddressDistrictInputData;
       inputData.shippingAddress.postalCode = inStoreLocation.address.postalCode;
       inputData.shippingAddress.addressLine1 =
         inStoreLocation.address.address || "";

package/src/components/checkout/modelMasterPass.ts

@@ -5,8 +5,8 @@ import { SuccessModalType } from "./components/master-pass/modal-success";
 import { useTranslation } from "../../utils/i18n";
 import { IkasBaseStore } from "../../store";
 import { IkasCheckout, IkasPaymentGateway } from "../../models";
-import { MasterPassOperationTypeEnum } from "@ikas/storefront-api";
-import { getMasterPassRequestToken } from "@ikas/storefront-api";
+import { MasterPassOperationTypeEnum } from "@ikas/storefront-api/build/__api/types";
+import { getMasterpassRequestToken } from "@ikas/storefront-api";
 import { IkasStorefrontConfig } from "@ikas/storefront-config";
 
 const isServer = typeof localStorage === "undefined";
@@ -437,7 +437,7 @@ export default class MasterPassModel {
     operationType: MasterPassOperationTypeEnum;
     phoneNumber: string;
   }) => {
-    const response = await getMasterPassRequestToken({
+    const response = await getMasterpassRequestToken({
       cartId,
       paymentGatewayId,
       operationType,

package/src/components/page/head.tsx

@@ -251,18 +251,6 @@ function createStoreSchema(merchantSettings: IkasMerchantSettings) {
     logo: logo,
     image: logo,
     url: "https://" + IkasStorefrontConfig.getDomain(),
-    telephone: merchantSettings?.phone,
-    address: {
-      "@type": "PostalAddress",
-      streetAddress: merchantSettings.address?.addressLine1,
-      addressLocality: merchantSettings.address?.city?.name,
-      ...(merchantSettings.address &&
-        merchantSettings.address.state && {
-          addressRegion: merchantSettings.address.state.code,
-        }),
-      postalCode: merchantSettings.address?.postalCode,
-      addressCountry: merchantSettings.address?.country?.code,
-    },
   };
 }
 

package/src/models/data/merchant-settings/index.ts

@@ -1,18 +1,15 @@
 import {
   IkasMerchantSettingsCurrencyFormat,
   IkasMerchantSettings as IMerchantSettings,
-  IkasMerchantAddress,
 } from "@ikas/storefront-models";
 import { makeAutoObservable } from "mobx";
 import { IkasImage } from "../image";
 
 export class IkasMerchantSettings implements IMerchantSettings {
   currencyFormats: IkasMerchantSettingsCurrencyFormat[] | null;
-  address: IkasMerchantAddress | null;
   logoId: string | null;
   merchantId: string;
   merchantName: string;
-  phone: string | null;
 
   // Extra
   logo?: IkasImage | null;
@@ -22,9 +19,6 @@ export class IkasMerchantSettings implements IMerchantSettings {
     this.logoId = data.logoId;
     this.merchantId = data.merchantId;
     this.merchantName = data.merchantName;
-    this.phone = data.phone || null;
-    this.address = data.address || null;
-
     this.logo = data.logo ? new IkasImage(data.logo) : null;
 
     makeAutoObservable(this);

package/src/models/data/product/variant-type/index.ts

@@ -3,12 +3,10 @@ import { IkasProductVariantType as IProductVariantType } from "@ikas/storefront-
 import { makeAutoObservable } from "mobx";
 
 export class IkasProductVariantType implements IProductVariantType {
-  order: number;
   variantType: IkasVariantType;
   variantValueIds: string[];
 
   constructor(data: Partial<IkasProductVariantType>) {
-    this.order = data.order || 0;
     this.variantType = data.variantType
       ? new IkasVariantType(data.variantType)
       : new IkasVariantType();

package/src/models/data/storefront/index.ts

@@ -20,7 +20,6 @@ export class IkasStorefront implements IStorefront {
   analytics4Id: string | null;
   universalAnalyticsId: string | null;
   tiktokPixelId: string | null;
-  token: string | null;
 
   localizations: IkasStorefrontLocalization[];
   routings: IkasStorefrontRouting[];
@@ -41,7 +40,6 @@ export class IkasStorefront implements IStorefront {
     this.analytics4Id = data.analytics4Id || null;
     this.universalAnalyticsId = data.universalAnalyticsId || null;
     this.tiktokPixelId = data.tiktokPixelId || null;
-    this.token = data.token || null;
 
     // Sub Models
     this.localizations = data.localizations

package/src/models/ui/product-list/index.ts

@@ -25,7 +25,7 @@ import {
   SearchInputOrderByInput,
   SortByDirectionEnum,
   SortByTypeEnum,
-} from "@ikas/storefront-api";
+} from "@ikas/storefront-api/build/__api/types";
 import { IkasStorefrontConfig } from "@ikas/storefront-config";
 import { IkasBaseStore } from "../../..";
 import { Analytics } from "../../../analytics";
@@ -221,6 +221,12 @@ export class IkasProductList {
 
   get filterQueryParams() {
     const queryParams: Record<string, any> = {};
+    const _getQueryParams = this.getQueryParams();
+    if (_getQueryParams) {
+      _getQueryParams.forEach((value, key) => {
+        queryParams[key] = value;
+      });
+    }
 
     this.filters?.forEach((f) => {
       if (f.keyList.length) queryParams[f.key] = f.keyList;

package/src/models/ui/validator/form/raffle-form.ts

@@ -1,6 +1,5 @@
 import { saveRaffleParticipant } from "@ikas/storefront-api";
 import { action, computed, makeObservable, observable } from "mobx";
-import { GraphQLError } from "graphql";
 
 import { Validator } from "..";
 import { IkasBaseStore } from "../../../../store";
@@ -238,11 +237,7 @@ export class RaffleForm {
   }
 
   async submit() {
-    const response: {
-      isFormError: boolean;
-      isSuccess: boolean;
-      errors?: readonly GraphQLError[];
-    } = { isFormError: false, isSuccess: false };
+    const response = { isFormError: false, isSuccess: false };
     const hasFormError = await this.validateAll();
     if (hasFormError) {
       response.isFormError = true;
@@ -251,7 +246,7 @@ export class RaffleForm {
 
     try {
       const selectedVariant = this.raffle.products[0].selectedVariant;
-      const saveRaffleParticipantResponse = await saveRaffleParticipant({
+      const isRaffleFormSuccess = await saveRaffleParticipant({
         input: {
           appliedProduct: {
             productId: selectedVariant.productId,
@@ -269,20 +264,12 @@ export class RaffleForm {
         },
       });
 
-      if (saveRaffleParticipantResponse?.graphQLErrors) {
-        response.errors = saveRaffleParticipantResponse.graphQLErrors;
-        response.isSuccess = false;
-      }
-
-      if (saveRaffleParticipantResponse.data) {
+      if (isRaffleFormSuccess) {
         response.isSuccess = true;
       }
 
       return response;
     } catch (error) {
-      if (error) {
-        response.errors = error;
-      }
       return response;
     }
   }

package/src/models/ui/validator/rules/index.ts

@@ -183,16 +183,6 @@ export class EmailRule<T> extends ValidationRule<T> {
   }
 }
 
-/**
- * 1) start with plus(+) or digit
- * 2) any digit or one char white space
- * 3) end with digit
- *
- * For example:
- * ✅ Valid +90535 555 5555
- * ✅ valid 905355555555
- * 🚫 Unvalid +90535 5  55 5555
- */
 export class PhoneRule<T> extends ValidationRule<T> {
   get errorMessage() {
     if (!this.message) return "";
@@ -203,8 +193,10 @@ export class PhoneRule<T> extends ValidationRule<T> {
   async run(): Promise<boolean> {
     if (!this.value) return true;
 
-    const result = this.value.match(/^[\+\d](\d+\s)*\d+$/g);
-    return !!result;
+    const result = this.value.match(/\d/g);
+    return (
+      (!!result && result.length <= 11) || !!/^\+(\d{12})$/gm.test(this.value)
+    );
   }
 }
 
@@ -254,8 +246,15 @@ export class IdentityNumberRule<T> extends ValidationRule<T> {
       TCSum = 0;
 
     const incorrect = [
-      11111111110, 22222222220, 33333333330, 44444444440, 55555555550,
-      66666666660, 7777777770, 88888888880, 99999999990,
+      11111111110,
+      22222222220,
+      33333333330,
+      44444444440,
+      55555555550,
+      66666666660,
+      7777777770,
+      88888888880,
+      99999999990,
     ];
 
     if (tcknString.length !== 11) return false;

package/src/store/cart/index.ts

@@ -10,7 +10,7 @@ import {
 } from "../../models/data";
 import { IkasStorefrontConfig } from "@ikas/storefront-config";
 import { Analytics } from "../../analytics";
-import { CartLineOptionInput } from "@ikas/storefront-api";
+import { CartLineOptionInput } from "@ikas/storefront-api/build/__api/types";
 
 export const CART_LS_KEY = "cartId";
 
@@ -100,7 +100,7 @@ export class IkasCartStore {
 
       product.productOptionSet?.initOptionValues();
 
-      return response;
+      return true;
     } catch (err) {
       console.log(err);
       return false;
@@ -145,7 +145,7 @@ export class IkasCartStore {
           Analytics.addToCart(item, quantity - oldQuantity, eventId, this.cart);
         }
       }
-      return response;
+      return true;
     } catch (err) {
       console.log(err);
       return false;

package/src/components/checkout/components/phone-number-input/compare-strings.ts

@@ -1,5 +0,0 @@
-const compareStrings = (a: string, b: string) => {
-  return a.localeCompare(b);
-};
-
-export default compareStrings;

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

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

package/src/components/checkout/components/phone-number-input/index.tsx

@@ -1,125 +0,0 @@
-import * as React from "react";
-import { observer } from "mobx-react-lite";
-import parsePhoneNumber, {
-  CountryCode,
-  formatIncompletePhoneNumber,
-  getCountryCallingCode,
-  parseIncompletePhoneNumber,
-} from "libphonenumber-js";
-import getCountries, { CountryType } from "./get-countries";
-
-import styles from "./style.module.scss";
-
-type Props = {
-  defaultCountry?: string | null;
-  disabled?: boolean;
-  placeholder: string | undefined;
-  value: string;
-  onChange: (value: string) => void;
-};
-
-const DEFAULT_COUNTRY = "TR";
-
-export const PhoneNumberInput: React.FC<Props> = observer(
-  ({ defaultCountry, disabled = false, placeholder, value, onChange }) => {
-    const [countries, setCountries] = React.useState<CountryType[]>([]);
-    const [activeCountry, setActiveCountry] = React.useState(
-      (defaultCountry as CountryCode) || DEFAULT_COUNTRY
-    );
-    const [formatedValue, setFormatedValue] = React.useState("");
-
-    React.useEffect(() => {
-      fetchCountries();
-
-      let countryCode = activeCountry;
-
-      if (value) {
-        const parsedPhoneNumber = parsePhoneNumber(value);
-
-        if (parsedPhoneNumber && parsedPhoneNumber.country) {
-          countryCode = parsedPhoneNumber.country;
-        }
-
-        setFormatedValue(formatIncompletePhoneNumber(value, countryCode));
-      } else {
-        setDefaultValue(countryCode);
-      }
-
-      setActiveCountry(countryCode);
-    }, []);
-
-    const fetchCountries = async () => {
-      const categories = await getCountries();
-      setCountries(categories);
-    };
-
-    const onValueChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-      const phoneNumber = formatPhoneNumber(event.target.value);
-      setFormatedValue(phoneNumber);
-      onChange(
-        !phoneNumber
-          ? event.target.value
-          : parseIncompletePhoneNumber(phoneNumber)
-      );
-    };
-
-    const onCountryChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
-      if (event.target.value) {
-        const country = event.target.value as CountryCode;
-
-        setActiveCountry(country);
-        setDefaultValue(country);
-      }
-    };
-
-    const setDefaultValue = (countyCode: CountryCode) => {
-      const countryCallingCode = getCountryCallingCode(countyCode);
-
-      setFormatedValue(`+${countryCallingCode}`);
-    };
-
-    const formatPhoneNumber = (phoneNumber: string) => {
-      return formatIncompletePhoneNumber(phoneNumber, activeCountry);
-    };
-
-    const getImageSrc = () => {
-      return `https://cdn.myikas.com/sf/assets/flags/3x2/${activeCountry}.svg`;
-    };
-
-    return (
-      <React.Fragment>
-        <div className={styles.SelectFlag}>
-          <div className={styles.FlagContainer}>
-            <div className={styles.Flag}>
-              <img
-                className={styles.FlagImage}
-                alt={activeCountry}
-                src={getImageSrc()}
-              ></img>
-              <div className={styles.Arrow}></div>
-            </div>
-            <select
-              className={styles.Select}
-              value={activeCountry}
-              onChange={onCountryChange}
-              disabled={disabled}
-            >
-              {countries.map((country) => (
-                <option key={country.value} value={country.value}>
-                  {country.label}
-                </option>
-              ))}
-            </select>
-          </div>
-        </div>
-        <input
-          className={styles.Input}
-          value={formatedValue}
-          onChange={onValueChange}
-          placeholder={placeholder}
-          disabled={disabled}
-        ></input>
-      </React.Fragment>
-    );
-  }
-);

package/src/components/checkout/components/phone-number-input/style.module.scss

@@ -1,83 +0,0 @@
-.SelectFlag {
-  position: absolute;
-  top: 26px;
-  left: 16px;
-
-  .FlagContainer {
-    position: relative;
-    width: 35px;
-    height: 24px;
-
-    flex: 0 0 35px;
-
-    .Select {
-      position: absolute;
-      top: 0;
-      left: 0;
-      z-index: 1;
-      padding: 0;
-      opacity: 0;
-      border: 0;
-      width: 100%;
-      height: 100%;
-      cursor: pointer;
-    }
-  }
-
-  .Flag {
-    position: relative;
-    width: 35px;
-    height: 24px;
-
-    display: flex;
-    align-items: center;
-
-    &Image {
-      width: 24px;
-      flex: 0 0 24px;
-    }
-
-    .Arrow {
-      display: block;
-      content: "";
-      width: 0.3em;
-      height: 0.3em;
-      margin-left: 0.35em;
-      margin-top: -0.2em;
-      border-style: solid;
-      border-color: inherit;
-      border-top-width: 0;
-      border-bottom-width: 1px;
-      border-left-width: 0;
-      border-right-width: 1px;
-      transform: rotate(45deg);
-      opacity: 0.45;
-
-      flex: 0 0 0.3em;
-    }
-  }
-}
-
-.Input {
-  padding-left: 64px !important;
-
-  &:disabled {
-    color: #8A8B94 !important;
-    background-color: #F7F7F9 !important;
-  }
-
-  &::placeholder {
-    color: #8A8B94 !important;
-    font-size: 14px !important;
-  }
-
-  // &:disabled {
-  //   color: $buttonDisabledTextColor !important;
-  //   background-color: $buttonDisabledBgColor !important;
-  // }
-
-  // &::placeholder {
-  //   color: $secondaryTextColor !important;
-  //   font-size: 14px !important;
-  // }
-}