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

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

@@ -56,45 +56,12 @@
     background-color: $cardBgColor;
   }
 
-  &.HideOnDesktop {
+  .HideOnDesktop {
     @media only screen and (min-width: $breakpoint) {
       display: none;
     }
   }
 
-  .ItemsContainer {
-    max-height: 320px;
-    overflow-y: auto;
-    padding-top: 10px;
-    margin-bottom: 24px;
-
-    @media only screen and (max-width: $breakpoint) {
-      max-height: unset;
-    }
-
-    &::-webkit-scrollbar {
-      width: 10px;
-    }
-
-    /* Track */
-    &::-webkit-scrollbar-track {
-      box-shadow: inset 0 0 10px 10px #E3E7EF;
-      border: solid 3px transparent;
-    }
-
-    /* Handle */
-    &::-webkit-scrollbar-thumb {
-      box-shadow: inset 0 0 10px 10px #000000;
-      border: solid 3px transparent;
-    }
-
-    // /* Handle on hover */
-    // &::-webkit-scrollbar-thumb:hover {
-    //   box-shadow: inset 0 0 10px 10px #000000;
-    //   border: solid 3px transparent;
-    // }
-  }
-
   .DetailsContainer {
     overflow: hidden;
     width: 100%;
@@ -108,7 +75,6 @@
 
   .Details {
     overflow: hidden;
-    padding-top: 10px;
 
     @media only screen and (max-width: $breakpoint) {
       padding-top: $mobileHorizontalPadding;
@@ -175,7 +141,7 @@
   .TotalContainer {
     display: flex;
     justify-content: space-between;
-    // align-items: center;
+    align-items: center;
     margin-top: 12px;
 
     .TitleContainer {
@@ -185,25 +151,14 @@
       }
     }
 
-    .TotalPricesContainer {
-      display: flex;
-      flex-direction: column;
-      align-items: flex-end;
-    }
-
     .TotalPrice {
       font-size: 20px;
       font-weight: 600;
     }
 
-    .TotalTax {
-      font-size: 14px;
-      line-height: 24px;
-      color: $secondaryTextColor;
-    }
-
     @media only screen and (max-width: $breakpoint) {
       height: 64px;
+      margin-top: 0px;
     }
   }
 

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

@@ -87,7 +87,6 @@ const CustomerAddresses: React.FC<Props> = ({ vm }) => {
   return (
     <React.Fragment>
       {!!IkasStorefrontConfig.getPickupStockLocationIds() &&
-        !vm.vm.isDigitalOnly &&
         vm.vm.availableStockLocations.length > 0 &&
         vm.vm.step !== CheckoutStep.PAYMENT && (
           <>
@@ -144,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
@@ -186,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/customer-addresses/model.ts

@@ -54,10 +54,9 @@ export default class CustomerAddressesViewModel {
   };
 
   onDeleteAddressClick = async () => {
-    const addressIndex =
-      this.vm.store.customerStore.customer?.addresses?.findIndex(
-        (a) => a.id === this.editingCustomerAddress?.id
-      );
+    const addressIndex = this.vm.store.customerStore.customer?.addresses?.findIndex(
+      (a) => a.id === this.editingCustomerAddress?.id
+    );
 
     if (addressIndex !== -1 && addressIndex !== undefined) {
       const customer = _cloneDeep(this.vm.store.customerStore.customer)!;
@@ -87,10 +86,9 @@ export default class CustomerAddressesViewModel {
       return;
     }
 
-    const addressIndex =
-      this.vm.store.customerStore.customer?.addresses?.findIndex(
-        (a) => a.id === this.editingCustomerAddress?.id
-      );
+    const addressIndex = this.vm.store.customerStore.customer?.addresses?.findIndex(
+      (a) => a.id === this.editingCustomerAddress?.id
+    );
 
     if (addressIndex !== -1 && addressIndex !== undefined) {
       const customer = _cloneDeep(this.vm.store.customerStore.customer)!;
@@ -115,19 +113,13 @@ export default class CustomerAddressesViewModel {
   };
 
   firstNameChangeCallback = (value: string) => {
-    if (
-      (!this.vm.checkout.hasCustomer && this.addressType === "shipping") ||
-      this.vm.isDigitalOnly
-    ) {
+    if (!this.vm.checkout.hasCustomer && this.addressType === "shipping") {
       this.vm.checkout.customer!.firstName = value;
     }
   };
 
   lastNameChangeCallback = (value: string) => {
-    if (
-      (!this.vm.checkout.hasCustomer && this.addressType === "shipping") ||
-      this.vm.isDigitalOnly
-    ) {
+    if (!this.vm.checkout.hasCustomer && this.addressType === "shipping") {
       this.vm.checkout.customer!.lastName = value;
     }
   };

package/src/components/checkout/components/error/index.tsx

@@ -31,7 +31,7 @@ const Errors: React.FC<CommonProps> = ({ vm }) => {
       break;
     case ErrorType.API_ERROR:
     case ErrorType.UNKNOWN:
-      error = <UnknownError error={vm.error} onClose={onErrorClose} />;
+      error = <UnknownError onClose={onErrorClose} />;
       break;
 
     default:

package/src/components/checkout/components/error/unknown-error/index.tsx

@@ -2,19 +2,17 @@ import * as React from "react";
 import { observer } from "mobx-react-lite";
 import NotificationBox from "../../notification-box";
 import { useTranslation } from "../../../../../utils";
-import { CheckoutError } from "../../../model";
 
 type Props = {
-  error?: CheckoutError | null;
   onClose: () => void;
 };
 
-export const UnknownError: React.FC<Props> = observer(({ error, onClose }) => {
+export const UnknownError: React.FC<Props> = observer(({ onClose }) => {
   const { t } = useTranslation();
   return (
     <NotificationBox
       type="error"
-      content={<div>{error?.data || t("checkout-page:errorUnknown")}</div>}
+      content={<div>{t("checkout-page:errorUnknown")}</div>}
       onClose={onClose}
     />
   );

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));
 };

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}
             >