@ikas/storefront 4.0.0-alpha.78 → 4.0.0-alpha.8

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

@@ -0,0 +1,85 @@
+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.hasValidCustomerEmail}
+            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>
+      )}
+      <CustomerAddresses vm={customerAddressesViewModel} />
+      {!customerAddressesViewModel.editingCustomerAddress && (
+        <Button
+          style={{
+            width: "100%",
+            marginTop: vm.store.customerStore.customer ? "0px" : "32px",
+          }}
+          text={
+            vm.deliveryMethod === "address"
+              ? t("checkout-page:actions.continueWithShipping")
+              : t("checkout-page:actions.continueWithPayment")
+          }
+          isLoading={vm.isStepLoading}
+          onClick={vm.onProceedToShippingClick}
+        />
+      )}
+    </div>
+  );
+};
+
+export default observer(CheckoutStepInfo);

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

@@ -0,0 +1,48 @@
+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]);
+
+  React.useEffect(() => {
+    if (vm.deliveryMethod === "in-store") {
+      vm.setUseDifferentAddress(true);
+    }
+  }, [vm]);
+
+  return (
+    <React.Fragment>
+      <div
+        style={{
+          marginTop: "32px",
+          marginBottom: vm.useDifferentAddress ? "24px" : "0px",
+        }}
+      >
+        {vm.deliveryMethod === "address" && (
+          <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,104 @@
+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 "@ikas/storefront-config";
+
+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.getTranslations()["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}
+        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,218 @@
+import * as React from "react";
+import { observer } from "mobx-react-lite";
+import CheckoutViewModel from "../../../model";
+import {
+  IkasPaymentGatewayType,
+  IkasPaymentMethodType,
+  IkasPaymentGateway,
+  IkasPaymentGatewayTransactionFeeType,
+  IkasPaymentGatewayAdditionalPriceType,
+} from "../../../../../models/data";
+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";
+import SVGMasterCard from "../../../components/master-pass/payment-gateway/svg/master-card";
+import { IkasPaymentGatewayAdditionalPrice } from "../../../../../models/data/payment-gateway/additional-price";
+import { StripeForm } from "../../../components/stripe";
+import { Card as MasterPassCard } from "../../../modelMasterPass";
+import CreditCardData from "../../../components/credit-card-form/model";
+import CreditCardFormMasterPass from "../../../components/master-pass/credit-card-form";
+
+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 === IkasPaymentGatewayTransactionFeeType.AMOUNT
+        ? formatMoney(ap.amount, vm.checkout.currencyCode)
+        : " %" + ap.amount
+    }${
+      ap.type === IkasPaymentGatewayAdditionalPriceType.DECREMENT
+        ? " " + t("checkout-page:paymentMethodDiscount")
+        : " " + t("checkout-page:paymentMethodAdditionalPrice")
+    }`;
+  };
+
+  const renderMasterPassCard = (card: MasterPassCard, index: number) => {
+    const pg = vm.paymentGateways.find((pG) => pG.id === card.paymentGatewayId);
+    const rightContent = (
+      <button
+        className={styles.MasterPassSelectBoxDeleteButton}
+        onClick={(event) => {
+          event.stopPropagation();
+          vm.mpVM.deleteCard({
+            store: vm.store,
+            checkout: vm.checkout,
+            card,
+          });
+        }}
+      >
+        {t("checkout-page:masterPass.paymentGatewaySelectBox.delete")}
+      </button>
+    );
+    const label = (
+      <div style={{ display: "flex", alignItems: "center" }}>
+        <span className={styles.MasterPassSelectBoxLabelLogo}>
+          <SVGMasterCard />
+        </span>
+        {card.Name} {card.Value1}
+      </div>
+    );
+    const bottomContent: React.ReactNode = !pg?.id
+      ? undefined
+      : pg.paymentMethodType === IkasPaymentMethodType.CREDIT_CARD &&
+        pg.type === IkasPaymentGatewayType.INTERNAL
+      ? vm.installmentInfo && <Installments vm={vm} />
+      : undefined;
+    const onClick = () => {
+      if (vm.mpVM.selectedCard?.UniqueId === card.UniqueId) return;
+      vm.checkout.selectedPaymentGateway = null;
+      vm.cardData = new CreditCardData();
+      vm.installmentInfo = undefined;
+      vm.mpVM.selectedCard = card;
+
+      if (card.Value1 && card.paymentGatewayId && vm.checkout.totalFinalPrice) {
+        vm.retrieveInstallmentInfo({
+          input: {
+            binNumber: card.Value1.slice(0, 6),
+            paymentGatewayId: card.paymentGatewayId,
+            price: vm.checkout.totalFinalPrice,
+          },
+        });
+      }
+    };
+
+    return (
+      <SelectBox
+        key={index}
+        isSelected={vm.mpVM.selectedCard?.UniqueId === card.UniqueId}
+        label={label}
+        rightContent={rightContent}
+        bottomContent={bottomContent}
+        onClick={onClick}
+      />
+    );
+  };
+
+  const isCustomFlowStripe = (pg: IkasPaymentGateway) => {
+    return (
+      pg.code === "STRIPE" &&
+      pg.settings?.find(
+        (setting) =>
+          setting.label === "allow_custom_flow" && setting.value === "true"
+      )
+    );
+  };
+
+  const renderPaymentGateway = (pg: IkasPaymentGateway, index: number) => {
+    const bottomContent =
+      pg.paymentMethodType === IkasPaymentMethodType.CREDIT_CARD &&
+      pg.type === IkasPaymentGatewayType.INTERNAL ? (
+        <>
+          {isCustomFlowStripe(pg) ? (
+            <StripeForm vm={vm} pg={pg} />
+          ) : (
+            <div>
+              <CreditCardForm vm={vm} />
+              {vm.isPaymentGatewayHasMasterPass && (
+                <CreditCardFormMasterPass 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;
+    return (
+      <SelectBox
+        key={pg.id}
+        label={
+          pg.paymentMethodType === IkasPaymentMethodType.CREDIT_CARD &&
+          pg.type === IkasPaymentGatewayType.INTERNAL
+            ? isCustomFlowStripe(pg)
+              ? " "
+              : 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={bottomContent}
+        onClick={() => {
+          if (vm.selectedPaymentGatewayIndex === index) return;
+          vm.setPaymentGateway(index);
+          vm.mpVM.selectedCard = undefined;
+        }}
+      />
+    );
+  };
+
+  return (
+    <React.Fragment>
+      {!!vm.mpVM.cards.length && vm.mpVM.cards.map(renderMasterPassCard)}
+      {vm.paymentGateways
+        .filter((pG) =>
+          vm.deliveryMethod === "in-store"
+            ? pG.paymentMethodType !== IkasPaymentMethodType.CASH_ON_DELIVERY &&
+              pG.paymentMethodType !==
+                IkasPaymentMethodType.CREDIT_CARD_ON_DELIVERY
+            : true
+        )
+        .map(renderPaymentGateway)}
+    </React.Fragment>
+  );
+});

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

@@ -0,0 +1,54 @@
+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!.currencyCode,
+                  )}
+                </div>
+              )}
+            </div>
+            <div className={styles.Price}>
+              {formatMoney(
+                ip.totalPrice!,
+                vm.checkout!.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,32 @@
+@import "../../../styles/variables.scss";
+
+.PaymentLogoContainer {
+  margin-left: 10px;
+  font-size: 0.7em;
+
+  img {
+    height: 20px;
+  }
+}
+
+.AdditionalPrice {
+  color: $primaryTextColor;
+  font-weight: 600;
+}
+
+.MasterPassSelectBoxDeleteButton {
+  font-size: 14px;
+  line-height: 20px;
+  color: $primaryTextColor;
+  padding: 4px 8px;
+  margin-right: -8px;
+
+  &:hover {
+    text-decoration: underline;
+  }
+}
+
+.MasterPassSelectBoxLabelLogo {
+  display: inline-block;
+  margin-right: 12px;
+}

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