Apply Experience Library

@zwayam/apply-experience-library is a host-facing SDK for launching Add Profile and Edit Profile popups inside recruiter or admin web applications.

It is designed for hosts that already own authentication, API orchestration, and business rules, but want a reusable profile collection UI.

What the SDK Handles

• resume upload and resume parsing flow
• manual profile creation flow
• add profile and edit profile popup UI
• dynamic field rendering from backend applyFields
• required validation, pattern validation, dependent field visibility
• country code + phone input handling
• source / source type / sub-source flow
• optional location autosuggestions
• final submit flow and success callbacks

What the Host App Handles

• authentication and session
• current job and user context
• backend API calls
• route-level state management
• refresh / navigation after success

Install

npm install @zwayam/apply-experience-library

Import styles once in your host app:

import "@zwayam/apply-experience-library/styles.css";

Exported API

The package exposes:

• mountAddProfile(options)
• mountEditProfile(options)
• registerAddProfileElement(options)
• registerEditProfileElement(options)

Use mount* for direct framework integration. Use register*Element if you prefer custom elements.

How It Is Built

The SDK is made in two layers:

1. packages/react

   • React implementation of Add Profile / Edit Profile
   • field rendering, validations, workflow logic

2. packages/web

   • bundled host-facing package
   • exports mount helpers that work in Angular, React, Vue, and vanilla JS

This means host apps do not need to know the internal React implementation details. They only provide context, api, and a DOM container.

Add Profile Context

type AddProfileHostContext = {
  job: {
    id: string;
    companyId: number | string;
    departmentId?: number | string;
    jobTitle: string;
    jobCode: string;
    location?: string;
    minYearOfExperience?: number;
    maxYearOfExperience?: number;
    departmentName?: string;
  };
  user: {
    id: string | number;
    email: string;
    name: string;
    uuid?: string;
  };
  session: {
    sessionId: string;
  };
  environment?: Record<string, string>;
};

Example

const addProfileContext = {
  job: {
    id: "263294",
    companyId: 16136,
    departmentId: 12,
    jobTitle: "Java Developer",
    jobCode: "16667",
    location: "Pune, Maharashtra, India",
    minYearOfExperience: 2,
    maxYearOfExperience: 5,
    departmentName: "Engineering",
  },
  user: {
    id: 286813,
    email: "[email protected]",
    name: "Recruiter Name",
    uuid: "host-user-uuid",
  },
  session: {
    sessionId: "SESSION_ID",
  },
  environment: {
    tenant: "prod",
  },
};

Edit Profile Context

Edit Profile uses everything from Add Profile, plus:

type EditProfileHostContext = AddProfileHostContext & {
  applyId: string | number;
  application?: Record<string, unknown>;
};

Example

const editProfileContext = {
  ...addProfileContext,
  applyId: 987654,
  application: {
    applyId: 987654,
    candidateId: 12345,
  },
};

Add Profile API Contract

type AddProfileApi = {
  loadInitialData(
    context: AddProfileHostContext,
  ): Promise<{
    applyFields: AddProfileFieldDefinition[];
    supportedFiles: {
      addProfile?: {
        fileFormat: string[];
        fileSize?: number;
      };
    };
    profileSources: Array<{
      sourceOfProfile?: string;
      profileSource: string;
      subSourceValues?: string | null;
    }>;
    phoneConfiguration: {
      countryIsoCode: string | null;
      whatsAppEnabled: boolean;
      maxCount: number;
    };
    resumeOptional?: boolean;
  }>;

  parseResume(
    file: File,
    context: AddProfileHostContext,
  ): Promise<{
    responseCode?: number;
    reponseObject?: {
      parsedObjectId?: string;
      parsedResult?: {
        profile?: Record<string, unknown>;
      };
      jobApplication?: Record<string, unknown>;
    };
  }>;

  submitProfile(
    payload: FormData,
    context: AddProfileHostContext,
  ): Promise<{
    code?: number;
    message?: string;
    [key: string]: unknown;
  }>;

  getLocationSuggestions?(
    query: string,
    context: AddProfileHostContext,
  ): Promise<string[]>;
};

Edit Profile API Contract

type EditProfileApi = {
  loadInitialData(
    context: EditProfileHostContext,
  ): Promise<{
    jobApplication: Record<string, unknown>;
    applyFieldsObject: Record<string, unknown>;
    applyFields: AddProfileFieldDefinition[];
    phoneConfiguration: {
      countryIsoCode: string | null;
      whatsAppEnabled: boolean;
      maxCount: number;
    };
    phoneNumbers?: Array<Record<string, unknown>>;
    supportedFiles?: {
      addProfile?: {
        fileFormat: string[];
        fileSize?: number;
      };
    };
  }>;

  submitProfile(
    payload: Record<string, unknown>,
    context: EditProfileHostContext,
  ): Promise<{
    code?: number;
    message?: string;
    [key: string]: unknown;
  }>;

  getLocationSuggestions?(
    query: string,
    context: EditProfileHostContext,
  ): Promise<string[]>;
};

Field Definitions

The SDK renders fields from backend applyFields.

Common field types include:

• T for text-like inputs
• D for searchable dropdowns
• date
• phone
• checkbox
• location
• email
• consent

Notes:

• field.errorMessage is used as first priority for validation messages when present.
• Generated SDK validation messages are used as fallback when API does not provide one.
• Currency formatting follows field metadata type such as INRCURRENCY / CURRENCY, matching host behavior.

React Usage

import { useEffect, useRef } from "react";
import {
  mountAddProfile,
  type MountedAddProfile,
  type AddProfileApi,
  type AddProfileHostContext,
} from "@zwayam/apply-experience-library";
import "@zwayam/apply-experience-library/styles.css";

export function AddProfileLauncher({
  open,
  context,
  api,
  onClose,
}: {
  open: boolean;
  context: AddProfileHostContext;
  api: AddProfileApi;
  onClose(): void;
}) {
  const rootRef = useRef<HTMLDivElement | null>(null);
  const mountedRef = useRef<MountedAddProfile | null>(null);

  useEffect(() => {
    if (!open || !rootRef.current) return;

    mountedRef.current = mountAddProfile({
      container: rootRef.current,
      context,
      api,
      title: "Add Profile",
      onClose,
      onSuccess: () => {
        mountedRef.current?.unmount();
        onClose();
      },
    });

    return () => mountedRef.current?.unmount();
  }, [open, context, api, onClose]);

  return <div ref={rootRef} />;
}

Angular Usage

Import styles once in a global stylesheet:

@import "@zwayam/apply-experience-library/styles.css";

Mount from a component or service:

import {
  mountAddProfile,
  type MountedAddProfile,
  type AddProfileApi,
  type AddProfileHostContext,
} from "@zwayam/apply-experience-library";

private mountedAddProfile?: MountedAddProfile;

openAddProfile(container: Element, context: AddProfileHostContext, api: AddProfileApi) {
  this.mountedAddProfile = mountAddProfile({
    container,
    context,
    api,
    title: "Add Profile",
    onClose: () => this.mountedAddProfile?.unmount(),
    onSuccess: () => {
      this.mountedAddProfile?.unmount();
      // refresh host data here
    },
  });
}

Vue Usage

<script setup lang="ts">
import { onBeforeUnmount, watch, ref } from "vue";
import { mountAddProfile } from "@zwayam/apply-experience-library";
import "@zwayam/apply-experience-library/styles.css";

const props = defineProps<{
  open: boolean;
  context: any;
  api: any;
}>();

const root = ref<HTMLElement | null>(null);
let mounted: ReturnType<typeof mountAddProfile> | null = null;

watch(
  () => props.open,
  (open) => {
    if (!open || !root.value) return;

    mounted = mountAddProfile({
      container: root.value,
      context: props.context,
      api: props.api,
      onClose: () => mounted?.unmount(),
      onSuccess: () => mounted?.unmount(),
    });
  },
);

onBeforeUnmount(() => mounted?.unmount());
</script>

<template>
  <div ref="root"></div>
</template>

Vanilla JavaScript Usage

<button id="open-add-profile">Add Profile</button>
<div id="add-profile-root"></div>

import { mountAddProfile } from "@zwayam/apply-experience-library";
import "@zwayam/apply-experience-library/styles.css";

document.getElementById("open-add-profile").addEventListener("click", () => {
  const mounted = mountAddProfile({
    container: document.getElementById("add-profile-root"),
    context: addProfileContext,
    api: addProfileApi,
    onClose: () => mounted.unmount(),
    onSuccess: () => mounted.unmount(),
  });
});

Custom Element Usage

import {
  registerAddProfileElement,
  registerEditProfileElement,
} from "@zwayam/apply-experience-library";

registerAddProfileElement({
  getApi: () => addProfileApi,
  getContext: () => addProfileContext,
});

registerEditProfileElement({
  getApi: () => editProfileApi,
  getContext: () => editProfileContext,
});

Then use:

<apply-experience-add-profile></apply-experience-add-profile>
<apply-experience-edit-profile></apply-experience-edit-profile>

Example API Object

const addProfileApi = {
  loadInitialData: async (context) => {
    const response = await fetch(`/api/apply-fields?jobId=${context.job.id}`);
    return response.json();
  },

  parseResume: async (file, context) => {
    const formData = new FormData();
    formData.append("file", file);
    formData.append("sessionId", context.session.sessionId);
    const response = await fetch("/api/parse-resume", {
      method: "POST",
      body: formData,
    });
    return response.json();
  },

  submitProfile: async (payload, context) => {
    payload.append("sessionId", context.session.sessionId);
    const response = await fetch("/api/add-profile", {
      method: "POST",
      body: payload,
    });
    return response.json();
  },

  getLocationSuggestions: async (query) => {
    if (!query.trim()) return [];
    const response = await fetch(`/api/location-suggestions?q=${encodeURIComponent(query)}`);
    const data = await response.json();
    return data.suggestions || [];
  },
};

Development

npm install
npm run build
npm run playground

Publish

npm run build
npm publish --access public