@ikas/storefront 3.0.0-beta.1 → 4.0.0-alpha.11

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

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

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

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

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

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

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

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

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

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

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