@ikas/storefront 4.0.0-alpha.59 → 4.0.0-alpha.6

package/src/components/checkout/components/cart-summary/style.module.scss

@@ -0,0 +1,251 @@
+@import "../../styles/variables.scss";
+
+.ExpandHeader {
+  position: sticky;
+  top: 0;
+  z-index: 10;
+
+  @media only screen and (min-width: $breakpoint) {
+    display: none;
+  }
+
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  height: 48px;
+  padding: 0 $mobileHorizontalPadding;
+  width: 100%;
+  border-top: 1px solid $borderColor;
+  border-bottom: 1px solid $borderColor;
+  transition: border-bottom 0.3s;
+  user-select: none;
+  background-color: $primaryBgColor;
+
+  .Left {
+    display: flex;
+    align-items: center;
+    font-size: 16px;
+    font-weight: 600;
+  }
+
+  .Price {
+    font-weight: 600;
+    display: flex;
+    align-items: center;
+
+    .PriceText {
+      font-weight: 600;
+      margin-right: 8px;
+    }
+
+    .ArrowDown {
+      transition: all 0.3s;
+      display: flex;
+      align-items: center;
+
+      &.Rotated {
+        transform: rotate(-180deg);
+      }
+    }
+  }
+}
+
+.CartSummary {
+  @media only screen and (max-width: $breakpoint) {
+    width: 100%;
+    background-color: $cardBgColor;
+  }
+
+  .HideOnDesktop {
+    @media only screen and (min-width: $breakpoint) {
+      display: none;
+    }
+  }
+
+  .DetailsContainer {
+    overflow: hidden;
+    width: 100%;
+    transition: height 0.3s ease-in-out;
+
+    @media only screen and (max-width: $breakpoint) {
+      padding: 0 $mobileHorizontalPadding;
+      box-shadow: 1px 2px 5px 0px rgba(0, 0, 0, 0.2);
+    }
+  }
+
+  .Details {
+    overflow: hidden;
+
+    @media only screen and (max-width: $breakpoint) {
+      padding-top: $mobileHorizontalPadding;
+    }
+  }
+
+  .Divider {
+    width: 100%;
+    height: 1px;
+    margin: auto;
+    background-color: $borderColor;
+  }
+
+  .ActionTextBtn {
+    color: $primaryTextColor;
+    user-select: none;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+
+    &:hover {
+      text-decoration: underline;
+    }
+
+    &.NoUnderline {
+      &:hover {
+        text-decoration: none;
+      }
+    }
+
+    &.Light {
+      color: $secondaryTextColor;
+    }
+  }
+
+  .SubTotalInfo {
+    padding: 24px 0;
+    border-bottom: 1px solid $borderColor;
+
+    .InfoRow {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-bottom: 10px;
+
+      .Label {
+        color: $secondaryTextColor;
+        display: flex;
+        align-items: center;
+        flex: 1 1 auto;
+      }
+
+      .Value {
+        flex: 0 0 auto;
+        padding-left: 8px;
+      }
+
+      &:last-of-type {
+        margin-bottom: 0;
+      }
+    }
+  }
+
+  .TotalContainer {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-top: 12px;
+
+    .TitleContainer {
+      .Title {
+        font-size: 20px;
+        font-weight: 600;
+      }
+    }
+
+    .TotalPrice {
+      font-size: 20px;
+      font-weight: 600;
+    }
+
+    @media only screen and (max-width: $breakpoint) {
+      height: 64px;
+      margin-top: 0px;
+    }
+  }
+
+  .AppliedCoupon {
+    display: flex;
+    align-items: center;
+    padding: 4px 4px 4px 8px;
+    background-color: white;
+    border-radius: 6px;
+    margin-left: 12px;
+    font-size: 14px;
+    line-height: 20px;
+
+    .CouponCode {
+      font-size: 14px;
+    }
+
+    .ClearCoupon {
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      color: $secondaryTextColor;
+      svg {
+        transform: scale(0.8);
+      }
+    }
+  }
+
+  .NotificationContainer {
+    margin-bottom: 14px;
+  }
+
+  .CheckoutNoteContainer {
+    margin-top: 24px;
+    width: calc(100% - 2px);
+    margin-left: 1px;
+
+    .Title {
+      font-size: 16px;
+      color: $primaryTextColor;
+      margin-bottom: 8px;
+    }
+
+    .CheckoutNoteDisplay {
+      color: $secondaryTextColor;
+    }
+
+    &.Success {
+      margin-top: 0;
+    }
+
+    @media only screen and (max-width: $breakpoint) {
+      margin-top: 0px;
+    }
+  }
+
+  .GiftLabel {
+    display: flex;
+    align-items: center;
+
+    span {
+      margin-left: 8px;
+    }
+  }
+
+  .PoweredBy {
+    width: 100%;
+    height: 50px;
+    justify-content: center;
+    align-items: center;
+    color: $primaryTextColor;
+    display: none;
+
+    @media only screen and (max-width: $breakpoint) {
+      display: flex;
+    }
+
+    span {
+      font-size: 14px;
+      line-height: 20px;
+      color: $secondaryTextColor;
+      margin-right: 8px;
+    }
+
+    a {
+      display: flex;
+      align-items: center;
+    }
+  }
+}

package/src/components/checkout/components/checkbox/check.tsx

@@ -0,0 +1,23 @@
+import * as React from "react";
+
+type Props = {
+  className?: string;
+};
+
+const SVGCheck: React.FC<Props> = ({ className }) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="10.3"
+    height="8"
+    viewBox="8.9 0.3 10.3 8"
+    enable-background="new 8.9 0.3 10.3 8"
+    className={className}
+  >
+    <path
+      fill="currentColor"
+      d="M12.6 8.1l-3.7-3.8 1-1.1 2.7 2.7 5.5-5.4 1 1z"
+    />
+  </svg>
+);
+
+export default SVGCheck;

package/src/components/checkout/components/checkbox/index.tsx

@@ -0,0 +1,50 @@
+import * as React from "react";
+import { observer } from "mobx-react-lite";
+import SVGCheck from "./check";
+
+import styles from "./style.module.scss";
+
+type Props = {
+  value: boolean;
+  label?: string | React.ReactNode;
+  hasError?: boolean;
+  removePadding?: boolean;
+  onChange: (value: boolean) => void;
+};
+
+export const Checkbox: React.FC<Props> = observer(
+  ({ value, label, hasError, removePadding, onChange }) => {
+    const _onChange = () => {
+      onChange(!value);
+    };
+
+    const checkboxBorderClasses = [styles.CheckboxBorder];
+    const labelClasses = [styles.CheckboxLabel];
+    const tickClasses = [styles.CheckboxTick];
+
+    if (value) {
+      checkboxBorderClasses.push(styles.Checked);
+      tickClasses.push(styles.Visible);
+    }
+
+    if (hasError) labelClasses.push(styles.CheckboxLabelError);
+
+    return (
+      <div
+        className={[
+          styles.CheckboxWrapper,
+          removePadding ? styles.WithoutPadding : "",
+        ].join(" ")}
+        onClick={_onChange}
+      >
+        <div className={styles.CheckboxContainer}>
+          <div className={checkboxBorderClasses.join(" ")}></div>
+          <div className={tickClasses.join(" ")}>
+            <SVGCheck />
+          </div>
+        </div>
+        {!!label && <div className={labelClasses.join(" ")}>{label}</div>}
+      </div>
+    );
+  }
+);

package/src/components/checkout/components/checkbox/style.module.scss

@@ -0,0 +1,72 @@
+@import "../../styles//variables.scss";
+
+.CheckboxWrapper {
+  width: 100%;
+  display: flex;
+  padding: 8px 0;
+  cursor: pointer;
+  user-select: none;
+  align-items: center;
+
+  &.WithoutPadding {
+    padding: 0;
+  }
+
+  .CheckboxContainer {
+    flex: 0 0 auto;
+    position: relative;
+    width: 20px;
+    height: 20px;
+    margin-right: 12px;
+  }
+
+  .CheckboxBorder {
+    flex: 0 0 auto;
+    width: 20px;
+    height: 20px;
+    border-radius: 4px;
+    border: 1px solid $borderColor;
+    position: absolute;
+    top: 0;
+    left: 0;
+    transition: border-width .2s ease-in-out;
+
+    &.Checked {
+      border: 10px solid $buttonBgColor;
+    }
+  }
+
+  .CheckboxTick {
+    width: 20px;
+    height: 20px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    position: absolute;
+    top: 0;
+    left: 0;
+    color: $buttonTextColor;
+    z-index: 2;
+
+    transition: all 0.2s ease-in-out;
+    transition-delay: .1s;
+    opacity: 0;
+    transform: scale(0.2);
+
+    &.Visible {
+      opacity: 1;
+      transform: scale(1.2);
+    }
+  }
+
+  .CheckboxLabel {
+    flex: 1 1 auto;
+    font-weight: normal;
+    color: $secondaryTextColor;
+  }
+
+  .CheckboxLabelError {
+    color: $errorColor;
+  }
+}

package/src/components/checkout/components/credit-card-form/index.tsx

@@ -0,0 +1,122 @@
+import * as React from "react";
+import { observer } from "mobx-react-lite";
+
+import CheckoutViewModel from "../../model";
+
+import { FormItem } from "../form-item";
+import { FormItemInputType, FormItemType } from "../form-item/model";
+
+import SVGAmex from "./svg/amex";
+import SVGMasterCard from "./svg/master-card";
+import SVGTroy from "./svg/troy";
+import SVGVisa from "./svg/visa";
+
+import commonStyles from "../../styles/common.module.scss";
+import checkoutStyles from "../../style.module.scss";
+import styles from "./style.module.scss";
+import { useTranslation } from "../../../../utils/i18n";
+import { IkasTransactionCardAssociation } from "@ikas/storefront-models";
+
+type Props = {
+  vm: CheckoutViewModel;
+};
+
+export const CreditCardForm: React.FC<Props> = observer(({ vm }) => {
+  const { t } = useTranslation();
+  const { cardData } = vm;
+  if (!cardData) return null;
+
+  const getCardLogo = (ca: IkasTransactionCardAssociation) => {
+    switch (ca) {
+      case IkasTransactionCardAssociation.AMERICAN_EXPRESS:
+        return <SVGAmex />;
+
+      case IkasTransactionCardAssociation.MASTER_CARD:
+        return <SVGMasterCard />;
+
+      case IkasTransactionCardAssociation.TROY:
+        return <SVGTroy />;
+
+      case IkasTransactionCardAssociation.VISA:
+        return <SVGVisa />;
+
+      default:
+        return <div></div>;
+    }
+  };
+
+  return (
+    <div>
+      <div className={checkoutStyles.RowPB}>
+        <FormItem
+          name="cardnumber"
+          autocomplete="cc-number"
+          inputType={FormItemInputType.NUMERIC}
+          type={FormItemType.TEXT}
+          label={t("checkout-page:cardNumber")}
+          value={cardData.cardNumber}
+          onChange={vm.onCardNumberChange}
+          errorText={t("checkout-page:cardNumberError")}
+          rightContent={
+            vm.installmentInfo?.cardAssociation ? (
+              <div className={styles.CardLogo}>
+                {getCardLogo(vm.installmentInfo.cardAssociation as any)}
+              </div>
+            ) : undefined
+          }
+          hasError={vm.isErrorsVisible && !cardData.validationResult.cardNumber}
+        />
+      </div>
+      <div className={checkoutStyles.RowPB}>
+        <FormItem
+          name="ccname"
+          autocomplete="cc-name"
+          type={FormItemType.TEXT}
+          label={t("checkout-page:cardHolderName")}
+          value={cardData.cardHolderName}
+          onChange={vm.onCardHolderNameChange}
+          errorText={t("checkout-page:cardHolderError")}
+          hasError={
+            vm.isErrorsVisible && !cardData.validationResult.cardHolderName
+          }
+        />
+      </div>
+      <div className={[commonStyles.Grid, commonStyles.Grid2].join(" ")}>
+        <FormItem
+          name="cc-exp"
+          autocomplete="cc-exp"
+          inputType={FormItemInputType.NUMERIC}
+          type={FormItemType.TEXT}
+          label={t("checkout-page:cardExpiry")}
+          value={cardData.expirationDate}
+          onChange={vm.onExpirationDateChange}
+          errorText={t("checkout-page:cardExpiryError")}
+          hasError={
+            vm.isErrorsVisible && !cardData.validationResult.expirationDate
+          }
+        />
+        <FormItem
+          name="cvc"
+          autocomplete="cc-csc"
+          inputType={FormItemInputType.NUMERIC}
+          type={FormItemType.TEXT}
+          label={t("checkout-page:cardCVC")}
+          value={cardData.cvv}
+          onChange={vm.onCvcChange}
+          errorText={t("checkout-page:cardCVCError")}
+          tooltipText={t("checkout-page:cardCVCTooltip")}
+          hasError={vm.isErrorsVisible && !cardData.validationResult.cvv}
+        />
+      </div>
+      {/* <div style={{ marginTop: "0.4em" }}>
+        <Checkbox
+          value={false}
+          onChange={() => {
+            return;
+          }}
+          label={"Kart bilgilerimi kaydet"}
+        />
+      </div> */}
+    </div>
+  );
+});

package/src/components/checkout/components/credit-card-form/model.ts

@@ -0,0 +1,56 @@
+import { makeAutoObservable } from "mobx";
+
+export default class CreditCardData {
+  cardNumber?: string;
+  cardHolderName?: string;
+  expirationDate?: string;
+  cvv?: string;
+  installmentCount = 1;
+  threeDSecure: boolean;
+
+  constructor(data: Partial<CreditCardData> = {}) {
+    this.cardNumber = data.cardNumber || "";
+    this.cardHolderName = data.cardHolderName || "";
+    this.expirationDate = data.expirationDate || "";
+    this.cvv = data.cvv || "";
+    this.installmentCount = data.installmentCount || 1;
+    this.threeDSecure = data.threeDSecure || false;
+
+    makeAutoObservable(this);
+  }
+
+  get validationResult(): CreditCardDataValidation {
+    return {
+      cardNumber: !!this.cardNumber && this.cardNumber.length === 19,
+      cardHolderName: !!this.cardHolderName,
+      expirationDate: !!this.expirationDate && this.expirationDate.length === 7,
+      cvv: !!this.cvv,
+    };
+  }
+
+  get isValid() {
+    return Object.values(this.validationResult).every((result) => result);
+  }
+
+  toInput = () => {
+    const dateParts = this.expirationDate!.split(" / ");
+    const expiredMonth = parseInt(dateParts[0]);
+    const expiredYear = parseInt(dateParts[1]);
+    return {
+      cardNumber: this.cardNumber!.split(" ").join(""),
+      cardHolderName: this.cardHolderName!,
+      cvv: this.cvv!,
+      expiredMonth,
+      expiredYear,
+      installmentCount: this.installmentCount,
+      threeDSecure: this.threeDSecure,
+    };
+  };
+}
+
+export type CreditCardDataValidation = {
+  cardNumber: boolean;
+  cardHolderName: boolean;
+  expirationDate: boolean;
+  cvv: boolean;
+};

package/src/components/checkout/components/credit-card-form/style.module.scss

@@ -0,0 +1,6 @@
+.CardLogo {
+  display: flex;
+  align-items: center;
+  height: 100%;
+  padding-right: 16px;
+}

package/src/components/checkout/components/credit-card-form/svg/amex.tsx

@@ -0,0 +1,30 @@
+import * as React from "react";
+
+type Props = {
+  className?: string;
+};
+
+const SVGAmex: React.FC<Props> = ({ className }) => (
+  <svg
+    width="32"
+    height="24"
+    viewBox="0 0 32 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    className={className}
+  >
+    <path
+      d="M2 0.5H30C30.8284 0.5 31.5 1.17157 31.5 2V22C31.5 22.8284 30.8284 23.5 30 23.5H2C1.17157 23.5 0.5 22.8284 0.5 22V2C0.5 1.17157 1.17157 0.5 2 0.5Z"
+      fill="#1F72CD"
+      stroke="#E5E4E9"
+    />
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M5.93431 9L3 15.5453H6.51278L6.94826 14.5017H7.94368L8.37916 15.5453H12.2457V14.7488L12.5903 15.5453H14.5904L14.9349 14.7319V15.5453H22.9764L23.9542 14.5288L24.8697 15.5453L29 15.5537L26.0564 12.2909L29 9H24.9338L23.982 9.9977L23.0952 9H14.3472L13.596 10.6894L12.8272 9H9.32172V9.7694L8.93177 9H5.93431ZM6.6141 9.92922H8.32639L10.2727 14.3676V9.92922H12.1485L13.6518 13.1115L15.0373 9.92922H16.9036V14.6259H15.768L15.7587 10.9456L14.103 14.6259H13.0872L11.4222 10.9456V14.6259H9.08594L8.64302 13.5729H6.25011L5.80811 14.625H4.55635L6.6141 9.92922ZM22.5606 9.92922H17.9429V14.6231H22.4891L23.9545 13.0675L25.3668 14.6231H26.8432L24.6973 12.2898L26.8432 9.92922H25.4309L23.973 11.467L22.5606 9.92922ZM7.44697 10.7239L6.6586 12.5996H8.23442L7.44697 10.7239ZM19.0826 11.7588V10.9015V10.9006H21.964L23.2212 12.2718L21.9083 13.6505H19.0826V12.7145H21.6018V11.7588H19.0826Z"
+      fill="white"
+    />
+  </svg>
+);
+
+export default SVGAmex;

package/src/components/checkout/components/credit-card-form/svg/master-card.tsx

@@ -0,0 +1,38 @@
+import * as React from "react";
+
+type Props = {
+  className?: string;
+};
+
+const SVGMasterCard: React.FC<Props> = ({ className }) => (
+  <svg
+    width="32"
+    height="24"
+    viewBox="0 0 32 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    className={className}
+  >
+    <path
+      d="M2 0.5H30C30.8284 0.5 31.5 1.17157 31.5 2V22C31.5 22.8284 30.8284 23.5 30 23.5H2C1.17157 23.5 0.5 22.8284 0.5 22V2C0.5 1.17157 1.17157 0.5 2 0.5Z"
+      fill="white"
+      stroke="#E5E4E9"
+    />
+    <path
+      d="M12.5652 17.1304C15.6388 17.1304 18.1304 14.6388 18.1304 11.5652C18.1304 8.49163 15.6388 6 12.5652 6C9.49163 6 7 8.49163 7 11.5652C7 14.6388 9.49163 17.1304 12.5652 17.1304Z"
+      fill="#E61C24"
+    />
+    <path
+      d="M19.4759 17.1304C22.5494 17.1304 25.0411 14.6388 25.0411 11.5652C25.0411 8.49163 22.5494 6 19.4759 6C16.4023 6 13.9106 8.49163 13.9106 11.5652C13.9106 14.6388 16.4023 17.1304 19.4759 17.1304Z"
+      fill="#F99F1B"
+    />
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M16.0205 7.20801C14.6879 8.2615 13.9106 9.86684 13.9106 11.5656C13.9106 13.2643 14.6879 14.8696 16.0205 15.9231C17.3531 14.8696 18.1304 13.2643 18.1304 11.5656C18.1304 9.86684 17.3531 8.2615 16.0205 7.20801Z"
+      fill="#F26622"
+    />
+  </svg>
+);
+
+export default SVGMasterCard;

package/src/components/checkout/components/credit-card-form/svg/troy.tsx

@@ -0,0 +1,54 @@
+import * as React from "react";
+
+type Props = {
+  className?: string;
+};
+
+const SVGTroy: React.FC<Props> = ({ className }) => (
+  <svg
+    width="32"
+    height="24"
+    viewBox="0 0 32 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    className={className}
+  >
+    <path
+      d="M2 0.5H30C30.8284 0.5 31.5 1.17157 31.5 2V22C31.5 22.8284 30.8284 23.5 30 23.5H2C1.17157 23.5 0.5 22.8284 0.5 22V2C0.5 1.17157 1.17157 0.5 2 0.5Z"
+      fill="white"
+      stroke="#E5E4E9"
+    />
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M24.331 9.4811C24.0522 9.4811 23.7446 9.63656 23.6219 9.91598L22.3183 12.9041L21.8488 9.91598C21.7937 9.63656 21.6037 9.4811 21.3033 9.4811L19.652 9.4811L21.0644 14.4436C21.0904 14.5389 21.0953 14.6443 21.0764 14.7553C21.0023 15.1694 20.6068 15.5054 20.1924 15.5054L19.2677 15.5054C19.0328 15.5054 18.8782 15.6509 18.8026 15.9801L18.5972 17.21L20.2258 17.21C21.0754 17.21 22.0733 16.7831 22.7389 15.6027L26 9.4811L24.331 9.4811Z"
+      fill="#2F3842"
+    />
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M8.2998 8.00041C8.78746 8.00041 9.02309 8.19493 8.93741 8.68384L8.79675 9.48037L9.91728 9.48037L9.67046 10.8795L8.54946 10.8795L8.24405 12.612C8.13851 13.2156 8.73595 13.2959 9.07869 13.2959C9.14705 13.2959 9.20376 13.2945 9.24439 13.2921L8.97033 14.8524C8.88574 14.8614 8.79848 14.873 8.61404 14.873C7.76333 14.873 6.15404 14.6453 6.47048 12.85L6.817 10.8795L6 10.8795L6.24587 9.48037L7.05484 9.48037L7.31521 8.00041L8.2998 8.00041Z"
+      fill="#2F3842"
+    />
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M17.7158 9.54448L17.428 11.1758C17.7829 11.3571 18.0261 11.7254 18.0261 12.1506C18.0261 12.7114 17.6057 13.171 17.0645 13.237L16.7769 14.868C16.8276 14.8713 16.8792 14.873 16.9307 14.873C18.4351 14.873 19.6536 13.6538 19.6536 12.1506C19.6536 10.9217 18.8376 9.88187 17.7158 9.54448Z"
+      fill="#00A6B6"
+    />
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M16.4343 13.1255C16.0797 12.9452 15.8359 12.5752 15.8359 12.1504C15.8359 11.5931 16.2572 11.1302 16.7983 11.0651L17.0856 9.43397C17.0346 9.43082 16.9826 9.42846 16.9314 9.42846C15.4281 9.42846 14.209 10.6485 14.209 12.1504C14.209 13.3799 15.0254 14.4204 16.1471 14.7578L16.4343 13.1255Z"
+      fill="#00A6B6"
+    />
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M10.5661 9.48044L11.529 9.48044C12.0168 9.48044 12.2515 9.67543 12.1655 10.1645L12.0601 10.7561C12.4189 10.0279 13.197 9.4272 13.9951 9.4272C14.0999 9.4272 14.2007 9.44799 14.2007 9.44799L13.8894 11.2123C13.8894 11.2123 13.7497 11.1798 13.5317 11.1798C13.1064 11.1798 12.3871 11.3146 11.9867 12.1138C11.8913 12.3109 11.8179 12.5505 11.767 12.8392L11.4186 14.8213L9.625 14.8213L10.5661 9.48044Z"
+      fill="#2F3842"
+    />
+  </svg>
+);
+
+export default SVGTroy;