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

package/src/analytics/tiktokPixel.ts

@@ -0,0 +1,223 @@
+import { makeAutoObservable } from "mobx";
+import { IkasBaseStore } from "../store";
+import {
+  IkasCheckout,
+  IkasProduct,
+  IkasOrderLineItem,
+  IkasCategory,
+} from "../models";
+
+const isServer = typeof window === "undefined";
+
+export class TiktokPixel {
+  constructor() {
+    makeAutoObservable(this);
+  }
+
+  static productView(productDetail: IkasProduct) {
+    try {
+      identify();
+
+      !isServer &&
+        (window as any).ttq &&
+        (window as any).ttq.track(
+          "ViewContent",
+          productToTPItem(productDetail)
+        );
+
+      return;
+    } catch (err) {
+      console.error(err);
+    }
+  }
+
+  static addToCart(item: IkasOrderLineItem, quantity: number) {
+    try {
+      identify();
+
+      !isServer &&
+        (window as any).ttq &&
+        (window as any).ttq.track(
+          "AddToCart",
+          orderLineItemToTPItem(item, quantity)
+        );
+
+      return;
+    } catch (err) {
+      console.error(err);
+    }
+  }
+
+  static beginCheckout() {
+    try {
+      identify();
+
+      !isServer &&
+        (window as any).ttq &&
+        (window as any).ttq.track("InitiateCheckout");
+
+      return;
+    } catch (err) {
+      console.error(err);
+    }
+  }
+
+  static purchase(checkout: IkasCheckout) {
+    try {
+      identify();
+
+      !isServer &&
+        (window as any).ttq &&
+        (window as any).ttq.track(
+          "CompletePayment",
+          beginCheckoutTPItem(checkout)
+        );
+
+      return;
+    } catch (err) {
+      console.error(err);
+    }
+  }
+
+  static addToWishlist(id: string) {
+    try {
+      identify();
+
+      !isServer &&
+        (window as any).ttq &&
+        (window as any).ttq.track("AddToWishlist", {
+          content_id: id,
+        });
+      return;
+    } catch (err) {
+      console.error(err);
+    }
+  }
+
+  static search(searchKeyword: string) {
+    try {
+      identify();
+
+      !isServer &&
+        (window as any).ttq &&
+        (window as any).ttq.track("Search", {
+          query: searchKeyword,
+          content_id: "Search",
+        });
+
+      return;
+    } catch (err) {
+      console.error(err);
+    }
+  }
+
+  static completeRegistration() {
+    try {
+      identify();
+
+      !isServer &&
+        (window as any).ttq &&
+        (window as any).ttq.track("CompleteRegistration");
+
+      return;
+    } catch (err) {
+      console.error(err);
+    }
+  }
+
+  static viewCategory(category: IkasCategory) {
+    try {
+      identify();
+
+      !isServer &&
+        (window as any).ttq &&
+        (window as any).ttq.track("ViewContent", {
+          content_id: category.id,
+          content_type: "product_group",
+          content_category: category.name,
+        });
+
+      return;
+    } catch (err) {
+      console.error(err);
+    }
+  }
+
+  static contactForm() {
+    try {
+      identify();
+
+      !isServer && (window as any).ttq && (window as any).ttq.track("Contact");
+
+      return;
+    } catch (err) {
+      console.error(err);
+    }
+  }
+}
+
+function productToTPItem(productDetail: IkasProduct, quantity = 1) {
+  return {
+    content_type: "product",
+    quantity,
+    content_id: productDetail.selectedVariant.id,
+    value: productDetail.selectedVariant.price.finalPrice,
+    currency:
+      productDetail.selectedVariant.price.currency === ""
+        ? "TRY"
+        : productDetail.selectedVariant.price.currency,
+  };
+}
+
+function beginCheckoutTPItem(checkout: IkasCheckout) {
+  const contents: Record<string, any>[] = [];
+  checkout?.items.map((item) => {
+    contents.push({
+      content_id: item.variant.id,
+      content_type: "product",
+      content_name: item.variant.name,
+      price: item.finalPrice,
+      quantity: item.quantity,
+    });
+  });
+
+  return {
+    contents: contents,
+    content_type: "product_group",
+    currency: checkout.items[0].currencyCode,
+    value: checkout.totalPrice,
+  };
+}
+
+function orderLineItemToTPItem(orderLineItem: IkasOrderLineItem, quantity = 1) {
+  return {
+    content_id: orderLineItem.variant.id,
+    content_type: "product",
+    content_name: orderLineItem.variant.name,
+    quantity,
+    value: orderLineItem.finalPrice,
+    currency: orderLineItem.currencyCode,
+  };
+}
+
+function identify() {
+  try {
+    const store = IkasBaseStore.getInstance();
+
+    const customer = store.customerStore.customer;
+
+    if (!customer) return;
+
+    !isServer &&
+      (window as any).ttq &&
+      (window as any).ttq.identify({
+        external_id: customer.id,
+        email: customer.email,
+        phone_number: customer.phone || "",
+      });
+
+    return;
+  } catch (err) {
+    console.error(err);
+  }
+}

package/src/components/checkout/components/address-form/index.tsx

@@ -0,0 +1,406 @@
+import * as React from "react";
+import { observer } from "mobx-react-lite";
+
+import { FormItem } from "../form-item";
+import { FormItemInputType, FormItemType } from "../form-item/model";
+import AddressFormViewModel, { AddressFormViewModelParams } from "./model";
+import { Checkbox } from "../checkbox";
+
+import commonStyles from "../../styles/common.module.scss";
+import checkoutStyles from "../../style.module.scss";
+import { useTranslation } from "../../../../utils";
+import { IkasCustomerAddress } from "../../../../models/data/customer/address";
+import { IkasCheckoutRequirement } from "@ikas/storefront-models";
+
+export const AddressForm: React.FC<AddressFormViewModelParams> = observer(
+  (props) => {
+    const { t } = useTranslation();
+    const vm = React.useMemo(
+      () =>
+        new AddressFormViewModel({
+          ...props,
+        }),
+      []
+    );
+
+    React.useEffect(() => {
+      Object.entries(props).forEach((entry) => {
+        (vm as any)[entry[0]] = entry[1];
+      });
+    }, Object.values(props));
+
+    return props.deliveryMethod === "in-store" ? (
+      <div>
+        <div className={[commonStyles.Grid, commonStyles.Grid2].join(" ")}>
+          <FirstName {...props} vm={vm} />
+          <LastName {...props} vm={vm} />
+          <div></div> {/* helps with grid spacing */}
+        </div>
+        {!!vm.address.checkoutSettings &&
+          vm.address.checkoutSettings.phoneRequirement !==
+            IkasCheckoutRequirement.INVISIBLE && (
+            <div className={checkoutStyles.RowPB}>
+              <Phone {...props} vm={vm} />
+              <div></div> {/* helps with grid spacing */}
+            </div>
+          )}
+      </div>
+    ) : (
+      <div>
+        {vm.allowTitleChange && (
+          <div className={checkoutStyles.RowPB}>
+            <AddressTitle {...props} vm={vm} />
+          </div>
+        )}
+        <div className={[commonStyles.Grid, commonStyles.Grid2].join(" ")}>
+          <FirstName {...props} vm={vm} />
+          <LastName {...props} vm={vm} />
+          <div></div> {/* helps with grid spacing */}
+        </div>
+        {!!vm.address.checkoutSettings &&
+          vm.address.checkoutSettings.identityNumberRequirement !==
+            IkasCheckoutRequirement.INVISIBLE && (
+            <div className={checkoutStyles.RowPB}>
+              <IdentityNumber {...props} vm={vm} />
+            </div>
+          )}
+
+        {vm.address.checkoutSettings?.postalCodeRequirement !==
+        IkasCheckoutRequirement.INVISIBLE ? (
+          <React.Fragment>
+            <div className={checkoutStyles.RowPB}>
+              <AddressFirstLine {...props} vm={vm} />
+            </div>
+            <div className={[commonStyles.Grid, commonStyles.Grid2].join(" ")}>
+              <AddressSecondLine {...props} vm={vm} />
+              <PostalCode {...props} vm={vm} />
+              <div></div> {/* helps with grid spacing */}
+            </div>
+          </React.Fragment>
+        ) : (
+          <React.Fragment>
+            <div className={checkoutStyles.RowPB}>
+              <AddressFirstLine {...props} vm={vm} />
+            </div>
+            <div className={checkoutStyles.RowPB}>
+              <AddressSecondLine {...props} vm={vm} />
+            </div>
+          </React.Fragment>
+        )}
+
+        {(vm.countryOptions.length > 1 || vm.hasState) && (
+          <div
+            className={[
+              checkoutStyles.RowPB,
+              commonStyles.Grid,
+              vm.countryOptions.length > 1 && vm.hasState
+                ? commonStyles.Grid2
+                : "",
+            ].join(" ")}
+          >
+            <Country {...props} vm={vm} />
+            {vm.hasState && <State {...props} vm={vm} />}
+          </div>
+        )}
+        <div
+          className={[
+            commonStyles.Grid,
+            vm.isDistrictHidden ? "" : commonStyles.Grid2,
+            checkoutStyles.RowPB,
+          ].join(" ")}
+        >
+          {vm.isFreeTextCity ? (
+            <CityInput {...props} vm={vm} />
+          ) : (
+            <City {...props} vm={vm} />
+          )}
+          {!vm.isDistrictHidden &&
+            (vm.districtOptions.length ? (
+              <DistrictSelect {...props} vm={vm} />
+            ) : (
+              <DistrictInput {...props} vm={vm} />
+            ))}
+        </div>
+        {!!vm.address.checkoutSettings &&
+          vm.address.checkoutSettings.phoneRequirement !==
+            IkasCheckoutRequirement.INVISIBLE && (
+            <div>
+              <Phone {...props} vm={vm} />
+            </div>
+          )}
+        {!!vm.allowCorporateInfo && (
+          <div style={{ marginTop: "12px" }}>
+            <Checkbox
+              value={vm.isCorporate}
+              label={t("checkout-page:corporateInvoice")}
+              onChange={vm.onCorporateChange}
+            />
+          </div>
+        )}
+        {!!vm.isCorporate && (
+          <div className={commonStyles.Grid} style={{ marginTop: "12px" }}>
+            <Company {...props} vm={vm} />
+            <TaxOffice {...props} vm={vm} />
+            <TaxNumber {...props} vm={vm} />
+          </div>
+        )}
+      </div>
+    );
+  }
+);
+
+type FormItemProps = {
+  vm: AddressFormViewModel;
+};
+
+const FirstName: React.FC<FormItemProps> = observer(({ vm }) => {
+  const { t } = useTranslation();
+  return (
+    <FormItem
+      type={FormItemType.TEXT}
+      label={t("checkout-page:firstName")}
+      autocomplete="given-name"
+      value={vm.firstName || ""}
+      onChange={vm.onFirstNameChange}
+      hasError={vm.isErrorsVisible && !vm.address.validationResult?.firstName}
+      errorText={t("checkout-page:firstNameError")}
+    />
+  );
+});
+
+const LastName: React.FC<FormItemProps> = observer(({ vm }) => {
+  const { t } = useTranslation();
+  return (
+    <FormItem
+      type={FormItemType.TEXT}
+      label={t("checkout-page:lastName")}
+      autocomplete="family-name"
+      value={vm.lastName || ""}
+      onChange={vm.onLastNameChange}
+      hasError={vm.isErrorsVisible && !vm.address.validationResult?.lastName}
+      errorText={t("checkout-page:lastNameError")}
+    />
+  );
+});
+
+const IdentityNumber: React.FC<FormItemProps> = observer(({ vm }) => {
+  const { t } = useTranslation();
+  return (
+    <FormItem
+      type={FormItemType.TEXT}
+      label={t("checkout-page:identityNumber")}
+      value={vm.identityNumber || ""}
+      onChange={vm.onIdentityNumberChange}
+      hasError={
+        //@ts-ignore
+        vm.isErrorsVisible && !vm.address.validationResult?.identityNumber
+      }
+      errorText={t("checkout-page:identityNumberError")}
+    />
+  );
+});
+
+const AddressTitle: React.FC<FormItemProps> = observer(({ vm }) => {
+  const { t } = useTranslation();
+  const address = vm.address as IkasCustomerAddress;
+  return (
+    <FormItem
+      type={FormItemType.TEXT}
+      label={t("checkout-page:addressTitle")}
+      value={address.title || ""}
+      onChange={vm.onAddressTitleChange}
+      hasError={vm.isErrorsVisible && !address.title}
+      errorText={t("checkout-page:addressTitleError")}
+    />
+  );
+});
+
+const AddressFirstLine: React.FC<FormItemProps> = observer(({ vm }) => {
+  const { t } = useTranslation();
+  return (
+    <FormItem
+      type={FormItemType.TEXT}
+      label={t("checkout-page:addressLine1")}
+      autocomplete="address-line1"
+      value={vm.address.addressLine1 || ""}
+      onChange={vm.onAddressLine1Change}
+      hasError={
+        vm.isErrorsVisible && !vm.address.validationResult?.addressLine1
+      }
+      errorText={t("checkout-page:addressError")}
+    />
+  );
+});
+
+const AddressSecondLine: React.FC<FormItemProps> = observer(({ vm }) => {
+  const { t } = useTranslation();
+  return (
+    <FormItem
+      type={FormItemType.TEXT}
+      autocomplete="address-line2"
+      label={t("checkout-page:addressLine2")}
+      value={vm.address.addressLine2 || ""}
+      onChange={vm.onAddressLine2Change}
+    />
+  );
+});
+
+const PostalCode: React.FC<FormItemProps> = observer(({ vm }) => {
+  const { t } = useTranslation();
+  return (
+    <FormItem
+      type={FormItemType.TEXT}
+      label={t("checkout-page:postalCode")}
+      autocomplete="postal-code"
+      value={vm.address.postalCode || ""}
+      onChange={vm.onAddressPostalCodeChange}
+      hasError={vm.isErrorsVisible && !vm.address.validationResult?.postalCode}
+      errorText={t("checkout-page:postalCodeError")}
+    />
+  );
+});
+
+const Country: React.FC<FormItemProps> = observer(({ vm }) => {
+  const { t } = useTranslation();
+
+  if (vm.countryOptions.length <= 1) return null;
+
+  return (
+    <FormItem
+      type={FormItemType.SELECT}
+      label={t("checkout-page:country")}
+      autocomplete="country-name"
+      value={vm.country?.id || ""}
+      onChange={vm.onCountryChange}
+      options={vm.countryOptions}
+      hasError={vm.isErrorsVisible && !vm.address.validationResult?.country}
+      errorText={t("checkout-page:countryError")}
+    />
+  );
+});
+
+const State: React.FC<FormItemProps> = observer(({ vm }) => {
+  const { t } = useTranslation();
+  return (
+    <FormItem
+      type={FormItemType.SELECT}
+      label={t("checkout-page:state")}
+      value={vm.state?.id || ""}
+      onChange={vm.onStateChange}
+      options={vm.stateOptions}
+      hasError={vm.isErrorsVisible && !vm.address.validationResult?.state}
+      errorText={t("checkout-page:stateError")}
+    />
+  );
+});
+
+const City: React.FC<FormItemProps> = observer(({ vm }) => {
+  const { t } = useTranslation();
+  return (
+    <FormItem
+      type={FormItemType.SELECT}
+      label={t("checkout-page:city")}
+      autocomplete="off"
+      value={vm.city?.id || ""}
+      onChange={vm.onCityChange}
+      options={vm.cityOptions}
+      hasError={vm.isErrorsVisible && !vm.address.validationResult?.city}
+      errorText={t("checkout-page:cityError")}
+    />
+  );
+});
+
+const CityInput: React.FC<FormItemProps> = observer(({ vm }) => {
+  const { t } = useTranslation();
+  return (
+    <FormItem
+      type={FormItemType.TEXT}
+      autocomplete="address-level3"
+      label={t("checkout-page:city")}
+      value={vm.city?.name || ""}
+      onChange={vm.onCityInputChange}
+    />
+  );
+});
+
+const DistrictSelect: React.FC<FormItemProps> = observer(({ vm }) => {
+  const { t } = useTranslation();
+  return (
+    <FormItem
+      type={FormItemType.SELECT}
+      label={t("checkout-page:district")}
+      autocomplete="off"
+      value={vm.district?.id || ""}
+      onChange={vm.onDistrictChange}
+      options={vm.districtOptions}
+      hasError={vm.isErrorsVisible && !vm.address.validationResult?.district}
+      errorText={t("checkout-page:districtError")}
+    />
+  );
+});
+
+const DistrictInput: React.FC<FormItemProps> = observer(({ vm }) => {
+  const { t } = useTranslation();
+  return (
+    <FormItem
+      type={FormItemType.TEXT}
+      autocomplete="address-level3"
+      label={t("checkout-page:district")}
+      value={vm.district?.name || ""}
+      onChange={vm.onDistrictInputChange}
+    />
+  );
+});
+
+const Phone: React.FC<FormItemProps> = observer(({ vm }) => {
+  const { t } = useTranslation();
+  return (
+    <FormItem
+      type={FormItemType.TEL}
+      inputType={FormItemInputType.TEL}
+      label={t("checkout-page:phone")}
+      autocomplete="tel"
+      value={vm.phone || ""}
+      onChange={vm.onPhoneChange}
+      hasError={vm.isErrorsVisible && !vm.address.validationResult?.phone}
+      currentCountryCode={vm.myCountryCode}
+      errorText={t("checkout-page:phoneError")}
+    />
+  );
+});
+
+const Company: React.FC<FormItemProps> = observer(({ vm }) => {
+  const { t } = useTranslation();
+  return (
+    <FormItem
+      type={FormItemType.TEXT}
+      label={t("checkout-page:companyName")}
+      value={vm.address.company || ""}
+      onChange={vm.onCompanyChange}
+    />
+  );
+});
+
+const TaxOffice: React.FC<FormItemProps> = observer(({ vm }) => {
+  const { t } = useTranslation();
+  return (
+    <FormItem
+      type={FormItemType.TEXT}
+      label={t("checkout-page:taxOffice")}
+      value={vm.address?.taxOffice || ""}
+      onChange={vm.onTaxOfficeChange}
+    />
+  );
+});
+
+const TaxNumber: React.FC<FormItemProps> = observer(({ vm }) => {
+  const { t } = useTranslation();
+  return (
+    <FormItem
+      type={FormItemType.TEXT}
+      label={t("checkout-page:taxNumber")}
+      value={vm.address?.taxNumber || ""}
+      onChange={vm.onTaxNumberChange}
+    />
+  );
+});