@ikas/storefront 4.0.0-alpha.7 → 4.0.0-alpha.70

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

@@ -1,39 +0,0 @@
-import * as React from "react";
-import { observer } from "mobx-react-lite";
-import styles from "./style.module.scss";
-import commonStyles from "../../styles/common.module.scss";
-import { IconButton } from "./icon-button";
-import SVGBox from "./icons/box";
-import SVGStore from "./icons/store";
-import { useTranslation } from "../../../../utils";
-
-type Props = {
-  deliveryMethod: "address" | "in-store";
-  onClick: (type: "address" | "in-store") => void;
-};
-
-const DeliveryMethods: React.FC<Props> = ({ deliveryMethod, onClick }) => {
-  const { t } = useTranslation();
-  return (
-    <div className={styles.main}>
-      <div className={[commonStyles.Grid, commonStyles.Grid2].join(" ")}>
-        <IconButton
-          icon={<SVGBox />}
-          type="address"
-          text={t("checkout-page:deliveryToAddress")}
-          isSelected={deliveryMethod === "address"}
-          onClick={(type) => onClick(type)}
-        />
-        <IconButton
-          icon={<SVGStore />}
-          type="in-store"
-          text={t("checkout-page:inStoreDelivery")}
-          isSelected={deliveryMethod === "in-store"}
-          onClick={(type) => onClick(type)}
-        />
-      </div>
-    </div>
-  );
-};
-
-export default observer(DeliveryMethods);

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

@@ -1,4 +0,0 @@
-@import "../../styles/variables.scss";
-.main {
-  margin-bottom: 40px;
-}

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

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

@@ -1,54 +0,0 @@
-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 />;
-      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

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

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

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

@@ -1,72 +0,0 @@
-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.checkout?.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?.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

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

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

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

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

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

package/src/components/checkout/components/form-item/index.tsx

@@ -1,207 +0,0 @@
-import * as React from "react";
-import { runInAction } from "mobx";
-import { observer } from "mobx-react-lite";
-import FormItemViewModel, { Props, FormItemType } from "./model";
-import SVGCaretDown from "./caret-down";
-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();
-  const [vm, setVM] = React.useState(() => new FormItemViewModel(props));
-
-  React.useEffect(() => {
-    ReactTooltip.rebuild();
-  }, []);
-
-  React.useEffect(() => {
-    runInAction(() => {
-      vm.type = props.type;
-    });
-  }, [props.type]);
-
-  React.useEffect(() => {
-    runInAction(() => {
-      vm.inputType = props.inputType;
-    });
-  }, [props.inputType]);
-
-  React.useEffect(() => {
-    runInAction(() => {
-      vm.value = props.value;
-    });
-  }, [props.value]);
-
-  React.useEffect(() => {
-    runInAction(() => {
-      vm.options = props.options;
-    });
-  }, [props.options]);
-
-  React.useEffect(() => {
-    runInAction(() => {
-      vm.label = props.label;
-    });
-  }, [props.label]);
-
-  React.useEffect(() => {
-    runInAction(() => {
-      vm.hasError = props.hasError;
-    });
-  }, [props.hasError]);
-
-  React.useEffect(() => {
-    runInAction(() => {
-      vm.errorText = props.errorText;
-    });
-  }, [props.errorText]);
-
-  React.useEffect(() => {
-    runInAction(() => {
-      vm.errorText = props.errorText;
-    });
-  }, [props.errorText]);
-
-  React.useEffect(() => {
-    runInAction(() => {
-      vm.textAreaPlaceholder = props.textAreaPlaceholder;
-    });
-  }, [props.textAreaPlaceholder]);
-
-  React.useEffect(() => {
-    runInAction(() => {
-      vm.rightContent = props.rightContent;
-    });
-  }, [props.rightContent]);
-
-  React.useEffect(() => {
-    runInAction(() => {
-      vm.disableResize = props.disableResize;
-    });
-  }, [props.disableResize]);
-
-  React.useEffect(() => {
-    runInAction(() => {
-      setVM(new FormItemViewModel(props));
-    });
-  }, [props.onChange]);
-
-  React.useEffect(() => {
-    if (!vm.country && props.currentCountryCode) {
-      vm.onCountryChange(props.currentCountryCode);
-    }
-  }, [props.currentCountryCode]);
-
-  return (
-    <div className={vm.formItemStyle} style={props.style}>
-      <div className={styles.FormItemWrapper}>
-        <div className={styles.FormItemInputWrapper}>
-          <label className={vm.labelStyle}>{vm.label}</label>
-          {vm.type === FormItemType.TEXT && (
-            <Input
-              vm={vm}
-              disabled={vm.disabled}
-              autocomplete={props.autocomplete}
-              name={props.name}
-            />
-          )}
-          {vm.type === FormItemType.TEL && (
-            <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 && (
-            <Select vm={vm} autocomplete={props.autocomplete} />
-          )}
-        </div>
-        {!!vm.hasError && (
-          <div className={styles.ErrorMsg}>{vm.errorText || ""}</div>
-        )}
-        {!!props.tooltipText && (
-          <div
-            className={styles.FormItemTooltipContainer}
-            data-tip={props.tooltipText}
-            data-event="touchstart focus mouseover"
-            data-event-off="mouseout"
-          >
-            ?
-          </div>
-        )}
-        {!!vm.rightContent && (
-          <div className={styles.RightContent}>{vm.rightContent}</div>
-        )}
-      </div>
-    </div>
-  );
-});
-
-type InputProps = {
-  vm: FormItemViewModel;
-  autocomplete?: string;
-  disabled?: boolean;
-  name?: string;
-  type?: string;
-};
-
-const Input: React.FC<InputProps> = observer(
-  ({ vm, name, autocomplete, type, disabled }) => (
-    <input
-      type={type || "text"}
-      name={name}
-      disabled={disabled}
-      autoComplete={autocomplete}
-      inputMode={vm.inputType || "text"}
-      className={vm.inputStyle}
-      value={vm.value}
-      onChange={vm.onValueChange}
-    />
-  )
-);
-
-type TextAreaProps = {
-  vm: FormItemViewModel;
-};
-
-const TextArea: React.FC<TextAreaProps> = observer(({ vm }) => (
-  <textarea
-    style={{ resize: vm.disableResize ? "none" : "initial" }}
-    value={vm.value}
-    disabled={vm.disabled}
-    onChange={vm.onTextAreaValueChange}
-    placeholder={vm.textAreaPlaceholder || ""}
-  />
-));
-
-const Select: React.FC<InputProps> = observer(({ vm, autocomplete }) => (
-  <React.Fragment>
-    <select
-      className={vm.inputStyle}
-      disabled={vm.disabled}
-      autoComplete={autocomplete}
-      onChange={vm.onSelectChange}
-    >
-      {!vm.value && <option selected disabled key={-1}></option>}
-      {vm.options?.map((o, index) => (
-        <option
-          key={index + o.value}
-          value={o.label}
-          selected={vm.value === o.value}
-        >
-          {o.label}
-        </option>
-      ))}
-    </select>
-    <div className={styles.ArrowContainer}>
-      <SVGCaretDown />
-    </div>
-  </React.Fragment>
-));