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

package/src/analytics/tiktokPixel.ts

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

@@ -1,406 +0,0 @@
-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}
-    />
-  );
-});