@ikas/storefront 1.0.21 → 2.0.0-alpha.1

package/src/api/variant-type/index.ts

@@ -0,0 +1,86 @@
+import {
+  IkasVariantType,
+  IkasVariantValue,
+  IkasVariantSelectionType,
+} from "../../models";
+import gql from "graphql-tag";
+import { apollo } from "../apollo";
+import * as ListVariantTypeTypes from "./__generated__/listVariantType";
+
+export class IkasVariantTypeAPI {
+  static async listVariantTypes(idList?: string[]): Promise<IkasVariantType[]> {
+    const LIST_VARIANT_TYPE = gql`
+      query listVariantType($id: StringFilterInput!) {
+        listVariantType(id: $id) {
+          id
+          createdAt
+          updatedAt
+          deleted
+          name
+          selectionType
+          values {
+            id
+            createdAt
+            updatedAt
+            deleted
+            name
+            thumbnailImageId
+            colorCode
+          }
+          translations {
+            locale
+            name
+            values {
+              id
+              name
+            }
+          }
+        }
+      }
+    `;
+
+    try {
+      const { data, errors } = await apollo
+        .getClient()
+        .query<
+          ListVariantTypeTypes.listVariantType,
+          ListVariantTypeTypes.listVariantTypeVariables
+        >({
+          query: LIST_VARIANT_TYPE,
+          variables: {
+            id: {
+              in: idList || [],
+            },
+          },
+        });
+
+      if (errors && errors.length) {
+        return [];
+      }
+
+      return data.listVariantType.map(
+        (vt) =>
+          new IkasVariantType({
+            id: vt.id!,
+            name: vt.name!,
+            selectionType: (vt.selectionType as unknown) as IkasVariantSelectionType,
+            values: vt.values.map(
+              (vv) =>
+                new IkasVariantValue({
+                  id: vv.id!,
+                  name: vv.name,
+                  colorCode: vv.colorCode,
+                  thumbnailImageId: vv.thumbnailImageId,
+                  variantTypeId: vt.id!,
+                })
+            ),
+            translations: vt.translations as any,
+          })
+      );
+    } catch (err) {
+      console.log(err);
+    }
+
+    return [];
+  }
+}

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

@@ -0,0 +1,360 @@
+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 { IkasCheckoutRequirementEnum } from "../../../../models/data/checkout-settings";
+import { Checkbox } from "../checkbox";
+
+import commonStyles from "../../styles/common.module.scss";
+import checkoutStyles from "../../style.module.scss";
+import { useTranslation } from "../../../../utils";
+
+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 (
+      <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 !==
+            IkasCheckoutRequirementEnum.INVISIBLE && (
+            <div className={checkoutStyles.RowPB}>
+              <IdentityNumber {...props} vm={vm} />
+            </div>
+          )}
+
+        {vm.address.checkoutSettings?.isShowPostalCode ? (
+          <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>
+        )}
+
+        <div
+          className={[
+            checkoutStyles.RowPB,
+            commonStyles.Grid,
+            vm.hasState ? commonStyles.Grid2 : "",
+          ].join(" ")}
+        >
+          <Country {...props} vm={vm} />
+          {vm.hasState && <State {...props} vm={vm} />}
+        </div>
+        <div
+          className={[
+            commonStyles.Grid,
+            commonStyles.Grid2,
+            checkoutStyles.RowPB,
+          ].join(" ")}
+        >
+          <City {...props} vm={vm} />
+          {vm.districtOptions.length ? (
+            <DistrictSelect {...props} vm={vm} />
+          ) : (
+            <DistrictInput {...props} vm={vm} />
+          )}
+        </div>
+        {!!vm.address.checkoutSettings &&
+          vm.address.checkoutSettings.phoneRequirement !==
+            IkasCheckoutRequirementEnum.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();
+  return (
+    <FormItem
+      type={FormItemType.TEXT}
+      label={t("checkout-page:addressTitle")}
+      value={vm.address.title || ""}
+      onChange={vm.onAddressTitleChange}
+      hasError={vm.isErrorsVisible && !vm.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:address")}
+      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}
+    />
+  );
+});
+
+const Country: React.FC<FormItemProps> = observer(({ vm }) => {
+  const { t } = useTranslation();
+  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 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}
+    />
+  );
+});