@ikas/storefront 4.0.0-alpha.59 → 4.0.0-alpha.6

package/src/components/checkout/components/phone-number-input/locale/en.ts

@@ -0,0 +1,257 @@
+export default {
+	"AB": "Abkhazia",
+	"AC": "Ascension Island",
+	"AD": "Andorra",
+	"AE": "United Arab Emirates",
+	"AF": "Afghanistan",
+	"AG": "Antigua and Barbuda",
+	"AI": "Anguilla",
+	"AL": "Albania",
+	"AM": "Armenia",
+	"AO": "Angola",
+	"AQ": "Antarctica",
+	"AR": "Argentina",
+	"AS": "American Samoa",
+	"AT": "Austria",
+	"AU": "Australia",
+	"AW": "Aruba",
+	"AX": "Åland Islands",
+	"AZ": "Azerbaijan",
+	"BA": "Bosnia and Herzegovina",
+	"BB": "Barbados",
+	"BD": "Bangladesh",
+	"BE": "Belgium",
+	"BF": "Burkina Faso",
+	"BG": "Bulgaria",
+	"BH": "Bahrain",
+	"BI": "Burundi",
+	"BJ": "Benin",
+	"BL": "Saint Barthélemy",
+	"BM": "Bermuda",
+	"BN": "Brunei Darussalam",
+	"BO": "Bolivia",
+	"BQ": "Bonaire, Sint Eustatius and Saba",
+	"BR": "Brazil",
+	"BS": "Bahamas",
+	"BT": "Bhutan",
+	"BV": "Bouvet Island",
+	"BW": "Botswana",
+	"BY": "Belarus",
+	"BZ": "Belize",
+	"CA": "Canada",
+	"CC": "Cocos (Keeling) Islands",
+	"CD": "Congo, Democratic Republic of the",
+	"CF": "Central African Republic",
+	"CG": "Congo",
+	"CH": "Switzerland",
+	"CI": "Cote d'Ivoire",
+	"CK": "Cook Islands",
+	"CL": "Chile",
+	"CM": "Cameroon",
+	"CN": "China",
+	"CO": "Colombia",
+	"CR": "Costa Rica",
+	"CU": "Cuba",
+	"CV": "Cape Verde",
+	"CW": "Curaçao",
+	"CX": "Christmas Island",
+	"CY": "Cyprus",
+	"CZ": "Czech Republic",
+	"DE": "Germany",
+	"DJ": "Djibouti",
+	"DK": "Denmark",
+	"DM": "Dominica",
+	"DO": "Dominican Republic",
+	"DZ": "Algeria",
+	"EC": "Ecuador",
+	"EE": "Estonia",
+	"EG": "Egypt",
+	"EH": "Western Sahara",
+	"ER": "Eritrea",
+	"ES": "Spain",
+	"ET": "Ethiopia",
+	"FI": "Finland",
+	"FJ": "Fiji",
+	"FK": "Falkland Islands",
+	"FM": "Federated States of Micronesia",
+	"FO": "Faroe Islands",
+	"FR": "France",
+	"GA": "Gabon",
+	"GB": "United Kingdom",
+	"GD": "Grenada",
+	"GE": "Georgia",
+	"GF": "French Guiana",
+	"GG": "Guernsey",
+	"GH": "Ghana",
+	"GI": "Gibraltar",
+	"GL": "Greenland",
+	"GM": "Gambia",
+	"GN": "Guinea",
+	"GP": "Guadeloupe",
+	"GQ": "Equatorial Guinea",
+	"GR": "Greece",
+	"GS": "South Georgia and the South Sandwich Islands",
+	"GT": "Guatemala",
+	"GU": "Guam",
+	"GW": "Guinea-Bissau",
+	"GY": "Guyana",
+	"HK": "Hong Kong",
+	"HM": "Heard Island and McDonald Islands",
+	"HN": "Honduras",
+	"HR": "Croatia",
+	"HT": "Haiti",
+	"HU": "Hungary",
+	"ID": "Indonesia",
+	"IE": "Ireland",
+	"IL": "Israel",
+	"IM": "Isle of Man",
+	"IN": "India",
+	"IO": "British Indian Ocean Territory",
+	"IQ": "Iraq",
+	"IR": "Iran",
+	"IS": "Iceland",
+	"IT": "Italy",
+	"JE": "Jersey",
+	"JM": "Jamaica",
+	"JO": "Jordan",
+	"JP": "Japan",
+	"KE": "Kenya",
+	"KG": "Kyrgyzstan",
+	"KH": "Cambodia",
+	"KI": "Kiribati",
+	"KM": "Comoros",
+	"KN": "Saint Kitts and Nevis",
+	"KP": "North Korea",
+	"KR": "South Korea",
+	"KW": "Kuwait",
+	"KY": "Cayman Islands",
+	"KZ": "Kazakhstan",
+	"LA": "Laos",
+	"LB": "Lebanon",
+	"LC": "Saint Lucia",
+	"LI": "Liechtenstein",
+	"LK": "Sri Lanka",
+	"LR": "Liberia",
+	"LS": "Lesotho",
+	"LT": "Lithuania",
+	"LU": "Luxembourg",
+	"LV": "Latvia",
+	"LY": "Libya",
+	"MA": "Morocco",
+	"MC": "Monaco",
+	"MD": "Moldova",
+	"ME": "Montenegro",
+	"MF": "Saint Martin (French Part)",
+	"MG": "Madagascar",
+	"MH": "Marshall Islands",
+	"MK": "North Macedonia",
+	"ML": "Mali",
+	"MM": "Burma",
+	"MN": "Mongolia",
+	"MO": "Macao",
+	"MP": "Northern Mariana Islands",
+	"MQ": "Martinique",
+	"MR": "Mauritania",
+	"MS": "Montserrat",
+	"MT": "Malta",
+	"MU": "Mauritius",
+	"MV": "Maldives",
+	"MW": "Malawi",
+	"MX": "Mexico",
+	"MY": "Malaysia",
+	"MZ": "Mozambique",
+	"NA": "Namibia",
+	"NC": "New Caledonia",
+	"NE": "Niger",
+	"NF": "Norfolk Island",
+	"NG": "Nigeria",
+	"NI": "Nicaragua",
+	"NL": "Netherlands",
+	"NO": "Norway",
+	"NP": "Nepal",
+	"NR": "Nauru",
+	"NU": "Niue",
+	"NZ": "New Zealand",
+	"OM": "Oman",
+	"OS": "South Ossetia",
+	"PA": "Panama",
+	"PE": "Peru",
+	"PF": "French Polynesia",
+	"PG": "Papua New Guinea",
+	"PH": "Philippines",
+	"PK": "Pakistan",
+	"PL": "Poland",
+	"PM": "Saint Pierre and Miquelon",
+	"PN": "Pitcairn",
+	"PR": "Puerto Rico",
+	"PS": "Palestine",
+	"PT": "Portugal",
+	"PW": "Palau",
+	"PY": "Paraguay",
+	"QA": "Qatar",
+	"RE": "Reunion",
+	"RO": "Romania",
+	"RS": "Serbia",
+	"RU": "Russia",
+	"RW": "Rwanda",
+	"SA": "Saudi Arabia",
+	"SB": "Solomon Islands",
+	"SC": "Seychelles",
+	"SD": "Sudan",
+	"SE": "Sweden",
+	"SG": "Singapore",
+	"SH": "Saint Helena",
+	"SI": "Slovenia",
+	"SJ": "Svalbard and Jan Mayen",
+	"SK": "Slovakia",
+	"SL": "Sierra Leone",
+	"SM": "San Marino",
+	"SN": "Senegal",
+	"SO": "Somalia",
+	"SR": "Suriname",
+	"SS": "South Sudan",
+	"ST": "Sao Tome and Principe",
+	"SV": "El Salvador",
+	"SX": "Sint Maarten",
+	"SY": "Syria",
+	"SZ": "Swaziland",
+	"TA": "Tristan da Cunha",
+	"TC": "Turks and Caicos Islands",
+	"TD": "Chad",
+	"TF": "French Southern Territories",
+	"TG": "Togo",
+	"TH": "Thailand",
+	"TJ": "Tajikistan",
+	"TK": "Tokelau",
+	"TL": "Timor-Leste",
+	"TM": "Turkmenistan",
+	"TN": "Tunisia",
+	"TO": "Tonga",
+	"TR": "Turkey",
+	"TT": "Trinidad and Tobago",
+	"TV": "Tuvalu",
+	"TW": "Taiwan",
+	"TZ": "Tanzania",
+	"UA": "Ukraine",
+	"UG": "Uganda",
+	"UM": "United States Minor Outlying Islands",
+	"US": "United States",
+	"UY": "Uruguay",
+	"UZ": "Uzbekistan",
+	"VA": "Holy See (Vatican City State)",
+	"VC": "Saint Vincent and the Grenadines",
+	"VE": "Venezuela",
+	"VG": "Virgin Islands, British",
+	"VI": "Virgin Islands, U.S.",
+	"VN": "Vietnam",
+	"VU": "Vanuatu",
+	"WF": "Wallis and Futuna",
+	"WS": "Samoa",
+	"XK": "Kosovo",
+	"YE": "Yemen",
+	"YT": "Mayotte",
+	"ZA": "South Africa",
+	"ZM": "Zambia",
+	"ZW": "Zimbabwe",
+	"ZZ": "International"
+}

package/src/components/checkout/components/phone-number-input/style.module.scss

@@ -0,0 +1,83 @@
+.SelectFlag {
+  position: absolute;
+  top: 26px;
+  left: 16px;
+
+  .FlagContainer {
+    position: relative;
+    width: 35px;
+    height: 24px;
+
+    flex: 0 0 35px;
+
+    .Select {
+      position: absolute;
+      top: 0;
+      left: 0;
+      z-index: 1;
+      padding: 0;
+      opacity: 0;
+      border: 0;
+      width: 100%;
+      height: 100%;
+      cursor: pointer;
+    }
+  }
+
+  .Flag {
+    position: relative;
+    width: 35px;
+    height: 24px;
+
+    display: flex;
+    align-items: center;
+
+    &Image {
+      width: 24px;
+      flex: 0 0 24px;
+    }
+
+    .Arrow {
+      display: block;
+      content: "";
+      width: 0.3em;
+      height: 0.3em;
+      margin-left: 0.35em;
+      margin-top: -0.2em;
+      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;
+
+      flex: 0 0 0.3em;
+    }
+  }
+}
+
+.Input {
+  padding-left: 64px !important;
+
+  &:disabled {
+    color: #8A8B94 !important;
+    background-color: #F7F7F9 !important;
+  }
+
+  &::placeholder {
+    color: #8A8B94 !important;
+    font-size: 14px !important;
+  }
+
+  // &:disabled {
+  //   color: $buttonDisabledTextColor !important;
+  //   background-color: $buttonDisabledBgColor !important;
+  // }
+
+  // &::placeholder {
+  //   color: $secondaryTextColor !important;
+  //   font-size: 14px !important;
+  // }
+}

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>
+  );
+});