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

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?: React.ReactNode;
+  isSelected: boolean;
+  rightContent?: React.ReactElement;
+  bottomContent?: React.ReactNode;
+  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/stripe/checkout-form.tsx

@@ -0,0 +1,55 @@
+import * as React from "react";
+import { observer } from "mobx-react-lite";
+import CheckoutViewModel from "../../model";
+import {
+  PaymentElement,
+  useStripe,
+  useElements,
+} from "@stripe/react-stripe-js";
+import styles from "./style.module.scss";
+
+type Props = {
+  callbackUrl: string;
+  vm: CheckoutViewModel;
+};
+
+export const CheckoutForm: React.FC<Props> = observer(({ callbackUrl, vm }) => {
+  const stripe = useStripe();
+  const elements = useElements();
+  const [disabled, setDisabled] = React.useState(true);
+  const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+
+    if (!stripe || !elements || !callbackUrl) {
+      return;
+    }
+
+    setDisabled(true);
+
+    const { error } = await stripe.confirmPayment({
+      elements,
+      confirmParams: {
+        return_url: callbackUrl,
+      },
+    });
+
+    if (error) {
+      vm.isStepLoading = false;
+      setDisabled(false);
+    }
+  };
+
+  return (
+    <React.Fragment>
+      <form className={styles.Form} id="stripe-form" onSubmit={handleSubmit}>
+        <PaymentElement onReady={() => setDisabled(false)} />
+        <button id="stripe-form-btn" hidden disabled={!stripe}></button>
+        {disabled && (
+          <div className={styles.Disabled}>
+            <div className={styles.loader}></div>
+          </div>
+        )}
+      </form>
+    </React.Fragment>
+  );
+});

package/src/components/checkout/components/stripe/index.tsx

@@ -0,0 +1,91 @@
+import * as React from "react";
+import { observer } from "mobx-react-lite";
+import CheckoutViewModel from "../../model";
+import { Elements } from "@stripe/react-stripe-js";
+import { loadStripe, StripeElementsOptions } from "@stripe/stripe-js";
+import { Stripe } from "@stripe/stripe-js";
+import { CheckoutForm } from "./checkout-form";
+import { IkasPaymentGateway } from "../../../../models";
+
+type Props = {
+  vm: CheckoutViewModel;
+  pg: IkasPaymentGateway;
+};
+
+export const StripeForm: React.FC<Props> = observer(({ vm }) => {
+  if (!vm.stripeResponse) return null;
+
+  const [stripePromise, setStripePromise] = React.useState<Stripe | null>(null);
+
+  React.useEffect(() => {
+    async function loadStripeAPI() {
+      if (vm.stripeResponse) {
+        const promise = await loadStripe(vm.stripeResponse.apiKey, {
+          stripeAccount: vm.stripeResponse.accountId,
+        });
+
+        setStripePromise(promise);
+      }
+    }
+    loadStripeAPI();
+  }, [vm.stripeResponse]);
+
+  const options = {
+    clientSecret: vm.stripeResponse.clientSecret,
+    appearance: {
+      variables: {
+        borderRadius: "8px",
+      },
+      labels: "floating",
+
+      rules: {
+        ".Input": {
+          lineHeight: "16px",
+          boxShadow: "0 0 0 1px transparent",
+          transition: "padding .1s, border-color .5s, box-shadow .5s",
+          padding: "8px 16px",
+          border: `1px solid ${
+            vm.customizationProps?.borderColor || "#E5E4E9"
+          }`,
+        },
+        ".Input::placeholder": {
+          fontSize: "14px",
+          color: vm.customizationProps?.secondaryTextColor || "#8A8B94",
+        },
+        ".Input:focus": {
+          boxShadow: `0 0 0 1px ${
+            vm.customizationProps?.buttonBgColor || "##272727"
+          }`,
+          borderColor: vm.customizationProps?.buttonBgColor || "##272727",
+        },
+        ".Input--invalid": {
+          boxShadow: `0 0 0 1px ${
+            vm.customizationProps?.errorColor || "#FB4E4E"
+          }`,
+          borderColor: vm.customizationProps?.errorColor || "#FB4E4E",
+          color: vm.customizationProps?.errorColor || "#FB4E4E",
+        },
+        ".Label": {
+          fontSize: "14px",
+          color: vm.customizationProps?.secondaryTextColor || "#8A8B94",
+        },
+        ".Error": {
+          fontSize: "12px",
+          marginTop: "8px",
+          color: vm.customizationProps?.errorColor || "#FB4E4E",
+        },
+      },
+    },
+  };
+
+  return (
+    <React.Fragment>
+      <Elements
+        stripe={stripePromise}
+        options={options as StripeElementsOptions}
+      >
+        <CheckoutForm callbackUrl={vm.stripeResponse.callbackUrl} vm={vm} />
+      </Elements>
+    </React.Fragment>
+  );
+});

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

@@ -0,0 +1,75 @@
+@import "../../styles/variables.scss";
+
+.Main {
+  height: 240px;
+  display: flex;
+  align-items: center;
+  justify-content: 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 #a3a3a366;
+  border-right: 0.5em solid #a3a3a366;
+  border-bottom: 0.5em solid #a3a3a366;
+  border-left: 0.5em solid #333333d6;
+  -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);
+  }
+}
+
+.Form {
+  position: relative;
+  min-height: 200px;
+}
+
+.Disabled {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 9;
+  cursor: not-allowed;
+  height: 100%;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 200px;
+}

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;

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

@@ -0,0 +1,23 @@
+import * as React from "react";
+
+type Props = {
+  className?: string;
+};
+
+const SVGArrowLeft: 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="M10.828 12l4.95 4.95-1.414 1.414L8 12l6.364-6.364 1.414 1.414z"
+    />
+  </svg>
+);
+
+export default SVGArrowLeft;

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

@@ -0,0 +1,23 @@
+import * as React from "react";
+
+type Props = {
+  className?: string;
+};
+
+const SVGArrowRight: 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="M16.172 11l-5.364-5.364 1.414-1.414L20 12l-7.778 7.778-1.414-1.414L16.172 13H4v-2z"
+    />
+  </svg>
+);
+
+export default SVGArrowRight;

package/src/components/checkout/components/svg/cross.tsx

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

package/src/components/checkout/components/svg/discount.tsx

@@ -0,0 +1,34 @@
+import * as React from "react";
+
+type Props = {
+  className?: string;
+};
+
+const SVGDiscount: React.FC<Props> = ({ className }) => (
+  <svg
+    width="16"
+    height="16"
+    viewBox="0 0 16 16"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    className={className}
+  >
+    <circle cx="8" cy="8" r="8" fill="#CFCED3" />
+    <path
+      d="M10.9167 5.08301L5.08334 10.9163"
+      stroke="white"
+      stroke-linecap="square"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M5.70832 6.75033C6.28362 6.75033 6.74999 6.28396 6.74999 5.70866C6.74999 5.13336 6.28362 4.66699 5.70832 4.66699C5.13303 4.66699 4.66666 5.13336 4.66666 5.70866C4.66666 6.28396 5.13303 6.75033 5.70832 6.75033Z"
+      fill="white"
+    />
+    <path
+      d="M10.2917 11.3333C10.867 11.3333 11.3333 10.867 11.3333 10.2917C11.3333 9.71637 10.867 9.25 10.2917 9.25C9.71637 9.25 9.25 9.71637 9.25 10.2917C9.25 10.867 9.71637 11.3333 10.2917 11.3333Z"
+      fill="white"
+    />
+  </svg>
+);
+
+export default SVGDiscount;