@vonq/hapi-elements-types 1.3.0 → 1.5.0

package/src/language/functions.types.ts

@@ -0,0 +1,29 @@
+import { MessageDescriptor } from "react-intl"
+import { LanguageStoreTranslations } from "./state.types"
+import { ProductPriceCurrency } from "../product/enums"
+
+export type LanguageStoreFormatMessageHandler = (
+    isDebuggingEnabled: boolean,
+    message: MessageDescriptor,
+    values?: Record<string, any>,
+) => any
+export type LanguageStoreSetIntlInstanceHandler = (
+    locale: string,
+    messages: Record<string, string>,
+) => void
+export type LanguageStoreGetTranslationsHandler = (
+    locale: string,
+) => LanguageStoreTranslations
+export type LanguageStoreSetLocaleHandler = (locale: string) => void
+export type LanguageStoreSetTranslationsHandler = (
+    translations: LanguageStoreTranslations,
+) => void
+export type LanguageStoreSetDisplayCurrencyHandler = (
+    currency: ProductPriceCurrency,
+) => void
+export type LanguageStoreFunctions = {
+    formatMessage: LanguageStoreFormatMessageHandler
+    setTranslations: LanguageStoreSetTranslationsHandler
+    setLocale: LanguageStoreSetLocaleHandler
+    setDisplayCurrency: LanguageStoreSetDisplayCurrencyHandler
+}

package/src/language/index.ts

@@ -0,0 +1,11 @@
+// created from 'create-ts-index'
+
+export * from './consts';
+export * from './en';
+export * from './functions.types';
+export * from './qa.types';
+export * from './state.initial';
+export * from './state.types';
+export * from './state.validations';
+export * from './utils';
+export * from './validations.types';

package/src/language/qa.types.ts

@@ -0,0 +1,19 @@
+import { ProductPriceCurrency } from "../product/enums"
+import { LanguageStoreTranslations } from "./state.types"
+import { ModuleWithConstructorArgs } from "../types"
+import { WindowHapiQA } from "../_window/qa.types"
+
+export type WindowHapiQALanguage = ModuleWithConstructorArgs<
+    {
+        setLocale: (locale: string) => string
+        setDisplayCurrency: (
+            currency: ProductPriceCurrency,
+        ) => ProductPriceCurrency
+        setTranslationByLocaleAndKey: (
+            locale: string,
+            key: string,
+            message: string,
+        ) => LanguageStoreTranslations
+    },
+    { readonly qa: WindowHapiQA }
+>

package/src/language/state.initial.ts

@@ -0,0 +1,13 @@
+import { LanguageStoreState } from "./state.types"
+import { LOCALES_DATA } from "./consts"
+import { ProductPriceCurrency } from "../product/enums"
+
+const locale = "en"
+const translations = LOCALES_DATA
+
+export const initialLanguageStoreState: LanguageStoreState = {
+    locale,
+    translations: translations,
+    displayCurrency: ProductPriceCurrency.USD,
+    supportedCurrencies: Object.values(ProductPriceCurrency),
+}

package/src/language/state.types.ts

@@ -0,0 +1,25 @@
+import { ProductPriceCurrency } from "../product/enums"
+
+export type LanguageStoreLocaleTranslations = Record<string, string>
+export type LanguageStoreTranslations = Record<
+    string,
+    LanguageStoreLocaleTranslations
+>
+export type LanguageStoreState = {
+    /**
+     * Locale of the user (navigator language) in RFC 5646 that can be changed via setLocale function
+     */
+    locale: string
+    /**
+     * An object containing key-value parts where the key is the i18n key such as `test.example-string` and the value is the actual translation. Translations will be loaded by current locale and fallbacks will be used from American English defaults we have.
+     */
+    translations: LanguageStoreTranslations
+    /**
+     * Current Display Currency of all the widgets
+     */
+    displayCurrency: ProductPriceCurrency
+    /**
+     * Array of supported currencies. **This value changes automatically when user scrolls and should not be set from outside**
+     */
+    supportedCurrencies: ProductPriceCurrency[]
+}

package/src/language/state.validations.ts

@@ -0,0 +1,10 @@
+import { LanguageStoreState } from "./state.types"
+import { StateValidations } from "../_window/state.types"
+
+export const languageStoreStateValidations: StateValidations<LanguageStoreState> =
+    {
+        locale: "common.genericString",
+        translations: "language.translations",
+        displayCurrency: "language.displayCurrency",
+        supportedCurrencies: "throwHasNoSetterError",
+    }

package/src/language/utils.ts

@@ -0,0 +1,17 @@
+import { createIntl, createIntlCache } from "react-intl"
+
+export const getIntlInstance = (
+    locale: string,
+    messages: Record<string, string>,
+) => {
+    const cache = createIntlCache()
+    const intl = createIntl(
+        {
+            locale,
+            messages,
+        },
+        cache,
+    )
+
+    return intl
+}

package/src/language/validations.types.ts

@@ -0,0 +1,13 @@
+import { ZodRecord, ZodString } from "zod"
+import { ProductPriceCurrency } from "../product/enums"
+
+export type ZodTranslations = ZodRecord<
+    ZodString,
+    ZodRecord<ZodString, ZodString>
+>
+export type WindowHapiValidationsLanguage = {
+    translations: ZodTranslations
+    supportedCurrencies: ProductPriceCurrency[]
+    supportedCurrenciesRegex: RegExp
+    displayCurrency: ZodString
+}

package/src/modal/consts.ts

@@ -0,0 +1,6 @@
+import { ModalOptions } from "./types"
+
+export const ModalDefaultOptions: ModalOptions = {
+    showCloseButton: true,
+    showBackdrop: true,
+}

package/src/modal/enums.ts

@@ -0,0 +1,14 @@
+export enum ModalZone {
+    "primary" = "primary",
+    "secondary" = "secondary",
+}
+
+export enum ModalKeys {
+    wallet = "layout-wallet-modal",
+    basket = "layout-basket-modal",
+    productInfo = "product-info",
+    campaignTakeOfflineConfirmation = "campaign-confirm-take-offline",
+    campaignCopyConfirmation = "campaign-confirm-copy",
+    basketRemoveProductConfirmation = "remove-product-from-basket",
+    contractRemoveConfirmation = "contract-remove-confirmation",
+}

package/src/modal/functions.types.ts

@@ -0,0 +1,22 @@
+import { ModalKeys, ModalZone } from "./enums"
+import { ModalOptions, ModalProps } from "./types"
+
+export type ModalStoreOpenModalHandler = (
+    key: ModalKeys,
+    props: ModalProps | undefined,
+    options?: ModalOptions,
+    zone?: ModalZone,
+) => void
+
+export type ModalStoreCloseModalHandler = (key: ModalKeys) => void
+
+export type ModalStoreFunctions = {
+    /**
+     * Shows a modal component by key on target layer
+     */
+    openModal: ModalStoreOpenModalHandler
+    /**
+     * Hides a modal component by key
+     */
+    closeModal: ModalStoreCloseModalHandler
+}

package/src/modal/index.ts

@@ -0,0 +1,11 @@
+// created from 'create-ts-index'
+
+export * from './consts';
+export * from './enums';
+export * from './functions.types';
+export * from './service.types';
+export * from './state.initial';
+export * from './state.types';
+export * from './state.validations';
+export * from './store.types';
+export * from './types';

package/src/modal/service.types.ts

@@ -0,0 +1,32 @@
+import { ModalOptions } from "./types"
+import { ModalKeys, ModalZone } from "./enums"
+import { Product } from "../product/types"
+import { Contract } from "../contract/types"
+import { IObservableValue } from "mobx"
+import { AnyNonFunction } from "../common/types"
+import { ModuleWithConstructorArgs } from "../types"
+import { WindowHapiService } from "../_window/service.types"
+
+export type WindowHapiServiceModal = ModuleWithConstructorArgs<
+    {
+        openModal: (
+            key: ModalKeys,
+            props: AnyNonFunction<
+                | { product: Product }
+                | {
+                      onClickAccept: (
+                          productOrContract: Product | Contract,
+                      ) => void
+                      onClickDecline: () => void
+                      basketProduct: Product | Contract
+                  }
+                | { campaignId: string }
+                | { partnerId?: IObservableValue<string> }
+            >,
+            options?: ModalOptions,
+            zone?: ModalZone,
+        ) => void
+        closeModal: (key: ModalKeys) => void
+    },
+    { readonly service: WindowHapiService }
+>

package/src/modal/state.initial.ts

@@ -0,0 +1,9 @@
+import { ModalStoreState } from "./state.types"
+import { ModalZone } from "./enums"
+
+export const initialModalStoreState: ModalStoreState = {
+    modals: {
+        [ModalZone.primary]: null,
+        [ModalZone.secondary]: null,
+    },
+}

package/src/modal/state.types.ts

@@ -0,0 +1,8 @@
+import { Modals } from "./types"
+
+export type ModalStoreState = {
+    /**
+     * An object of modals that are seperated into different layers
+     */
+    modals: Modals
+}

package/src/modal/state.validations.ts

@@ -0,0 +1,6 @@
+import { ModalStoreState } from "./state.types"
+import { StateValidations } from "../_window/state.types"
+
+export const modalStoreStateValidations: StateValidations<ModalStoreState> = {
+    modals: undefined,
+}

package/src/modal/store.types.ts

@@ -0,0 +1,5 @@
+import { ModalStoreFunctions } from "./functions.types"
+import { ModalStoreState } from "./state.types"
+import { BaseStore } from "../types"
+
+export type ModalStore = BaseStore<ModalStoreState, ModalStoreFunctions>

package/src/modal/types.ts

@@ -0,0 +1,44 @@
+import { Product } from "../product/types"
+import { Contract } from "../contract/types"
+import { ModalKeys, ModalZone } from "./enums"
+import { AnyNonFunction } from "../common/types"
+
+export type ProductDetailModalProps = {
+    id: string
+}
+export type UTMCodesModalProps = {}
+export type BasketRemoveProductConfirmationModalProps = {
+    basketProduct: Product | Contract
+}
+export type CampaignTakeOfflineConfirmationModalProps = { campaignId: string }
+export type ContractRemoveConfirmationModalProps = { contractId: string }
+export type BasketModalProps = {}
+export type WalletModalProps = {}
+
+export type ModalProps = AnyNonFunction<
+    | ProductDetailModalProps
+    | UTMCodesModalProps
+    | BasketRemoveProductConfirmationModalProps
+    | CampaignTakeOfflineConfirmationModalProps
+    | ContractRemoveConfirmationModalProps
+    | BasketModalProps
+    | WalletModalProps
+>
+
+export type ModalOptions = {
+    showCloseButton?: boolean
+    showBackdrop?: boolean
+    disableVerticalScroll?: boolean
+}
+
+export type Modal = {
+    zone: ModalZone
+    key: ModalKeys
+    props: ModalProps | undefined
+    options: ModalOptions
+}
+
+export type Modals = {
+    [ModalZone.primary]: Modal | null
+    [ModalZone.secondary]: Modal | null
+}

package/src/orderJourney/consts.ts

@@ -0,0 +1,289 @@
+import {
+    ERROR_MESSAGE_CANNOT_BE_EMPTY,
+    ERROR_MESSAGE_SHOULD_BE_EMAIL,
+    ERROR_MESSAGE_SHOULD_BE_MORE_THAN_ZERO,
+    ERROR_MESSAGE_SHOULD_BE_URL,
+} from "../consts"
+import { OrderJourneyStepKey } from "./enums"
+import { NestedValidatorKeys } from "../common/types"
+
+/* Get Recommendations Step (User Journey) */
+export const orderJourneySearchRecommendProductsBlurredFields = {
+    "productStore.jobTitlesIdsSelected": false,
+    "productStore.jobFunctionsIdsSelected": false,
+    "productStore.jobRegionsIdsSelected": false,
+}
+export const orderJourneysearchRecommendProductsErrorMessages = {
+    "productStore.jobTitlesIdsSelected": ERROR_MESSAGE_CANNOT_BE_EMPTY,
+    "productStore.jobFunctionsIdsSelected": ERROR_MESSAGE_CANNOT_BE_EMPTY,
+    "productStore.jobRegionsIdsSelected": ERROR_MESSAGE_CANNOT_BE_EMPTY,
+}
+export const orderJourneySearchRecommendProductsValidators: NestedValidatorKeys =
+    {
+        "productStore.jobTitlesIdsSelected": "isNotEmpty",
+        "productStore.jobFunctionsIdsSelected": "isNotEmpty",
+        "productStore.jobRegionsIdsSelected": "isNotEmpty",
+    }
+export const orderJourneySearchRecommendProductsHideFields = {
+    "productStore.jobTitlesIdsSelected": false,
+    "productStore.jobFunctionsIdsSelected": false,
+    "productStore.jobRegionsIdsSelected": false,
+}
+/* Select Products Step (User Journey) */
+export const orderJourneySelectProductsStepErrorMessages = {
+    "basketStore.products": {
+        id: "campaign.select-channels.no-items-in-basket",
+        defaultMessage:
+            "You need at least one product or a contract added to campaign in order to proceed",
+    },
+}
+export const orderJourneySelectProductsBlurredFields = {}
+export const orderJourneySelectProductsStepValidators: NestedValidatorKeys = {}
+/* Add Contracts Step */
+export const orderJourneyAddContractsErrorMessages = {}
+export const orderJourneyAddContractsValidators = {}
+export const orderJourneyAddContractsBlurredFields = {}
+/* Select Contracts Step */
+export const orderJourneySelectContractsErrorMessages = {}
+export const orderJourneySelectContractsValidators = {}
+export const orderJourneySelectContractsBlurredFields = {}
+
+/* Basket Summary Step */
+export const orderJourneyBasketSummaryValidators: NestedValidatorKeys = {
+    "basketStore.products": "isNotEmpty",
+}
+export const orderJourneyJBasketSummaryErrorMessages = {
+    "basketStore.products": {
+        id: "campaign.select-channels.no-items-in-basket",
+        defaultMessage:
+            "You need at least one product or a contract added to campaign in order to proceed",
+    },
+}
+export const orderJourneyBasketSummaryBlurredFields = {}
+
+/* Target Group Step (Create Campaign Form) */
+export const orderJourneyTargetGroupStepErrorMessages = {
+    educationLevel: ERROR_MESSAGE_CANNOT_BE_EMPTY,
+    seniority: ERROR_MESSAGE_CANNOT_BE_EMPTY,
+    industry: ERROR_MESSAGE_CANNOT_BE_EMPTY,
+    jobCategory: ERROR_MESSAGE_CANNOT_BE_EMPTY,
+}
+export const orderJourneyTargetGroupStepValidators: NestedValidatorKeys = {
+    educationLevel: "isNotEmpty",
+    seniority: "isNotEmpty",
+    industry: "isNotEmpty",
+    jobCategory: "isNotEmpty",
+}
+export const orderJourneyTargetGroupStepBlurredFields = {
+    educationLevel: false,
+    seniority: false,
+    industry: false,
+    jobCategory: false,
+}
+export const orderJourneyTargetGroupStepHideFields = {
+    educationLevel: false,
+    seniority: false,
+    industry: false,
+    jobCategory: false,
+}
+/* Recruiter Info Step (Create Campaign Form) */
+export const orderJourneyRecruiterInfoStepErrorMessages = {
+    name: ERROR_MESSAGE_CANNOT_BE_EMPTY,
+    emailAddress: ERROR_MESSAGE_SHOULD_BE_EMAIL,
+}
+export const orderJourneyRecruiterInfoStepValidators: NestedValidatorKeys = {
+    name: "isNotEmpty",
+    //emailAddress: "isEmail", //Not required by IGB
+}
+export const orderJourneyRecruiterInfoStepBlurredFields = {
+    name: false,
+    emailAddress: false,
+}
+export const orderJourneyRecruiterInfoStepHideFields = {
+    name: false,
+    emailAddress: false,
+}
+/* Posting Details Step (Create Campaign Form) */
+export const orderJourneyPostingDetailsStepErrorMessages = {
+    title: ERROR_MESSAGE_CANNOT_BE_EMPTY,
+    description: ERROR_MESSAGE_CANNOT_BE_EMPTY,
+    // yearsOfExperience: ERROR_MESSAGE_SHOULD_BE_MORE_THAN_ZERO,  //Not required by IGB
+    employmentType: ERROR_MESSAGE_CANNOT_BE_EMPTY,
+    weeklyWorkingHours: {
+        // from: ERROR_MESSAGE_SHOULD_BE_MORE_THAN_ZERO, //Not required by IGB
+        to: ERROR_MESSAGE_SHOULD_BE_MORE_THAN_ZERO,
+    },
+    salaryIndication: {
+        period: ERROR_MESSAGE_CANNOT_BE_EMPTY,
+        range: {
+            // from: ERROR_MESSAGE_SHOULD_BE_MORE_THAN_ZERO,  //Not required by IGB
+            to: ERROR_MESSAGE_SHOULD_BE_MORE_THAN_ZERO,
+            currency: ERROR_MESSAGE_CANNOT_BE_EMPTY,
+        },
+    },
+}
+export const orderJourneyPostingDetailsStepValidators: NestedValidatorKeys = {
+    title: "isNotEmpty",
+    description: "isNotEmpty",
+    // yearsOfExperience: "isNotZero",  //Not required by IGB
+    employmentType: "isNotEmpty",
+    weeklyWorkingHours: {
+        // from: "isNotZero", //Not required by IGB
+        to: "isNotZero",
+    },
+    salaryIndication: {
+        period: "isNotEmpty",
+        range: {
+            // from: "isNotZero",  //Not required by IGB
+            to: "isNotZero",
+            currency: "isNotEmpty",
+        },
+    },
+}
+export const orderJourneyPostingDetailsStepBlurredFields = {
+    title: false,
+    description: false,
+    yearsOfExperience: false,
+    employmentType: false,
+    weeklyWorkingHours: {
+        from: false,
+        to: false,
+    },
+    salaryIndication: {
+        period: false,
+        range: {
+            from: false,
+            to: false,
+            currency: false,
+        },
+    },
+    campaignName: false,
+}
+export const orderJourneyPostingDetailsStepHideFields = {
+    title: false,
+    description: false,
+    yearsOfExperience: false,
+    employmentType: false,
+    "weeklyWorkingHours.from": false,
+    "weeklyWorkingHours.to": false,
+    "salaryIndication.period": false,
+    "salaryIndication.range.from": false,
+    "salaryIndication.range.to": false,
+    "salaryIndication.range.currency": false,
+    campaignName: false,
+}
+/* Organization Step (Create Campaign Form) */
+export const orderJourneyOrganizationStepErrorMessages = {
+    name: ERROR_MESSAGE_CANNOT_BE_EMPTY,
+    companyLogo: ERROR_MESSAGE_SHOULD_BE_URL,
+}
+export const orderJourneyOrganizationStepValidators: NestedValidatorKeys = {
+    name: "isNotEmpty",
+    companyLogo: "isURL",
+}
+export const orderJourneyOrganizationStepBlurredFields = {
+    name: false,
+    companyLogo: false,
+}
+export const orderJourneyOrganizationStepHideFields = {
+    name: false,
+    companyLogo: false,
+}
+/* Contact Info Step (Create Campaign Form) */
+export const orderJourneyContactInfoStepErrorMessages = {}
+export const orderJourneyContactInfoStepValidators: NestedValidatorKeys = {}
+export const orderJourneyContactInfoStepBlurredFields = {
+    name: false,
+    emailAddress: false,
+    phoneNumber: false,
+}
+export const orderJourneyContactInfoStepHideFields = {
+    name: false,
+    emailAddress: false,
+    phoneNumber: false,
+}
+/* Working Location Step (Create Campaign Form) */
+export const orderJourneyWorkingLocationStepErrorMessages = {
+    addressLine1: ERROR_MESSAGE_CANNOT_BE_EMPTY,
+    // addressLine2: ERROR_MESSAGE_CANNOT_BE_EMPTY, //Not required by IGB
+    postcode: ERROR_MESSAGE_CANNOT_BE_EMPTY,
+    city: ERROR_MESSAGE_CANNOT_BE_EMPTY,
+    country: ERROR_MESSAGE_CANNOT_BE_EMPTY,
+}
+export const orderJourneyWorkingLocationStepValidators: NestedValidatorKeys = {
+    addressLine1: "isNotEmpty",
+    // addressLine2: "isNotEmpty", //Not required by IGB
+    postcode: "isNotEmpty",
+    city: "isNotEmpty",
+    country: "isNotEmpty",
+}
+export const orderJourneyWorkingLocationStepBlurredFields = {
+    addressLine1: false,
+    addressLine2: false,
+    postcode: false,
+    city: false,
+    country: false,
+    allowsRemoteWork: false,
+}
+export const orderJourneyWorkingLocationStepHideFields = {
+    addressLine1: false,
+    addressLine2: false,
+    postcode: false,
+    city: false,
+    country: false,
+    allowsRemoteWork: false,
+}
+/* URLs Step (Create Campaign Form) */
+export const orderJourneyURLsStepErrorMessages = {
+    jobPageUrl: ERROR_MESSAGE_SHOULD_BE_URL,
+    applicationUrl: ERROR_MESSAGE_SHOULD_BE_URL,
+}
+export const orderJourneyURLsStepValidators: NestedValidatorKeys = {
+    jobPageUrl: "isURL",
+    applicationUrl: "isURL",
+}
+export const orderJourneyURLsStepBlurredFields = {
+    jobPageUrl: false,
+    applicationUrl: false,
+}
+export const orderJourneyURLsStepHideFields = {
+    jobPageUrl: false,
+    applicationUrl: false,
+}
+/* UTM Codes */
+export const orderJourneyUTMCodesStepErrorMessages = {}
+export const orderJourneyUTMCodesStepValidators: NestedValidatorKeys = {}
+export const orderJourneyUTMCodesStepBlurredFields = {}
+/* Order Review */
+export const orderJourneyOrderReviewStepErrorMessages = {}
+export const orderJourneyOrderReviewStepValidators: NestedValidatorKeys = {}
+export const orderJourneyOrderReviewStepBlurredFields = {}
+/* Payment Method */
+export const orderJourneyPaymentMethodStepErrorMessages = {}
+export const orderJourneyPaymentMethodStepValidators: NestedValidatorKeys = {}
+export const orderJourneyPaymentMethodStepBlurredFields = {}
+/* Order Confirmation */
+export const orderJourneyOrderConfirmationStepErrorMessages = {}
+export const orderJourneyOrderConfirmationStepValidators: NestedValidatorKeys =
+    {}
+export const orderJourneyOrderConfirmationStepBlurredFields = {}
+
+export const orderJourneyDefaultEnabledSteps = [
+    OrderJourneyStepKey.searchRecommendProducts,
+    OrderJourneyStepKey.selectProducts,
+    OrderJourneyStepKey.addContracts,
+    OrderJourneyStepKey.selectContracts,
+    OrderJourneyStepKey.basketSummary,
+    OrderJourneyStepKey.targetGroup,
+    OrderJourneyStepKey.recruiterInfo,
+    OrderJourneyStepKey.postingDetails,
+    OrderJourneyStepKey.postingOrganization,
+    OrderJourneyStepKey.postingContactInfo,
+    OrderJourneyStepKey.postingWorkingLocation,
+    OrderJourneyStepKey.postingURLs,
+    OrderJourneyStepKey.contractChannelPostingRequirements,
+    OrderJourneyStepKey.postingUTMCodes,
+    OrderJourneyStepKey.orderReview,
+    OrderJourneyStepKey.paymentMethod,
+    OrderJourneyStepKey.orderConfirmation,
+]

package/src/orderJourney/enums.ts

@@ -0,0 +1,25 @@
+export enum OrderJourneyStepKey {
+    searchRecommendProducts = "search-recommend-products",
+    selectProducts = "select-products",
+    addContracts = "add-contracts",
+    selectContracts = "select-contracts",
+    basketSummary = "basket-summary",
+    targetGroup = "target-group",
+    recruiterInfo = "recruiter-info",
+    postingDetails = "posting-details",
+    postingOrganization = "posting-organization",
+    postingContactInfo = "posting-contact-info",
+    postingWorkingLocation = "posting-working-location",
+    postingURLs = "posting-urls",
+    contractChannelPostingRequirements = "contract-channel-posting-requirements",
+    postingUTMCodes = "posting-utm-codes",
+    orderReview = "order-review",
+    paymentMethod = "payment-method",
+    orderConfirmation = "order-confirmation",
+}
+
+export enum OrderJourneyPaymentMethod {
+    atsManaged = "ats-managed",
+    wallet = "wallet",
+    purchaseOrder = "purchase-order",
+}