@ikas/storefront 1.0.21 → 2.0.0-alpha.1

package/src/components/checkout/components/credit-card-form/svg/visa.tsx

@@ -0,0 +1,46 @@
+import * as React from "react";
+
+type Props = {
+  className?: string;
+};
+
+const SVGVisa: React.FC<Props> = ({ className }) => (
+  <svg
+    width="32"
+    height="24"
+    viewBox="0 0 32 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    className={className}
+  >
+    <path
+      d="M2 0.5H30C30.8284 0.5 31.5 1.17157 31.5 2V22C31.5 22.8284 30.8284 23.5 30 23.5H2C1.17157 23.5 0.5 22.8284 0.5 22V2C0.5 1.17157 1.17157 0.5 2 0.5Z"
+      fill="white"
+      stroke="#E5E4E9"
+    />
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M12.6875 15.1655H14.5025L15.6385 8.50391H13.8228L12.6875 15.1655Z"
+      fill="#1A1876"
+    />
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M19.2995 11.1787C18.6651 10.8705 18.2762 10.6646 18.2804 10.3529C18.2804 10.076 18.6095 9.77969 19.3204 9.77969C19.902 9.77065 20.3709 9.88891 20.8425 10.1115L21.0888 8.66735C20.7291 8.53239 20.1656 8.3877 19.4616 8.3877C17.6675 8.3877 16.4035 9.29135 16.3931 10.586C16.3827 11.5432 17.2954 12.0774 17.9841 12.396C18.6909 12.7223 18.9288 12.931 18.9253 13.2225C18.9211 13.6691 18.3611 13.8729 17.8387 13.8729C17.0331 13.8729 16.6269 13.7484 15.8957 13.4173L15.6411 14.9087C16.0655 15.0945 16.8495 15.2559 17.6641 15.2642C19.5729 15.2642 20.8119 14.371 20.8258 12.988C20.8307 12.2305 20.3472 11.6538 19.2995 11.1787Z"
+      fill="#1A1876"
+    />
+    <path
+      d="M25.7438 8.50977H24.3407C23.9059 8.50977 23.581 8.62872 23.3897 9.06211L20.6934 15.1672H22.6001C22.6001 15.1672 22.9118 14.3463 22.9827 14.1661C23.1914 14.1661 25.0433 14.1689 25.3083 14.1689C25.3626 14.4019 25.5295 15.1672 25.5295 15.1672H27.2144L25.7438 8.50977ZM23.5052 12.804C23.5803 12.612 24.3212 10.7094 24.4694 10.3059C24.7149 11.4545 24.4756 10.34 25.0127 12.804H23.5052Z"
+      fill="#1A1876"
+    />
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M11.1646 8.50906L9.38648 13.0517L9.19726 12.1285L8.56074 9.06697C8.45083 8.6454 8.13222 8.51949 7.73778 8.50488H4.80909L4.78613 8.64332C5.49848 8.81584 6.135 9.06488 6.69361 9.37375L8.30822 15.1595L10.2296 15.1574L13.088 8.50836H11.1646V8.50906Z"
+      fill="#1A1876"
+    />
+  </svg>
+);
+
+export default SVGVisa;

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

@@ -0,0 +1,167 @@
+import * as React from "react";
+import { observer } from "mobx-react-lite";
+import checkoutStyles from "../../style.module.scss";
+import SelectBox from "../select-box";
+
+import { AddressForm } from "../address-form";
+import { Checkbox } from "../checkbox";
+import { FormItem } from "../form-item";
+import { FormItemType } from "../form-item/model";
+
+import styles from "./style.module.scss";
+import commonStyles from "../../styles/common.module.scss";
+import { Button } from "../button";
+import CustomerAddressesViewModel from "./model";
+import { useTranslation } from "../../../../utils";
+
+type Props = {
+  vm: CustomerAddressesViewModel;
+};
+
+const CustomerAddresses: React.FC<Props> = ({ vm }) => {
+  const { t } = useTranslation();
+  const addressForm = React.useMemo(
+    () => (
+      <div>
+        <CustomerAddressForm vm={vm} />
+        <SaveAddressCheckboxAndTitle vm={vm} />
+      </div>
+    ),
+    [vm]
+  );
+
+  return (
+    <React.Fragment>
+      <div className={commonStyles.FormSectionTitle}>
+        <div className={commonStyles.Title}>
+          {vm.editingCustomerAddress
+            ? t("checkout-page:editAddress")
+            : vm.addressType === "billing"
+            ? t("checkout-page:billingAddress")
+            : t("checkout-page:shippingAddress")}
+        </div>
+        {!!vm.editingCustomerAddress && (
+          <div
+            className={styles.CancelEdit}
+            onClick={vm.onCancelEditAddressClick}
+          >
+            {t("checkout-page:actions.cancel")}
+          </div>
+        )}
+      </div>
+      {!!vm.vm.store.customerStore.customer && !vm.editingCustomerAddress && (
+        <div className={checkoutStyles.RowPB}>
+          {vm.vm.store.customerStore.customer.addresses.map((address) => (
+            <SelectBox
+              key={address.id}
+              label={address.title || ""}
+              isSelected={address.id === vm.selectedAddressId}
+              rightContent={
+                <div onClick={() => vm.onEditAddressClick(address)}>
+                  {t("checkout-page:actions.edit")}
+                </div>
+              }
+              bottomContent={
+                <div className={styles.AddressText}>{address.addressText}</div>
+              }
+              bottomContentVisible={true}
+              hasError={!address.isValid}
+              errorText={t("checkout-page:missingAddressFields")}
+              onClick={() =>
+                address.id !== vm.selectedAddressId &&
+                vm.onAddressSelect(address)
+              }
+            />
+          ))}
+          <SelectBox
+            label={t("checkout-page:newAddress")}
+            isSelected={"-1" === vm.selectedAddressId}
+            bottomContent={addressForm}
+            onClick={() =>
+              vm.selectedAddressId !== "-1" && vm.onAddressSelect()
+            }
+          />
+        </div>
+      )}
+      {!vm.vm.store.customerStore.customer && addressForm}
+      {!!vm.editingCustomerAddress && <CustomerAddressForm vm={vm} />}
+      {!!vm.editingCustomerAddress && (
+        <div className={styles.EditAddressActions}>
+          <Button
+            style={{
+              width: "100%",
+            }}
+            text={t("checkout-page:deleteAddress")}
+            isLine={true}
+            isLoading={vm.isDeleteAddressLoading}
+            isDisabled={vm.isEditAddressLoading}
+            onClick={vm.onDeleteAddressClick}
+          />
+          <Button
+            style={{
+              width: "100%",
+              marginTop: vm.vm.store.customerStore.customer ? "0px" : "32px",
+            }}
+            text={t("checkout-page:actions.save")}
+            isLoading={vm.isEditAddressLoading}
+            isDisabled={vm.isDeleteAddressLoading}
+            onClick={vm.onSaveAddressClick}
+          />
+        </div>
+      )}
+    </React.Fragment>
+  );
+};
+
+export default observer(CustomerAddresses);
+
+type CustomerAddressFormProps = {
+  vm: CustomerAddressesViewModel;
+};
+
+export const CustomerAddressForm: React.FC<CustomerAddressFormProps> = observer(
+  ({ vm }) => {
+    return (
+      <AddressForm
+        address={vm.editingCustomerAddress || vm.address!}
+        isErrorsVisible={vm.isEditAddressErrorsVisible || vm.vm.isErrorsVisible}
+        allowedCountryIds={vm.vm.shippingCountryIds || undefined}
+        allowCorporateInfo={vm.addressType === "billing"}
+        firstNameChangeCallback={vm.firstNameChangeCallback}
+        lastNameChangeCallback={vm.lastNameChangeCallback}
+        allowTitleChange={!!vm.editingCustomerAddress}
+      />
+    );
+  }
+);
+
+type SaveAddressProps = {
+  vm: CustomerAddressesViewModel;
+};
+
+export const SaveAddressCheckboxAndTitle: React.FC<SaveAddressProps> = observer(
+  ({ vm }) => {
+    const { t } = useTranslation();
+
+    return !!vm.vm.store.customerStore.customer &&
+      vm.selectedAddressId === "-1" ? (
+      <div style={{ marginTop: "12px" }}>
+        <Checkbox
+          value={vm.vm.shouldSaveAddress}
+          label={t("checkout-page:saveAddressCta")}
+          onChange={vm.vm.setShouldSaveAddress}
+        />
+        {vm.vm.shouldSaveAddress && (
+          <div style={{ marginTop: "8px" }}>
+            <FormItem
+              type={FormItemType.TEXT}
+              label={t("checkout-page:addressTitle")}
+              value={vm.vm.addressTitle}
+              onChange={vm.vm.setAddressTitle}
+            />
+          </div>
+        )}
+      </div>
+    ) : null;
+  }
+);

package/src/components/checkout/components/customer-addresses/model.ts

@@ -0,0 +1,126 @@
+import { IkasCustomerAddress } from "../../../../models";
+import { makeAutoObservable } from "mobx";
+import CheckoutViewModel from "../../model";
+import _cloneDeep from "lodash/cloneDeep";
+
+export type AddressType = "shipping" | "billing";
+
+export default class CustomerAddressesViewModel {
+  vm: CheckoutViewModel;
+  addressType: AddressType;
+
+  editingCustomerAddress: IkasCustomerAddress | null = null;
+  isDeleteAddressLoading = false;
+  isEditAddressLoading = false;
+  isEditAddressErrorsVisible = false;
+
+  constructor(vm: CheckoutViewModel, addressType: AddressType) {
+    this.vm = vm;
+    this.addressType = addressType;
+
+    makeAutoObservable(this);
+  }
+
+  get address() {
+    if (this.addressType === "shipping")
+      return this.vm.checkout.shippingAddress;
+    else return this.vm.checkout.billingAddress;
+  }
+
+  get selectedAddressId() {
+    if (this.addressType === "shipping")
+      return this.vm.selectedShippingAddressId;
+    else return this.vm.selectedBillingAddressId;
+  }
+
+  onAddressSelect = (address?: IkasCustomerAddress) => {
+    const setAddressId =
+      this.addressType === "shipping"
+        ? this.vm.onSelectedShippingAddressIdChange
+        : this.vm.onSelectedBillingAddressIdChange;
+
+    setAddressId(address?.id || "-1");
+  };
+
+  onEditAddressClick = (address?: IkasCustomerAddress) => {
+    const _address = new IkasCustomerAddress(_cloneDeep(address) as any);
+    _address.checkoutSettings = this.vm.checkoutSettings;
+    this.editingCustomerAddress = _address;
+  };
+
+  onCancelEditAddressClick = () => {
+    if (this.isDeleteAddressLoading || this.isEditAddressLoading) return;
+    this.editingCustomerAddress = null;
+  };
+
+  onDeleteAddressClick = async () => {
+    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)!;
+      customer.addresses.splice(addressIndex, 1);
+
+      try {
+        this.isDeleteAddressLoading = true;
+        const saveSuccess = await this.vm.store.customerStore.saveCustomer(
+          customer
+        );
+        if (saveSuccess) {
+          this.editingCustomerAddress = null;
+        }
+      } catch {
+        // TODO show error
+      } finally {
+        this.isDeleteAddressLoading = false;
+      }
+    }
+  };
+
+  onSaveAddressClick = async () => {
+    if (this.isDeleteAddressLoading || this.isEditAddressLoading) return;
+
+    if (!this.editingCustomerAddress?.isValid) {
+      this.isEditAddressErrorsVisible = true;
+      return;
+    }
+
+    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)!;
+      customer.addresses[addressIndex] = this.editingCustomerAddress!;
+
+      try {
+        this.isEditAddressLoading = true;
+        const saveSuccess = await this.vm.store.customerStore.saveCustomer(
+          customer
+        );
+        if (saveSuccess) {
+          this.onAddressSelect(this.editingCustomerAddress);
+          this.editingCustomerAddress = null;
+          this.isEditAddressErrorsVisible = false;
+        }
+      } catch {
+        // TODO show error
+      } finally {
+        this.isEditAddressLoading = false;
+      }
+    }
+  };
+
+  firstNameChangeCallback = (value: string) => {
+    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.checkout.customer!.lastName = value;
+    }
+  };
+}

package/src/components/checkout/components/customer-addresses/style.module.scss

@@ -0,0 +1,20 @@
+@import "../../styles/variables.scss";
+
+.AddressText {
+  padding-left: 32px;
+  color: $secondaryTextColor;
+}
+
+.CancelEdit {
+  font-size: 16px;
+  padding-bottom: 16px;
+  cursor: pointer;
+  user-select: none;
+}
+
+.EditAddressActions {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  grid-gap: 16px;
+  margin-top: 16px;
+}

package/src/components/checkout/components/error/customer-login-required-error/index.tsx

@@ -0,0 +1,23 @@
+import * as React from "react";
+import { observer } from "mobx-react-lite";
+import NotificationBox from "../../notification-box";
+import CheckoutViewModel from "../../../../../components/checkout/model";
+import { useTranslation } from "../../../../../utils";
+
+type Props = {
+  vm: CheckoutViewModel;
+  onClose: () => void;
+};
+
+export const CustomerLoginRequiredError: React.FC<Props> = observer(
+  ({ vm, onClose }) => {
+    const { t } = useTranslation();
+    return (
+      <NotificationBox
+        type="warning"
+        content={<div>{t("checkout-page:errorCustomerRequired")}</div>}
+        onClose={onClose}
+      />
+    );
+  }
+);

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

@@ -0,0 +1,54 @@
+import * as React from "react";
+import { observer } from "mobx-react-lite";
+import CheckoutViewModel, { ErrorType } from "../../model";
+
+import { UnknownError } from "./unknown-error";
+import { PaymentError } from "./payment-error";
+import { NoShippingError } from "./no-shipping-error";
+import { CustomerLoginRequiredError } from "./customer-login-required-error";
+
+type CommonProps = {
+  vm: CheckoutViewModel;
+};
+
+const Errors: React.FC<CommonProps> = ({ vm }) => {
+  const ref = React.useRef<HTMLDivElement>(null);
+  const onErrorClose = React.useCallback(() => {
+    vm.error = undefined;
+  }, [vm]);
+
+  let error: React.ReactElement | null = null;
+
+  switch (vm.error?.type) {
+    case ErrorType.PAYMENT_ERROR:
+      error = <PaymentError error={vm.error} onClose={onErrorClose} />;
+      break;
+    case ErrorType.NO_SHIPPING_ERROR:
+      error = <NoShippingError onClose={onErrorClose} />;
+      break;
+    case ErrorType.CUSTOMER_LOGIN_REQUIRED_ERROR:
+      error = <CustomerLoginRequiredError vm={vm} onClose={onErrorClose} />;
+      break;
+    case ErrorType.API_ERROR:
+    case ErrorType.UNKNOWN:
+      error = <UnknownError onClose={onErrorClose} />;
+      break;
+
+    default:
+      error = null;
+  }
+
+  if (!error) return null;
+
+  if (ref.current) {
+    ref.current.scrollIntoView();
+  }
+
+  return (
+    <div ref={ref} style={{ marginBottom: "24px" }}>
+      {error}
+    </div>
+  );
+};
+
+export default observer(Errors);

package/src/components/checkout/components/error/no-shipping-error/index.tsx

@@ -0,0 +1,19 @@
+import * as React from "react";
+import { observer } from "mobx-react-lite";
+import NotificationBox from "../../notification-box";
+import { useTranslation } from "../../../../../utils";
+
+type Props = {
+  onClose: () => void;
+};
+
+export const NoShippingError: React.FC<Props> = observer(({ onClose }) => {
+  const { t } = useTranslation();
+  return (
+    <NotificationBox
+      type="warning"
+      content={t("checkout-page:errorNoShipping")}
+      onClose={onClose}
+    />
+  );
+});

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

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

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

@@ -0,0 +1,72 @@
+import * as React from "react";
+import { observer } from "mobx-react-lite";
+import CheckoutViewModel, {
+  CheckoutError,
+} from "../../../../../components/checkout/model";
+import NotificationBox from "../../notification-box";
+import { IkasOrderLineItem } from "../../../../../models";
+import { CartItem } from "../../cart-summary/cart-item";
+import styles from "./style.module.scss";
+import { Button } from "../../button";
+import { useTranslation } from "../../../../../utils";
+
+type Props = {
+  vm: CheckoutViewModel;
+  error: CheckoutError;
+};
+
+export const StockError: React.FC<Props> = observer(({ vm, error }) => {
+  const { t } = useTranslation();
+  const [isLoading, setLoading] = React.useState(false);
+  const data = error.data as IkasOrderLineItem[];
+
+  const onContinueClick = React.useCallback(async () => {
+    setLoading(true);
+    await vm.removeUnavailableItems(data);
+
+    if (data.length === vm.cart?.items.length) vm.onBackToShoppingClick();
+    else window.location.reload();
+  }, [vm]);
+
+  return (
+    <NotificationBox
+      type="warning"
+      title={t("checkout-page:errorStockTitle")}
+      content={
+        <div>
+          <div className={styles.Description}>
+            {t("checkout-page:errorStockDescription")}
+          </div>
+          {data.map((item, index) => (
+            <div key={index}>
+              <CartItem
+                vm={vm}
+                cartItem={item}
+                currencyCode={vm.checkout.cart?.currencyCode || ""}
+              />
+            </div>
+          ))}
+          <div className={styles.Actions}>
+            <Button
+              style={{
+                width: "100%",
+              }}
+              text={t("checkout-page:actions.backToCart")}
+              isLine={true}
+              isDisabled={isLoading}
+              onClick={vm.onGoToCartClick}
+            />
+            <Button
+              style={{
+                width: "100%",
+              }}
+              text={t("checkout-page:actions.continue")}
+              isLoading={isLoading}
+              onClick={onContinueClick}
+            />
+          </div>
+        </div>
+      }
+    />
+  );
+});

package/src/components/checkout/components/error/stock-error/style.module.scss

@@ -0,0 +1,11 @@
+@import "../../../styles/variables.scss";
+
+.Actions {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  grid-gap: $rowSpacing;
+}
+
+.Description {
+  margin-bottom: 24px;
+}

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

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

package/src/components/checkout/components/expandable-section/index.tsx

@@ -0,0 +1,37 @@
+import * as React from "react";
+import { observer } from "mobx-react-lite";
+import styles from "./style.module.scss";
+import { useTranslation } from "../../../../utils";
+
+type ExpandableSectionProps = {
+  title: string;
+};
+
+const ExpandableSection: React.FC<ExpandableSectionProps> = ({
+  title,
+  children,
+}) => {
+  const { t } = useTranslation();
+  const [isExpanded, setExpanded] = React.useState(false);
+
+  return (
+    <div className={styles.ExpandableSection}>
+      <div className={styles.Top}>
+        <div className={styles.Title}>{title}</div>
+        <div
+          className={styles.HideBtn}
+          onClick={() => setExpanded(!isExpanded)}
+        >
+          {isExpanded
+            ? t("checkout-page:actions.hide")
+            : t("checkout-page:actions.show")}
+        </div>
+      </div>
+      {isExpanded && !!children && (
+        <div className={styles.Content}>{children}</div>
+      )}
+    </div>
+  );
+};
+
+export default observer(ExpandableSection);

package/src/components/checkout/components/expandable-section/style.module.scss

@@ -0,0 +1,29 @@
+@import "../../styles/variables.scss";
+
+.ExpandableSection {
+  border-bottom: 1px solid $borderColor;
+
+  .Top {
+    padding: 24px 0;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    user-select: none;
+
+    .Title {
+      font-weight: 600;
+      font-size: 20px;
+      line-height: 32px;
+    }
+
+    .HideBtn {
+      font-size: 14px;
+      cursor: pointer;
+      user-select: none;
+    }
+  }
+
+  .Content {
+    padding-bottom: 24px;
+  }
+}

package/src/components/checkout/components/form-item/caret-down.tsx

@@ -0,0 +1,20 @@
+import * as React from "react";
+
+type Props = {
+  className?: string;
+};
+
+const SVGCaretDown: React.FC<Props> = ({ className }) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    width="24"
+    height="24"
+    className={className}
+  >
+    <path fill="none" d="M0 0h24v24H0z" />
+    <path fill="currentColor" d="M12 16l-6-6h12z" />
+  </svg>
+);
+
+export default SVGCaretDown;