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

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,338 +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";
-import DeliveryMethods from "../delivery-methods";
-import { CheckoutStep } from "../../model";
-import { IkasStockLocation } from "../../../../models";
-import { IkasStorefrontConfig } from "@ikas/storefront-config";
-
-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]
-  );
-
-  const recipientsForm = React.useMemo(
-    () => (
-      <div>
-        <RecipientForm vm={vm} />
-      </div>
-    ),
-    [vm]
-  );
-  const [selectedLocationId, setSelectedLocationId] = React.useState("-1");
-
-  const isShowLocation = (location: IkasStockLocation) => {
-    return (
-      location.address &&
-      location.address.address &&
-      location.address.city &&
-      location.address.country &&
-      vm.vm.availableStockLocations.find(
-        (availableLocation) => availableLocation.id === location.id
-      )
-    );
-  };
-
-  React.useEffect(() => {
-    if (vm.vm.checkout.stockLocationId) {
-      setSelectedLocationId(vm.vm.checkout.stockLocationId);
-    }
-  }, []);
-
-  const locationFullAddress = (location: IkasStockLocation) => {
-    if (!location.address) return "";
-    const strings: string[] = [];
-
-    if (location.address.address) strings.push(location.address.address);
-    if (location.address.postalCode) strings.push(location.address.postalCode);
-    if (location.address.district && location.address.district.name)
-      strings.push(location.address.district.name);
-    if (location.address.city && location.address.city.name)
-      strings.push(location.address.city.name);
-    if (
-      location.address.state &&
-      location.address.state.name &&
-      location.address.state.name !== "Default"
-    )
-      strings.push(location.address.state.name);
-    if (location.address.country && location.address.country.name)
-      strings.push(location.address.country.name);
-
-    return strings.join(", ");
-  };
-
-  return (
-    <React.Fragment>
-      {!!IkasStorefrontConfig.getPickupStockLocationIds() &&
-        !vm.vm.isDigitalOnly &&
-        vm.vm.availableStockLocations.length > 0 &&
-        vm.vm.step !== CheckoutStep.PAYMENT && (
-          <>
-            <div className={commonStyles.FormSectionTitle}>
-              <div className={commonStyles.Title}>
-                {t("checkout-page:deliveryMethod")}
-              </div>
-            </div>
-            <DeliveryMethods
-              deliveryMethod={vm.vm.deliveryMethod}
-              onClick={(deliveryMethod) => {
-                if (deliveryMethod === "address") {
-                  setSelectedLocationId("-1");
-                }
-                vm.vm.onDeliveryMethodChange(deliveryMethod);
-              }}
-            />
-          </>
-        )}
-
-      <div className={commonStyles.FormSectionTitle}>
-        {vm.vm.deliveryMethod === "address" ? (
-          <div className={commonStyles.Title}>
-            {vm.editingCustomerAddress
-              ? t("checkout-page:editAddress")
-              : vm.addressType === "billing"
-              ? t("checkout-page:billingAddress")
-              : t("checkout-page:shippingAddress")}
-          </div>
-        ) : vm.vm.step === CheckoutStep.PAYMENT ? (
-          <div className={commonStyles.Title}>
-            {t("checkout-page:billingAddress")}
-          </div>
-        ) : (
-          <div className={commonStyles.Title}>
-            {t("checkout-page:pickUpLocation")}
-            <span className={styles.ErrorMessage}>
-              {vm.vm.isErrorsVisible &&
-                !!!vm.vm.checkout.stockLocationId &&
-                t("checkout-page:errorPickupLocationRequired")}
-            </span>
-          </div>
-        )}
-
-        {!!vm.editingCustomerAddress && (
-          <div
-            className={styles.CancelEdit}
-            onClick={vm.onCancelEditAddressClick}
-          >
-            {t("checkout-page:actions.cancel")}
-          </div>
-        )}
-      </div>
-
-      {!!vm.vm.store.customerStore.customer &&
-        !vm.editingCustomerAddress &&
-        (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
-                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 &&
-      vm.vm.step === CheckoutStep.INFO &&
-      vm.vm.deliveryMethod === "address"
-        ? addressForm
-        : vm.vm.step === CheckoutStep.PAYMENT &&
-          !vm.vm.store.customerStore.customer &&
-          addressForm}
-
-      {vm.vm.deliveryMethod === "in-store" && (
-        <div className={checkoutStyles.RowPB}>
-          {vm.vm.stockLocations.map(
-            (location) =>
-              isShowLocation(location) && (
-                <SelectBox
-                  key={location.id}
-                  label={location.name || ""}
-                  isSelected={selectedLocationId === location.id}
-                  bottomContent={
-                    <div>
-                      <div className={styles.AddressText}>
-                        {locationFullAddress(location)}
-                      </div>
-                      {location.deliveryTime && (
-                        <div className={styles.DeliveryTime}>
-                          {t(
-                            `checkout-page:stockLocation.deliveryTime.${location.deliveryTime}`
-                          )}
-                        </div>
-                      )}
-                    </div>
-                  }
-                  bottomContentVisible={true}
-                  onClick={() => {
-                    vm.vm.onStockLocationChange(location);
-                    setSelectedLocationId(location.id);
-                  }}
-                />
-              )
-          )}
-        </div>
-      )}
-
-      {vm.vm.deliveryMethod === "in-store" &&
-        vm.vm.step !== CheckoutStep.PAYMENT && (
-          <>
-            <div className={commonStyles.FormSectionTitle}>
-              <div className={commonStyles.Title}>
-                {t("checkout-page:recipientsInfo")}
-              </div>
-            </div>
-            {recipientsForm}
-          </>
-        )}
-
-      {!!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}
-        deliveryMethod={"address"}
-      />
-    );
-  }
-);
-
-type RecipientFormProps = {
-  vm: CustomerAddressesViewModel;
-};
-
-export const RecipientForm: React.FC<RecipientFormProps> = observer(
-  ({ vm }) => {
-    return (
-      <AddressForm
-        address={vm.editingCustomerAddress || vm.address!}
-        isErrorsVisible={vm.isEditAddressErrorsVisible || vm.vm.isErrorsVisible}
-        firstNameChangeCallback={vm.firstNameChangeCallback}
-        lastNameChangeCallback={vm.lastNameChangeCallback}
-        deliveryMethod={"in-store"}
-      />
-    );
-  }
-);
-
-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

@@ -1,134 +0,0 @@
-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.isDigitalOnly
-    ) {
-      this.vm.checkout.customer!.firstName = value;
-    }
-  };
-
-  lastNameChangeCallback = (value: string) => {
-    if (
-      (!this.vm.checkout.hasCustomer && this.addressType === "shipping") ||
-      this.vm.isDigitalOnly
-    ) {
-      this.vm.checkout.customer!.lastName = value;
-    }
-  };
-}

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

@@ -1,38 +0,0 @@
-@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;
-}
-
-.DeliveryTime {
-  font-weight: 400;
-  font-size: 14px;
-  line-height: 20px;
-  color: $primaryTextColor;
-  margin-top: 8px;
-  padding-left: 32px;
-}
-
-.ErrorMessage {
-  display: flex;
-  color: $errorColor;
-  font-size: 12px;
-  animation-name: fadeInFromRight;
-  margin-top: -5px;
-  animation-duration: 0.3s;
-}

package/src/components/checkout/components/delivery-methods/icon-button/index.tsx

@@ -1,29 +0,0 @@
-import * as React from "react";
-import { observer } from "mobx-react-lite";
-import styles from "./style.module.scss";
-
-type Props = {
-  icon: React.ReactNode;
-  text: string;
-  isSelected: boolean;
-  onClick: (type: "address" | "in-store") => void;
-  type: "address" | "in-store";
-};
-
-export const IconButton: React.FC<Props> = observer(
-  ({ text, icon, isSelected, type, onClick }) => {
-    const btnStyles = [styles.Button];
-
-    isSelected && btnStyles.push(styles.Selected);
-
-    return (
-      <button
-        type="button"
-        className={btnStyles.join(" ")}
-        onClick={() => onClick(type)}
-      >
-        <span className={styles.IconMargin}>{icon}</span> <span>{text}</span>
-      </button>
-    );
-  }
-);

package/src/components/checkout/components/delivery-methods/icon-button/style.module.scss

@@ -1,41 +0,0 @@
-@import "../../../styles/variables.scss";
-
-.Button {
-  cursor: pointer;
-  user-select: none;
-  border: 1px solid $borderColor;
-  border-radius: 8px;
-  font-weight: 400 !important;
-  text-align: center;
-  position: relative;
-  transition: all 0.2s;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  background-color: #fff;
-  color: $primaryTextColor;
-  height: 56px;
-
-  &:focus {
-    outline: 0;
-  }
-
-  &.Large {
-    height: 56px;
-    padding: 0 24px;
-  }
-
-  &.Medium {
-    height: 48px;
-    padding: 0 16px;
-  }
-
-  &.Selected {
-    background-color: $secondaryBgColor;
-    border: 1px solid $primaryTextColor;
-  }
-}
-
-.IconMargin {
-  margin-right: 8px;
-}