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

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

@@ -56,12 +56,45 @@
     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%;
@@ -75,6 +108,7 @@
 
   .Details {
     overflow: hidden;
+    padding-top: 10px;
 
     @media only screen and (max-width: $breakpoint) {
       padding-top: $mobileHorizontalPadding;
@@ -141,7 +175,7 @@
   .TotalContainer {
     display: flex;
     justify-content: space-between;
-    align-items: center;
+    // align-items: center;
     margin-top: 12px;
 
     .TitleContainer {
@@ -151,14 +185,25 @@
       }
     }
 
+    .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,6 +87,7 @@ const CustomerAddresses: React.FC<Props> = ({ vm }) => {
   return (
     <React.Fragment>
       {!!IkasStorefrontConfig.getPickupStockLocationIds() &&
+        !vm.vm.isDigitalOnly &&
         vm.vm.availableStockLocations.length > 0 &&
         vm.vm.step !== CheckoutStep.PAYMENT && (
           <>
@@ -143,7 +144,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 +186,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/customer-addresses/model.ts

@@ -54,9 +54,10 @@ 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)!;
@@ -86,9 +87,10 @@ 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)!;
@@ -113,13 +115,19 @@ export default class CustomerAddressesViewModel {
   };
 
   firstNameChangeCallback = (value: string) => {
-    if (!this.vm.checkout.hasCustomer && this.addressType === "shipping") {
+    if (
+      (!this.vm.checkout.hasCustomer && this.addressType === "shipping") ||
+      this.vm.isDigitalOnly
+    ) {
       this.vm.checkout.customer!.firstName = value;
     }
   };
 
   lastNameChangeCallback = (value: string) => {
-    if (!this.vm.checkout.hasCustomer && this.addressType === "shipping") {
+    if (
+      (!this.vm.checkout.hasCustomer && this.addressType === "shipping") ||
+      this.vm.isDigitalOnly
+    ) {
       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 onClose={onErrorClose} />;
+      error = <UnknownError error={vm.error} onClose={onErrorClose} />;
       break;
 
     default:

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

@@ -2,17 +2,19 @@ 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(({ onClose }) => {
+export const UnknownError: React.FC<Props> = observer(({ error, onClose }) => {
   const { t } = useTranslation();
   return (
     <NotificationBox
       type="error"
-      content={<div>{t("checkout-page:errorUnknown")}</div>}
+      content={<div>{error?.data || t("checkout-page:errorUnknown")}</div>}
       onClose={onClose}
     />
   );

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

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

@@ -6,8 +6,7 @@ import parsePhoneNumber, {
   getCountryCallingCode,
   parseIncompletePhoneNumber,
 } from "libphonenumber-js";
-
-import getCountries from "./get-countries";
+import getCountries, { CountryType } from "./get-countries";
 
 import styles from "./style.module.scss";
 
@@ -19,17 +18,20 @@ type Props = {
   onChange: (value: string) => void;
 };
 
-const countries = getCountries();
+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
+      (defaultCountry as CountryCode) || DEFAULT_COUNTRY
     );
     const [formatedValue, setFormatedValue] = React.useState("");
 
     React.useEffect(() => {
-      let countryCode = (defaultCountry as CountryCode) || "TR";
+      fetchCountries();
+
+      let countryCode = activeCountry;
 
       if (value) {
         const parsedPhoneNumber = parsePhoneNumber(value);
@@ -46,6 +48,11 @@ 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);
@@ -76,9 +83,7 @@ export const PhoneNumberInput: React.FC<Props> = observer(
     };
 
     const getImageSrc = () => {
-      return `https://cdn.myikas.com/sf/assets/flags/3x2/${
-        activeCountry || "TR"
-      }.svg`;
+      return `https://cdn.myikas.com/sf/assets/flags/3x2/${activeCountry}.svg`;
     };
 
     return (
@@ -88,14 +93,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/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 { formatMoney, useTranslation } from "../../utils";
+import { formatCurrency, useTranslation } from "../../utils";
 
 import CheckoutStepInfo from "./steps/step-info";
 import { CheckoutStepShipping } from "./steps/step-shipping";
@@ -355,7 +355,7 @@ const Steps: React.FC<CommonProps> = observer(({ vm }) => {
     ),
   ];
 
-  if (vm.deliveryMethod === "address") {
+  if (vm.deliveryMethod === "address" && !vm.isDigitalOnly) {
     steps.splice(
       1,
       0,
@@ -366,15 +366,16 @@ 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 && (
-                <div
-                  className={styles.EditBtn}
-                  onClick={vm.onBackToShippingClick}
-                >
-                  {t("checkout-page:actions.edit")}
-                </div>
-              )}
+            {((vm.checkout.availableShippingMethods &&
+              vm.checkout.availableShippingMethods.length > 1) ||
+              vm.checkoutSettings.isGiftPackageEnabled) && (
+              <div
+                className={styles.EditBtn}
+                onClick={vm.onBackToShippingClick}
+              >
+                {t("checkout-page:actions.edit")}
+              </div>
+            )}
           </div>
         ) : undefined,
         vm.step === CheckoutStep.PAYMENT ? (
@@ -392,10 +393,13 @@ const Steps: React.FC<CommonProps> = observer(({ vm }) => {
 const StepSummaryAddress: React.FC<CommonProps> = observer(({ vm }) => {
   const { t } = useTranslation();
 
-  const customerName =
-    (vm.checkout.shippingAddress?.firstName || "") +
-    " " +
-    (vm.checkout.shippingAddress?.lastName || "");
+  const customerName = vm.isDigitalOnly
+    ? (vm.checkout.billingAddress?.firstName || "") +
+      " " +
+      (vm.checkout.billingAddress?.lastName || "")
+    : (vm.checkout.shippingAddress?.firstName || "") +
+      " " +
+      (vm.checkout.shippingAddress?.lastName || "");
 
   return (
     <div className={styles.Address}>
@@ -414,7 +418,9 @@ const StepSummaryAddress: React.FC<CommonProps> = observer(({ vm }) => {
       )}
 
       <div className={[styles.Text, styles.Gray].join(" ")}>
-        {vm.checkout.shippingAddress?.phone}
+        {vm.isDigitalOnly
+          ? vm.checkout.billingAddress?.phone
+          : vm.checkout.shippingAddress?.phone}
       </div>
 
       {vm.deliveryMethod === "in-store" && (
@@ -425,7 +431,9 @@ const StepSummaryAddress: React.FC<CommonProps> = observer(({ vm }) => {
         </>
       )}
       <div className={[styles.Text, styles.Gray].join(" ")}>
-        {vm.checkout.shippingAddress?.addressText}
+        {vm.isDigitalOnly
+          ? vm.checkout.billingAddress?.addressText
+          : vm.checkout.shippingAddress?.addressText}
       </div>
     </div>
   );
@@ -443,9 +451,10 @@ const StepSummaryShipping: React.FC<CommonProps> = observer(({ vm }) => {
             {" / " +
               (vm.checkout.shippingLines[0].price === 0
                 ? t("checkout-page:free")
-                : formatMoney(
+                : formatCurrency(
                     vm.checkout.shippingLines[0].price,
-                    vm.checkout!.currencyCode
+                    vm.checkout!.currencyCode,
+                    vm.checkout.currencySymbol
                   ))}
           </span>
         </React.Fragment>