@ikas/storefront 2.0.0-alpha.1 → 2.0.0-alpha.10

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

@@ -1,50 +0,0 @@
-import * as React from "react";
-import { observer } from "mobx-react-lite";
-import SVGCheck from "./check";
-
-import styles from "./style.module.scss";
-
-type Props = {
-  value: boolean;
-  label?: string | React.ReactElement;
-  hasError?: boolean;
-  removePadding?: boolean;
-  onChange: (value: boolean) => void;
-};
-
-export const Checkbox: React.FC<Props> = observer(
-  ({ value, label, hasError, removePadding, onChange }) => {
-    const _onChange = () => {
-      onChange(!value);
-    };
-
-    const checkboxBorderClasses = [styles.CheckboxBorder];
-    const labelClasses = [styles.CheckboxLabel];
-    const tickClasses = [styles.CheckboxTick];
-
-    if (value) {
-      checkboxBorderClasses.push(styles.Checked);
-      tickClasses.push(styles.Visible);
-    }
-
-    if (hasError) labelClasses.push(styles.CheckboxLabelError);
-
-    return (
-      <div
-        className={[
-          styles.CheckboxWrapper,
-          removePadding ? styles.WithoutPadding : "",
-        ].join(" ")}
-        onClick={_onChange}
-      >
-        <div className={styles.CheckboxContainer}>
-          <div className={checkboxBorderClasses.join(" ")}></div>
-          <div className={tickClasses.join(" ")}>
-            <SVGCheck />
-          </div>
-        </div>
-        {!!label && <div className={labelClasses.join(" ")}>{label}</div>}
-      </div>
-    );
-  }
-);

package/src/components/checkout/components/checkbox/style.module.scss

@@ -1,72 +0,0 @@
-@import "../../styles//variables.scss";
-
-.CheckboxWrapper {
-  width: 100%;
-  display: flex;
-  padding: 8px 0;
-  cursor: pointer;
-  user-select: none;
-  align-items: center;
-
-  &.WithoutPadding {
-    padding: 0;
-  }
-
-  .CheckboxContainer {
-    flex: 0 0 auto;
-    position: relative;
-    width: 20px;
-    height: 20px;
-    margin-right: 12px;
-  }
-
-  .CheckboxBorder {
-    flex: 0 0 auto;
-    width: 20px;
-    height: 20px;
-    border-radius: 4px;
-    border: 1px solid $borderColor;
-    position: absolute;
-    top: 0;
-    left: 0;
-    transition: border-width .2s ease-in-out;
-
-    &.Checked {
-      border: 10px solid $buttonBgColor;
-    }
-  }
-
-  .CheckboxTick {
-    width: 20px;
-    height: 20px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-
-    position: absolute;
-    top: 0;
-    left: 0;
-    color: $buttonTextColor;
-    z-index: 2;
-
-    transition: all 0.2s ease-in-out;
-    transition-delay: .1s;
-    opacity: 0;
-    transform: scale(0.2);
-
-    &.Visible {
-      opacity: 1;
-      transform: scale(1.2);
-    }
-  }
-
-  .CheckboxLabel {
-    flex: 1 1 auto;
-    font-weight: normal;
-    color: $secondaryTextColor;
-  }
-
-  .CheckboxLabelError {
-    color: $errorColor;
-  }
-}

package/src/components/checkout/components/credit-card-form/index.tsx

@@ -1,121 +0,0 @@
-import * as React from "react";
-import { observer } from "mobx-react-lite";
-
-import commonStyles from "../../styles/common.module.scss";
-import checkoutStyles from "../../style.module.scss";
-
-import { FormItem } from "../form-item";
-import { FormItemInputType, FormItemType } from "../form-item/model";
-import CheckoutViewModel from "../../model";
-import { IkasCardAssociation } from "../../../../models";
-import SVGAmex from "./svg/amex";
-import SVGMasterCard from "./svg/master-card";
-import SVGTroy from "./svg/troy";
-import SVGVisa from "./svg/visa";
-
-import styles from "./style.module.scss";
-import { useTranslation } from "../../../../utils";
-
-type Props = {
-  vm: CheckoutViewModel;
-};
-
-export const CreditCardForm: React.FC<Props> = observer(({ vm }) => {
-  const { t } = useTranslation();
-  const { cardData } = vm;
-  if (!cardData) return null;
-
-  const getCardLogo = (ca: IkasCardAssociation) => {
-    switch (ca) {
-      case IkasCardAssociation.AMERICAN_EXPRESS:
-        return <SVGAmex />;
-
-      case IkasCardAssociation.MASTER_CARD:
-        return <SVGMasterCard />;
-
-      case IkasCardAssociation.TROY:
-        return <SVGTroy />;
-
-      case IkasCardAssociation.VISA:
-        return <SVGVisa />;
-
-      default:
-        return <div></div>;
-    }
-  };
-
-  return (
-    <div>
-      <div className={checkoutStyles.RowPB}>
-        <FormItem
-          name="cardnumber"
-          autocomplete="cc-number"
-          inputType={FormItemInputType.NUMERIC}
-          type={FormItemType.TEXT}
-          label={t("checkout-page:cardNumber")}
-          value={cardData.cardNumber}
-          onChange={vm.onCardNumberChange}
-          errorText={t("checkout-page:cardNumberError")}
-          rightContent={
-            vm.installmentInfo?.cardAssociation ? (
-              <div className={styles.CardLogo}>
-                {getCardLogo(vm.installmentInfo.cardAssociation)}
-              </div>
-            ) : undefined
-          }
-          hasError={vm.isErrorsVisible && !cardData.validationResult.cardNumber}
-        />
-      </div>
-      <div className={checkoutStyles.RowPB}>
-        <FormItem
-          name="ccname"
-          autocomplete="cc-name"
-          type={FormItemType.TEXT}
-          label={t("checkout-page:cardHolderName")}
-          value={cardData.cardHolderName}
-          onChange={vm.onCardHolderNameChange}
-          errorText={t("checkout-page:cardHolderError")}
-          hasError={
-            vm.isErrorsVisible && !cardData.validationResult.cardHolderName
-          }
-        />
-      </div>
-      <div className={[commonStyles.Grid, commonStyles.Grid2].join(" ")}>
-        <FormItem
-          name="cc-exp"
-          autocomplete="cc-exp"
-          inputType={FormItemInputType.NUMERIC}
-          type={FormItemType.TEXT}
-          label={t("checkout-page:cardExpiry")}
-          value={cardData.expirationDate}
-          onChange={vm.onExpirationDateChange}
-          errorText={t("checkout-page:cardExpiryError")}
-          hasError={
-            vm.isErrorsVisible && !cardData.validationResult.expirationDate
-          }
-        />
-        <FormItem
-          name="cvc"
-          autocomplete="cc-csc"
-          inputType={FormItemInputType.NUMERIC}
-          type={FormItemType.TEXT}
-          label={t("checkout-page:cardCVC")}
-          value={cardData.cvv}
-          onChange={vm.onCvcChange}
-          errorText={t("checkout-page:cardCVCError")}
-          tooltipText={t("checkout-page:cardCVCTooltip")}
-          hasError={vm.isErrorsVisible && !cardData.validationResult.cvv}
-        />
-      </div>
-      {/* <div style={{ marginTop: "0.4em" }}>
-        <Checkbox
-          value={false}
-          onChange={() => {
-            return;
-          }}
-          label={"Kart bilgilerimi kaydet"}
-        />
-      </div> */}
-    </div>
-  );
-});

package/src/components/checkout/components/credit-card-form/model.ts

@@ -1,56 +0,0 @@
-import { makeAutoObservable } from "mobx";
-
-export default class CreditCardData {
-  cardNumber?: string;
-  cardHolderName?: string;
-  expirationDate?: string;
-  cvv?: string;
-  installmentCount = 1;
-  threeDSecure: boolean;
-
-  constructor(data: Partial<CreditCardData> = {}) {
-    this.cardNumber = data.cardNumber || "";
-    this.cardHolderName = data.cardHolderName || "";
-    this.expirationDate = data.expirationDate || "";
-    this.cvv = data.cvv || "";
-    this.installmentCount = data.installmentCount || 1;
-    this.threeDSecure = data.threeDSecure || false;
-
-    makeAutoObservable(this);
-  }
-
-  get validationResult(): CreditCardDataValidation {
-    return {
-      cardNumber: !!this.cardNumber && this.cardNumber.length === 19,
-      cardHolderName: !!this.cardHolderName,
-      expirationDate: !!this.expirationDate && this.expirationDate.length === 7,
-      cvv: !!this.cvv,
-    };
-  }
-
-  get isValid() {
-    return Object.values(this.validationResult).every((result) => result);
-  }
-
-  toInput = () => {
-    const dateParts = this.expirationDate!.split(" / ");
-    const expiredMonth = parseInt(dateParts[0]);
-    const expiredYear = parseInt(dateParts[1]);
-    return {
-      cardNumber: this.cardNumber!.split(" ").join(""),
-      cardHolderName: this.cardHolderName!,
-      cvv: this.cvv!,
-      expiredMonth,
-      expiredYear,
-      installmentCount: this.installmentCount,
-      threeDSecure: this.threeDSecure,
-    };
-  };
-}
-
-export type CreditCardDataValidation = {
-  cardNumber: boolean;
-  cardHolderName: boolean;
-  expirationDate: boolean;
-  cvv: boolean;
-};

package/src/components/checkout/components/credit-card-form/style.module.scss

@@ -1,6 +0,0 @@
-.CardLogo {
-  display: flex;
-  align-items: center;
-  height: 100%;
-  padding-right: 16px;
-}

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

@@ -1,30 +0,0 @@
-import * as React from "react";
-
-type Props = {
-  className?: string;
-};
-
-const SVGAmex: 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="#1F72CD"
-      stroke="#E5E4E9"
-    />
-    <path
-      fillRule="evenodd"
-      clipRule="evenodd"
-      d="M5.93431 9L3 15.5453H6.51278L6.94826 14.5017H7.94368L8.37916 15.5453H12.2457V14.7488L12.5903 15.5453H14.5904L14.9349 14.7319V15.5453H22.9764L23.9542 14.5288L24.8697 15.5453L29 15.5537L26.0564 12.2909L29 9H24.9338L23.982 9.9977L23.0952 9H14.3472L13.596 10.6894L12.8272 9H9.32172V9.7694L8.93177 9H5.93431ZM6.6141 9.92922H8.32639L10.2727 14.3676V9.92922H12.1485L13.6518 13.1115L15.0373 9.92922H16.9036V14.6259H15.768L15.7587 10.9456L14.103 14.6259H13.0872L11.4222 10.9456V14.6259H9.08594L8.64302 13.5729H6.25011L5.80811 14.625H4.55635L6.6141 9.92922ZM22.5606 9.92922H17.9429V14.6231H22.4891L23.9545 13.0675L25.3668 14.6231H26.8432L24.6973 12.2898L26.8432 9.92922H25.4309L23.973 11.467L22.5606 9.92922ZM7.44697 10.7239L6.6586 12.5996H8.23442L7.44697 10.7239ZM19.0826 11.7588V10.9015V10.9006H21.964L23.2212 12.2718L21.9083 13.6505H19.0826V12.7145H21.6018V11.7588H19.0826Z"
-      fill="white"
-    />
-  </svg>
-);
-
-export default SVGAmex;

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

@@ -1,38 +0,0 @@
-import * as React from "react";
-
-type Props = {
-  className?: string;
-};
-
-const SVGMasterCard: 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
-      d="M12.5652 17.1304C15.6388 17.1304 18.1304 14.6388 18.1304 11.5652C18.1304 8.49163 15.6388 6 12.5652 6C9.49163 6 7 8.49163 7 11.5652C7 14.6388 9.49163 17.1304 12.5652 17.1304Z"
-      fill="#E61C24"
-    />
-    <path
-      d="M19.4759 17.1304C22.5494 17.1304 25.0411 14.6388 25.0411 11.5652C25.0411 8.49163 22.5494 6 19.4759 6C16.4023 6 13.9106 8.49163 13.9106 11.5652C13.9106 14.6388 16.4023 17.1304 19.4759 17.1304Z"
-      fill="#F99F1B"
-    />
-    <path
-      fillRule="evenodd"
-      clipRule="evenodd"
-      d="M16.0205 7.20801C14.6879 8.2615 13.9106 9.86684 13.9106 11.5656C13.9106 13.2643 14.6879 14.8696 16.0205 15.9231C17.3531 14.8696 18.1304 13.2643 18.1304 11.5656C18.1304 9.86684 17.3531 8.2615 16.0205 7.20801Z"
-      fill="#F26622"
-    />
-  </svg>
-);
-
-export default SVGMasterCard;

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

@@ -1,54 +0,0 @@
-import * as React from "react";
-
-type Props = {
-  className?: string;
-};
-
-const SVGTroy: 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="M24.331 9.4811C24.0522 9.4811 23.7446 9.63656 23.6219 9.91598L22.3183 12.9041L21.8488 9.91598C21.7937 9.63656 21.6037 9.4811 21.3033 9.4811L19.652 9.4811L21.0644 14.4436C21.0904 14.5389 21.0953 14.6443 21.0764 14.7553C21.0023 15.1694 20.6068 15.5054 20.1924 15.5054L19.2677 15.5054C19.0328 15.5054 18.8782 15.6509 18.8026 15.9801L18.5972 17.21L20.2258 17.21C21.0754 17.21 22.0733 16.7831 22.7389 15.6027L26 9.4811L24.331 9.4811Z"
-      fill="#2F3842"
-    />
-    <path
-      fillRule="evenodd"
-      clipRule="evenodd"
-      d="M8.2998 8.00041C8.78746 8.00041 9.02309 8.19493 8.93741 8.68384L8.79675 9.48037L9.91728 9.48037L9.67046 10.8795L8.54946 10.8795L8.24405 12.612C8.13851 13.2156 8.73595 13.2959 9.07869 13.2959C9.14705 13.2959 9.20376 13.2945 9.24439 13.2921L8.97033 14.8524C8.88574 14.8614 8.79848 14.873 8.61404 14.873C7.76333 14.873 6.15404 14.6453 6.47048 12.85L6.817 10.8795L6 10.8795L6.24587 9.48037L7.05484 9.48037L7.31521 8.00041L8.2998 8.00041Z"
-      fill="#2F3842"
-    />
-    <path
-      fillRule="evenodd"
-      clipRule="evenodd"
-      d="M17.7158 9.54448L17.428 11.1758C17.7829 11.3571 18.0261 11.7254 18.0261 12.1506C18.0261 12.7114 17.6057 13.171 17.0645 13.237L16.7769 14.868C16.8276 14.8713 16.8792 14.873 16.9307 14.873C18.4351 14.873 19.6536 13.6538 19.6536 12.1506C19.6536 10.9217 18.8376 9.88187 17.7158 9.54448Z"
-      fill="#00A6B6"
-    />
-    <path
-      fillRule="evenodd"
-      clipRule="evenodd"
-      d="M16.4343 13.1255C16.0797 12.9452 15.8359 12.5752 15.8359 12.1504C15.8359 11.5931 16.2572 11.1302 16.7983 11.0651L17.0856 9.43397C17.0346 9.43082 16.9826 9.42846 16.9314 9.42846C15.4281 9.42846 14.209 10.6485 14.209 12.1504C14.209 13.3799 15.0254 14.4204 16.1471 14.7578L16.4343 13.1255Z"
-      fill="#00A6B6"
-    />
-    <path
-      fillRule="evenodd"
-      clipRule="evenodd"
-      d="M10.5661 9.48044L11.529 9.48044C12.0168 9.48044 12.2515 9.67543 12.1655 10.1645L12.0601 10.7561C12.4189 10.0279 13.197 9.4272 13.9951 9.4272C14.0999 9.4272 14.2007 9.44799 14.2007 9.44799L13.8894 11.2123C13.8894 11.2123 13.7497 11.1798 13.5317 11.1798C13.1064 11.1798 12.3871 11.3146 11.9867 12.1138C11.8913 12.3109 11.8179 12.5505 11.767 12.8392L11.4186 14.8213L9.625 14.8213L10.5661 9.48044Z"
-      fill="#2F3842"
-    />
-  </svg>
-);
-
-export default SVGTroy;

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

@@ -1,46 +0,0 @@
-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

@@ -1,167 +0,0 @@
-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;
-  }
-);