@pexip-engage-public/plugin 1.0.16 → 1.0.18

package/src/configuration-parser/js-parser.ts

@@ -1,62 +1,180 @@
+import type { MeetingType } from "@pexip-engage-public/graphql";
+
 import type { PluginConfiguration } from "../configuration/PluginConfiguration.current.js";
-import { isValidConfiguration } from "../configuration-parser-legacy/utils.js";
 import { logger } from "../logger.js";
 
+function isValidConfiguration(configuration: unknown): configuration is object {
+  return typeof configuration === "object" && configuration !== null;
+}
+
 export const jsParser = {
   encode(config: PluginConfiguration): JSConfig {
-    //@ts-ignore
-    const result: JSConfig["config"] = {};
-
-    for (let key in config) {
-      const value = (config as any)[key];
-      const keys = key.split("-");
-
-      //@ts-ignore
-      setValue(result, keys, value);
-    }
+    const result: JSConfig["config"] = {
+      version: config.version,
+      flow: config.flow,
+      intent: config.intent as any,
+      language: config.language as any,
+      employee: {
+        ids: config["employee-ids"],
+        type: config["employee-type"] as any,
+      },
+      application: {
+        scroll: config["application-scroll"] as any,
+        timeZoneSelection: config["application-time_zone_selection"] as any,
+        // timetable_ui: config["application-timetable_ui"],
+        theme: config["application-theme"],
+      },
+      customer: {
+        company: config["customer-company"],
+        customerNumber: config["customer-customer_number"],
+        email: config["customer-email"],
+        existing: config["customer-existing"],
+        externalId: config["customer-external_id"],
+        firstName: config["customer-first_name"],
+        id: config["customer-id"],
+        language: config["customer-language"],
+        lastName: config["customer-last_name"],
+        location: {
+          city: config["customer-location-city"],
+          countryCode: config["customer-location-country_code"],
+          geolocation: {
+            latitude: config["customer-location-geolocation-latitude"] as any,
+            longitude: config["customer-location-geolocation-longitude"] as any,
+          },
+          postalCode: config["customer-location-postal_code"],
+          timeZone: config["customer-location-time_zone"],
+          state: config["customer-location-state"],
+          street1: config["customer-location-street1"],
+          street2: config["customer-location-street2"],
+        },
+        phoneNumber: config["customer-phone_number"],
+        timeZone: config["customer-time_zone"],
+      },
+      leadSegment: {
+        id: config["lead_segment-id"],
+        type: config["lead_segment-type"] as any,
+      },
+      listing: {
+        id: config["listing-id"],
+        type: config["listing-type"] as any,
+      },
+      location: {
+        formattedAddress: config["location-formatted_address"],
+      },
+      meetingTypes: config["meeting_types"] as any,
+      oauth: {
+        resourceCode: config["oauth-resource_code"],
+      },
+      office: {
+        ids: config["office-ids"],
+        type: config["office-type"] as any,
+      },
+      searchCountries: config["search_countries"],
+      session: {
+        id: config["session-id"],
+        sourceTags: config["session-source_tags"],
+        status: config["session-status"] as any,
+      },
+      subject: {
+        ids: config["subject-ids"],
+        type: config["subject-type"] as any,
+      },
+      subjectGroup: {
+        ids: config["subject_group-ids"],
+        type: config["subject_group-type"] as any,
+      },
+    };
 
-    return { config: result };
+    return { config: prune(result) };
   },
-  decode(jsConfig?: unknown): PluginConfiguration {
-    if (!jsConfig) return {};
+  decode(jsConfig?: unknown): PluginConfiguration | null {
+    if (!jsConfig) return null;
 
     try {
       if (!isValidConfiguration(jsConfig))
         throw new Error("Invalid configuration passed, expected an object.");
 
       if (jsConfig && "config" in jsConfig && isValidConfiguration(jsConfig.config)) {
-        return objectToDashConfig(jsConfig.config) as unknown as PluginConfiguration;
+        const config = jsConfig.config as NonNullable<JSConfig["config"]>;
+
+        const result: PluginConfiguration = {
+          version: config.version,
+          flow: config.flow,
+          intent: config.intent,
+          language: config.language,
+          "employee-ids": config.employee?.ids,
+          "employee-type": config.employee?.type,
+          "application-scroll": config.application?.scroll,
+          "application-time_zone_selection": config.application?.timeZoneSelection,
+          // "application-timetable_ui": config.application?.timetableUI,
+          "application-theme": config.application?.theme,
+          "customer-company": config.customer?.company,
+          "customer-customer_number": config.customer?.customerNumber,
+          "customer-email": config.customer?.email,
+          "customer-existing": config.customer?.existing,
+          "customer-external_id": config.customer?.externalId,
+          "customer-first_name": config.customer?.firstName,
+          "customer-id": config.customer?.id,
+          "customer-language": config.customer?.language,
+          "customer-last_name": config.customer?.lastName,
+          "customer-location-city": config.customer?.location?.city,
+          "customer-location-country_code": config.customer?.location?.countryCode,
+          "customer-location-geolocation-latitude":
+            config.customer?.location?.geolocation?.latitude,
+          "customer-location-geolocation-longitude":
+            config.customer?.location?.geolocation?.longitude,
+          "customer-location-postal_code": config.customer?.location?.postalCode,
+          "customer-location-time_zone": config.customer?.location?.timeZone,
+          "customer-location-state": config.customer?.location?.state,
+          "customer-location-street1": config.customer?.location?.street1,
+          "customer-location-street2": config.customer?.location?.street2,
+          "customer-phone_number": config.customer?.phoneNumber,
+          "customer-time_zone": config.customer?.timeZone,
+          "lead_segment-id": config.leadSegment?.id,
+          "lead_segment-type": config.leadSegment?.type,
+          "listing-id": config.listing?.id,
+          "listing-type": config.listing?.type,
+          "location-formatted_address": config.location?.formattedAddress,
+          meeting_types: config.meetingTypes,
+          "oauth-resource_code": config.oauth?.resourceCode,
+          "office-ids": config.office?.ids,
+          "office-type": config.office?.type,
+          search_countries: config.searchCountries,
+          "session-id": config.session?.id,
+          "session-source_tags": config.session?.sourceTags,
+          "session-status": config.session?.status,
+          "subject-ids": config.subject?.ids,
+          "subject-type": config.subject?.type,
+          "subject_group-ids": config.subjectGroup?.ids,
+          "subject_group-type": config.subjectGroup?.type,
+        };
+
+        return prune(result);
       } else {
-        return {};
+        return null;
       }
     } catch (err) {
       logger.error("Failed to parse JS config:", jsConfig);
       logger.error("JS ERROR:", err);
 
-      return {};
+      return null;
     }
   },
 };
 
-function objectToDashConfig(
-  inputObject: Record<any, any>,
-  current?: string,
-  result: Record<any, any> = {},
-) {
-  for (let key in inputObject) {
-    let value = inputObject[key];
-    let newKey = current ? `${current}-${key}` : key;
+function prune<T>(obj: T): T {
+  for (let key in obj) {
+    const value = obj[key];
 
-    if (Array.isArray(value)) {
-      result[newKey] = value;
-    } else if (value && typeof value === "object") {
-      objectToDashConfig(value, newKey, result);
-    } else {
-      result[newKey] = value;
+    if (value === null || value === undefined) {
+      delete obj[key];
+    } else if (typeof value === "object") {
+      prune(value);
+      if (Object.keys(value).length === 0) delete obj[key];
     }
   }
 
-  return result;
+  return obj;
 }
 
 type StringConfig = string | null;
@@ -65,91 +183,149 @@ type BooleanConfig = StringConfig | boolean;
 
 export interface JSConfig {
   config?: {
-    version: "1.0.0";
+    version?: "1.0.0";
+    /**
+     * A sequence of characters that indicates the order of steps to be shown. The following characters are supported:
+     * - `S`: Subject. The step that allows the customer to pick a subject.
+     * - `O`: Office. The step that allows the customer to pick an office.
+     * - `M`: Meeting type. The step that allows the customer to pick a meeting type.
+     * - `E`: Employee. The step that allows the customer to pick an employee.
+     * - `T`: Timetable. The step that allows the customer to suggest one or more time slots for their appointment.
+     * - `Q`: Questions. The step that allows the customer to answer any addition questions specific to the chosen subject.
+     * - `C`: Customer. The step that allows the customer to provide his/her contact information.
+     * - `*`: [locked]. Indicate that the step is locked and can not be edited. This means that a value must be provided.
+     *
+     * Currently, the following constraints must always be met:
+     * - The following characters must always be present: `T`, `Q`, `C`.
+     * - No other characters than those listed above may be used.
+     * - When `S` is not present, it is mandatory that an external mechanism will provide the `config.subject.id` + `config.subject.type` configuration option instead.
+     * - When `O` is not present, it is mandatory that an external mechanism will provide the `config.office.id` + `config.office.type`configuration option instead.
+     * - If `S` or `O` are present, they can never occur at a position after `T`.
+     * - If `S` is present, it can never occur at a position after `Q`.
+     *
+     * By default the value `SMOTQC` will be assumed. This will be the case if no value was provided or if the provided value fails these constraints.
+     * @default "SMOTQC"
+     */
     flow?: StringConfig;
-    intent?: StringConfig;
-    language?: StringConfig;
+    intent?:
+      | "schedule"
+      | "reschedule"
+      | "invite"
+      | "edit"
+      | "cancel"
+      | "complete"
+      | "reject"
+      | null;
+    /**
+     * An RFC 5646-compatible language tag.
+     *
+     * This will cause the plugin to be displayed in the specified language, unless the language is unavailable.
+     *
+     * In that case, a best-effort fallback will be performed with increasingly more generic variants of the specified language or finally 'en' if no variants of the specified language are available.
+     */
+    language?:
+      | "da"
+      | "de"
+      | "el"
+      | "en"
+      | "en-GB"
+      | "en-US"
+      | "es"
+      | "fr"
+      | "no"
+      | "nl"
+      | "pl"
+      | null;
     employee?: {
       ids?: StringArrayConfig;
-      type?: StringConfig;
+      type?: "id" | "externalId" | null;
     };
     application?: {
+      /**
+       * Used to set scroll top value when navigating steps
+       * @default -90
+       */
       scroll?: "disabled" | number | null;
-      timezoneSelection?: StringConfig;
+      /**
+       * Used to enable timezone selection when the meeting type is video or phone.
+       * @default "enable"
+       */
+      timeZoneSelection?: "enable" | "disable" | null;
+      // /**
+      //  * Used to decide wether to show month of week timetable view
+      //  * @experimental
+      //  * @default "week"
+      //  */
+      // timetableUI?: "week" | "month" | null;
       theme?: string | null;
     };
     customer?: {
       // TODO camelcase?
       company?: StringConfig;
-      customer_number?: StringConfig;
-      date_of_birth?: StringConfig;
+      customerNumber?: StringConfig;
       email?: StringConfig;
-      external_id?: StringConfig;
-      first_name?: StringConfig;
-      gender?: StringConfig;
+      existing?: BooleanConfig;
+      externalId?: StringConfig;
+      firstName?: StringConfig;
       id?: StringConfig;
-      is_existing?: BooleanConfig;
       language?: StringConfig;
-      last_name?: StringConfig;
+      lastName?: StringConfig;
       location?: {
         city?: StringConfig;
-        country?: StringConfig;
-        geolocation?: StringConfig;
-        postal_code?: StringConfig;
+        countryCode?: StringConfig;
+        geolocation?: {
+          latitude: StringConfig;
+          longitude: StringConfig;
+        };
+        postalCode?: StringConfig;
+        timeZone?: StringConfig;
         state?: StringConfig;
-        street_1?: StringConfig;
+        street1?: StringConfig;
+        street2?: StringConfig;
       };
-      phone_number?: StringConfig;
-      preferred_contact_id?: StringConfig;
-      preferred_office_id?: StringConfig;
-      timezone?: StringConfig;
+      phoneNumber?: StringConfig;
+      timeZone?: StringConfig;
     };
     leadSegment?: {
       id?: StringConfig;
-      type?: StringConfig;
+      type?: "id" | "code" | null;
     };
     listing?: {
       id?: StringConfig;
-      type?: StringConfig;
+      type?: "id" | "externalId" | null;
     };
     location?: {
-      initialSearch?: StringConfig;
+      formattedAddress?: StringConfig;
     };
-    meetingTypes?: StringArrayConfig;
+    meetingTypes?: MeetingType[] | MeetingType | null;
     oauth?: {
+      /** A resource_code of an existing appointment. This will allow you to complete or change an appointment. This parameter is mostly used by redirects from external sources (e.g. e-mails) and should usually not be provided manually. */
       resourceCode?: StringConfig;
     };
     office?: {
       ids?: StringArrayConfig;
-      type?: StringConfig;
+      type?: "id" | "externalId" | null;
     };
+    /**
+     * The country that should be used for searching locations. Should be a two letter ISO 3166-1 country code.
+     *
+     * You can provide a maximum of 5 comma-separated countries.
+     */
     searchCountries?: StringArrayConfig;
     session?: {
       id?: StringConfig;
+      /** Pass source tags seperated with a semi-colon. */
       sourceTags?: StringArrayConfig;
-      status?: StringConfig;
+      /** Used to enable/disable tracking of events in the plugin for insights about conversion. @default "default" */
+      status?: "default" | "disabled" | null;
     };
     subject?: {
       ids?: StringArrayConfig;
-      type?: StringConfig;
+      type?: "id" | "externalId" | null;
     };
-    timetable?: {
-      startDate?: StringConfig;
+    subjectGroup?: {
+      ids?: StringArrayConfig;
+      type?: "id" | "externalId" | null;
     };
   };
 }
-
-function setValue(target: Record<string, any>, keys: string[], value: unknown) {
-  let targetObj = target;
-  const [lastKey] = keys.splice(-1, 1);
-
-  for (const key of keys) {
-    if (!targetObj[key]) {
-      targetObj[key] = {};
-    }
-    targetObj = targetObj[key];
-  }
-
-  //@ts-expect-error
-  targetObj[lastKey] = value;
-}

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

@@ -0,0 +1,95 @@
+import { migrateConfiguration } from "../configuration/migration.js";
+import type { PluginConfiguration } from "../configuration/PluginConfiguration.current.js";
+import { parsePluginConfigurationV1 } from "../configuration-parser-legacy/Parser.js";
+import { logger } from "../logger.js";
+
+import { hashParser } from "./hash-parser.js";
+import { htmlParser } from "./html-parser.js";
+import { CONFIG_VERSION, type ConfigurationProps } from "./index.js";
+import { type JSConfig, jsParser } from "./js-parser.js";
+
+const parser = { js: jsParser, hash: hashParser, html: htmlParser };
+
+export function migrateLegacyConfiguration(args: ConfigurationProps) {
+  const v1Config = parsePluginConfigurationV1({
+    element: args.element,
+    hash: args.hash,
+    href: args.browser.href,
+    browserTimeZone: args.browser.timeZone,
+    options: args.options,
+  });
+
+  return createMigration(v1Config);
+}
+
+function createMigration(result: ReturnType<typeof parsePluginConfigurationV1>): {
+  migrationInstructions: {
+    dom: string | null;
+    hash: string | null;
+    js: JSConfig | null;
+  };
+  config: PluginConfiguration;
+  domConfig: PluginConfiguration | null;
+  hashConfig: PluginConfiguration | null;
+  jsConfig: PluginConfiguration | null;
+} {
+  const data = {
+    config: migrateConfiguration(result.config) ?? { version: CONFIG_VERSION },
+    domConfig: migrateConfiguration(result.domConfig),
+    hashConfig: migrateConfiguration(result.hashConfig),
+    jsConfig: migrateConfiguration(result.jsConfig),
+  };
+
+  const migrationInstructions = {
+    dom: data.domConfig
+      ? `<div class="pexip-engage-plugin"\n  ${parser.html
+          .encode(data.domConfig)
+          .join("\n  ")}\n></div>`
+      : null,
+    hash: data.hashConfig ? parser.hash.encode(data.hashConfig) : null,
+    js: data.jsConfig ? parser.js.encode(data.jsConfig) : null,
+  };
+
+  logDeprecationWarning(migrationInstructions);
+
+  return {
+    ...data,
+    migrationInstructions,
+  };
+}
+
+function logDeprecationWarning({
+  dom,
+  hash,
+  js,
+}: {
+  dom: string | null;
+  js: JSConfig | null;
+  hash: string | null;
+}) {
+  if (dom || hash || js) {
+    logger.group("DEPRECATED CONFIGURATION");
+
+    if (dom) {
+      try {
+        logger.warn(
+          "Detected unsupported DOM config. Please update your DOM element to:\n",
+          dom.replaceAll("\n ", ""),
+        );
+      } catch (err) {}
+    }
+
+    if (hash) {
+      logger.warn("Detected deprecated hash config. Please update your hash to:\n%o", hash);
+    }
+
+    if (js) {
+      logger.warn(
+        "Detected deprecated JS config. Please update your JS to:\n%o",
+        `PexipEngage.Plugin(element, ${JSON.stringify(js)})`,
+      );
+    }
+
+    logger.groupEnd();
+  }
+}

package/src/configuration-parser-legacy/LegacyParser.utils.ts

@@ -1,9 +1,15 @@
 import type { PluginConfigurationV0 } from "../configuration/PluginConfiguration.v0.ts";
-import { DEPRECATED_TOKEN, TOKEN } from "../constants.js";
+import { TOKEN } from "../constants.js";
 
 import type { LegacyPluginHashConfiguration } from "./LegacyParser.js";
 import { sanitize } from "./utils.js";
 
+const DEPRECATED_TOKEN = {
+  LOCK: "#",
+  OFFICE: "L",
+  START: "'",
+} as const;
+
 export function legacyHashToPluginInputConfiguration(
   config: LegacyPluginHashConfiguration,
 ): PluginConfigurationV0 {

package/src/constants.ts

@@ -1,11 +1,5 @@
 import type { Language } from "@pexip-engage-public/graphql";
 
-export const DEPRECATED_TOKEN = {
-  LOCK: "#",
-  OFFICE: "L",
-  START: "'",
-} as const;
-
 export const TOKEN = {
   EMPLOYEE: "E",
   CUSTOMER: "C",

package/src/encoding.ts

@@ -26,7 +26,7 @@ export function decodeURIParameters<T>(str: string): T {
 
 const CONFIGURATION_SEARCH_PARAM_KEY = "configuration.pexip";
 
-export const pluginParams = {
+export const pluginSearchParams = {
   encode(config: PluginConfiguration): URLSearchParams {
     const searchParams = new URLSearchParams();
     searchParams.set(CONFIGURATION_SEARCH_PARAM_KEY, encodeURIParameters(config));

package/src/events/event-types.ts

@@ -26,15 +26,7 @@ export interface StepShownMessage {
       | "meeting-type";
     subject?: { id: string; title?: string };
     office?: { id: string; title?: string };
-    meetingType?:
-      | "video"
-      | "phone"
-      | "on_location"
-      | "office"
-      | "VIDEO"
-      | "PHONE"
-      | "ON_LOCATION"
-      | "OFFICE";
+    meetingType?: "VIDEO" | "PHONE" | "ON_LOCATION" | "OFFICE";
     employee?: { id: string; firstName?: string | null; lastName?: string | null };
   };
 }