@rokt/dcui-orchestrator 0.2.1-rc.9 → 0.3.0

package/dist/extensions/address-form/src/actions/forms.d.ts

@@ -0,0 +1,11 @@
+export declare const UPDATE_FORM = "FORMS/UPDATE";
+export type FormFieldValue = string | null | undefined;
+export type FormData = Record<string, FormFieldValue>;
+export type UpdateForm = {
+    type: typeof UPDATE_FORM;
+    payload: {
+        formId: string;
+        formData: FormData;
+    };
+};
+export type FormActions = UpdateForm;

package/dist/extensions/address-form/src/actions/index.d.ts

@@ -0,0 +1 @@
+export * from './forms';

package/dist/extensions/address-form/src/components/address-form.d.ts

@@ -0,0 +1,96 @@
+import { InputModel } from './input-field';
+import { ButtonModel } from './form-button';
+import { BasicStateStylingBlock, ConditionalStyleTransition, LayoutStyle, WhenPredicate, ContainerStylingProperties, DimensionStylingProperties, SpacingStylingProperties, BackgroundStylingProperties, BorderStylingProperties, TextStylingProperties, FlexChildStylingProperties } from '@rokt/dcui-layout-schema';
+export interface FieldGroup {
+    fields: string[];
+}
+export type ContainerStyle = {
+    container?: ContainerStylingProperties;
+    dimension?: DimensionStylingProperties;
+    spacing?: SpacingStylingProperties;
+    background?: BackgroundStylingProperties;
+    border?: BorderStylingProperties;
+    flexChild?: FlexChildStylingProperties;
+    text?: TextStylingProperties;
+};
+export type TextStyle = {
+    text?: TextStylingProperties;
+    dimension?: DimensionStylingProperties;
+    spacing?: SpacingStylingProperties;
+    background?: BackgroundStylingProperties;
+    border?: BorderStylingProperties;
+};
+export type FormElements = {
+    own: BasicStateStylingBlock<ContainerStyle>[];
+    groupRowWrapper: BasicStateStylingBlock<ContainerStyle>[];
+    /** When field pairs stack (e.g. noGroupBreakpoints), optional styles for that column group. If omitted, no group wrapper class is applied (legacy behavior). */
+    groupColumnWrapper?: BasicStateStylingBlock<ContainerStyle>[];
+    fieldLabel: BasicStateStylingBlock<TextStyle>[];
+    fieldInput: BasicStateStylingBlock<ContainerStyle>[];
+    formError: BasicStateStylingBlock<ContainerStyle>[];
+    formErrorText: BasicStateStylingBlock<TextStyle>[];
+    formErrorIcon: BasicStateStylingBlock<ContainerStyle>[];
+    fieldError: BasicStateStylingBlock<ContainerStyle>[];
+    fieldErrorText: BasicStateStylingBlock<TextStyle>[];
+    fieldErrorIcon: BasicStateStylingBlock<ContainerStyle>[];
+    buttonGroup: BasicStateStylingBlock<ContainerStyle>[];
+    saveButton: BasicStateStylingBlock<ContainerStyle>[];
+    cancelButton: BasicStateStylingBlock<ContainerStyle>[];
+};
+export interface FormModel<WhenPredicate> {
+    fields: Record<string, InputModel>;
+    fieldGroups: FieldGroup[];
+    noGroupBreakpoints?: string[];
+    controls?: {
+        saveButton: ButtonModel;
+        cancelButton?: ButtonModel;
+    };
+    styles?: null | LayoutStyle<FormElements, ConditionalStyleTransition<FormElements, WhenPredicate>>;
+}
+export interface FormFieldValue {
+    value: string;
+    isValid: boolean;
+    error?: string;
+}
+export interface FormProps {
+    /**
+     *  - `schema`: Complete form configuration object containing:
+     *    * `fields`: Record of field configurations with validation rules
+     *    * `fieldGroups`: Array defining fields to be group in row.
+     *    * `buttons`: Optional save and cancel button configurations
+     *    * `error`: Error display configuration with icon URL and text
+     *    * `noGroupBreakpoints`: Array of breakpoint names where field grouping should be disabled
+     *    * `styles`: Form styling configuration
+     *      - `elements`:
+     *        * `own`: Container styling (background, border, spacing, etc.)
+     *        * `groupRowWrapper`: Style for a multi-field group laid out in a row (pair fields)
+     *        * `groupColumnWrapper`: Optional style for a multi-field group laid out in a column (stacked pairs). Omit to keep legacy layout (no group wrapper class on stacked pairs).
+     *        * `fieldLabel`: Field label text styling
+     *        * `fieldInput`: Input field styling with focus states
+     *        * `fieldError`: Error container styling
+     *        * `fieldErrorText`: Error message text styling
+     *        * `buttonGroup`: Button container styling
+     *        * `saveButton`: Save button styling with hover states
+     *        * `cancelButton`: Cancel button styling with hover states
+     *        * `formError`: Form-level error banner styling
+     *        * `formErrorIcon`: Form error icon styling
+     *        * `formErrorText`: Form error message styling
+     *      - `transitions`:
+     *        * `type`: 'Conditional'
+     *        * `transition`:
+     *          - `predicates`: WhenPredicate[]
+     *          - `duration`: number
+     *          - `value`: Styling overrides for transition states
+     *  - `testId`: Optional test identifier for automated testing
+     */
+    schema: FormModel<WhenPredicate>;
+    testId?: string;
+}
+/** The Form is a comprehensive form container that renders fields
+ * based on schema configuration with responsive layout support, validation,
+ * error handling, and state management. Supports various field types with
+ * customizable grouping, styling, and breakpoint-specific layouts.<br>
+ * *Where can we use this: __address forms__, __contact forms__, __registration forms__, __checkout forms__, __any data collection form__*
+ * */
+export declare function Form(props: FormProps): import("react/jsx-runtime").JSX.Element | undefined;
+export default Form;

package/dist/extensions/address-form/src/components/edit-address-form-view.d.ts

@@ -0,0 +1,23 @@
+import { LayoutSchemaModel } from '@rokt/dcui-layout-schema';
+export interface EditFormModel {
+    fields: Record<string, boolean>;
+    node: LayoutSchemaModel;
+}
+export interface EditFormViewProps {
+    /**
+     * - `schema`: Complete edit form configuration object containing:
+     *   * `fields`: Record of field validation requirements (field name → boolean for required/optional)
+     *   * `node`: LayoutSchemaModel tree defining the complete layout (use ToggleButtonStateTrigger for edit buttons)
+     * - `testId`: Optional test identifier for automated testing
+     */
+    schema: EditFormModel;
+    testId?: string;
+}
+/** The EditFormView is a pure data provider component that uses
+ * DataMapperProvider to make form data available to DCUI components. All layout,
+ * styling, and interactions are handled by the DCUI layout configuration.<br>
+ * *Where can we use this: __address displays__, __form summaries__, __saved data views__,
+ * __edit interfaces__, __user profiles__, __confirmation screens__*
+ * */
+export declare function EditFormView(props: EditFormViewProps): import("react/jsx-runtime").JSX.Element;
+export default EditFormView;

package/dist/extensions/address-form/src/components/form-button.d.ts

@@ -0,0 +1,15 @@
+export type FormButtonProps = {
+    schema: ButtonModel;
+    disabled?: boolean;
+    onClick?: () => void;
+    testId?: string;
+    classnames?: {
+        button?: string;
+        text?: string;
+    };
+};
+export declare function FormButton(props: FormButtonProps): JSX.Element | null;
+export interface ButtonModel {
+    label: string;
+    ariaLabel?: string;
+}

package/dist/extensions/address-form/src/components/input-field.d.ts

@@ -0,0 +1,34 @@
+export type Validator = 'Required' | 'PhoneNumber' | 'Contains' | 'ZipCode' | 'State';
+export type InputFieldProps = {
+    schema: InputModel;
+    value?: string;
+    error?: string;
+    isValid?: boolean;
+    onChange?: (value: string) => void;
+    testId?: string;
+    classnames?: {
+        label?: string;
+        field?: string;
+        error?: string;
+        errorText?: string;
+        errorIcon?: string;
+    };
+};
+export declare function InputField(props: InputFieldProps): JSX.Element | null;
+/**
+ * TODO : Add format prop to determine what kind of input is allowed.
+ */
+export interface InputModel {
+    label: string;
+    errorLabel: string;
+    missingLabel: string;
+    placeholder?: string;
+    validator?: Validator;
+    allowedValues?: string[];
+    inputFilter?: InputFilter;
+    validateOnChange?: boolean;
+    errorIcon?: string;
+}
+export type InputFilter = 'numeric' | {
+    pattern: string;
+};

package/dist/extensions/address-form/src/index.d.ts

@@ -0,0 +1,3 @@
+import { AppExtension } from '../../../libraries/dcui-components/src/index';
+export declare const addressFormExtension: AppExtension;
+export default addressFormExtension;

package/dist/extensions/address-form/src/models/form-state.d.ts

@@ -0,0 +1 @@
+export type FormState = Record<string, unknown>;

package/dist/extensions/address-form/src/models/index.d.ts

@@ -0,0 +1 @@
+export * from './form-state';

package/dist/extensions/address-form/src/reducers/forms.d.ts

@@ -0,0 +1,4 @@
+import { UnknownAction } from 'redux';
+import { FormState } from '../models';
+export declare function makeInitialFormState(): FormState;
+export declare const formReducer: <State extends object>(state: State | undefined, action: UnknownAction) => State;

package/dist/extensions/address-form/src/reducers/index.d.ts

@@ -0,0 +1 @@
+export * from './forms';

package/dist/extensions/address-form/src/sagas/cart-service/index.d.ts

@@ -0,0 +1 @@
+export * from './sagas';

package/dist/extensions/address-form/src/sagas/cart-service/sagas.d.ts

@@ -0,0 +1,9 @@
+import { ChannelTakeEffect, SelectEffect, PutEffect, CancelledEffect } from 'redux-saga/effects';
+import { InitiateCartItemEvent, CartItemResponse } from '../../../../../libraries/domain/src/behaviors';
+import { EventChannel } from 'redux-saga';
+import { PartnerInteractionService } from '../../../../../libraries/plugin-utils/src/index';
+export declare function initializeCartService(partnerInteractionService: PartnerInteractionService): Generator<import("redux-saga/effects").ForkEffect<void>, void, unknown>;
+export declare function processCartServiceEvent(action: InitiateCartItemEvent): Generator<SelectEffect | PutEffect, void, unknown>;
+export declare function handleCartServiceResponse(action: CartItemResponse): Generator<SelectEffect | PutEffect, void, unknown>;
+export declare function createCartServiceResponseChannel(partnerInteractionService: PartnerInteractionService): EventChannel<CartItemResponse['payload']>;
+export declare function listenForCartServiceResponse(partnerInteractionService: PartnerInteractionService): Generator<PutEffect | CancelledEffect | ChannelTakeEffect<CartItemResponse['payload']>, void, CartItemResponse['payload']>;

package/dist/extensions/address-form/src/sagas/index.d.ts

@@ -0,0 +1,2 @@
+import { PluginService } from '../../../../libraries/plugin-utils/src/index';
+export declare function addressFormExtensionSagas(partnerInteractionService: Pick<PluginService<unknown>, 'partnerInteractionService'>): Generator<any, void, unknown>;

package/dist/extensions/address-form/src/types.d.ts

@@ -0,0 +1,63 @@
+import { FormData } from './actions/forms';
+import { InputModel } from './components/input-field';
+import { ButtonModel } from './components/form-button';
+import { FieldGroup, FormModel } from './components/address-form';
+import { EditFormModel } from './components/edit-address-form-view';
+import { WhenPredicate } from '@rokt/dcui-layout-schema';
+import { PluginSlot } from '../../../libraries/domain/src/models';
+import { LayoutSchemaModel } from '@rokt/dcui-layout-schema';
+export interface FormExtensionConfig {
+    fields: Record<string, InputModel>;
+    fieldGroups: FieldGroup[];
+    controls?: {
+        saveButton: ButtonModel;
+        cancelButton?: ButtonModel;
+    };
+    error?: {
+        url: {
+            light: string;
+        };
+        text: string;
+    };
+    styles?: FormModel<WhenPredicate>['styles'];
+}
+export interface EditFormExtensionConfig {
+    fields: Record<string, boolean>;
+    node: EditFormModel['node'];
+}
+export interface FormFieldChangeEvent {
+    fieldKey: string;
+    value: string;
+    isValid: boolean;
+    error?: string;
+}
+export interface FormSubmissionEvent {
+    formData: FormData;
+}
+export interface FormValidationEvent {
+    fieldKey: string;
+    isValid: boolean;
+    error?: string;
+}
+type SlotState = PluginSlot<LayoutSchemaModel>;
+export interface ModuleState {
+    cart?: Array<{
+        cartItemId: string;
+        quantity: number;
+    }>;
+}
+export interface AddressFormState {
+    forms: Record<string, unknown>;
+    slots: SlotState[];
+    globalOfferDataState: Record<string, ModuleState>;
+}
+export declare const ADDRESS_FORM_ID = "deliveryAddress";
+export declare const CUSTOM_STATE_KEY_SHOW_ADDRESS_FORM = "deliveryAddress-showForm";
+export declare const CUSTOM_STATE_KEY_ADDRESS_FORM_ERROR_STATE = "deliveryAddress-errorState";
+export declare const CUSTOM_STATE_KEY_ADDRESS_FORM_IS_VALID = "deliveryAddress-isValid";
+export declare const AddressFormErrorState: {
+    readonly NONE: 0;
+    readonly VALIDATION_ERROR: 1;
+    readonly SYSTEM_ERROR: 2;
+};
+export { FormData };

package/dist/extensions/address-form/src/utils.d.ts

@@ -0,0 +1,15 @@
+import { InputModel } from './components/input-field';
+export type ValidationResult = {
+    isValid: boolean;
+    error?: string;
+};
+export declare const US_STATES: string[];
+/**
+ * Validates a form field value based on the specified validator type.
+ *
+ * @param value - The current field value to validate
+ * @param validator - The type of validation to perform
+ * @param fieldConfig - Optional field configuration with custom error messages and allowed values
+ * @returns ValidationResult with isValid status and optional error message
+ */
+export declare function validateField(value: string, validator?: string, fieldConfig?: InputModel): ValidationResult;

package/dist/extensions/minimized-bottomsheet/src/components/bottom-sheet/bottom-sheet.d.ts

@@ -5,11 +5,13 @@ import { PluginSlot } from '../../../../../libraries/domain/src/models';
 export type MinimizedBottomSheetProps = BottomSheetProps & {
     schema: BottomSheetProps['schema'] & {
         customStateKey?: string;
+        startMinimized?: boolean;
     };
     slots: PluginSlot<LayoutSchemaModel>[];
     currentIndex: number;
 };
 type BottomSheetContainerProps = {
+    startMinimized: boolean;
     children?: React.ReactNode;
     schema: MinimizedBottomSheetProps['schema'];
     ref: React.RefObject<HTMLDivElement>;

package/dist/extensions/minimized-bottomsheet/src/components/bottom-sheet/factory.d.ts

@@ -4,6 +4,7 @@ import { BottomSheetWithSlots } from './bottom-sheet';
 export declare const ConnectedBottomSheet: import("react-redux").ConnectedComponent<typeof BottomSheetWithSlots, {
     schema: import("@rokt/dcui-layout-schema").BottomSheetModel<import("@rokt/dcui-layout-schema").ModalChildren, import("@rokt/dcui-layout-schema").WhenPredicate> & {
         customStateKey?: string;
+        startMinimized?: boolean;
     };
     testId?: string | undefined;
     context?: React.Context<import("react-redux").ReactReduxContextValue<any, import("redux").UnknownAction> | null> | undefined;

package/dist/extensions/minimized-bottomsheet/src/components/bottom-sheet/hooks.d.ts

@@ -1,6 +1,7 @@
 export declare const INITIAL_WRAPPER_HEIGHT = 100000;
 export declare const MINIMIZED_STATE_KEY = "Minimized";
-export declare const useBottomSheetDragEvents: () => {
+export declare const MAXIMIZED_STATE_KEY = "Maximized";
+export declare const useBottomSheetDragEvents: (startMinimized: boolean) => {
     wrapperRef: import("react").RefObject<HTMLDivElement>;
     containerRef: import("react").RefObject<HTMLDivElement>;
     minimizedChildRef: import("react").RefObject<HTMLDivElement>;

package/dist/extensions/minimized-bottomsheet/src/components/bottomsheet-wrapper/overlay-wrapper.d.ts

@@ -1,6 +1,6 @@
-import { BottomSheetProps } from '../bottom-sheet/types';
+import { MinimizedBottomSheetProps } from '../bottom-sheet';
 export declare enum ContainerMode {
     BottomSheet = 0,
     Overlay = 1
 }
-export declare function OverlayWrapper({ schema, testId }: BottomSheetProps): import("react/jsx-runtime").JSX.Element;
+export declare function OverlayWrapper({ schema, testId }: MinimizedBottomSheetProps): import("react/jsx-runtime").JSX.Element;

package/dist/extensions/shimmer-background/src/index.d.ts

@@ -0,0 +1,10 @@
+import { AppExtension } from '../../../libraries/dcui-components/src/index';
+declare global {
+    interface Window {
+        RoktWebViewSDK: {
+            open: typeof window.open;
+        };
+    }
+}
+declare const shimmerBackgroundExtension: AppExtension;
+export default shimmerBackgroundExtension;

package/dist/extensions/shimmer-background/src/shimmer-background.d.ts

@@ -0,0 +1,11 @@
+export type ShimmerBackgroundProps = {
+    linearGradient: string;
+    color1: string;
+    color2: string;
+    color3: string;
+    duration?: string;
+    additionalStyles?: string;
+    gradientAngle?: string;
+};
+export declare function ShimmerBackground({ linearGradient, color1, color2, color3, duration, additionalStyles, gradientAngle }: ShimmerBackgroundProps): import("react/jsx-runtime").JSX.Element;
+export default ShimmerBackground;