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

package/src/components/checkout/components/offer-product/index.tsx

@@ -1,180 +0,0 @@
-import * as React from "react";
-import { observer } from "mobx-react-lite";
-import CheckoutViewModel, { CampaignOfferType } from "../../model";
-import { Button } from "../button";
-import Select from "./select";
-import SVGCross from "../svg/cross";
-
-import styles from "./style.module.scss";
-import { useTranslation } from "../../../../utils/i18n";
-import { IkasProductVariant } from "../../../../models";
-import { formatMoney } from "../../../../utils/currency";
-
-type Props = {
-  vm: CheckoutViewModel;
-  campaignOffer: CampaignOfferType;
-};
-
-const OfferProduct: React.FC<Props> = ({ vm, campaignOffer }) => {
-  const { t } = useTranslation();
-  const [selectedVariant, setSelectedVariant] =
-    React.useState<IkasProductVariant>(campaignOffer!.product.selectedVariant);
-
-  const acceptOffer = () => {
-    vm.updateCartCampaignOffer({
-      accepted: true,
-      cartId: vm.checkout.id,
-      campaignOfferId: campaignOffer.campaignOffer.campaignOfferId,
-      campaignOfferProductId: campaignOffer.offer.id,
-      productId: campaignOffer.offer.productId,
-      variantId: selectedVariant.id,
-    });
-  };
-
-  const rejectOffer = () => {
-    vm.updateCartCampaignOffer({
-      accepted: false,
-      cartId: vm.checkout.id,
-      campaignOfferId: campaignOffer.campaignOffer.campaignOfferId,
-      campaignOfferProductId: campaignOffer.offer.id,
-      productId: campaignOffer.offer.productId,
-      variantId: selectedVariant.id,
-    });
-  };
-
-  const onVariantChange = (value: string) => {
-    const variant = campaignOffer.product.variants.find((v) => v.id === value);
-
-    if (variant) {
-      setSelectedVariant(variant);
-    }
-  };
-
-  const remainingTime = Math.round(
-    (new Date().getTime() -
-      new Date(campaignOffer.campaignOffer.offerStartDate).getTime()) /
-      1000
-  );
-
-  return (
-    <div className={styles.Container}>
-      {campaignOffer.offer.countdownMinutes && (
-        <CountdownTimer
-          seconds={
-            remainingTime > campaignOffer.offer.countdownMinutes * 60
-              ? 0
-              : campaignOffer.offer.countdownMinutes * 60 - remainingTime
-          }
-          rejectOffer={rejectOffer}
-        />
-      )}
-      <div className={styles.ContentContainer}>
-        <div className={styles.Header}>
-          <div className={styles.Title}>{campaignOffer.offer.title}</div>
-          <div className={styles.RejectButton} onClick={rejectOffer}>
-            <SVGCross />
-          </div>
-        </div>
-        <div className={styles.ProductContainer}>
-          <div className={styles.ImageContainer}>
-            <img
-              className={styles.Image}
-              src={selectedVariant.mainImage?.image?.thumbnailSrc}
-            />
-          </div>
-          <div className={styles.ProductDetails}>
-            <div className={styles.ProductName}>
-              {campaignOffer.product.name}
-            </div>
-            {campaignOffer.product.brand && (
-              <div className={styles.Brand}>
-                {campaignOffer.product.brand.name}
-              </div>
-            )}
-            <div className={styles.ProductPrice}>
-              <span className={styles.Discount}>
-                {selectedVariant.price.formattedFinalPrice}
-              </span>{" "}
-              {formatMoney(
-                selectedVariant.price.finalPrice -
-                  (selectedVariant.price.finalPrice *
-                    (campaignOffer.offer.discountAmount || 100)) /
-                    100,
-                vm.checkout!.currencyCode
-              )}
-            </div>
-            <div className={styles.Actions}>
-              {campaignOffer.product.hasVariant &&
-                campaignOffer.product.hasStock && (
-                  <Select
-                    value={selectedVariant.id}
-                    onSelectChange={onVariantChange}
-                    options={campaignOffer.product.variants
-                      .filter((v) => v.hasStock)
-                      .map((v) => ({
-                        label: v.variantValues.map((vv) => vv.name).join(", "),
-                        value: v.id,
-                      }))}
-                  />
-                )}
-              <Button
-                style={{
-                  width: "100%",
-                  height: 44,
-                  fontSize: 14,
-                }}
-                isDisabled={!campaignOffer.product.hasStock}
-                text={t("checkout-page:actions.addToCart")}
-                onClick={acceptOffer}
-              />
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-interface ICountdownTimer {
-  seconds: number;
-  rejectOffer: () => void;
-}
-
-const CountdownTimer = ({ seconds, rejectOffer }: ICountdownTimer) => {
-  const { t } = useTranslation();
-  const [counter, setCounter] = React.useState(seconds);
-
-  React.useEffect(() => {
-    const timer =
-      counter > 0 && setInterval(() => setCounter(counter - 1), 1000);
-
-    if (counter === 0) {
-      rejectOffer();
-    }
-
-    return () => clearInterval(timer as any);
-  }, [counter]);
-
-  const timeFormat = (time: number) => {
-    var hours = Math.floor(time / 60 / 60);
-    var minutes = Math.floor(time / 60) - hours * 60;
-    var seconds = time % 60;
-
-    return hours !== 0
-      ? hours.toString().padStart(2, "0") + ":"
-      : "" +
-          minutes.toString().padStart(2, "0") +
-          ":" +
-          seconds.toString().padStart(2, "0");
-  };
-
-  return (
-    <div className={styles.CountdownContainer}>
-      <div className={styles.CountdownText}>
-        {t("checkout-page:timeRemaining", { value: timeFormat(counter) })}
-      </div>
-    </div>
-  );
-};
-
-export default observer(OfferProduct);

package/src/components/checkout/components/offer-product/select/arrows.tsx

@@ -1,22 +0,0 @@
-import * as React from "react";
-
-type Props = {
-  className?: string;
-};
-
-const SVGArrows: React.FC<Props> = ({ className }) => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 9 12"
-    width="9"
-    height="12"
-    className={className}
-  >
-    <path
-      d="M4.5 12 .603 7.5h7.794L4.5 12ZM4.5 0l3.897 4.5H.603L4.5 0Z"
-      fill="currentColor"
-    />
-  </svg>
-);
-
-export default SVGArrows;

package/src/components/checkout/components/offer-product/select/index.tsx

@@ -1,40 +0,0 @@
-import * as React from "react";
-import { observer } from "mobx-react-lite";
-import styles from "./style.module.scss";
-import SVGArrows from "./arrows";
-
-type Props = {
-  value: string;
-  options: {
-    value: string;
-    label: string;
-  }[];
-  onSelectChange: (e: string) => void;
-};
-
-const Select: React.FC<Props> = ({ value, options, onSelectChange }) => {
-  return (
-    <div className={styles.Container}>
-      <select
-        className={styles.Select}
-        onChange={(e) => onSelectChange(e.target.value)}
-      >
-        {!value && <option selected disabled key={-1}></option>}
-        {options?.map((o, index) => (
-          <option
-            key={index + o.value}
-            value={o.value}
-            selected={value === o.value}
-          >
-            {o.label}
-          </option>
-        ))}
-      </select>
-      <div className={styles.ArrowContainer}>
-        <SVGArrows />
-      </div>
-    </div>
-  );
-};
-
-export default observer(Select);

package/src/components/checkout/components/offer-product/select/style.module.scss

@@ -1,28 +0,0 @@
-@import "../../../styles/variables.scss";
-
-.Container {
-  position: relative;
-  margin-right: 12px;
-}
-
-.Select {
-  height: 44px;
-  width: 80px;
-  appearance: none;
-  border: 1px solid $borderColor;
-  border-radius: 8px;
-
-  padding-left: 16px;
-  padding-right: 25px;
-  font-size: 14px;
-  font-weight: 600;
-}
-
-.ArrowContainer {
-  position: absolute;
-  top: 16px;
-  right: 16px;
-
-  display: flex;
-  flex-direction: column;
-}

package/src/components/checkout/components/offer-product/style.module.scss

@@ -1,117 +0,0 @@
-@import "../../styles/variables.scss";
-
-.Container {
-  margin: 32px 0 48px 0;
-  background-color: $cardBgColor;
-  border-radius: 8px;
-
-  @media only screen and (max-width: $breakpoint) {
-    margin: 24px 0 24px 0;
-    border-radius: 0;
-  }
-}
-
-.CountdownContainer {
-  display: flex;
-  justify-content: center;
-  padding: 6px;
-  background-color: #cfced3;
-  border-radius: 8px 8px 0 0;
-
-  @media only screen and (max-width: $breakpoint) {
-    border-radius: 0;
-  }
-}
-
-.CountdownText {
-  font-size: 14px;
-  font-weight: 600;
-  color: $primaryTextColor;
-}
-
-.ContentContainer {
-  padding: 24px;
-  width: 100%;
-}
-
-.Header {
-  display: flex;
-  justify-content: space-between;
-}
-
-.Title {
-  margin-bottom: 24px;
-  font-size: 22px;
-  color: $primaryTextColor;
-  font-weight: 600;
-}
-
-.RejectButton {
-  height: 35px;
-  width: 20px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex: 0 0 20px;
-  margin-left: 12px;
-  cursor: pointer;
-}
-
-.ProductContainer {
-  display: flex;
-}
-
-.ImageContainer {
-  height: 136px;
-  width: 136px;
-  position: relative;
-  background-color: #fff;
-  margin-right: 24px;
-  border-radius: 8px;
-  flex: 0 0 136px;
-}
-
-.Image {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-  border-radius: 8px;
-}
-
-.ProductDetails {
-  flex: 1;
-}
-
-.ProductName {
-  margin-bottom: 2px;
-  font-size: 16px;
-  color: $primaryTextColor;
-  font-weight: 600;
-  line-height: 24px;
-}
-
-.Brand {
-  margin-bottom: 2px;
-  font-size: 14px;
-  color: $primaryTextColor;
-  line-height: 20px;
-}
-
-.ProductPrice {
-  font-size: 14px;
-  font-weight: 600;
-  color: $primaryTextColor;
-  line-height: 20px;
-}
-
-.Discount {
-  font-size: 14px;
-  font-weight: 600;
-  color: $secondaryTextColor;
-  text-decoration: line-through;
-}
-
-.Actions {
-  display: flex;
-  margin-top: 24px;
-}

package/src/components/checkout/components/phone-number-input/compare-strings.ts

@@ -1,5 +0,0 @@
-const compareStrings = (a: string, b: string) => {
-  return a.localeCompare(b);
-};
-
-export default compareStrings;

package/src/components/checkout/components/phone-number-input/get-countries.ts

@@ -1,52 +0,0 @@
-import { IkasStorefrontConfig } from "@ikas/storefront-config";
-import { CountryCode, getCountries as categories } from "libphonenumber-js";
-import compareStrings from "./compare-strings";
-
-export type CountryType = {
-  value: CountryCode;
-  label: string | undefined;
-};
-
-const getUrl = () => {
-  const languages = [
-    "de",
-    "el",
-    "en",
-    "es",
-    "fi",
-    "fr",
-    "it",
-    "nb",
-    "pl",
-    "pt-BR",
-    "pt",
-    "ru",
-    "sv",
-    "tr",
-    "ua",
-    "vi",
-  ];
-
-  let locale = IkasStorefrontConfig.getCurrentLocale();
-
-  if (!languages.some((language) => language === locale)) {
-    locale = "en";
-  }
-
-  return `https://cdn.myikas.com/sf/static/locale/country/${locale}.json`;
-};
-
-const getCountries = async (): Promise<CountryType[]> => {
-  const url = getUrl();
-  const response = await fetch(url);
-  const lang = await response.json();
-
-  return categories()
-    .map((country) => ({
-      value: country,
-      label: lang[country],
-    }))
-    .sort((a, b) => compareStrings(a.label, b.label));
-};
-
-export default getCountries;

package/src/components/checkout/components/phone-number-input/index.tsx

@@ -1,125 +0,0 @@
-import * as React from "react";
-import { observer } from "mobx-react-lite";
-import parsePhoneNumber, {
-  CountryCode,
-  formatIncompletePhoneNumber,
-  getCountryCallingCode,
-  parseIncompletePhoneNumber,
-} from "libphonenumber-js";
-import getCountries, { CountryType } from "./get-countries";
-
-import styles from "./style.module.scss";
-
-type Props = {
-  defaultCountry?: string | null;
-  disabled?: boolean;
-  placeholder: string | undefined;
-  value: string;
-  onChange: (value: string) => void;
-};
-
-const DEFAULT_COUNTRY = "TR";
-
-export const PhoneNumberInput: React.FC<Props> = observer(
-  ({ defaultCountry, disabled = false, placeholder, value, onChange }) => {
-    const [countries, setCountries] = React.useState<CountryType[]>([]);
-    const [activeCountry, setActiveCountry] = React.useState(
-      (defaultCountry as CountryCode) || DEFAULT_COUNTRY
-    );
-    const [formatedValue, setFormatedValue] = React.useState("");
-
-    React.useEffect(() => {
-      fetchCountries();
-
-      let countryCode = activeCountry;
-
-      if (value) {
-        const parsedPhoneNumber = parsePhoneNumber(value);
-
-        if (parsedPhoneNumber && parsedPhoneNumber.country) {
-          countryCode = parsedPhoneNumber.country;
-        }
-
-        setFormatedValue(formatIncompletePhoneNumber(value, countryCode));
-      } else {
-        setDefaultValue(countryCode);
-      }
-
-      setActiveCountry(countryCode);
-    }, []);
-
-    const fetchCountries = async () => {
-      const categories = await getCountries();
-      setCountries(categories);
-    };
-
-    const onValueChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-      const phoneNumber = formatPhoneNumber(event.target.value);
-      setFormatedValue(phoneNumber);
-      onChange(
-        !phoneNumber
-          ? event.target.value
-          : parseIncompletePhoneNumber(phoneNumber)
-      );
-    };
-
-    const onCountryChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
-      if (event.target.value) {
-        const country = event.target.value as CountryCode;
-
-        setActiveCountry(country);
-        setDefaultValue(country);
-      }
-    };
-
-    const setDefaultValue = (countyCode: CountryCode) => {
-      const countryCallingCode = getCountryCallingCode(countyCode);
-
-      setFormatedValue(`+${countryCallingCode}`);
-    };
-
-    const formatPhoneNumber = (phoneNumber: string) => {
-      return formatIncompletePhoneNumber(phoneNumber, activeCountry);
-    };
-
-    const getImageSrc = () => {
-      return `https://cdn.myikas.com/sf/assets/flags/3x2/${activeCountry}.svg`;
-    };
-
-    return (
-      <React.Fragment>
-        <div className={styles.SelectFlag}>
-          <div className={styles.FlagContainer}>
-            <div className={styles.Flag}>
-              <img
-                className={styles.FlagImage}
-                alt={activeCountry}
-                src={getImageSrc()}
-              ></img>
-              <div className={styles.Arrow}></div>
-            </div>
-            <select
-              className={styles.Select}
-              value={activeCountry}
-              onChange={onCountryChange}
-              disabled={disabled}
-            >
-              {countries.map((country) => (
-                <option key={country.value} value={country.value}>
-                  {country.label}
-                </option>
-              ))}
-            </select>
-          </div>
-        </div>
-        <input
-          className={styles.Input}
-          value={formatedValue}
-          onChange={onValueChange}
-          placeholder={placeholder}
-          disabled={disabled}
-        ></input>
-      </React.Fragment>
-    );
-  }
-);

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;
-  // }
-}