@ikas/storefront 1.0.21 → 2.0.0-alpha.1

package/src/components/checkout/components/input-with-button/style.module.scss

@@ -0,0 +1,104 @@
+@import "../../styles/variables.scss";
+
+.Container {
+  width: 100%;
+  height: 44px;
+  background-color: white;
+  border-radius: 8px;
+  display: flex;
+  justify-content: flex-end;
+  position: relative;
+  
+  input {
+    width: calc(100% - 2px);
+    height: 100%;
+    padding: 10px 16px;
+    outline: none;
+    -moz-appearance: none;
+    -webkit-appearance: none;
+    transition: all .5s;
+    box-shadow: 0 0 0 1px transparent;
+    border: 1px solid transparent;
+    border-radius: 9px;
+    margin-left: 1px;
+    color: $primaryTextColor;
+
+    position: absolute;
+    top: 0px;
+    left: 0px;
+    padding-right: calc(33% + 16px);
+
+    &::placeholder {
+      color: $secondaryTextColor !important;
+    }
+
+    &:focus {
+      box-shadow: 0 0 0 1px $buttonBgColor;
+      border-color: $buttonBgColor;
+    }
+  }
+
+  .Button {
+    flex: 0 0 auto;
+    height: 100%;
+    width: 33%;
+    color: $buttonTextColor;
+    background-color: $buttonBgColor;
+    border-radius: 8px;
+    font-weight: 600;
+    text-align: center;
+    position: relative;
+    transition: all .2s;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    user-select: none;
+    cursor: pointer;
+
+    .loader,
+    .loader:after {
+      border-radius: 50%;
+      width: 5em;
+      height: 5em;
+    }
+
+    .loader {
+      font-size: 4px;
+      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 $buttonTextColor;
+      -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/modal/index.tsx

@@ -0,0 +1,50 @@
+import * as React from "react";
+import { observer } from "mobx-react-lite";
+import SVGCross from "../svg/cross";
+
+import styles from "./style.module.scss";
+
+type Props = {
+  title: string;
+  modalContent: string | React.ReactElement;
+  onClose: () => void;
+};
+
+export const Modal: React.FC<Props> = observer(
+  ({ title, onClose, modalContent }) => {
+    const escFunction = React.useCallback((event) => {
+      if (event.keyCode === 27) {
+        onClose();
+      }
+    }, []);
+
+    React.useEffect(() => {
+      document.addEventListener("keydown", escFunction, false);
+
+      return () => {
+        document.removeEventListener("keydown", escFunction, false);
+      };
+    }, []);
+
+    return (
+      <div className={styles.ModalContainer} onClick={onClose}>
+        <div className={styles.Modal} onClick={(e) => e.stopPropagation()}>
+          <div className={styles.ModalHeader}>
+            <div className={styles.ModalTitle}>{title}</div>
+            <div className={styles.CloseButton} onClick={onClose}>
+              <SVGCross />
+            </div>
+          </div>
+          {typeof modalContent === "string" ? (
+            <div
+              className={styles.ModalContent}
+              dangerouslySetInnerHTML={{ __html: modalContent }}
+            ></div>
+          ) : (
+            <div className={styles.ModalContent}>{modalContent}</div>
+          )}
+        </div>
+      </div>
+    );
+  }
+);

package/src/components/checkout/components/modal/style.module.scss

@@ -0,0 +1,68 @@
+@import "../../styles/variables.scss";
+
+.ModalContainer {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  background-color: rgba(0, 0, 0, 0.6);
+  backdrop-filter: blur(6px);
+  z-index: 99999999;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  .Modal {
+    border-radius: 8px;
+    background-color: white;
+    color: $primaryTextColor;
+    min-width: 400px;
+    max-width: 750px;
+    max-height: 90%;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+
+    .ModalHeader {
+      flex: 0 0 auto;
+      padding: 16px;
+      font-size: 18px;
+      border-bottom: 1px solid $borderColor;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+
+      .ModalTitle {
+        font-weight: 500;
+        max-width: 300px;
+      }
+
+      .CloseButton {
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+      }
+    }
+
+    .ModalContent {
+      flex: 1 1 auto;
+      padding: 24px;
+      overflow-y: auto;
+    }
+
+    @media only screen and (max-width: $breakpoint) {
+      max-width: unset;
+      max-height: unset;
+      min-width: unset;
+      width: 100%;
+      height: 100%;
+      margin: 0;
+      border-radius: 0;
+
+      .ModalHeader {
+        padding: 1.5em;
+      }
+    }
+  }
+}

package/src/components/checkout/components/notification-box/index.tsx

@@ -0,0 +1,70 @@
+import * as React from "react";
+import { observer } from "mobx-react-lite";
+import styles from "./style.module.scss";
+
+import SVGWarning from "../svg/warning";
+import SVGCross from "../svg/cross";
+
+type Props = {
+  type: "warning" | "error" | "success";
+  title?: string;
+  content: string | React.ReactElement;
+  onClose?: () => void;
+};
+
+const NotificationBox: React.FC<Props> = ({
+  type,
+  title,
+  content,
+  onClose,
+}) => {
+  const containerRef = React.useRef(null);
+  const boxClasses = React.useMemo(() => {
+    const classes = [styles.NotificationBox];
+
+    switch (type) {
+      case "error":
+        classes.push(styles.Error);
+        break;
+
+      case "warning":
+        classes.push(styles.Warning);
+        break;
+
+      case "success":
+        classes.push(styles.Success);
+        break;
+
+      default:
+        break;
+    }
+
+    return classes.join(" ");
+  }, [type]);
+
+  React.useEffect(() => {
+    if (containerRef && containerRef.current) {
+      //@ts-ignore
+      containerRef.current!.scrollIntoView();
+    }
+  }, [containerRef]);
+
+  return (
+    <div className={boxClasses} ref={containerRef}>
+      <div className={styles.Left}>
+        <SVGWarning />
+      </div>
+      <div className={styles.Center}>
+        {!!title && <div className={styles.Title}>{title}</div>}
+        <div className={styles.Content}>{content}</div>
+      </div>
+      {onClose && (
+        <div className={styles.Right} onClick={onClose}>
+          <SVGCross />
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default observer(NotificationBox);

package/src/components/checkout/components/notification-box/style.module.scss

@@ -0,0 +1,69 @@
+@import "../../styles/variables.scss";
+
+.NotificationBox {
+  padding: 16px;
+  border-radius: 8px;
+  color: $primaryTextColor;
+  display: flex;
+
+  &.Error {
+    border: 1px solid $errorColor;
+    background-color: $errorLightColor;
+
+    svg {
+      color: $errorColor;
+    }
+  }
+
+  &.Warning {
+    border: 1px solid $warningColor;
+    background-color: $warningLightColor;
+
+    svg {
+      color: $warningColor;
+    }
+  }
+
+  &.Success {
+    border: 1px solid $successColor;
+    background-color: $successLightColor;
+
+    svg {
+      color: $successColor;
+    }
+  }
+
+  .Left {
+    flex: 0 0 auto;
+    padding-right: 10px;
+    display: flex;
+    align-items: center;
+    height: 24px;
+  }
+
+  .Center {
+    flex: 1 1 auto;
+
+    .Title {
+      font-size: 16px;
+      font-weight: 600;
+      margin-bottom: 4px;
+    }
+
+    .Content {
+    
+    }
+  }
+
+  .Right {
+    flex: 0 0 auto;
+    padding-left: 10px;
+    color: $secondaryTextColor;
+    cursor: pointer;
+    display: flex; 
+
+    svg {
+      color: $secondaryTextColor;
+    }
+  }
+}

package/src/components/checkout/components/select-box/index.tsx

@@ -0,0 +1,60 @@
+import * as React from "react";
+import { observer } from "mobx-react-lite";
+import styles from "./style.module.scss";
+import { Toggle } from "../toggle";
+
+type Props = {
+  label?: string;
+  isSelected: boolean;
+  rightContent?: React.ReactElement;
+  bottomContent?: React.ReactElement;
+  bottomContentVisible?: boolean;
+  hasError?: boolean;
+  errorText?: string;
+  onClick?: () => void;
+};
+
+const SelectBox: React.FC<Props> = ({
+  label,
+  isSelected,
+  rightContent,
+  bottomContent,
+  bottomContentVisible,
+  hasError,
+  errorText,
+  onClick,
+}) => {
+  const selectBoxClasses = React.useMemo(() => {
+    const classes = [styles.SelectBox];
+    if (isSelected) classes.push(styles.Selected);
+    if (isSelected && hasError) classes.push(styles.Error);
+
+    return classes.join(" ");
+  }, [isSelected]);
+
+  const _bottomContent = React.useMemo(
+    () => <div className={styles.BottomContent}>{bottomContent}</div>,
+    [bottomContent]
+  );
+
+  return (
+    <div className={styles.SelectBoxContainer}>
+      <div className={selectBoxClasses} onClick={onClick}>
+        <div className={styles.TopContent}>
+          <Toggle value={isSelected} label={label} removePadding />
+          {!!rightContent && (
+            <div className={styles.RightContent}>{rightContent}</div>
+          )}
+        </div>
+        {!!bottomContent &&
+          (isSelected || bottomContentVisible) &&
+          _bottomContent}
+      </div>
+      {!!errorText && hasError && isSelected && (
+        <div className={styles.SelectBoxError}>{errorText}</div>
+      )}
+    </div>
+  );
+};
+
+export default observer(SelectBox);

package/src/components/checkout/components/select-box/style.module.scss

@@ -0,0 +1,55 @@
+@import "../../styles/variables.scss";
+
+.SelectBoxContainer {
+  margin-bottom: 16px;
+}
+
+.SelectBoxError {
+  color: $errorColor;
+  font-size: 12px;
+  margin-top: 8px;
+  animation-name: fadeInFromRight;
+  animation-duration: .3s;
+}
+
+.SelectBox {
+  padding: 16px;
+  width: 100%;
+  transition: all .2s;
+  border-radius: 8px;
+  cursor: pointer;
+  border: 1px solid $borderColor;
+  box-shadow: 0 0 0 1px transparent;
+  
+  .TopContent {
+    display: flex;
+    align-items: center;
+    user-select: none;
+
+    .Label {
+      flex: 1 1 auto;
+      margin-left: 16px;
+    }
+
+    .RightContent {
+      flex: 0 0 auto;
+      margin-left: 16px;
+    }
+  }
+  
+  .BottomContent {
+    padding-top: 16px;
+    width: 100%;
+  }
+
+  &.Selected {
+    box-shadow: 0 0 0 1px $buttonBgColor;
+    border-color: $buttonBgColor;
+    background-color: $cardBgColor;
+
+    &.Error {
+      box-shadow: 0 0 0 1px $errorColor;
+      border-color: $errorColor;
+    }
+  }
+}

package/src/components/checkout/components/step-container/index.tsx

@@ -0,0 +1,107 @@
+import * as React from "react";
+import { observer } from "mobx-react-lite";
+import { makeAutoObservable } from "mobx";
+import SVGCheck from "../checkbox/check";
+import styles from "./style.module.scss";
+
+type Props = {
+  steps: Step[];
+  stepContent: React.ReactElement;
+};
+
+const StepContainer: React.FC<Props> = observer(({ steps, stepContent }) => {
+  React.useEffect(() => {
+    const width = document.body.getBoundingClientRect().width;
+
+    if (width < 768) {
+      const selectedStepIndex = steps.findIndex((s) => s.isSelected);
+      if (selectedStepIndex === 0) return;
+      if (selectedStepIndex === 2) {
+        document.getElementById(`step-${1}`)?.scrollIntoView();
+      } else {
+        document.getElementById(`step-${selectedStepIndex}`)?.scrollIntoView();
+      }
+    }
+  }, []);
+
+  return (
+    <div className={styles.StepContainer}>
+      {steps.map((step, index) => (
+        <div className={styles.Step}>
+          <div
+            id={`step-${index}`}
+            className={[
+              styles.StepTitleContainer,
+              index === 0 ? styles.First : "",
+            ].join(" ")}
+          >
+            <div
+              className={[
+                styles.StepTitleTop,
+                step.titleRightContent ? styles.WithRightContent : "",
+              ].join(" ")}
+            >
+              <div
+                className={[
+                  styles.StepCircle,
+                  step.isSelected || step.isComplete ? styles.Selected : "",
+                ]
+                  .join(" ")
+                  .trim()}
+              >
+                {!step.isComplete ? index + 1 : <SVGCheck />}
+              </div>
+              <div
+                className={[
+                  styles.StepTitle,
+                  !step.isSelected && !step.isComplete ? styles.Light : "",
+                ].join(" ")}
+              >
+                {step.label}
+              </div>
+              {!!step.titleRightContent && (
+                <div className={styles.StepTitleRightContent}>
+                  {step.titleRightContent}
+                </div>
+              )}
+            </div>
+            {!!step.titleBottomContent && (
+              <div className={styles.StepTitleBottom}>
+                {step.titleBottomContent}
+              </div>
+            )}
+          </div>
+          {step.isSelected && (
+            <div className={styles.StepContent}>{stepContent}</div>
+          )}
+        </div>
+      ))}
+    </div>
+  );
+});
+
+export default StepContainer;
+
+export class Step {
+  label: string;
+  isSelected: boolean;
+  isComplete: boolean;
+  titleRightContent?: React.ReactElement;
+  titleBottomContent?: React.ReactElement;
+
+  constructor(
+    label: string,
+    isSelected: boolean,
+    isComplete: boolean,
+    titleRightContent?: React.ReactElement,
+    titleBottomContent?: React.ReactElement
+  ) {
+    this.label = label;
+    this.isSelected = isSelected;
+    this.isComplete = isComplete;
+    this.titleRightContent = titleRightContent;
+    this.titleBottomContent = titleBottomContent;
+
+    makeAutoObservable(this);
+  }
+}

package/src/components/checkout/components/step-container/style.module.scss

@@ -0,0 +1,86 @@
+@import "../../styles/variables.scss";
+
+.StepContainer {
+  width: 100%;
+
+  .Step {
+    width: 100%;
+    
+    .StepTitleContainer {
+      padding: 24px 0 ;
+      border-top: 1px solid $borderColor;
+
+      &.First {
+        border-top: none;
+      }
+
+      .StepTitleTop {
+        display: flex;
+        align-items: center;
+
+        &.WithRightContent {
+          align-items: flex-start;
+        }
+      }
+
+      .StepTitleBottom {
+      }
+
+      .StepCircle {
+        width: 32px;
+        height: 32px;
+        border-radius: 100%;
+        border: 1px solid $buttonBgColor;
+        color: $buttonBgColor;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        margin-right: 16px;
+        flex: 0 0 auto;
+        font-size: 20px;
+    
+        &.Selected {
+          background-color: $buttonBgColor;
+          color: $buttonTextColor;
+
+          svg {
+            transform: scale(1.5);
+            position: relative;
+            right: -1px;
+          }
+        }
+      }
+    
+      .StepTitle {
+        font-size: 22px;
+        color: $primaryTextColor;
+        flex: 0 0 auto;
+        font-weight: 600;
+        line-height: 32px;
+
+        &.Light {
+          color: $buttonDisabledTextColor;
+        }
+      }
+
+      .StepTitleRightContent {
+        flex: 1 1 auto;
+      }
+    }
+  
+  }
+
+  .StepContent {
+    padding-bottom: 24px;
+    padding-left: 48px;
+    width: 100%;
+  }
+
+  @media only screen and (max-width: $breakpoint) {
+    padding: 0 24px;
+
+    .StepContent {
+      padding-left: 0px;
+    }
+  }
+}

package/src/components/checkout/components/svg/arrow-down.tsx

@@ -0,0 +1,23 @@
+import * as React from "react";
+
+type Props = {
+  className?: string;
+};
+
+const SVGArrowDown: 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 13.172l4.95-4.95 1.414 1.414L12 16 5.636 9.636 7.05 8.222z"
+    />
+  </svg>
+);
+
+export default SVGArrowDown;