@ikas/storefront 4.0.0-alpha.59 → 4.0.0-alpha.6

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,333 @@
+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.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" && (
+          <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 && 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

@@ -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,38 @@
+@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

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

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

package/src/components/checkout/components/delivery-methods/icons/box.tsx

@@ -0,0 +1,22 @@
+import * as React from "react";
+
+type Props = {
+  className?: string;
+};
+
+const SVGBox: React.FC<Props> = ({ className }) => (
+  <svg
+    width="16"
+    height="16"
+    viewBox="0 0 16 16"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M15.3913 3.69726L8.32603 0.117356L8.32309 0.115888C8.0085 -0.0407374 7.63469 -0.0372374 7.32303 0.125263L4.29275 1.73351C4.26813 1.74395 4.24447 1.75661 4.22181 1.77117L0.5905 3.69842C0.22625 3.88914 0 4.26283 0 4.67411V11.3266C0 11.7379 0.22625 12.1116 0.5905 12.3023L7.32003 15.8739L7.32306 15.8755C7.482 15.9584 7.65716 15.9999 7.83234 15.9999C8.00062 15.9999 8.16897 15.9616 8.32309 15.8849L15.3913 12.3035C15.7668 12.1157 16 11.7384 16 11.3185V4.68226C16 4.26229 15.7668 3.88501 15.3913 3.69726ZM7.75741 0.955669C7.80331 0.932106 7.85813 0.931638 7.90444 0.954356L14.5178 4.30529L11.944 5.5867L5.47837 2.16523L7.75741 0.955669ZM7.357 14.8326L1.02844 11.4737L1.02541 11.4721C0.971 11.4437 0.937156 11.388 0.937156 11.3266V5.09698L7.357 8.44461V14.8326ZM7.83053 7.63461L1.446 4.30539L4.478 2.69623L10.9116 6.1007L7.83053 7.63461ZM15.0628 11.3184C15.0628 11.3812 15.0279 11.4375 14.9718 11.4654L8.29419 14.8489V8.45064L11.3687 6.91995V8.52479C11.3687 8.78358 11.5786 8.99339 11.8373 8.99339C12.0961 8.99339 12.3059 8.78358 12.3059 8.52479V6.45336L15.0628 5.08086V11.3184Z"
+      fill="#272727"
+    />
+  </svg>
+);
+
+export default SVGBox;

package/src/components/checkout/components/delivery-methods/icons/store.tsx

@@ -0,0 +1,22 @@
+import * as React from "react";
+
+type Props = {
+  className?: string;
+};
+
+const SVGStore: React.FC<Props> = ({ className }) => (
+  <svg
+    width="16"
+    height="14"
+    viewBox="0 0 16 14"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M15.985 4.379L14.985 0.379C14.93 0.156 14.729 0 14.5 0H1.5C1.271 0 1.07 0.156 1.015 0.379L0.015 4.379C0.005 4.418 0 4.459 0 4.5C0 5.338 0.397 6.077 1 6.531V13.5C1 13.776 1.224 14 1.5 14H6.5C6.776 14 7 13.776 7 13.5V10H9V13.5C9 13.776 9.224 14 9.5 14H14.5C14.776 14 15 13.776 15 13.5V6.531C15.603 6.077 16 5.338 16 4.5C16 4.459 15.995 4.418 15.985 4.379ZM14 13H10V9.5C10 9.224 9.776 9 9.5 9H6.5C6.224 9 6 9.224 6 9.5V13H2V6.96C2.123 6.981 2.247 7 2.375 7C3.137 7 3.815 6.621 4.25 6.033C4.685 6.621 5.363 7 6.125 7C6.887 7 7.565 6.621 8 6.033C8.435 6.621 9.113 7 9.875 7C10.637 7 11.315 6.621 11.75 6.033C12.185 6.621 12.863 7 13.625 7C13.753 7 13.877 6.981 14 6.96V13ZM13.625 6C12.867 6 12.25 5.327 12.25 4.5C12.25 4.224 12.026 4 11.75 4C11.474 4 11.25 4.224 11.25 4.5C11.25 5.327 10.633 6 9.875 6C9.117 6 8.5 5.327 8.5 4.5C8.5 4.224 8.276 4 8 4C7.724 4 7.5 4.224 7.5 4.5C7.5 5.327 6.883 6 6.125 6C5.367 6 4.75 5.327 4.75 4.5C4.75 4.224 4.526 4 4.25 4C3.974 4 3.75 4.224 3.75 4.5C3.75 5.327 3.133 6 2.375 6C1.635 6 1.029 5.358 1.001 4.558L1.891 1H14.11L15 4.558C14.971 5.358 14.365 6 13.625 6Z"
+      fill="#272727"
+    />
+  </svg>
+);
+
+export default SVGStore;