@ikas/storefront 1.0.21 → 2.0.0-alpha.1

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

@@ -0,0 +1,205 @@
+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";
+
+//@ts-ignore
+import PhoneInput from "@ikas/react-phone-number-input";
+
+import { useTranslation } from "../../../../utils";
+import ReactTooltip from "react-tooltip";
+
+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}
+              autocomplete={props.autocomplete}
+              name={props.name}
+            />
+          )}
+          {vm.type === FormItemType.TEL && (
+            <PhoneInput
+              key={props.currentCountryCode || "1"}
+              defaultCountry={props.currentCountryCode}
+              placeholder={t("checkout-page:enterPhoneNumber")}
+              value={vm.value ? vm.value : ""}
+              onChange={vm.onPhoneChange}
+              international={true}
+              addInternationalOption={false}
+            />
+          )}
+          {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;
+  name?: string;
+  type?: string;
+};
+
+const Input: React.FC<InputProps> = observer(
+  ({ vm, name, autocomplete, type }) => (
+    <input
+      type={type || "text"}
+      name={name}
+      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}
+    onChange={vm.onTextAreaValueChange}
+    placeholder={vm.textAreaPlaceholder || ""}
+  />
+));
+
+const Select: React.FC<InputProps> = observer(({ vm, autocomplete }) => (
+  <React.Fragment>
+    <select
+      className={vm.inputStyle}
+      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.value}
+          selected={vm.value === o.value}
+        >
+          {o.label}
+        </option>
+      ))}
+    </select>
+    <div className={styles.ArrowContainer}>
+      <SVGCaretDown />
+    </div>
+  </React.Fragment>
+));

package/src/components/checkout/components/form-item/model.ts

@@ -0,0 +1,131 @@
+import { makeAutoObservable } from "mobx";
+import styles from "./style.module.scss";
+
+export default class FormItemViewModel implements Props {
+  type: FormItemType;
+  inputType?: FormItemInputType;
+  options?: FormItemSelectOption[];
+  label: string;
+  value?: string;
+  hasError?: boolean;
+  errorText?: string;
+  tooltipText?: string;
+  country?: string | null = null;
+  textAreaPlaceholder?: string | null = null;
+  rightContent?: React.ReactElement | null;
+  disableResize?: boolean;
+  onChange: (value: string) => void;
+
+  constructor(props: Props) {
+    this.type = props.type;
+    this.inputType = props.inputType;
+    this.options = props.options;
+    this.label = props.label;
+    this.value = props.value;
+    this.hasError = props.hasError;
+    this.errorText = props.errorText;
+    this.tooltipText = props.tooltipText;
+    this.country = props.country || null;
+    this.textAreaPlaceholder = props.textAreaPlaceholder || null;
+    this.rightContent = props.rightContent || null;
+    this.disableResize = props.disableResize || false;
+    this.onChange = props.onChange;
+
+    makeAutoObservable(this);
+  }
+
+  get formItemStyle() {
+    const s = [styles.FormItem];
+
+    if (this.type === FormItemType.TEL && this.hasError) {
+      s.push(styles.PhoneError);
+    }
+
+    return s.join(" ");
+  }
+
+  get labelStyle() {
+    if (this.value || this.type === FormItemType.TEL) {
+      return [styles.FieldLabel, styles.FieldLabelTop].join(" ");
+    } else {
+      return [styles.FieldLabel].join(" ");
+    }
+  }
+
+  get inputStyle() {
+    const classes: string[] = [];
+
+    if (this.value) {
+      classes.push(styles.Bottom);
+    }
+    if (this.hasError) {
+      classes.push(styles.Error);
+    }
+    if (this.tooltipText) {
+      classes.push(styles.WithTooltip);
+    }
+    if (this.type === FormItemType.TEL) {
+      classes.push(styles.Tel);
+    }
+
+    return classes.join(" ");
+  }
+
+  onValueChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    this.onChange(e.target.value);
+  };
+
+  onTextAreaValueChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+    this.onChange(e.target.value);
+  };
+
+  onSelectChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
+    this.onChange(e.target.value);
+  };
+
+  onPhoneChange = (value: string) => {
+    this.onChange(value);
+  };
+
+  onCountryChange = (value: string | undefined) => {
+    this.country = value;
+  };
+}
+
+export interface Props {
+  type: FormItemType;
+  inputType?: FormItemInputType;
+  options?: FormItemSelectOption[];
+  label: string;
+  value?: string;
+  hasError?: boolean;
+  errorText?: string;
+  name?: string;
+  autocomplete?: string;
+  tooltipText?: string;
+  country?: string | null;
+  currentCountryCode?: string | null;
+  style?: React.CSSProperties;
+  textAreaPlaceholder?: string | null;
+  rightContent?: React.ReactElement | null;
+  disableResize?: boolean;
+  onChange: (value: string) => void;
+}
+
+export enum FormItemType {
+  TEXT,
+  TEXT_AREA,
+  SELECT,
+  TEL,
+}
+
+export type FormItemSelectOption = {
+  value: string;
+  label: string;
+};
+
+export enum FormItemInputType {
+  NUMERIC = "numeric",
+  TEL = "tel",
+  EMAIL = "email",
+}

package/src/components/checkout/components/form-item/style.module.scss

@@ -0,0 +1,213 @@
+@import "../../styles/variables.scss";
+@import "../../styles/common.module.scss";
+
+.FormItem {
+  width: 100%;
+  
+  &Wrapper {
+    width: 100%;
+    position: relative;
+
+    .RightContent {
+      position: absolute;
+      height: 100%;
+      top: 0;
+      right: 0;
+    }
+  }
+
+  &InputWrapper {
+    position: relative;
+    width: 100%;
+
+    label.FieldLabel {
+      color: $secondaryTextColor;
+      position: absolute;
+      top: 0;
+      left: 17px;
+      width: 100%;
+      z-index: 1;
+      user-select: none;
+      pointer-events: none;
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      transition: transform .1s;
+      transform: translateY(18px);
+      font-size: 0.85em;
+      line-height: 22px;
+
+      &Top {
+        transform: translateY(8px);
+        font-size: 0.7em;
+      }
+    }
+
+    input,
+    select,
+    textarea {
+      border: 1px solid $borderColor;
+      background-color: $primaryBgColor;
+      color: $primaryTextColor;
+      background-clip: padding-box;
+      border-radius: 8px;
+      display: block;
+      width: 100%;
+      height: 56px;
+      padding: 8px 16px;
+      outline: none;
+      transition: padding .1s, border-color .5s, box-shadow .5s;
+      box-shadow: 0 0 0 1px transparent;
+
+      &:focus {
+        box-shadow: 0 0 0 1px $buttonBgColor;
+        border-color: $buttonBgColor;
+      }
+
+      &.Bottom {
+        padding-top: 1.2em;
+        padding-bottom: 0.2em;
+      }
+
+      &.Error {
+        box-shadow: 0 0 0 1px $errorColor;
+        border-color: $errorColor;
+      }
+
+      &.WithTooltip {
+        padding-right: 40px;
+      }
+
+      &::-ms-expand {
+        display: none;
+      }
+
+      &::placeholder {
+        color: $secondaryTextColor !important;
+      }
+
+      -moz-appearance: none;
+      -webkit-appearance: none;
+    }
+
+    textarea {
+      min-height: 120px;
+    }
+
+    .ArrowContainer {
+      position: absolute;
+      right: 1px;
+      padding-right: 0.5em;
+      top: 1px;
+      height: calc(100% - 2px);
+      display: flex;
+      align-items: center;
+      color: $secondaryTextColor;
+      background-color: $primaryBgColor;
+      z-index: 2;
+      border-radius: 6px;
+    }
+
+    :global(.PhoneInput) {
+      display: flex;
+      align-items: center;
+    }
+
+    :global(.PhoneInputInput) {
+      padding-left: 64px;
+
+
+      &::placeholder {
+        color: $secondaryTextColor !important;
+        font-size: 14px !important;
+      }
+    }
+
+    :global(.PhoneInputCountry) {
+      position: absolute;
+      align-self: stretch;
+      display: flex;
+      align-items: center;
+      top: 26px;
+      left: 16px;
+    }
+    
+    :global(.PhoneInputCountrySelect) {
+      border: none;
+      display: inline-flex;
+      width: 60px;
+      position: absolute;
+      top: 0;
+      left: 0;
+      height: 100%;
+      width: 100%;
+      z-index: 1;
+      border: 0;
+      opacity: 0;
+      cursor: pointer;
+    }
+
+    :global(.PhoneInputCountryIcon) {
+      width: calc(1em * 1.5);
+      height: 1em;
+    }
+
+    :global(.PhoneInputCountrySelectArrow) {
+      display: block;
+      content: '';
+      width: 0.3em;
+      height: 0.3em;
+      margin-left: 0.35em;
+      border-style: solid;
+      border-color: inherit;
+      border-top-width: 0;
+      border-bottom-width: 1px;
+      border-left-width: 0;
+      border-right-width: 1px;
+      transform: rotate(45deg);
+      opacity: 0.45;
+    }
+
+    :global(.PhoneInputCountryIconImg) {
+      width: 24px;
+    }
+  }
+
+  & .ErrorMsg {
+    color: $errorColor;
+    font-size: 12px;
+    margin-top: 8px;
+    animation-name: fadeInFromRight;
+    animation-duration: .3s;
+  }
+
+  &.PhoneError {
+    input {
+      box-shadow: 0 0 0 1px $errorColor !important;
+      border-color: $errorColor !important;
+    }
+  }
+}
+
+.FormItemWrapper {
+  position: relative;
+}
+
+.FormItemTooltipContainer {
+  width: 16px;
+  height: 16px;
+  border-radius: 100%;
+  color: white;
+  background-color: $secondaryTextColor;
+  position: absolute;
+  top: 0;
+  right: 16px;
+  bottom: 0;
+  margin: auto;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 12px !important;
+  line-height: 16px !important;
+  cursor: pointer;
+}

package/src/components/checkout/components/fullscreen-loading/index.tsx

@@ -0,0 +1,10 @@
+import * as React from "react";
+import styles from "./style.module.scss";
+
+export const FullscreenLoading: React.FC = () => {
+  return (
+    <div className={styles.Container}>
+      <div className={styles.loader}></div>
+    </div>
+  );
+};

package/src/components/checkout/components/fullscreen-loading/style.module.scss

@@ -0,0 +1,56 @@
+@import "../../styles/variables.scss";
+
+.Container {
+  width: 100vw;
+  height: 100vh;
+  background-color: $primaryBgColor;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  .loader,
+  .loader:after {
+    border-radius: 50%;
+    width: 5em;
+    height: 5em;
+  }
+
+  .loader {
+    font-size: 6px;
+    position: relative;
+    text-indent: -9999em;
+    border-top: 0.5em solid rgba(255, 255, 255, 0.2);
+    border-right: 0.5em solid rgba(255, 255, 255, 0.2);
+    border-bottom: 0.5em solid rgba(255, 255, 255, 0.2);
+    border-left: 0.5em solid $buttonBgColor;
+    -webkit-transform: translateZ(0);
+    -ms-transform: translateZ(0);
+    transform: translateZ(0);
+    -webkit-animation: load8 1.1s infinite linear;
+    animation: load8 1.1s infinite linear;
+  }
+
+  @-webkit-keyframes load8 {
+    0% {
+      -webkit-transform: rotate(0deg);
+      transform: rotate(0deg);
+    }
+
+    100% {
+      -webkit-transform: rotate(360deg);
+      transform: rotate(360deg);
+    }
+  }
+
+  @keyframes load8 {
+    0% {
+      -webkit-transform: rotate(0deg);
+      transform: rotate(0deg);
+    }
+
+    100% {
+      -webkit-transform: rotate(360deg);
+      transform: rotate(360deg);
+    }
+  }
+}

package/src/components/checkout/components/input-with-button/index.tsx

@@ -0,0 +1,53 @@
+import * as React from "react";
+import { observer } from "mobx-react-lite";
+import styles from "./style.module.scss";
+
+type Props = {
+  value?: string;
+  buttonLabel: string;
+  placeholder?: string;
+  isLoading?: boolean;
+  onClick: () => void;
+  onChange: (value: string) => void;
+};
+
+const InputWithButton: React.FC<Props> = ({
+  value,
+  placeholder,
+  buttonLabel,
+  isLoading,
+  onClick,
+  onChange,
+}) => {
+  const _onChange = React.useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      onChange(e.target.value || "");
+    },
+    [onChange]
+  );
+
+  const _onKeyPress = React.useCallback(
+    (e: React.KeyboardEvent<HTMLInputElement>) => {
+      if (e.key === "Enter") {
+        onClick();
+      }
+    },
+    [onClick]
+  );
+
+  return (
+    <div className={styles.Container}>
+      <input
+        value={value}
+        onChange={_onChange}
+        placeholder={placeholder}
+        onKeyPress={_onKeyPress}
+      />
+      <div className={styles.Button} onClick={onClick}>
+        {isLoading ? <div className={styles.loader} /> : buttonLabel}
+      </div>
+    </div>
+  );
+};
+
+export default observer(InputWithButton);