@pexip-engage-public/plugin 1.1.17 → 1.1.19

package/src/configuration-parser-legacy/ModernParser.ts

@@ -162,16 +162,10 @@ export interface JSConfigV0 {
 
 function strictSanitize(config: PluginConfigurationV0) {
   return sanitize<PluginConfigurationV0>({
-    version: undefined,
-    flow: config.flow,
-    intent: config.intent,
-    language: config.language,
-    "employee-ids": config["employee-ids"],
-    "employee-type": config["employee-type"],
     "application-office_search": config["application-office_search"],
     "application-scroll": config["application-scroll"],
-    "application-timezone_selection": config["application-timezone_selection"],
     "application-theme": config["application-theme"],
+    "application-timezone_selection": config["application-timezone_selection"],
     "browser-timezone": config["browser-timezone"],
     "customer-company": config["customer-company"],
     "customer-customer_number": config["customer-customer_number"],
@@ -194,6 +188,11 @@ function strictSanitize(config: PluginConfigurationV0) {
     "customer-preferred_contact_id": config["customer-preferred_contact_id"],
     "customer-preferred_office_id": config["customer-preferred_office_id"],
     "customer-timezone": config["customer-timezone"],
+    "employee-ids": config["employee-ids"],
+    "employee-type": config["employee-type"],
+    flow: config.flow,
+    intent: config.intent,
+    language: config.language,
     "lead_segment-id": config["lead_segment-id"],
     "lead_segment-type": config["lead_segment-type"],
     "listing-id": config["listing-id"],
@@ -208,8 +207,9 @@ function strictSanitize(config: PluginConfigurationV0) {
     "session-id": config["session-id"],
     "session-source_tags": config["session-source_tags"],
     "session-status": config["session-status"],
+    source_href: config.source_href,
     "subject-ids": config["subject-ids"],
     "subject-type": config["subject-type"],
-    source_href: config.source_href,
+    version: undefined,
   });
 }

package/src/configuration-parser-legacy/Parser.ts

@@ -36,8 +36,8 @@ export function parsePluginConfigurationV1({
     ...domConfig,
     ...hashConfig,
     ...jsConfig,
-    source_href: href,
     "browser-timezone": browserTimeZone,
+    source_href: href,
   };
 
   return { config, domConfig, hashConfig, jsConfig };

package/src/configuration-parser-legacy/tests/LegacyDomParser.test.ts

@@ -7,33 +7,33 @@ import { createFakeElement } from "./test-utils.js";
 describe("parseDOMParams", () => {
   it("should work", () => {
     const element = createFakeElement({
-      "skedify:appointment.subject_id": "<subject-id here>",
+      "skedify:application.scroll": "disable_initial_scroll_on_schedule",
+      "skedify:application.timezone_selection": "enable_timezone_selection",
       "skedify:appointment.office_id": "<office-id here>",
-      "skedify:language": "nl-BE",
-      "skedify:meeting_types": "video,office",
-      "skedify:flow": "S'TQC",
-      "skedify:location.formatted_address": "Zuiderlaan 1, 9000 Ghent, Belgium",
-      "skedify:location.geolocation": "123;456",
-      "skedify:location.city": "Ghent",
-      "skedify:location.country": "Belgium",
-      "skedify:location.postal_code": "9000",
-      "skedify:location.state": "Oost-Vlaanderen",
-      "skedify:location.street_1": "Zuiderlaan 1",
-      "skedify:customer.location.formatted_address": "Zuiderlaan 1, 9000 Ghent, Belgium",
-      "skedify:customer.location.geolocation": "123;456",
+      "skedify:appointment.subject_id": "<subject-id here>",
       "skedify:customer.location.city": "Ghent",
       "skedify:customer.location.country": "Belgium",
+      "skedify:customer.location.formatted_address": "Zuiderlaan 1, 9000 Ghent, Belgium",
+      "skedify:customer.location.geolocation": "123;456",
       "skedify:customer.location.postal_code": "9000",
       "skedify:customer.location.state": "Oost-Vlaanderen",
       "skedify:customer.location.street_1": "Zuiderlaan 1",
-      "skedify:application.scroll": "disable_initial_scroll_on_schedule",
-      "skedify:listing_id": "<listing-id here>",
       "skedify:external_listing_id": "<external-listing-id here>",
-      "skedify:application.timezone_selection": "enable_timezone_selection",
+      "skedify:flow": "S'TQC",
+      "skedify:language": "nl-BE",
+      "skedify:listing_id": "<listing-id here>",
+      "skedify:location.city": "Ghent",
+      "skedify:location.country": "Belgium",
+      "skedify:location.formatted_address": "Zuiderlaan 1, 9000 Ghent, Belgium",
+      "skedify:location.geolocation": "123;456",
+      "skedify:location.postal_code": "9000",
+      "skedify:location.state": "Oost-Vlaanderen",
+      "skedify:location.street_1": "Zuiderlaan 1",
+      "skedify:meeting_types": "video,office",
+      "skedify:search.country": "BE",
       "skedify:session.id": "269828b4-df32-42fe-80c7-4fb72b692f7e",
       "skedify:session.source_tags": "A;B;C",
       "skedify:session.status": "disabled",
-      "skedify:search.country": "BE",
     });
 
     expect(legacyParse({ element })).toMatchInlineSnapshot(`
@@ -111,12 +111,12 @@ describe("parseDOMParams", () => {
 
   it("should work with prefilled customer values", () => {
     const element = createFakeElement({
-      "skedify:customer.timezone": "Europe/Brussels",
+      "skedify:customer.customer_number": "123",
+      "skedify:customer.email": "ken@skedify.co",
       "skedify:customer.first_name": "Ken",
       "skedify:customer.last_name": "Depelchin",
-      "skedify:customer.email": "ken@skedify.co",
       "skedify:customer.phone_number": "0478123123",
-      "skedify:customer.customer_number": "123",
+      "skedify:customer.timezone": "Europe/Brussels",
     });
 
     expect(legacyParse({ element })).toMatchInlineSnapshot(`

package/src/configuration-parser-legacy/tests/LegacyLocationHashParser.test.ts

@@ -7,52 +7,52 @@ import { createFakeHash } from "./test-utils.js";
 describe("parseSkedifyURIHashParams", () => {
   it("should create a valid object from the encoded values", () => {
     const hash = createFakeHash({
-      rco: "example resource code",
-      sub: "example subject id",
-      off: "example office id",
-      ctz: "example customer timezone",
-      con: "contact_id_1,contact_id_2",
-      sco: "BE",
-      lng: "example language",
-      flo: "example flow",
-      cfn: "example customer first_name",
-      cln: "example customer last_name",
-      cem: "example customer email",
-      cpn: "example customer phone number",
+      cci: "Ghent",
       ccn: "example customer customer number",
-      mty: "example meeting_types",
-
-      // Location
-      lfa: "Zuiderlaan 1, 9000 Ghent, Belgium",
-      lgl: "55.79086400000001;12.157552",
-      lci: "Ghent",
-      lco: "BE",
-      lpc: "9000",
-      lsa: "Oost-Vlaanderen",
-      lst: "Zuiderlaan 1",
+      cco: "BE",
+      cem: "example customer email",
+      cfn: "example customer first_name",
 
       // Customer location
       cgl: "55.79086400000001;12.157552",
-      cci: "Ghent",
-      cco: "BE",
+      cln: "example customer last_name",
+      con: "contact_id_1,contact_id_2",
       cpc: "9000",
+      cpn: "example customer phone number",
       csa: "Oost-Vlaanderen",
       cst: "Zuiderlaan 1",
+      ctz: "example customer timezone",
 
-      // Application
-      scr: "default",
+      // hints
+      eco: ["4", "5", "6"],
+      eli: "ABC123",
       ets: "enable_timezone_selection",
+      flo: "example flow",
+      lci: "Ghent",
+      lco: "BE",
+
+      // Location
+      lfa: "Zuiderlaan 1, 9000 Ghent, Belgium",
+      lgl: "55.79086400000001;12.157552",
 
       // Listings
       lis: "1",
-      eli: "ABC123",
+      lng: "example language",
+      lpc: "9000",
+      lsa: "Oost-Vlaanderen",
+      lst: "Zuiderlaan 1",
+      mty: "example meeting_types",
+      off: "example office id",
+      rco: "example resource code",
+      sco: "BE",
 
-      // hints
-      eco: ["4", "5", "6"],
+      // Application
+      scr: "default",
 
       // Session
       sid: "269828b4-df32-42fe-80c7-4fb72b692f7e",
       sst: "A;B;C",
+      sub: "example subject id",
     });
 
     expect(legacyParse({ hash })).toMatchInlineSnapshot(`

package/src/configuration-parser-legacy/tests/LegacyParser.test.ts

@@ -9,18 +9,18 @@ describe("LegacyConfigurationParser", () => {
   it("Should correctly cascade config options", () => {
     const config = legacyParse({
       element: createFakeElement({
-        "skedify:searchCountry": "EN",
-        "skedify:appointment.subject_id": "1",
         "skedify:appointment.office_id": "2000",
+        "skedify:appointment.subject_id": "1",
+        "skedify:searchCountry": "EN",
       }),
       hash: createFakeHash({
+        lis: "3000",
         sco: "DE,NB",
         sub: "2",
-        lis: "3000",
       }),
       options: {
-        searchCountry: "BE,NL",
         lead_segment_code: "CODE_123",
+        searchCountry: "BE,NL",
       },
     });
 

package/src/constants.ts

@@ -1,8 +1,8 @@
 import type { Language } from "@pexip-engage-public/graphql";
 
 export const TOKEN = {
-  EMPLOYEE: "E",
   CUSTOMER: "C",
+  EMPLOYEE: "E",
   LOCK: "*",
   MEETING_TYPE: "M",
   OFFICE: "O",

package/src/encoding.ts

@@ -25,16 +25,16 @@ export function decodeURIParameters<T>(str: string): T {
 const CONFIGURATION_SEARCH_PARAM_KEY = "configuration.pexip";
 
 export const pluginSearchParams = {
-  encode(config: PluginConfiguration): URLSearchParams {
-    const searchParams = new URLSearchParams();
-    searchParams.set(CONFIGURATION_SEARCH_PARAM_KEY, encodeURIParameters(config));
-
-    return searchParams;
-  },
   decode(searchParams: URLSearchParams) {
     const config = searchParams.get(CONFIGURATION_SEARCH_PARAM_KEY);
     if (!config) return null;
 
     return decodeURIParameters<PluginConfiguration>(config);
   },
+  encode(config: PluginConfiguration): URLSearchParams {
+    const searchParams = new URLSearchParams();
+    searchParams.set(CONFIGURATION_SEARCH_PARAM_KEY, encodeURIParameters(config));
+
+    return searchParams;
+  },
 };

package/src/events/event-types.ts

@@ -1,6 +1,5 @@
-import type { InputType } from "@pexip-engage-public/graphql";
-
 import type { GeoPosition } from "@pexip-engage/utils/get-current-position";
+import type { InputType } from "@pexip-engage-public/graphql";
 import type { PluginState } from "../state/index.js";
 export type IFrameMessage = PublicIFrameMessage | PrivateIFrameMessage;
 export type PublicIFrameMessage =

package/src/instance/PluginInstance.ts

@@ -14,17 +14,16 @@ import type {
 } from "../events/index.js";
 import { logger } from "../logger.js";
 import type { PluginIntent } from "../state/index.js";
-
-import { getPexipEngagePluginFrame } from "./PexipEngagePluginFrame.js";
 import {
   type CustomEventPayload,
+  dispatchEvent,
   type InstanceEvent,
   PEXIP_ENGAGE_PLUGIN_EVENT,
   type PluginCustomEvent,
   type StaticEvent,
-  dispatchEvent,
 } from "./dispatchEvent.js";
 import type { PluginHooks } from "./hooks.js";
+import { getPexipEngagePluginFrame } from "./PexipEngagePluginFrame.js";
 
 type PluginEventListener = (event: PluginCustomEvent) => unknown;
 
@@ -44,14 +43,14 @@ export class PluginInstance {
     if (!isElement(target)) throw new Error("Invalid target passed, expected an element.");
     this.#target = target;
     this.#config = PluginInstance.#configurationParser({
-      element: this.#target,
-      options,
-      hash: window.location.hash,
       browser: {
-        legacyMode: PluginInstance.#legacyMode,
         href: window.location.href,
+        legacyMode: PluginInstance.#legacyMode,
         timeZone: new Intl.DateTimeFormat().resolvedOptions().timeZone,
       },
+      element: this.#target,
+      hash: window.location.hash,
+      options,
     });
 
     try {
@@ -69,10 +68,10 @@ export class PluginInstance {
     PluginInstance.#instances.push(this);
     queueMacroTask(() => {
       dispatchEvent({
-        target: this.#target,
         bubbles: true,
         cancelable: true,
         detail: { instance: this, type: PluginInstance.EVENT_CREATION },
+        target: this.#target,
       });
     });
   }
@@ -102,22 +101,22 @@ export class PluginInstance {
       message.type === "MISCONFIGURED"
     ) {
       return dispatchEvent({
-        target: this.#target,
         detail: { instance: self, ...message },
+        target: this.#target,
       });
     }
 
     if (message.type === "PRE_APPOINTMENT_REQUEST") {
       if (message.payload) {
         this.#hooks.beforeAppointmentCreate?.({
-          data: message.payload,
           appointment: { meta: this.appointment.meta },
+          data: message.payload,
         });
       }
 
       this.#instance.iFrameResizer.sendMessage({
-        type: "PRE_APPOINTMENT_REQUEST",
         payload: { meta: this.#meta },
+        type: "PRE_APPOINTMENT_REQUEST",
       });
 
       return;
@@ -125,8 +124,8 @@ export class PluginInstance {
 
     if (message.type === "REQUEST_ORIGIN_URL") {
       this.#instance.iFrameResizer.sendMessage({
-        type: "REQUEST_ORIGIN_URL",
         payload: { href: window.location.href },
+        type: "REQUEST_ORIGIN_URL",
       });
 
       return;
@@ -136,10 +135,10 @@ export class PluginInstance {
       const geolocation = getCurrentPosition();
 
       this.#instance.iFrameResizer.sendMessage({
-        type: "REQUEST_GEOLOCATION",
         payload: await geolocation.catch((error) =>
           typeof error === "string" ? { error } : { error: "Unknown error" },
         ),
+        type: "REQUEST_GEOLOCATION",
       });
 
       return;
@@ -186,20 +185,20 @@ export class PluginInstance {
     const self = this;
     const [instance] = resizer(
       {
-        log: false,
         checkOrigin: false,
-        onMessage: this.#handleMessage,
-        resizeFrom: "child",
         heightCalculationMethod: "taggedElement",
+        log: false,
         onInit() {
           self.#status = "success";
           dispatchEvent({
-            target: self.#target,
             bubbles: true,
             cancelable: true,
             detail: { instance: self, type: PluginInstance.EVENT_LOADED },
+            target: self.#target,
           });
         },
+        onMessage: this.#handleMessage,
+        resizeFrom: "child",
       },
       iframe,
     );
@@ -237,13 +236,13 @@ export class PluginInstance {
   // KEEP STABLE UNTIL February 2024
   /** @private internal API */
   setCSSVariable = (name: string, value: string) => {
-    warnPrivate({ type: "function", name: "setCSSVariable" });
+    warnPrivate({ name: "setCSSVariable", type: "function" });
 
-    this.#instance.iFrameResizer.sendMessage({ type: "CSS_VAR_UPDATE", payload: { name, value } });
+    this.#instance.iFrameResizer.sendMessage({ payload: { name, value }, type: "CSS_VAR_UPDATE" });
   };
 
   setCustomCSS = (css: string) => {
-    this.#instance.iFrameResizer.sendMessage({ type: "CUSTOM_CSS_UPDATE", payload: { css } });
+    this.#instance.iFrameResizer.sendMessage({ payload: { css }, type: "CUSTOM_CSS_UPDATE" });
   };
 
   #listeners = new Set<EventListener>();
@@ -274,31 +273,31 @@ export class PluginInstance {
 
   get appointment() {
     return {
-      intent: this.#state?.config.intent,
       appointmentId: this.#state?.appointmentId,
       callbackRequestId: this.#state?.callbackRequestId,
-      officeId: this.#state?.officeId,
-      meetingType: this.#state?.meetingType,
-      subjectId: this.#state?.subjectId,
-      subjectGroupId: this.#state?.subjectCategoryId,
-      employeeId: this.#state?.employeeId,
       customer: this.#state?.customer,
+      employeeId: this.#state?.employeeId,
+      intent: this.#state?.config.intent,
+      meetingType: this.#state?.meetingType,
       meta: {
+        get: (key: string, defaultValue: unknown) => {
+          return this.#meta[key] ?? defaultValue;
+        },
         getAll: () => {
           return this.#meta;
         },
-        get: (key: string, defaultValue: unknown) => {
-          return this.#meta[key] ?? defaultValue;
+        remove: (key: string) => {
+          delete this.#meta[key];
         },
         set: (key: string, value: unknown) => {
           this.#meta[key] = value;
 
           return this.#meta;
         },
-        remove: (key: string) => {
-          delete this.#meta[key];
-        },
       },
+      officeId: this.#state?.officeId,
+      subjectGroupId: this.#state?.subjectCategoryId,
+      subjectId: this.#state?.subjectId,
     };
   }
   static openDebugger() {

package/src/instance/index.ts

@@ -1,5 +1,5 @@
-import { PluginInstance as _PluginInstance } from "./PluginInstance.js";
 import { dispatchEvent } from "./dispatchEvent.js";
+import { PluginInstance as _PluginInstance } from "./PluginInstance.js";
 
 export type { PexipEngagePluginEventID, PluginCustomEvent } from "./dispatchEvent.js";
 export { PEXIP_ENGAGE_PLUGIN_EVENT } from "./dispatchEvent.js";
@@ -54,10 +54,10 @@ export function installOnGlobal(options: { shouldWarn: boolean } = { shouldWarn:
   window.PexipEngage.q.push = (item) => processQueueItem(item);
 
   dispatchEvent({
-    target: document,
-    detail: { type: PluginStatic.EVENT_INIT },
     bubbles: true,
     cancelable: true,
+    detail: { type: PluginStatic.EVENT_INIT },
+    target: document,
   });
 }
 

package/src/logger.ts

@@ -4,22 +4,22 @@ export const logger = {
   debug(arg: string, ...args: unknown[]) {
     console.debug(PREFIX + arg, ...args);
   },
-  info(arg: string, ...args: unknown[]) {
-    console.info(PREFIX + arg, ...args);
-  },
-  warn(arg: string, ...args: unknown[]) {
-    console.warn(PREFIX + arg, ...args);
-  },
   error(arg: string, ...args: unknown[]) {
     console.error(PREFIX + arg, ...args);
   },
-  log(arg: string, ...args: unknown[]) {
-    console.log(PREFIX + arg, ...args);
-  },
   group(arg: string, ...args: unknown[]) {
     console.group(PREFIX + arg, ...args);
   },
   groupEnd() {
     console.groupEnd();
   },
+  info(arg: string, ...args: unknown[]) {
+    console.info(PREFIX + arg, ...args);
+  },
+  log(arg: string, ...args: unknown[]) {
+    console.log(PREFIX + arg, ...args);
+  },
+  warn(arg: string, ...args: unknown[]) {
+    console.warn(PREFIX + arg, ...args);
+  },
 };

package/src/state/PluginState.schema.ts

@@ -6,12 +6,12 @@ import {
 } from "../configuration/PluginConfiguration.schema.js";
 
 import {
-  util,
   CustomerFormSchema,
+  form,
   type IntentSchema,
   LocationSchema,
   MeetingTypeSchema,
-  form,
+  util,
 } from "./schemas.js";
 
 export type PluginIntent = z.infer<typeof IntentSchema>;
@@ -19,27 +19,69 @@ export interface PluginState extends z.infer<typeof PluginStateSchema> {}
 export interface PluginStateInput extends z.input<typeof PluginStateSchema> {}
 
 export const PluginStateSchema = z.object({
-  flow: FlowSchema,
-  subjectId: z.string().optional(),
-  officeId: z.string().optional(),
-  employeeId: z.string().optional(),
   appointmentId: z.string().optional(),
   callbackRequestId: z.string().optional(),
-  metadata: z.record(z.unknown()).optional(),
+
+  /**  This object is the validated version `PluginConfiguration.current.ts` */
+  config: PluginConfigurationSchema,
+  customer: CustomerFormSchema.optional(),
+  employeeId: z.string().optional(),
+
+  // resolved values used for SRS
+  employees: z.string().array().optional(),
+  errors: z
+    .object({
+      /**
+       * Each step can have errors, in case of the timetable this currently only happens when
+       * a slot is booked by another customer between selecting the slot, and confirming the appointment
+       * (request).
+       */
+      timetable: z.literal(true).optional(),
+    })
+    .default({}),
+  fileUploads: z
+    .record(
+      z.object({ answerId: z.string(), fileName: z.string(), uploadUrl: z.string().nullable() }),
+    )
+    .optional(),
+  flow: FlowSchema,
+  leadSegmentId: z.string().optional(),
+  listingId: z.string().optional(),
+  /** The selected geolocation of the user */
+  location: LocationSchema.default({}),
   meetingType: MeetingTypeSchema.optional(),
+  meetingTypes: MeetingTypeSchema.array().optional(),
+  metadata: z.record(z.unknown()).optional(),
+  officeId: z.string().optional(),
+  offices: z.string().array().optional(),
+  questions: form.questionnaire,
+  schedulable: z.boolean().default(true),
+  /** Marking certain steps as (automatically) skipped or not. */
+  skipped: z
+    .object({
+      employee: z.literal(true).optional(),
+      meetingType: z.literal(true).optional(),
+      office: z.literal(true).optional(),
+      questions: z.literal(true).optional(),
+      subject: z.literal(true).optional(),
+    })
+    .default({}),
+  subjectGroups: z.string().array().optional(),
+  subjectId: z.string().optional(),
+  subjects: z.string().array().optional(),
   timetable: z
     .union([
       z.object({
+        employeeIds: z.undefined(),
+        end: z.undefined(),
         intent: z.literal("callback").optional(),
         start: z.undefined(),
-        end: z.undefined(),
-        employeeIds: z.undefined(),
       }),
       z.object({
+        employeeIds: util.array,
+        end: z.string().optional(),
         intent: z.literal("schedule").optional(),
         start: z.string().optional(),
-        end: z.string().optional(),
-        employeeIds: util.array,
       }),
     ])
     .and(
@@ -49,48 +91,6 @@ export const PluginStateSchema = z.object({
       }),
     )
     .default({}),
-  customer: CustomerFormSchema.optional(),
-  questions: form.questionnaire,
-  fileUploads: z
-    .record(
-      z.object({ fileName: z.string(), answerId: z.string(), uploadUrl: z.string().nullable() }),
-    )
-    .optional(),
-  /** The selected geolocation of the user */
-  location: LocationSchema.default({}),
-
-  // resolved values used for SRS
-  employees: z.string().array().optional(),
-  leadSegmentId: z.string().optional(),
-  listingId: z.string().optional(),
-  meetingTypes: MeetingTypeSchema.array().optional(),
-  offices: z.string().array().optional(),
-  subjectGroups: z.string().array().optional(),
-  subjects: z.string().array().optional(),
-  schedulable: z.boolean().default(true),
-  /** Marking certain steps as (automatically) skipped or not. */
-  skipped: z
-    .object({
-      subject: z.literal(true).optional(),
-      office: z.literal(true).optional(),
-      meetingType: z.literal(true).optional(),
-      employee: z.literal(true).optional(),
-      questions: z.literal(true).optional(),
-    })
-    .default({}),
-  errors: z
-    .object({
-      /**
-       * Each step can have errors, in case of the timetable this currently only happens when
-       * a slot is booked by another customer between selecting the slot, and confirming the appointment
-       * (request).
-       */
-      timetable: z.literal(true).optional(),
-    })
-    .default({}),
   /** Warnings that should be logged to the console */
   warning: z.string().optional(),
-
-  /**  This object is the validated version `PluginConfiguration.current.ts` */
-  config: PluginConfigurationSchema,
 });