@vonq/hapi-elements-types 1.7.0 → 1.9.0

package/contract/state.types.ts

@@ -10,65 +10,20 @@ import { PaginationResponseV1 } from "../common/types"
 
 export type ContractState = {
     /* Contracts */
-    /**
-     * Array of Contracts to be displayed in Contracts Landing or Contracts List widgets.
-     */
     contracts: Contract[]
-    /**
-     * An object that holds information like next URL, previous URL and count for pagination purposes
-     */
     contractsPaginationMeta: PaginationResponseV1
-    /**
-     * Shows a loading spinner when the Contracts are loading
-     */
     contractsAreLoading: boolean
-    /**
-     * Selected Channel ID that will trigger an API request to fetch the data then to populate `contractSelected`
-     */
     contractSelectedId: string | number | null
-    /**
-     * Selected Channel that will be part of the Contract when user submits the form
-     */
     contractSelected: ProductSupportingContractsComplete | null
-    /**
-     * Shows a loading spinner when the properties required for the Contract are being loaded from the API
-     */
     contractSelectedIsLoading: boolean
-    /**
-     * The object that contains details for the new Contract that will be created when user submits the form
-     */
     contractForm: ContractCreateForm
-    /**
-     * Error(s) received from the API when user submits the form
-     */
     contractCreateError: any
-    /**
-     * Client-side validation result of the `contractForm`. **This value is a computed getter meaning that it cannot be set from outside**
-     */
     contractFormIsValid: boolean | null
     /* Contracts Groups */
-    /**
-     * Array of Contract Groups for user to select during creation of a new Contract.
-     */
     groups: ContractGroup[]
-    /**
-     * Selected Contract Group to be saved as part of Contract that will be created when user submits the form
-     */
     groupSelected: ContractGroupSelected
-    /**
-     * Shows a loading spinner and disables the Select HTML Element when Contract Groups are loading
-     */
     groupsAreLoading: boolean
-    /**
-     * Shows a loading spinner and disables the submit button while a new Contract Group is being created
-     */
     groupIsCreating: boolean
-    /**
-     * Error message displayed to the end user when the new Contract Group could not be created
-     */
     groupCreateError: string | null
-    /**
-     * The object that contains details for the new Contract Group that will be created when user submits the form
-     */
     groupForm: ContractGroupCreateForm
 }

package/contract/utils.types.ts

@@ -1,4 +1,4 @@
-import { ContractCreateForm, ContractGroupCreateForm } from "./types"
+import { Contract, ContractCreateForm, ContractGroupCreateForm } from "./types"
 import { WindowHapiUtils } from "../_window/utils.types"
 import { WindowHapiModuleWithConstructorArgs } from "../_window"
 
@@ -6,6 +6,7 @@ export type WindowHapiUtilsContract = WindowHapiModuleWithConstructorArgs<
     {
         getInitialContractForm: () => ContractCreateForm
         getInitialGroupForm: () => ContractGroupCreateForm
+        getContractNameWithGroupSuffix: (contract: Contract) => string
     },
     { readonly utils: WindowHapiUtils }
 >

package/debugging/state.types.ts

@@ -1,18 +1,7 @@
 export type DebuggingState = {
-    /**
-     * Shows or hides the debugging tool on Campaign Create Form's fields for Product & Contract steps
-     */
     campaignFormDebuggerIsShown: boolean
-    /**
-     * Shows translation keys in place of translations for ease of development
-     */
     localeDebuggingIsEnabled: boolean
-    /**
-     * Encompasses widgets that may become available (or upon request) with a red border and a name so communication while making requests is easier.
-     */
     componentDebuggingIsEnabled: boolean
-    /**
-     * Enables console logs (all HAPI Elements) logs
-     */
     consoleLogsAreEnabled: boolean
+    isAIFeaturesEnabled: boolean
 }

package/modal/enums.ts

@@ -11,4 +11,7 @@ export enum ModalKeys {
     campaignCopyConfirmation = "campaign-confirm-copy",
     basketRemoveProductConfirmation = "remove-product-from-basket",
     contractRemoveConfirmation = "contract-remove-confirmation",
+    contractGroupConflictInfo = "contract-group-conflict-info",
+    filePicker = "file-picker",
+    contractPostingRequirementsSmartFillSuccess = "contract-posting-requirements-smart-fill-success",
 }

package/modal/types.ts

@@ -2,6 +2,7 @@ import { Product } from "../product/types"
 import { Contract } from "../contract/types"
 import { ModalKeys, ModalZone } from "./enums"
 import { AnyNonFunction } from "../common/types"
+import { TransformedPostingRequirement } from "../campaign"
 
 export type ProductDetailModalProps = {
     id: string
@@ -12,6 +13,21 @@ export type BasketRemoveProductConfirmationModalProps = {
 }
 export type CampaignTakeOfflineConfirmationModalProps = { campaignId: string }
 export type ContractRemoveConfirmationModalProps = { contractId: string }
+export type ContractGroupConflictInfoModalProps = {
+    contract: Contract
+    conflictingContracts: Contract[]
+}
+export type ContractPostingRequirementsSmartFillResponseModalProps = {
+    response: Record<string, any>
+    postingRequirements: Record<string, TransformedPostingRequirement>
+    contractId: string
+}
+export type FilePickerOptions = {
+    accept?: string[]
+    uploadInBackground?: boolean
+    maxFiles?: number
+    maxSize?: number
+}
 export type BasketModalProps = {}
 export type WalletModalProps = {}
 
@@ -21,6 +37,8 @@ export type ModalProps = AnyNonFunction<
     | BasketRemoveProductConfirmationModalProps
     | CampaignTakeOfflineConfirmationModalProps
     | ContractRemoveConfirmationModalProps
+    | ContractGroupConflictInfoModalProps
+    | ContractPostingRequirementsSmartFillResponseModalProps
     | BasketModalProps
     | WalletModalProps
 >
@@ -28,6 +46,7 @@ export type ModalProps = AnyNonFunction<
 export type ModalOptions = {
     showCloseButton?: boolean
     showBackdrop?: boolean
+    unstyled?: boolean
     disableVerticalScroll?: boolean
 }
 

package/orderJourney/enums.ts

@@ -21,5 +21,5 @@ export enum OrderJourneyStepKey {
 export enum OrderJourneyPaymentMethod {
     atsManaged = "ats-managed",
     wallet = "wallet",
-    purchaseOrder = "purchase-order",
+    purchaseOrder = "purchase_order",
 }

package/orderJourney/service.types.ts

@@ -0,0 +1,16 @@
+import {
+    HapiServiceFunctionWithLifecycleHooks,
+    WindowHapiService,
+} from "../_window/service.types"
+import { WindowHapiModuleWithConstructorArgs } from "../_window"
+
+export type OrderJourneyServiceSwitchToNextStepHandler = () => Promise<void>
+export type OrderJourneyServiceSwitchToPreviousStepHandler = () => Promise<void>
+
+export type WindowHapiServiceOrderJourney = WindowHapiModuleWithConstructorArgs<
+    {
+        switchToNextStep: HapiServiceFunctionWithLifecycleHooks<OrderJourneyServiceSwitchToNextStepHandler>
+        switchToPreviousStep: HapiServiceFunctionWithLifecycleHooks<OrderJourneyServiceSwitchToPreviousStepHandler>
+    },
+    { readonly service: WindowHapiService }
+>

package/orderJourney/state.types.ts

@@ -1,5 +1,11 @@
 import { OrderJourneyPaymentMethod, OrderJourneyStepKey } from "./enums"
-import { OrderJourneyStep, OrderJourneyContractStep } from "./types"
+import {
+    OrderJourneyStep,
+    OrderJourneyContractStep,
+    OrderJourneyUTMStepData,
+    OrderJourneyUTMStepValidations,
+    OrderJourneyOrderReviewStepData,
+} from "./types"
 import { MessageDescriptor } from "react-intl"
 import { NestedValidatorKeys, UseValidatorResult } from "../common/types"
 
@@ -15,9 +21,9 @@ export type OrderJourneyState = {
     stepActive: OrderJourneyStep | null
     stepNext: OrderJourneyStep | null
     stepsPopulatedAreHidden: boolean
+    stepIsSwitching: boolean
     paymentMethodsAvailable: OrderJourneyPaymentMethod[]
     paymentMethodsEnabled: OrderJourneyPaymentMethod[]
-    paymentMethodActive: OrderJourneyPaymentMethod | null
     hidePrefilledFields: boolean
     orderErrors: Record<string, any> | null
     /* Onboarding */
@@ -82,11 +88,11 @@ export type OrderJourneyState = {
     contractStepsValidations: Record<string, UseValidatorResult> | null
     /* UTM Codes */
     utmCodesStep: OrderJourneyStep
-    utmCodesStepData: Record<string, any>
-    utmCodesStepValidations: UseValidatorResult
+    utmCodesStepData: OrderJourneyUTMStepData
+    utmCodesStepValidations: OrderJourneyUTMStepValidations
     /* Order Review */
     orderReviewStep: OrderJourneyStep
-    orderReviewStepData: Record<string, any>
+    orderReviewStepData: OrderJourneyOrderReviewStepData
     orderReviewStepValidations: UseValidatorResult
     /* Payment Method */
     paymentMethodStep: OrderJourneyStep

package/orderJourney/types.ts

@@ -1,18 +1,24 @@
 import { MessageDescriptor } from "react-intl"
 import { OrderJourneyStepKey } from "./enums"
+import { UseValidatorResult } from "../common"
 
-export type OrderJourneyStepBlurredFields = Record<
-    string,
-    | boolean
-    | Record<string, boolean>
-    | Record<string, Record<string, boolean> | boolean>
->
+export type OrderJourneyStepBlurredFields = {
+    [k: string]:
+        | boolean
+        | Record<string, boolean | OrderJourneyStepBlurredFields>
+}
 
-export type OrderJourneyStepErrorMessages = Record<
-    string,
-    | MessageDescriptor
-    | Record<string, MessageDescriptor | Record<string, MessageDescriptor>>
->
+export type OrderJourneyStepErrorMessage = Record<string, MessageDescriptor>
+
+export type OrderJourneyStepErrorMessages = {
+    [k: string]:
+        | MessageDescriptor
+        | Record<string, MessageDescriptor | OrderJourneyStepErrorMessage>
+}
+
+export type OrderJourneyStepHideFields = {
+    [k: string]: boolean | Record<string, boolean | OrderJourneyStepHideFields>
+}
 
 export type OrderJourneyStepKeyType = OrderJourneyStepKey | string
 export type OrderJourneyStep = {
@@ -22,10 +28,42 @@ export type OrderJourneyStep = {
     isSubmitted?: boolean
     blurredFields?: OrderJourneyStepBlurredFields
     errorMessagesIntlDescriptors?: OrderJourneyStepErrorMessages
-    hideFields?: Record<string, boolean>
+    hideFields?: OrderJourneyStepHideFields
 }
 
 export type OrderJourneyContractStep = Omit<
     OrderJourneyStep,
     "blurredFields" | "isSubmitted" | "errorMessagesIntlDescriptors"
 >
+
+export type UTMMap = {
+    value: string
+    mapToName: boolean
+    key: string
+}
+
+export type OrderJourneyUTMStepData = {
+    settings: UTMMap[]
+    productUTMs: Record<string, UTMMap[]>
+}
+
+export type OrderJourneyUTMStepValidations = {
+    settings: {
+        name: UseValidatorResult
+        value: UseValidatorResult
+    }
+    productUTMs: Record<
+        string,
+        {
+            settings: {
+                name: UseValidatorResult
+                value: UseValidatorResult
+            }
+        }
+    >
+    areAllValid: boolean
+}
+
+export type OrderJourneyOrderReviewStepData = {
+    accordionsOpen: OrderJourneyStepKey[]
+}

package/orderJourney/utils.types.ts

@@ -1,11 +1,19 @@
 import { OrderJourneyPaymentMethod, OrderJourneyStepKey } from "./enums"
 import { WindowHapiUtils } from "../_window/utils.types"
 import { WindowHapiModuleWithConstructorArgs } from "../_window"
+import { Contract } from "../contract"
+import { Product } from "../product"
 
 export type WindowHapiUtilsOrderJourney = WindowHapiModuleWithConstructorArgs<
     {
         stepKeys: typeof OrderJourneyStepKey
         paymentMethodKeys: typeof OrderJourneyPaymentMethod
+        updateProductUTMsFromBasketItemData: (
+            basketItemData: (Contract | Product)[],
+        ) => void
+        updateOrderReviewAccordionStatesFromBasketItemData: (
+            basketItemData: (Contract | Product)[],
+        ) => void
     },
     { readonly utils: WindowHapiUtils }
 >

package/orderJourney/validations.types.ts

@@ -1,25 +1,42 @@
 import {
     ZodArray,
     ZodBoolean,
+    ZodNativeEnum,
     ZodObject,
     ZodOptional,
     ZodRecord,
     ZodString,
     ZodTypeAny,
+    ZodUnion,
 } from "zod"
 import { OrderJourneyPaymentMethod, OrderJourneyStepKey } from "./enums"
 import { ZodIntlDescriptor } from "../common/validations.types"
 
 export type ZodOrderJourneyStep = ZodObject<{
     key: ZodString
-    titleIntlDescriptor: ZodIntlDescriptor
-    descriptionIntlDescriptor: ZodIntlDescriptor
+    titleIntlDescriptor: ZodOptional<ZodIntlDescriptor>
+    descriptionIntlDescriptor: ZodOptional<ZodIntlDescriptor>
     isSubmitted: ZodOptional<ZodBoolean>
     blurredFields: ZodOptional<ZodRecord<ZodString, ZodTypeAny>>
     errorMessagesIntlDescriptors: ZodOptional<ZodRecord<ZodString, ZodTypeAny>>
 }>
 
 export type ZodOrderJourneySteps = ZodArray<ZodOrderJourneyStep>
+export type ZodOrderJourneyUTMCodeMap = ZodObject<{
+    mapToName: ZodBoolean
+    value: ZodString
+    key: ZodString
+}>
+export type ZodOrderJourneyUTMCodeMaps = ZodArray<ZodOrderJourneyUTMCodeMap>
+export type ZodOrderJourneyUTMCodesStepData = ZodObject<{
+    settings: ZodOrderJourneyUTMCodeMaps
+    productUTMs: ZodRecord<ZodString, ZodOrderJourneyUTMCodeMaps>
+}>
+export type ZodOrderJourneyOrderReviewStepData = ZodObject<{
+    accordionsOpen: ZodArray<
+        ZodUnion<[ZodNativeEnum<typeof OrderJourneyStepKey>, ZodString]>
+    >
+}>
 export type WindowHapiValidationsOrderJourney = {
     supportedStepKeys: OrderJourneyStepKey[]
     stepKeysRegex: RegExp
@@ -31,4 +48,8 @@ export type WindowHapiValidationsOrderJourney = {
     paymentMethods: ZodArray<ZodString>
     supportedPaymentMethods: OrderJourneyPaymentMethod[]
     paymentMethodsRegex: RegExp
+    utmMap: ZodOrderJourneyUTMCodeMap
+    utmMaps: ZodOrderJourneyUTMCodeMaps
+    utmCodesStepData: ZodOrderJourneyUTMCodesStepData
+    orderReviewStepData: ZodOrderJourneyOrderReviewStepData
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "private": false,
   "name": "@vonq/hapi-elements-types",
-  "version": "1.7.0",
+  "version": "1.9.0",
   "description": "This package contains Typescript definitions for HAPI Elements",
   "author": "VONQ HAPI Team",
   "license": "BSD-3-Clause",

package/product/enums.ts

@@ -8,4 +8,5 @@ export enum ProductPriceCurrency {
     "USD" = "USD",
     "EUR" = "EUR",
     "GBP" = "GBP",
+    "AUD" = "AUD",
 }

package/product/state.types.ts

@@ -10,84 +10,29 @@ import { PaginationResponseV1 } from "../common/types"
 
 export type ProductState = {
     /* Products */
-    /**
-     * Array of Products to be listed on Products Landing and Products List widgets. As user applies filters and sorting, this value gets overwritten
-     */
     recommendedProducts: Product[]
-    /**
-     * Indicates if recommended products are loading
-     */
     recommendedProductsAreLoading: boolean
-    /**
-     * Array of Products to be listed on Contracts Add Channel Selector Dropdown
-     */
     productsWithContractsSupport: ProductSupportingContractsPartial[]
-    /**
-     * Indicates whether the Products with Contracts support is loading (mainly used for showing a loading spinner on the Select element when the user is searching for a Product when creating a contract)
-     */
     productsWithContractsSupportAreLoading: boolean
-    /**
-     * Array of Products to be listed on Products Landing and Products List widgets. As user applies filters and sorting, this value gets overwritten
-     */
     products: Product[]
-    /**
-     Offset and limit style pagination meta
-     */
     productsPaginationMeta: PaginationResponseV1 | null
-    /**
-     * Indicates if products are loading
-     */
     productsAreLoading: boolean
-    /**
-     * The value of Product name in the Input HTML Element that is used to fetch new Product results from the API
-     */
     productNameInput: string
-    /**
-     * The selected Product region IDs that is used to fetch new Product results from the API
-     */
     jobRegionsIdsSelected: number[]
     /* Locations */
-    /**
-     * Array of Locations that are lazily loaded with the input given in `jobRegionsIdsSelected`
-     */
     jobRegions: ProductLocation[]
     /* Job Titles */
-    /**
-     * Array of Job Titles that are lazily loaded with the input given in `jobTitlesIdsSelected`
-     */
     jobTitles: ProductJobTitle[]
-    /**
-     * The selected Job Title IDs that are used to fetch new Product results from the API
-     */
     jobTitlesIdsSelected: number[]
     /* Job Functions */
-    /**
-     * Array of Job Functions that are lazily loaded with the input given in `jobTitlesIdsSelected`
-     */
     jobFunctions: ProductJobFunction[]
-    /**
-     * Shows a loading spinner and disables the Select HTML Element while locations are loading
-     */
     jobFunctionsAreLoading: boolean
-    /**
-     * The value of Job Function in the Input HTML Element that lazy loads `jobFunctions`
-     */
     jobFunctionsInput: string
-    /**
-     * The selected Job Function IDs that are used to fetch new Product results from the API
-     */
     jobFunctionsIdsSelected: number[]
     /* Industries */
-    /**
-     * The selected Job Industry ID that is used to fetch new Product results from the API
-     */
     jobIndustriesIdsSelected: number[]
-    /**
-     * Array of Industries that are lazily loaded with the input given in `jobIndustriesIdsSelected`
-     */
     jobIndustries: ProductIndustry[]
-    /**
-     * Shows a loading spinner and disables the Select HTML Element while locations are loading
-     */
     jobIndustriesAreLoading: boolean
+    /* Search Text */
+    searchTextInput: string
 }

package/product/types.ts

@@ -64,14 +64,16 @@ export type Product = {
 } & ProductLogos &
     ProductType
 
+export type ProductBoardType =
+    | "aggregator"
+    | "job board"
+    | "service"
+    | "social media"
+    | "publication"
+    | "community"
+
 export type ProductType = {
-    type:
-        | "aggregator"
-        | "job board"
-        | "service"
-        | "social media"
-        | "publication"
-        | "community"
+    type: ProductBoardType
 }
 
 export type ProductLogos = {
@@ -100,6 +102,8 @@ export type ProductLocationPlaceType =
     | "continent"
     | "country"
     | "region"
+    | "place"
+    | "district"
 
 export type ProductLocation = {
     bounding_box: any[]
@@ -116,6 +120,7 @@ export type ProductFilterQueryParams = {
     jobIndustriesIdsSelected: number[]
     filterProductRecommendations: ProductFilterRecommendations
     filterMyContractSupportedOnly: boolean
+    searchTextInput: string
 }
 
 export type ProductSearchFilters = {

package/product/utils.types.ts

@@ -1,9 +1,5 @@
 import { ProductFilterQueryParams, ProductUserProvidedFilters } from "./types"
 import { PaginationResponseV1 } from "../common/types"
-import {
-    OrderJourneyPaymentMethod,
-    OrderJourneyStepKey,
-} from "../orderJourney/enums"
 import { WindowHapiUtils } from "../_window/utils.types"
 import { WindowHapiModuleWithConstructorArgs } from "../_window"
 

package/routing/state.types.ts

@@ -6,7 +6,7 @@ export type RouterState = {
     as: string
     options: RouteTransitionOptions
 }
-export type RouterStoreState = {
+export type RoutingState = {
     /**
      * Holds the current route "asPath" (NextJS Router related) path URL
      */

package/theming/types.ts

@@ -39,6 +39,7 @@ declare const useTheme: UseThemeFactory<DefaultTheme>
 
 export type ThemeGlobalStyles = {
     borderRadius: string
+    borderColor: string
 
     primaryBackgroundColor: string
     primaryTextColor: string
@@ -67,6 +68,9 @@ export type ThemeGlobalStyles = {
 
     accentBackgroundColor: string
     accentTextColor: string
+
+    scrollBarTrackColor: string
+    scrollBarThumbColor: string
 }
 
 export type HapiThemingThemeProvider = Theming<HapiTheme>["ThemeProvider"]
@@ -98,6 +102,7 @@ export type HapiThemeRule =
     | "buttonFaded"
     | "buttonAccent"
     | "badgeBase"
+    | "formFieldLabel"
     | "formFieldBase"
     | "inputSelectBase"
     | "input"

package/ui/service.types.ts

@@ -3,6 +3,8 @@ import { WindowHapiModuleWithConstructorArgs } from "../_window"
 
 export type WindowHapiServiceUI = WindowHapiModuleWithConstructorArgs<
     {
+        onIframeLoaded: (callback: (iframeName: string) => void) => void
+        onIframeUnloaded: (callback: (iframeName: string) => void) => void
         setStyleAttribute: (
             selector: string,
             attributeName: string,
@@ -11,12 +13,12 @@ export type WindowHapiServiceUI = WindowHapiModuleWithConstructorArgs<
         setStyle: (selector: string, style: any) => Promise<void>
         addClass: (selector: string, className: string) => Promise<void>
         removeClass: (selector: string, className: string) => Promise<void>
-        appendChild: (
-            containerSelector: string,
+        appendChildToSlot: (
+            slotId: string,
             element: HTMLElement,
         ) => Promise<void>
-        removeChild: (
-            containerSelector: string,
+        removeChildFromSlot: (
+            slotId: string,
             elementSelector: string,
         ) => Promise<void>
         hideElement: (elementSelector: string) => Promise<void>

package/wallet/state.types.ts

@@ -6,53 +6,17 @@ import {
 } from "./types"
 
 export type WalletState = {
-    /**
-     * User's Wallet that can hold credits to be used on Creating/Ordering a Campaign
-     */
     wallet: Wallet | null
-    /**
-     * User's balance in dollars converted from cents through `wallet.balance`. **This value is a computed getter meaning that it cannot be set from outside**
-     */
     balanceInUSD: number | null
-    /**
-     * Indicates whether or not user has enough credits/balance to Order a Campaign
-     */
     balanceIsEnoughToOrderCampaign: boolean
-    /**
-     * Shows a loading spinner while wallet is loading
-     */
     walletIsLoading: boolean
-    /**
-     * The request body to be sent to HAPI Backend Service to create a payment intent. **This value is a computed getter meaning that it cannot be set from outside**
-     */
     paymentIntentRequestBody: WalletPaymentIntentRequest | null
     paymentIntentClientSecret: string | null
-    /**
-     * Shows a loading spinner while PaymentIntent is creating
-     */
     topUpIsLoading: boolean
-    /**
-     * A custom amount to specify for the top up of balance
-     */
     topUpAmount: number
-    /**
-     * A minimum amount enforced by an ATS for the top up of balance
-     */
     topUpMinAmount: number
-    /**
-     * A minimum amount's currency enforced by an ATS for the top up of balance
-     */
     topUpMinAmountCurrency: ProductPriceCurrency
-    /**
-     * Indicates if user has agreed to terms of service
-     */
     topUpTermsOfServiceIsAgreed: boolean
-    /**
-     * Step of the popup. **Should not be edited from outside**
-     */
     topUpCurrentStepIndex: number
-    /**
-     * An array of payment method types that Stripe accepts https://stripe.com/docs/api/payment_intents/create#create_payment_intent-payment_method_types to specify which types of payment methods the end user can use
-     */
     topUpPaymentMethodTypes: WalletPaymentIntentPaymentMethod[]
 }