@ikas/storefront 1.0.21 → 2.0.0-alpha.1

package/src/components/checkout/steps/step-info/index.tsx

@@ -0,0 +1,84 @@
+import * as React from "react";
+import { observer } from "mobx-react-lite";
+
+import { FormItem } from "../../components/form-item";
+import {
+  FormItemInputType,
+  FormItemType,
+} from "../../components/form-item/model";
+import CheckoutViewModel from "../../model";
+import { Button } from "../../components/button";
+import { Checkbox } from "../../components/checkbox";
+import Errors from "../../components/error";
+
+import commonStyles from "../../styles/common.module.scss";
+import CustomerAddresses from "../../components/customer-addresses";
+import CustomerAddressesViewModel from "../../components/customer-addresses/model";
+import { useTranslation } from "../../../../utils";
+
+type Props = {
+  vm: CheckoutViewModel;
+};
+
+const CheckoutStepInfo: React.FC<Props> = ({ vm }) => {
+  const { t } = useTranslation();
+  const onEmailChange = React.useCallback(
+    (value: string) => {
+      if (vm.checkout.customer)
+        vm.checkout.customer.email = value ? value.trim() : value;
+    },
+    [vm, vm.checkout, vm.checkout.customer]
+  );
+
+  const customerAddressesViewModel = React.useMemo(() => {
+    return new CustomerAddressesViewModel(vm, "shipping");
+  }, [vm]);
+
+  return (
+    <div>
+      <Errors vm={vm} />
+      {!vm.checkout.hasCustomer && (
+        <div style={{ marginTop: "8px", marginBottom: "40px" }}>
+          <div className={commonStyles.FormSectionTitle}>
+            <div className={commonStyles.Title}>
+              {t("checkout-page:contactInfo")}
+            </div>
+          </div>
+          <FormItem
+            type={FormItemType.TEXT}
+            inputType={FormItemInputType.EMAIL}
+            label={t("checkout-page:email")}
+            autocomplete="email"
+            value={vm.checkout.customer?.email || ""}
+            onChange={onEmailChange}
+            hasError={vm.isErrorsVisible && !vm.checkout.customer?.email}
+            errorText={t("checkout-page:emailError")}
+            tooltipText={t("checkout-page:guestEmailTooltip")}
+          />
+          <Checkbox
+            value={vm.checkout.customer?.notificationsAccepted || false}
+            label={t("checkout-page:customerConsentCta")}
+            onChange={vm.setCustomerConsentGranted}
+          />
+        </div>
+      )}
+
+      {/* ADRESS */}
+      <CustomerAddresses vm={customerAddressesViewModel} />
+      {!customerAddressesViewModel.editingCustomerAddress && (
+        <Button
+          style={{
+            width: "100%",
+            marginTop: vm.store.customerStore.customer ? "0px" : "32px",
+          }}
+          text={t("checkout-page:actions.continueWithShipping")}
+          isLoading={vm.isStepLoading}
+          isDisabled={!vm.canProceedToShipping}
+          onClick={vm.onProceedToShippingClick}
+        />
+      )}
+    </div>
+  );
+};
+
+export default observer(CheckoutStepInfo);

package/src/components/checkout/steps/step-payment/billing-address/index.tsx

@@ -0,0 +1,40 @@
+import * as React from "react";
+import { observer } from "mobx-react-lite";
+import CheckoutViewModel from "../../../model";
+
+import { Checkbox } from "../../../../../components/checkout/components/checkbox";
+import CustomerAddressesViewModel from "../../../../../components/checkout/components/customer-addresses/model";
+import CustomerAddresses from "../../../../../components/checkout/components/customer-addresses";
+import { useTranslation } from "../../../../../utils";
+
+type Props = {
+  vm: CheckoutViewModel;
+};
+
+export const BillingAddress: React.FC<Props> = observer(({ vm }) => {
+  const { t } = useTranslation();
+  const customerAddressesViewModel = React.useMemo(() => {
+    return new CustomerAddressesViewModel(vm, "billing");
+  }, [vm]);
+
+  return (
+    <React.Fragment>
+      <div
+        style={{
+          marginTop: "32px",
+          marginBottom: vm.useDifferentAddress ? "24px" : "0px",
+        }}
+      >
+        <Checkbox
+          value={!vm.useDifferentAddress}
+          hasError={vm.isErrorsVisible && !vm.isTermsAndConditionsChecked}
+          label={t("checkout-page:useShippingForBilling")}
+          onChange={(value) => vm.setUseDifferentAddress(!value)}
+        />
+      </div>
+      {vm.useDifferentAddress && (
+        <CustomerAddresses vm={customerAddressesViewModel} />
+      )}
+    </React.Fragment>
+  );
+});

package/src/components/checkout/steps/step-payment/index.tsx

@@ -0,0 +1,105 @@
+import * as React from "react";
+import { observer } from "mobx-react-lite";
+import CheckoutViewModel from "../../model";
+
+import { Checkbox } from "../../components/checkbox";
+import Errors from "../../components/error";
+
+import { PaymentGateways } from "./payment-gateways";
+import { BillingAddress } from "./billing-address";
+import styles from "./style.module.scss";
+import { Button } from "../../components/button";
+import SVGLock from "../../components/svg/lock";
+import { useTranslation } from "../../../../utils";
+import { createTranslationInputData } from "../../../../utils/i18n";
+import { IkasStorefrontConfig } from "../../../../storefront";
+
+type Props = {
+  vm: CheckoutViewModel;
+};
+
+export const CheckoutStepPayment: React.FC<Props> = observer(({ vm }) => {
+  const { t } = useTranslation();
+
+  const onShowPrivacyPolicyClick = React.useCallback(
+    (e: React.MouseEvent) => {
+      e.stopPropagation();
+      vm.policyModalTitle = t("checkout-page:privacyPolicy");
+      vm.policyModalText = vm.privacyPolicy;
+    },
+    [vm, vm.privacyPolicy]
+  );
+
+  const onShowTermsOfServiceClick = React.useCallback(
+    (e: React.MouseEvent) => {
+      e.stopPropagation();
+      vm.policyModalTitle = t("checkout-page:termsOfService");
+      vm.policyModalText = vm.termsOfService;
+    },
+    [vm, vm.termsOfService]
+  );
+
+  const checkoutTranslations =
+    IkasStorefrontConfig.translations["checkout-page"];
+  const policyInputData = createTranslationInputData(
+    checkoutTranslations["ackPoliciesSentence"]
+  );
+
+  const policyLabel = policyInputData.map((p) =>
+    p.isVariable ? (
+      <span
+        className={styles.TermsLabelSpan}
+        onClick={
+          p.value === "{{ ackPrivacyPolicy }}"
+            ? onShowPrivacyPolicyClick
+            : onShowTermsOfServiceClick
+        }
+      >
+        {p.value === "{{ ackPrivacyPolicy }}"
+          ? t("checkout-page:ackPrivacyPolicy")
+          : t("checkout-page:ackTermsOfService")}
+      </span>
+    ) : (
+      p.value
+    )
+  );
+
+  return (
+    <div className={[styles.StepPayment].join(" ")}>
+      <Errors vm={vm} />
+      <PaymentGateways vm={vm} />
+      <BillingAddress vm={vm} />
+
+      {vm.checkoutSettings.showTermsAndConditionsCheckbox && (
+        <div style={{ marginTop: vm.useDifferentAddress ? "12px" : "0px" }}>
+          <Checkbox
+            value={vm.isTermsAndConditionsChecked}
+            hasError={vm.isErrorsVisible && !vm.isTermsAndConditionsChecked}
+            label={<>{policyLabel}</>}
+            onChange={vm.onTermsAndConditionsCheckedChange}
+          />
+        </div>
+      )}
+
+      <Button
+        style={{
+          width: "100%",
+          marginTop: "24px",
+        }}
+        text={t("checkout-page:actions.completeOrder")}
+        isLoading={vm.isStepLoading}
+        isDisabled={!vm.canPerformPayment}
+        onClick={vm.onCompletePaymentClick}
+      />
+
+      {!!t("checkout-page:securePaymentTooltip") && (
+        <div className={styles.SecurePaymentContainer}>
+          <span className={styles.Lock}>
+            <SVGLock />
+          </span>
+          <span>{t("checkout-page:securePaymentTooltip")}</span>
+        </div>
+      )}
+    </div>
+  );
+});

package/src/components/checkout/steps/step-payment/payment-gateways/index.tsx

@@ -0,0 +1,116 @@
+import * as React from "react";
+import { observer } from "mobx-react-lite";
+import CheckoutViewModel from "../../../model";
+import {
+  IkasPaymentGatewayAdditionalPrice,
+  IkasPaymentGatewayAdditionalPriceAmountType,
+  IkasPaymentGatewayType,
+  IkasPaymentMethodAdditionalPriceType,
+  IkasPaymentMethodType,
+} from "../../../../../models/data/payment-gateway";
+import { CreditCardForm } from "../../../components/credit-card-form";
+import { Installments } from "./installments";
+import SelectBox from "../../../components/select-box";
+import styles from "./style.module.scss";
+import { formatMoney, useTranslation } from "../../../../../utils";
+import SVGExternal from "../../../components/svg/external";
+
+type Props = {
+  vm: CheckoutViewModel;
+};
+
+export const PaymentGateways: React.FC<Props> = observer(({ vm }) => {
+  const { t } = useTranslation();
+
+  const PaymentMethodLogos = (props: any) => (
+    <div
+      style={{
+        display: "flex",
+        justifyContent: "flex-end",
+        alignItems: "center",
+        flexWrap: "wrap",
+      }}
+    >
+      {props.children}
+    </div>
+  );
+
+  const PaymentMethodAdjustment = (props: any) => (
+    <div className={styles.AdditionalPrice}>{props.children}</div>
+  );
+
+  const getAdditionalPriceText = (ap: IkasPaymentGatewayAdditionalPrice) => {
+    if (ap.amount === 0) return "";
+
+    return `${
+      ap.amountType === IkasPaymentGatewayAdditionalPriceAmountType.AMOUNT
+        ? formatMoney(ap.amount, vm.cart!.currencyCode)
+        : " %" + ap.amount
+    }${
+      ap.type === IkasPaymentMethodAdditionalPriceType.DECREMENT
+        ? " " + t("checkout-page:paymentMethodDiscount")
+        : " " + t("checkout-page:paymentMethodAdditionalPrice")
+    }`;
+  };
+
+  return (
+    <React.Fragment>
+      {vm.paymentGateways.map((pg, index) => (
+        <SelectBox
+          key={pg.id}
+          label={
+            pg.paymentMethodType === IkasPaymentMethodType.CREDIT_CARD &&
+            pg.type === IkasPaymentGatewayType.INTERNAL
+              ? t("checkout-page:creditCard")
+              : pg.name
+          }
+          isSelected={vm.selectedPaymentGatewayIndex === index}
+          rightContent={
+            pg.additionalPrices?.length ? (
+              <PaymentMethodAdjustment>
+                {getAdditionalPriceText(pg.additionalPrices[0])}
+              </PaymentMethodAdjustment>
+            ) : (
+              <PaymentMethodLogos>
+                {!!pg.logoUrl && (
+                  <div className={styles.PaymentLogoContainer}>
+                    <img src={pg.logoUrl} />
+                  </div>
+                )}
+              </PaymentMethodLogos>
+            )
+          }
+          bottomContent={
+            pg.paymentMethodType === IkasPaymentMethodType.CREDIT_CARD &&
+            pg.type === IkasPaymentGatewayType.INTERNAL ? (
+              <div>
+                <CreditCardForm vm={vm} />
+                {vm.installmentInfo && <Installments vm={vm} />}
+              </div>
+            ) : pg.description ? (
+              <React.Fragment>
+                {pg.type === IkasPaymentGatewayType.EXTERNAL && (
+                  <div
+                    style={{
+                      height: "52px",
+                      display: "flex",
+                      justifyContent: "center",
+                      margin: "24px 0",
+                    }}
+                  >
+                    <SVGExternal />
+                  </div>
+                )}
+                <div dangerouslySetInnerHTML={{ __html: pg.description }}></div>
+              </React.Fragment>
+            ) : undefined
+          }
+          onClick={() =>
+            vm.selectedPaymentGatewayIndex !== index &&
+            vm.setPaymentGateway(index)
+          }
+        />
+      ))}
+    </React.Fragment>
+  );
+});

package/src/components/checkout/steps/step-payment/payment-gateways/installments/index.tsx

@@ -0,0 +1,51 @@
+import * as React from "react";
+import { observer } from "mobx-react-lite";
+import CheckoutViewModel from "../../../../model";
+
+import { formatMoney, useTranslation } from "../../../../../../utils";
+import styles from "./style.module.scss";
+import { Toggle } from "../../../../../../components/checkout/components/toggle";
+
+type Props = {
+  vm: CheckoutViewModel;
+};
+
+export const Installments: React.FC<Props> = observer(({ vm }) => {
+  const { t } = useTranslation();
+
+  return (
+    <div className={styles.Installments}>
+      <div className={styles.Title}>
+        {t("checkout-page:installmentOptions")}
+      </div>
+      <div className={styles.Container}>
+        {vm.installmentInfo?.installmentPrices.map((ip, index) => (
+          <div
+            className={styles.Row}
+            onClick={() => vm.setInstallmentCount(ip.installmentCount || 1)}
+          >
+            <Toggle value={vm.selectedInstallmentIndex === index} />
+            <div className={styles.InstallmentInfo}>
+              <div className={styles.InstallmentCount}>
+                {ip.installmentCount === 1
+                  ? t("checkout-page:singleInstallment")
+                  : `${ip.installmentCount} ${t("checkout-page:installments")}`}
+              </div>
+              {ip.installmentCount !== 1 && (
+                <div className={styles.InstallmentPrice}>
+                  {formatMoney(
+                    ip.installmentPrice!,
+                    vm.checkout.cart!.currencyCode
+                  )}
+                </div>
+              )}
+            </div>
+            <div className={styles.Price}>
+              {formatMoney(ip.totalPrice!, vm.checkout.cart!.currencyCode)}
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+});

package/src/components/checkout/steps/step-payment/payment-gateways/installments/style.module.scss

@@ -0,0 +1,50 @@
+@import "../../../../styles/variables.scss";
+
+.Installments {
+  margin-top: 32px;
+
+  .Title {
+    font-size: 16px;
+    line-height: 24px;
+    margin-bottom: 16px;
+  }
+
+  .Container {
+    border: 1px solid $borderColor;
+    border-radius: 8px;
+    background: $primaryBgColor;
+
+
+    .Row {
+      height: 56px;
+      display: flex;
+      align-items: center;
+      padding: 0 16px;
+      border-bottom: 1px solid $borderColor;
+
+      &:last-of-type {
+        border-bottom: none;
+      }
+
+      .InstallmentInfo {
+        flex: 1 1 auto;
+
+        .InstallmentCount {
+          font-size: 16px;
+        }
+
+        .InstallmentPrice {
+          font-size: 12px;
+          color: $secondaryTextColor;
+        }
+      }
+
+      .Price {
+        flex: 0 0 auto;
+        font-weight: 600;
+        font-size: 16px;
+        line-height: 24px;
+      }
+    }
+  }
+}

package/src/components/checkout/steps/step-payment/payment-gateways/style.module.scss

@@ -0,0 +1,15 @@
+@import "../../../styles/variables.scss";
+
+.PaymentLogoContainer {
+  margin-left: 10px;
+  font-size: 0.7em;
+
+  img {
+    height: 20px;
+  }
+}
+
+.AdditionalPrice {
+  color: $primaryTextColor;
+  font-weight: 600;
+}

package/src/components/checkout/steps/step-payment/style.module.scss

@@ -0,0 +1,32 @@
+@import "../../styles/variables.scss";
+
+.StepPayment {
+  margin-top: 8px;
+
+  .TermsLabelSpan {
+    color: $primaryTextColor;
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+
+  .SecurePaymentContainer {
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-top: 24px;
+    color: $secondaryTextColor;
+
+    .Lock {
+      color: #CFCED3;
+      margin-right: 8px;
+      display: flex;
+      align-items: center;
+      position: relative;
+      top: -1px;
+    }
+  }
+}
+

package/src/components/checkout/steps/step-shipping/index.tsx

@@ -0,0 +1,127 @@
+import * as React from "react";
+import { observer } from "mobx-react-lite";
+import CheckoutViewModel from "../../model";
+import { formatMoney, useTranslation } from "../../../../utils";
+
+import styles from "./style.module.scss";
+import { Button } from "../../components/button";
+import { Checkbox } from "../../components/checkbox";
+import { FormItemType } from "../../components/form-item/model";
+import { FormItem } from "../../components/form-item";
+import Errors from "../../components/error";
+import SelectBox from "../../components/select-box";
+
+type Props = {
+  vm: CheckoutViewModel;
+};
+
+export const CheckoutStepShipping: React.FC<Props> = observer(({ vm }) => {
+  const { t } = useTranslation();
+
+  return (
+    <div className={[styles.StepShipping].join(" ")}>
+      <ShippingMethods vm={vm} />
+      <GiftPackage vm={vm} />
+      <Button
+        style={{ width: "100%", marginTop: "32px" }}
+        text={t("checkout-page:actions.continueWithPayment")}
+        isLoading={vm.isStepLoading}
+        isDisabled={!vm.canProceedToPayment}
+        onClick={vm.onProceedToPaymentClick}
+      />
+    </div>
+  );
+});
+
+type CommonProps = {
+  vm: CheckoutViewModel;
+};
+
+const ShippingMethods: React.FC<CommonProps> = observer(({ vm }) => {
+  const { t } = useTranslation();
+
+  return (
+    <div
+      className={[
+        styles.InfoBox,
+        vm.isChangingShippingMethod ? styles.Dimmed : "",
+      ].join(" ")}
+    >
+      <Errors vm={vm} />
+      {vm.checkout.availableShippingMethods.map((asm, index) => (
+        <SelectBox
+          key={asm.shippingSettingsId + asm.shippingZoneRateId}
+          label={asm.rateName}
+          isSelected={
+            vm.checkout.shippingSettingsId === asm.shippingSettingsId &&
+            vm.checkout.shippingZoneRateId === asm.shippingZoneRateId
+          }
+          rightContent={
+            <div className={styles.ShippingPrice}>
+              {asm.price === 0
+                ? t("checkout-page:free")
+                : formatMoney(asm.price, vm.checkout.cart!.currencyCode)}
+            </div>
+          }
+          onClick={() => vm.onShippingMethodChange(asm)}
+        />
+      ))}
+    </div>
+  );
+});
+
+const GiftPackage: React.FC<CommonProps> = observer(({ vm }) => {
+  const { t } = useTranslation();
+
+  const onIsGiftPackageChange = React.useCallback(
+    (value: boolean) => {
+      vm.checkout.isGiftPackage = value;
+    },
+    [vm]
+  );
+
+  const onGiftPackageNoteChange = React.useCallback(
+    (value: string) => {
+      vm.checkout.giftPackageNote = value;
+    },
+    [vm, vm.checkout]
+  );
+
+  const giftPackagePrice = React.useMemo(() => {
+    return vm.checkoutSettings.giftPackagePriceList?.find(
+      (pl) => pl.currencyCode === vm.cart?.currencyCode
+    );
+  }, [vm, vm.checkoutSettings, vm.cart]);
+
+  const checkboxLabel =
+    t("checkout-page:giftPackageCta") +
+    (giftPackagePrice && giftPackagePrice.price
+      ? ` (+ ${formatMoney(
+          giftPackagePrice!.price,
+          giftPackagePrice!.currencyCode
+        )})`
+      : "");
+
+  if (!vm.checkoutSettings.isGiftPackageEnabled) return null;
+
+  return (
+    <div className={styles.GiftSection}>
+      <Checkbox
+        value={vm.checkout.isGiftPackage}
+        label={checkboxLabel}
+        onChange={onIsGiftPackageChange}
+        removePadding
+      />
+      {vm.checkout.isGiftPackage && (
+        <FormItem
+          type={FormItemType.TEXT_AREA}
+          label=""
+          value={vm.checkout.giftPackageNote || ""}
+          onChange={onGiftPackageNoteChange}
+          style={{ marginTop: "16px" }}
+          textAreaPlaceholder={t("checkout-page:giftPackageCtaPlaceholder")}
+        />
+      )}
+    </div>
+  );
+});

package/src/components/checkout/steps/step-shipping/style.module.scss

@@ -0,0 +1,44 @@
+@import "../../styles/variables.scss";
+
+.BackButtonContainer {
+  display: flex;
+  justify-content: center;
+  position: relative;
+
+  a {
+    line-height: 0.9em;
+  }
+}
+
+.Actions {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+
+  @media only screen and (max-width: $breakpoint) {
+    flex-direction: column-reverse;
+    justify-content: flex-start;
+
+    a {
+      margin-top: 1em;
+    }
+  }
+}
+
+.StepShipping {
+  margin-top: 8px;
+}
+
+.InfoBox {
+  &.Dimmed {
+    opacity: 0.5;
+  }
+}
+
+.GiftSection {
+  margin-top: 32px;
+}
+
+.ShippingPrice {
+  font-weight: 600;
+}