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

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

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

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

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

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

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

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

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