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

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

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

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

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

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

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

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

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

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