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

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

@@ -6,7 +6,8 @@ import parsePhoneNumber, {
   getCountryCallingCode,
   parseIncompletePhoneNumber,
 } from "libphonenumber-js";
-import getCountries, { CountryType } from "./get-countries";
+
+import getCountries from "./get-countries";
 
 import styles from "./style.module.scss";
 
@@ -18,20 +19,17 @@ type Props = {
   onChange: (value: string) => void;
 };
 
-const DEFAULT_COUNTRY = "TR";
+const countries = getCountries();
 
 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
+      defaultCountry as CountryCode
     );
     const [formatedValue, setFormatedValue] = React.useState("");
 
     React.useEffect(() => {
-      fetchCountries();
-
-      let countryCode = activeCountry;
+      let countryCode = (defaultCountry as CountryCode) || "TR";
 
       if (value) {
         const parsedPhoneNumber = parsePhoneNumber(value);
@@ -48,11 +46,6 @@ export const PhoneNumberInput: React.FC<Props> = observer(
       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);
@@ -83,7 +76,9 @@ export const PhoneNumberInput: React.FC<Props> = observer(
     };
 
     const getImageSrc = () => {
-      return `https://cdn.myikas.com/sf/assets/flags/3x2/${activeCountry}.svg`;
+      return `https://cdn.myikas.com/sf/assets/flags/3x2/${
+        activeCountry || "TR"
+      }.svg`;
     };
 
     return (
@@ -93,14 +88,14 @@ export const PhoneNumberInput: React.FC<Props> = observer(
             <div className={styles.Flag}>
               <img
                 className={styles.FlagImage}
-                alt={activeCountry}
+                alt={activeCountry || ""}
                 src={getImageSrc()}
               ></img>
               <div className={styles.Arrow}></div>
             </div>
             <select
               className={styles.Select}
-              value={activeCountry}
+              value={activeCountry || ""}
               onChange={onCountryChange}
               disabled={disabled}
             >

package/src/components/checkout/components/phone-number-input/locale/en.ts

@@ -0,0 +1,257 @@
+export default {
+	"AB": "Abkhazia",
+	"AC": "Ascension Island",
+	"AD": "Andorra",
+	"AE": "United Arab Emirates",
+	"AF": "Afghanistan",
+	"AG": "Antigua and Barbuda",
+	"AI": "Anguilla",
+	"AL": "Albania",
+	"AM": "Armenia",
+	"AO": "Angola",
+	"AQ": "Antarctica",
+	"AR": "Argentina",
+	"AS": "American Samoa",
+	"AT": "Austria",
+	"AU": "Australia",
+	"AW": "Aruba",
+	"AX": "Åland Islands",
+	"AZ": "Azerbaijan",
+	"BA": "Bosnia and Herzegovina",
+	"BB": "Barbados",
+	"BD": "Bangladesh",
+	"BE": "Belgium",
+	"BF": "Burkina Faso",
+	"BG": "Bulgaria",
+	"BH": "Bahrain",
+	"BI": "Burundi",
+	"BJ": "Benin",
+	"BL": "Saint Barthélemy",
+	"BM": "Bermuda",
+	"BN": "Brunei Darussalam",
+	"BO": "Bolivia",
+	"BQ": "Bonaire, Sint Eustatius and Saba",
+	"BR": "Brazil",
+	"BS": "Bahamas",
+	"BT": "Bhutan",
+	"BV": "Bouvet Island",
+	"BW": "Botswana",
+	"BY": "Belarus",
+	"BZ": "Belize",
+	"CA": "Canada",
+	"CC": "Cocos (Keeling) Islands",
+	"CD": "Congo, Democratic Republic of the",
+	"CF": "Central African Republic",
+	"CG": "Congo",
+	"CH": "Switzerland",
+	"CI": "Cote d'Ivoire",
+	"CK": "Cook Islands",
+	"CL": "Chile",
+	"CM": "Cameroon",
+	"CN": "China",
+	"CO": "Colombia",
+	"CR": "Costa Rica",
+	"CU": "Cuba",
+	"CV": "Cape Verde",
+	"CW": "Curaçao",
+	"CX": "Christmas Island",
+	"CY": "Cyprus",
+	"CZ": "Czech Republic",
+	"DE": "Germany",
+	"DJ": "Djibouti",
+	"DK": "Denmark",
+	"DM": "Dominica",
+	"DO": "Dominican Republic",
+	"DZ": "Algeria",
+	"EC": "Ecuador",
+	"EE": "Estonia",
+	"EG": "Egypt",
+	"EH": "Western Sahara",
+	"ER": "Eritrea",
+	"ES": "Spain",
+	"ET": "Ethiopia",
+	"FI": "Finland",
+	"FJ": "Fiji",
+	"FK": "Falkland Islands",
+	"FM": "Federated States of Micronesia",
+	"FO": "Faroe Islands",
+	"FR": "France",
+	"GA": "Gabon",
+	"GB": "United Kingdom",
+	"GD": "Grenada",
+	"GE": "Georgia",
+	"GF": "French Guiana",
+	"GG": "Guernsey",
+	"GH": "Ghana",
+	"GI": "Gibraltar",
+	"GL": "Greenland",
+	"GM": "Gambia",
+	"GN": "Guinea",
+	"GP": "Guadeloupe",
+	"GQ": "Equatorial Guinea",
+	"GR": "Greece",
+	"GS": "South Georgia and the South Sandwich Islands",
+	"GT": "Guatemala",
+	"GU": "Guam",
+	"GW": "Guinea-Bissau",
+	"GY": "Guyana",
+	"HK": "Hong Kong",
+	"HM": "Heard Island and McDonald Islands",
+	"HN": "Honduras",
+	"HR": "Croatia",
+	"HT": "Haiti",
+	"HU": "Hungary",
+	"ID": "Indonesia",
+	"IE": "Ireland",
+	"IL": "Israel",
+	"IM": "Isle of Man",
+	"IN": "India",
+	"IO": "British Indian Ocean Territory",
+	"IQ": "Iraq",
+	"IR": "Iran",
+	"IS": "Iceland",
+	"IT": "Italy",
+	"JE": "Jersey",
+	"JM": "Jamaica",
+	"JO": "Jordan",
+	"JP": "Japan",
+	"KE": "Kenya",
+	"KG": "Kyrgyzstan",
+	"KH": "Cambodia",
+	"KI": "Kiribati",
+	"KM": "Comoros",
+	"KN": "Saint Kitts and Nevis",
+	"KP": "North Korea",
+	"KR": "South Korea",
+	"KW": "Kuwait",
+	"KY": "Cayman Islands",
+	"KZ": "Kazakhstan",
+	"LA": "Laos",
+	"LB": "Lebanon",
+	"LC": "Saint Lucia",
+	"LI": "Liechtenstein",
+	"LK": "Sri Lanka",
+	"LR": "Liberia",
+	"LS": "Lesotho",
+	"LT": "Lithuania",
+	"LU": "Luxembourg",
+	"LV": "Latvia",
+	"LY": "Libya",
+	"MA": "Morocco",
+	"MC": "Monaco",
+	"MD": "Moldova",
+	"ME": "Montenegro",
+	"MF": "Saint Martin (French Part)",
+	"MG": "Madagascar",
+	"MH": "Marshall Islands",
+	"MK": "North Macedonia",
+	"ML": "Mali",
+	"MM": "Burma",
+	"MN": "Mongolia",
+	"MO": "Macao",
+	"MP": "Northern Mariana Islands",
+	"MQ": "Martinique",
+	"MR": "Mauritania",
+	"MS": "Montserrat",
+	"MT": "Malta",
+	"MU": "Mauritius",
+	"MV": "Maldives",
+	"MW": "Malawi",
+	"MX": "Mexico",
+	"MY": "Malaysia",
+	"MZ": "Mozambique",
+	"NA": "Namibia",
+	"NC": "New Caledonia",
+	"NE": "Niger",
+	"NF": "Norfolk Island",
+	"NG": "Nigeria",
+	"NI": "Nicaragua",
+	"NL": "Netherlands",
+	"NO": "Norway",
+	"NP": "Nepal",
+	"NR": "Nauru",
+	"NU": "Niue",
+	"NZ": "New Zealand",
+	"OM": "Oman",
+	"OS": "South Ossetia",
+	"PA": "Panama",
+	"PE": "Peru",
+	"PF": "French Polynesia",
+	"PG": "Papua New Guinea",
+	"PH": "Philippines",
+	"PK": "Pakistan",
+	"PL": "Poland",
+	"PM": "Saint Pierre and Miquelon",
+	"PN": "Pitcairn",
+	"PR": "Puerto Rico",
+	"PS": "Palestine",
+	"PT": "Portugal",
+	"PW": "Palau",
+	"PY": "Paraguay",
+	"QA": "Qatar",
+	"RE": "Reunion",
+	"RO": "Romania",
+	"RS": "Serbia",
+	"RU": "Russia",
+	"RW": "Rwanda",
+	"SA": "Saudi Arabia",
+	"SB": "Solomon Islands",
+	"SC": "Seychelles",
+	"SD": "Sudan",
+	"SE": "Sweden",
+	"SG": "Singapore",
+	"SH": "Saint Helena",
+	"SI": "Slovenia",
+	"SJ": "Svalbard and Jan Mayen",
+	"SK": "Slovakia",
+	"SL": "Sierra Leone",
+	"SM": "San Marino",
+	"SN": "Senegal",
+	"SO": "Somalia",
+	"SR": "Suriname",
+	"SS": "South Sudan",
+	"ST": "Sao Tome and Principe",
+	"SV": "El Salvador",
+	"SX": "Sint Maarten",
+	"SY": "Syria",
+	"SZ": "Swaziland",
+	"TA": "Tristan da Cunha",
+	"TC": "Turks and Caicos Islands",
+	"TD": "Chad",
+	"TF": "French Southern Territories",
+	"TG": "Togo",
+	"TH": "Thailand",
+	"TJ": "Tajikistan",
+	"TK": "Tokelau",
+	"TL": "Timor-Leste",
+	"TM": "Turkmenistan",
+	"TN": "Tunisia",
+	"TO": "Tonga",
+	"TR": "Turkey",
+	"TT": "Trinidad and Tobago",
+	"TV": "Tuvalu",
+	"TW": "Taiwan",
+	"TZ": "Tanzania",
+	"UA": "Ukraine",
+	"UG": "Uganda",
+	"UM": "United States Minor Outlying Islands",
+	"US": "United States",
+	"UY": "Uruguay",
+	"UZ": "Uzbekistan",
+	"VA": "Holy See (Vatican City State)",
+	"VC": "Saint Vincent and the Grenadines",
+	"VE": "Venezuela",
+	"VG": "Virgin Islands, British",
+	"VI": "Virgin Islands, U.S.",
+	"VN": "Vietnam",
+	"VU": "Vanuatu",
+	"WF": "Wallis and Futuna",
+	"WS": "Samoa",
+	"XK": "Kosovo",
+	"YE": "Yemen",
+	"YT": "Mayotte",
+	"ZA": "South Africa",
+	"ZM": "Zambia",
+	"ZW": "Zimbabwe",
+	"ZZ": "International"
+}

package/src/components/checkout/index.tsx

@@ -7,7 +7,7 @@ import ReactTooltip from "react-tooltip";
 import CheckoutViewModel, { CheckoutStep } from "./model";
 import { IkasCheckoutSettings } from "../../models/data/checkout-settings";
 import { IkasCheckout } from "../../models/data/checkout";
-import { formatCurrency, useTranslation } from "../../utils";
+import { formatMoney, useTranslation } from "../../utils";
 
 import CheckoutStepInfo from "./steps/step-info";
 import { CheckoutStepShipping } from "./steps/step-shipping";
@@ -366,16 +366,15 @@ const Steps: React.FC<CommonProps> = observer(({ vm }) => {
         vm.step === CheckoutStep.PAYMENT ? (
           <div className={styles.AdressStepInfo}>
             <StepSummaryShipping vm={vm} />
-            {((vm.checkout.availableShippingMethods &&
-              vm.checkout.availableShippingMethods.length > 1) ||
-              vm.checkoutSettings.isGiftPackageEnabled) && (
-              <div
-                className={styles.EditBtn}
-                onClick={vm.onBackToShippingClick}
-              >
-                {t("checkout-page:actions.edit")}
-              </div>
-            )}
+            {vm.checkout.availableShippingMethods &&
+              vm.checkout.availableShippingMethods.length > 1 && (
+                <div
+                  className={styles.EditBtn}
+                  onClick={vm.onBackToShippingClick}
+                >
+                  {t("checkout-page:actions.edit")}
+                </div>
+              )}
           </div>
         ) : undefined,
         vm.step === CheckoutStep.PAYMENT ? (
@@ -444,10 +443,9 @@ const StepSummaryShipping: React.FC<CommonProps> = observer(({ vm }) => {
             {" / " +
               (vm.checkout.shippingLines[0].price === 0
                 ? t("checkout-page:free")
-                : formatCurrency(
+                : formatMoney(
                     vm.checkout.shippingLines[0].price,
-                    vm.checkout!.currencyCode,
-                    vm.checkout.currencySymbol
+                    vm.checkout!.currencyCode
                   ))}
           </span>
         </React.Fragment>

package/src/components/checkout/model.ts

@@ -12,7 +12,6 @@ import {
   IkasOrderCustomer,
   IkasCartCampaignOfferStatus,
   IkasProduct,
-  IkasProductVariant,
   IkasCartCampaignOffer,
   IkasCheckout,
   IkasStockLocation,
@@ -92,8 +91,8 @@ export default class CheckoutViewModel {
 
   stripeResponse: CreateStripePaymentIntentResponse | null = null;
 
-  checkoutCampaignOffer?: CampaignOfferType;
-  postCheckoutCampaignOffer?: CampaignOfferType;
+  checkoutCampaignOffer: CampaignOfferType | undefined;
+  postCheckoutCampaignOffer: CampaignOfferType | undefined;
 
   returnPolicy: string;
   privacyPolicy: string;
@@ -253,9 +252,6 @@ export default class CheckoutViewModel {
     if (this.step === CheckoutStep.PAYMENT) {
       if (this.isInStoreDelivery) {
         this.checkout.billingAddress = new IkasOrderAddress();
-        if (this.checkoutSettings) {
-          this.checkout.billingAddress.checkoutSettings = this.checkoutSettings;
-        }
       }
     }
 
@@ -444,10 +440,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;
     }
 
@@ -741,7 +734,7 @@ export default class CheckoutViewModel {
         this.checkout.billingAddress =
           this.checkout.billingAddress || new IkasOrderAddress();
       } else {
-        if (this.isInStoreDelivery || this.checkout.billingAddress) {
+        if (this.isInStoreDelivery) {
           this.checkout.billingAddress = new IkasOrderAddress(
             _cloneDeep(this.checkout.billingAddress) || {}
           );
@@ -751,7 +744,6 @@ export default class CheckoutViewModel {
           );
         }
       }
-
       this.checkout.billingAddress.checkoutSettings = this.checkoutSettings;
     }
   };
@@ -767,8 +759,6 @@ export default class CheckoutViewModel {
     const newCart = await this.saveCart();
 
     if (newCart) this.checkout = new IkasCheckout(newCart);
-    if (this.checkout.shippingAddress)
-      this.checkout.shippingAddress.checkoutSettings = this.checkoutSettings;
     this.isChangingShippingMethod = false;
   };
 
@@ -993,9 +983,6 @@ export default class CheckoutViewModel {
         customer.addresses.push(newAddress);
 
         await this.store.customerStore.saveCustomer(customer);
-        this.store.customerStore.customer.addresses?.forEach(
-          (address) => (address.checkoutSettings = this.checkoutSettings)
-        );
 
         if (type === "shipping") {
           this.checkout.shippingAddress!.id = newAddress.id;
@@ -1329,25 +1316,32 @@ export default class CheckoutViewModel {
     this.isContactModalVisible = value;
   };
 
-  getWaitingForActionCampaignOffers = (
+  getWaitingForActionCampaignOffer = (
     targetPage: IkasCampaignOfferTargetPageType
   ) => {
-    if (!this.checkout.campaignOffers || !this.checkout.campaignOffers.length)
-      return;
+    if (this.checkout.campaignOffers && this.checkout.campaignOffers.length) {
+      const filteredCampaignOffer = this.checkout.campaignOffers.filter(
+        (co) =>
+          co.status === IkasCartCampaignOfferStatus.WAITING_FOR_ACTION &&
+          co.campaignOffer?.targetPageTypes.some((tpt) => tpt === targetPage)
+      );
 
-    const filteredCampaignOffers = this.checkout.campaignOffers.filter(
-      (co) =>
-        co.status === IkasCartCampaignOfferStatus.WAITING_FOR_ACTION &&
-        co.campaignOffer?.targetPageTypes.some((tpt) => tpt === targetPage)
-    );
-    return filteredCampaignOffers;
+      if (filteredCampaignOffer.length) {
+        return filteredCampaignOffer[0];
+      }
+    }
+
+    return null;
   };
 
   getOffer = (waitingForActionCampaignOffer: IkasCartCampaignOffer) => {
-    if (!waitingForActionCampaignOffer.campaignOffer) return null;
-    return waitingForActionCampaignOffer.campaignOffer.offers.find(
-      (o) => o.id === waitingForActionCampaignOffer.campaignOfferProductId
-    );
+    if (waitingForActionCampaignOffer.campaignOffer) {
+      return waitingForActionCampaignOffer.campaignOffer.offers.find(
+        (o) => o.id === waitingForActionCampaignOffer.campaignOfferProductId
+      );
+    }
+
+    return null;
   };
 
   getProduct = async (productId: string) => {
@@ -1357,88 +1351,61 @@ export default class CheckoutViewModel {
       },
     });
 
-    if (!productsResponse.isSuccess || !productsResponse?.data?.data?.length)
-      return null;
-
-    const product = productsResponse.data.data[0];
-    const selectedVariant = product.variants.find((v) => v.isActive);
-    const productDetail = new IkasProduct({
-      ...product,
-      selectedVariantValues: (selectedVariant || product.variants[0])
-        .variantValues,
-    });
-
-    return productDetail;
-  };
-
-  getOfferProductVariants = ({
-    offer,
-    product,
-  }: {
-    offer: IkasCampaignOfferProduct;
-    product: IkasProduct;
-  }) => {
-    const variants: IkasProductVariant[] = [];
-
-    if (offer.excludedVariantIdList?.length) {
-      product.variants.forEach((v) => {
-        const isVariantExcluded = offer!.excludedVariantIdList?.some(
-          (ev) => ev === v.id
-        );
-        if (!v.hasStock || isVariantExcluded) return;
-
-        variants.push(v);
+    if (
+      productsResponse.isSuccess &&
+      productsResponse.data &&
+      productsResponse.data.data &&
+      productsResponse.data.data.length
+    ) {
+      const product = productsResponse.data.data[0];
+      const selectedVariant = product.variants.find((v) => v.isActive);
+      const productDetail = new IkasProduct({
+        ...product,
+        selectedVariantValues: (selectedVariant || product.variants[0])
+          .variantValues,
       });
-    } else {
-      variants.push(...product.variants.filter((v) => v.hasStock));
+
+      return productDetail;
     }
 
-    return variants;
+    return null;
   };
 
   getCampaignOfferProducts = async (
     targetPage: IkasCampaignOfferTargetPageType
-  ): Promise<CampaignOfferType | undefined> => {
-    const waitingForActionCampaignOffers =
-      this.getWaitingForActionCampaignOffers(targetPage);
+  ) => {
+    const waitingForActionCampaignOffer =
+      this.getWaitingForActionCampaignOffer(targetPage);
 
     if (
-      !waitingForActionCampaignOffers ||
-      !waitingForActionCampaignOffers.length
-    )
-      return;
-
-    for (let i = 0; i < waitingForActionCampaignOffers.length; i++) {
-      const waitingForActionCampaignOffer = waitingForActionCampaignOffers[i];
-
+      waitingForActionCampaignOffer &&
+      waitingForActionCampaignOffer.campaignOffer
+    ) {
       const offer = this.getOffer(waitingForActionCampaignOffer);
-      if (!offer) continue;
 
-      const product = await this.getProduct(offer.productId);
-      if (!product) continue;
+      if (offer) {
+        const productDetail = await this.getProduct(offer.productId);
 
-      const variants: IkasProductVariant[] = this.getOfferProductVariants({
-        offer,
-        product,
-      });
-      if (!variants.length) continue;
-
-      return {
-        product,
-        variants,
-        campaignOffer: waitingForActionCampaignOffer,
-        offer,
-      };
+        if (productDetail) {
+          return {
+            productDetail,
+            campaignOffer: waitingForActionCampaignOffer,
+            offer,
+          };
+        }
+      }
     }
+
+    return undefined;
   };
 
   getCampaignOffer = async () => {
-    this.checkoutCampaignOffer = await this.getCampaignOfferProducts(
+    this.checkoutCampaignOffer = (await this.getCampaignOfferProducts(
       IkasCampaignOfferTargetPageType.CHECKOUT
-    );
-    this.postCheckoutCampaignOffer = await this.getCampaignOfferProducts(
+    )) as any;
+    this.postCheckoutCampaignOffer = (await this.getCampaignOfferProducts(
       IkasCampaignOfferTargetPageType.POST_CHECKOUT
-    );
+    )) as any;
   };
 
   updateCartCampaignOffer = async (props: UpdateCartCampaignOfferInput) => {
@@ -1494,7 +1461,6 @@ export type StockErrorData = {
 
 export type CampaignOfferType = {
   product: IkasProduct;
-  variants: IkasProductVariant[];
   campaignOffer: IkasCartCampaignOffer;
   offer: IkasCampaignOfferProduct;
 };

package/src/components/checkout/modelMasterPass.ts

@@ -6,7 +6,7 @@ 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 { 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/checkout/steps/step-payment/index.tsx

@@ -48,12 +48,7 @@ export const CheckoutStepPayment: React.FC<Props> = observer(({ vm }) => {
   const policyLabel = policyInputData.map((p) =>
     p.isVariable ? (
       <span
-        className={[
-          styles.TermsLabelSpan,
-          vm.isErrorsVisible && !vm.isTermsAndConditionsChecked
-            ? styles.Error
-            : "",
-        ].join(" ")}
+        className={styles.TermsLabelSpan}
         onClick={
           p.value === "{{ ackPrivacyPolicy }}"
             ? onShowPrivacyPolicyClick