@ikas/storefront 4.0.0-alpha.78 → 4.0.0-alpha.8

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

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

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

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 />;
+      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,14 @@
+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

@@ -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.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

@@ -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;

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

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