@pexip-engage-public/plugin-react 0.0.7 → 1.0.3

package/src/SkedifyPlugin.tsx

@@ -1,35 +0,0 @@
-// TODO: Use `import React` always! (CRA4 support) Undo these changes when we drop CRA 4 support
-import React from "react";
-
-import { SkedifyPluginContextProps } from "./SkedifyPluginContext";
-import { usePluginConfiguration } from "./usePluginOptions";
-import { useSkedifyPlugin } from "./useSkedifyPlugin";
-
-interface SkedifyPluginProps
-  extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
-  configuration: SkedifyPluginContextProps;
-}
-
-export function SkedifyPlugin({ configuration, ...props }: SkedifyPluginProps) {
-  const { Plugin } = useSkedifyPlugin(configuration?.scriptSrc);
-  const options = usePluginConfiguration(configuration);
-  const containerRef = React.useRef<HTMLDivElement>(null);
-
-  React.useEffect(() => {
-    if (Plugin && containerRef.current) {
-      // plugin initialized
-      const instance = new Plugin(containerRef.current, options);
-
-      return () => instance.dispose();
-    }
-  }, [Plugin, options]);
-
-  const className = React.useMemo(() => {
-    const preInitClassName = props.className?.replace("skedify-plugin", "").trim();
-    const postInitClassName = `${preInitClassName ?? ""} skedify-plugin`.trim();
-
-    return Plugin ? postInitClassName : preInitClassName;
-  }, [Plugin, props.className]);
-
-  return <div {...props} className={className} ref={containerRef} />;
-}

package/src/SkedifyPluginContext.ts

@@ -1,16 +0,0 @@
-// TODO: Use `import React` always! (CRA4 support) Undo these changes when we drop CRA 4 support
-import React from "react";
-
-import type { SkedifyPluginConfiguration } from "./types";
-
-export interface SkedifyPluginContextProps extends SkedifyPluginConfiguration {
-  /**
-   * The plugin entry point URL.
-   * eg: `https://plugin.skedify.io/{ENTERPRISE_NAME}/skedify-plugin.js`
-   */
-  scriptSrc?: string;
-}
-
-export const SkedifyPluginContext = React.createContext<SkedifyPluginContextProps>({});
-
-export const SkedifyPluginProvider = SkedifyPluginContext.Provider;

package/src/types.ts

@@ -1,296 +0,0 @@
-export interface SkedifyPluginInstance {
-  dispose(): void;
-  addEventListener(pluginEventType: string, callback: () => unknown): void;
-  readonly intention: unknown;
-  readonly customer: {
-    company?: string;
-    customer_number?: string;
-    email?: string;
-    external_id?: string;
-    first_name?: string;
-    is_existing?: string;
-    language?: string;
-    last_name?: string;
-    location?: string;
-    phone_number?: string;
-    timezone?: string;
-  };
-
-  readonly appointment: {
-    readonly id?: string;
-    readonly location: {
-      readonly id?: string;
-    };
-    readonly meeting_type: unknown;
-    readonly subject: {
-      readonly id?: string;
-      readonly category_id?: string;
-    };
-
-    readonly meta: {
-      get(key: string, defaultValue: unknown): unknown;
-      set(key: string, value: unknown): unknown;
-      remove(key: string): unknown;
-    };
-  };
-}
-
-export interface SkedifyPluginConfiguration {
-  oauth?: {
-    /**
-     * Required
-     *
-     * The client-ID of the plugin. This ID is provided to you by your Skedify contact.
-     */
-    client?: string;
-    /**
-     * The bearer token used by the plugin. This token represents the contact.
-     */
-    token?: string;
-    /**
-     * 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.
-     */
-    resource_code?: string;
-  };
-  /**
-   * This parameter is used for tracking events inside the plugin.
-   */
-  session?: {
-    /**
-     * Used to enable/disable tracking of events in the plugin for insights about conversion.
-     *
-     * Possible values are:
-     * - default (enabled)
-     * - disabled
-     */
-    status?: "default" | "disabled";
-    /**
-     * Pass your own custom session ID.
-     */
-    id?: string;
-    /**
-     * Pass source tags seperated with a semi-colon.
-     */
-    source_tags?: string;
-  };
-  /**
-   * This parameter is used for prefilling the customer
-   */
-  customer?: {
-    /**
-     * Default timezone to be used for the customer, this overwrites the guess that is being done as to what timezone the customer should be in.
-     */
-    timezone?: string;
-    /**
-     * This prefills the first name in the contact information of the customer.
-     */
-    first_name?: string;
-    /**
-     * This prefills the last name in the contact information of the customer.
-     */
-    last_name?: string;
-    /**
-     * This prefills the email in the contact information of the customer.
-     */
-    email?: string;
-    /**
-     * This prefills the phone number in the contact information of the customer.
-     */
-    phone_number?: string;
-    /**
-     * This prefills the customer number in the contact information of the customer.
-     */
-    customer_number?: string;
-  };
-  appointment?: {
-    /**
-     * A (Skedify-internal) subject-ID. This allows a subject to be preselected. This option is ignored when oauth.resource_code is provided. This parameter can not be used together with the external_subject_id parameter.
-     */
-    subject_id?: string;
-    /**
-     * A (Skedify-internal) office-/office-ID. This allows an office to be preselected. This option is ignored when oauth.resource_code is provided. This parameter can not be used together with the external_office_id parameter.
-     */
-    office_id?: string;
-    /**
-     * Only available when your enterprise is using Skedify’s listings functionality. A Listing ID. This allows to filter subjects on a Listing. This option is ignored when oauth.resource_code is provided. This parameter can not be used together with the external_listing_id parameter.
-     */
-    listing_id?: string;
-  };
-  /**
-   * A subject-ID. This allows a subject to be preselected. This option is ignored when oauth.resource_code is provided. This parameter can not be used together with the appointment.subject_id parameter.
-   */
-  external_subject_id?: string;
-  /**
-   * An office-/office-ID. This allows an office to be preselected. This option is ignored when oauth.resource_code is provided. This parameter can not be used together with the appointment.office_id parameter.
-   */
-  external_office_id?: string;
-  /**
-   * Only available when your enterprise is using Skedify’s listings functionality. A Listing ID. This allows to filter subjects on a Listing. This option is ignored when oauth.resource_code is provided. This parameter can not be used together with the appointment.subject_id parameter.
-   */
-  external_listing_id?: string;
-  /**
-   * A Lead Segment Code. This allows a subject to be preselected matching the lead segment code.
-   */
-  lead_segment_code?: string;
-
-  hints?: {
-    /**
-     * The suspected intent of the customer. Possible values are schedule, reschedule, invite, edit, cancel. This parameter is mostly used by redirects from external sources (e.g. e-mails) and should usually not be provided manually.
-     */
-    intent?: "schedule" | "reschedule" | "invite" | "edit" | "cancel";
-    /**
-     * A space-separated list of (Skedify-internal) contact-IDs. This makes the plugin favor choice options that are associated with at least one of the provided contacts.
-     */
-    contacts?: string;
-    /**
-     * A space-separated list of (external) employee-IDs. This makes the plugin favor choice options that are associated with at least one of the provided external IDs.
-     */
-    external_employee_ids?: string;
-  };
-  /**
-   * 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?: string;
-  /**
-   * Possible values are office, phone, video, on_location.
-   */
-  meeting_types?: string;
-
-  application?: {
-    /**
-     * Used to change the scrolling behaviour inside the plugin. Currently only possible to disable the initial scrolling when the plugin loads. Possible values: disable_initial_scroll_on_schedule, default.
-     */
-    scroll?: "disable_initial_scroll_on_schedule" | "default";
-
-    /**
-     * Used to enable timezone selection when the meeting type is video or phone. Possible values: enable_timezone_selection, disable_timezone_selection. The default is disable_timezone_selection.
-     */
-    timezone_selection?: "enable_timezone_selection" | "disable_timezone_selection";
-  };
-
-  /**
-   * This parameter is used for prefilling the location search step, so that offices are already scoped to this location. When location is passed, both geolocation & formatted_address are required.
-   */
-  location?: {
-    /**
-     * The textual representation of the location.
-     */
-    formatted_address: string;
-    /**
-     * Latitude & longitude in the following format lat;lng
-     */
-    geolocation: string;
-    /**
-     * Textual representation of the city.
-     */
-    city?: string;
-    /**
-     * Textual representation of the country code (for example: BE).
-     */
-    country?: string;
-    /**
-     * Textual representation of the postal code.
-     */
-    postal_code?: string;
-    /**
-     * Textual representation of the state.
-     */
-    state?: string;
-    /**
-     * Textual representation of the street name & number.
-     */
-    street_1?: string;
-  };
-
-  search?: {
-    /**
-     * 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.
-     */
-    country?: string;
-  };
-  /**
-   * 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.
-   * - `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.
-   * - `'`: [start]. Indicate the first step that should be shown is the first one following this character.
-   * - `#`: [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 `appointment.subject_id` or `external_subject_id` configuration option instead.
-   * - When `O` is not present, it is mandatory that an external mechanism will provide the `appointment.office_id` or `external_office_id` 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`.
-   * - If the start character ( `'`) is present, it can never occur at a position after `T`. If the start character is ommitted, it will be assumed that the first character also specifies the first step to be shown.
-   *
-   * By default the value `'SOTQC` will be assumed. This will be the case if no value was provided or if the provided value fails these constraints.
-   */
-  flow?: string;
-  intent?: string;
-  google?: {
-    maps?: {
-      api?: {
-        key?: string;
-      };
-    };
-  };
-}
-
-export interface SkedifyPluginContructor {
-  new (element: HTMLElement, options?: SkedifyPluginConfiguration): SkedifyPluginInstance;
-  version: {
-    value: string;
-  };
-  build: {
-    value: string;
-  };
-  getInstance(num: number): SkedifyPluginInstance | undefined;
-  count: number;
-
-  addLocale: {
-    value: (name: string, locale: {}) => void;
-  };
-
-  EVENT_APPOINTMENT_CANCELLED: string;
-  EVENT_APPOINTMENT_COMPLETED: string;
-  EVENT_APPOINTMENT_CREATED: string;
-  EVENT_APPOINTMENT_EDITED: string;
-  EVENT_CREATION: string;
-  EVENT_ERROR: string;
-  EVENT_INIT: string;
-  EVENT_LOADED: string;
-  EVENT_MISCONFIGURED: string;
-  MISCONFIGURED_CLIENT_ID: string;
-  MISCONFIGURED_CONTACT_HINTS: string;
-  MISCONFIGURED_GEOLOCATION: string;
-  MISCONFIGURED_INTENT_WITHOUT_RESOURCE_CODE: string;
-  MISCONFIGURED_LISTING_ID: string;
-  MISCONFIGURED_OFFICE_ID: string;
-  MISCONFIGURED_RESOURCE_CODE: string;
-  MISCONFIGURED_SUBJECT_ID: string;
-  MISCONFIGURED_TIMEZONE: string;
-  ERROR_API_DOWN: string;
-  ERROR_RECAPTCHA_SCRIPT_LOAD: string;
-  ERROR_SUB_DATE_INTERPOLATION: string;
-  ERROR_TRANSLATION: string;
-  INTENT_CANCEL: string;
-  INTENT_EDIT: string;
-  INTENT_INVITE: string;
-  INTENT_RESCHEDULE: string;
-  INTENT_SCHEDULE: string;
-}
-
-export interface SkedifyWindow {
-  Plugin?: SkedifyPluginContructor;
-}
-
-declare global {
-  interface Window {
-    Skedify?: SkedifyWindow;
-  }
-}

package/src/useSkedifyPlugin.ts

@@ -1,66 +0,0 @@
-// TODO: Use `import React` always! (CRA4 support) Undo these changes when we drop CRA 4 support
-import React from "react";
-
-import { SkedifyPluginContext } from "./SkedifyPluginContext";
-import type { SkedifyPluginContructor } from "./types";
-
-export function useSkedifyPlugin(scriptSrc?: string, scriptId?: string) {
-  const ctx = React.useContext(SkedifyPluginContext);
-  const [pluginInstance, setPlugin] = React.useState<{ Plugin: SkedifyPluginContructor | null }>({
-    Plugin: null,
-  });
-
-  const src = scriptSrc ?? ctx.scriptSrc;
-
-  React.useEffect(() => {
-    if (!src) {
-      console.warn(
-        "No scriptSrc was provided to SkedifyPluginProvider, or as prop to <SkedifyPlugin />, skipping plugin initialization..."
-      );
-
-      return;
-    }
-
-    if (window && document) {
-      const id = scriptId ?? src;
-      // only load entry code once
-      if (!document.getElementById(id)) {
-        const script = document.createElement("script");
-        script.src = src;
-        script.async = true;
-        script.defer = true;
-        script.id = id;
-        window.document.body.appendChild(script);
-      }
-
-      if (window.Skedify && window.Skedify.Plugin) {
-        // If Skedify.Plugin is already available, use that instance.
-        setPlugin({ Plugin: window.Skedify.Plugin });
-      } else {
-        // TODO: temp polling code until we restore EVENT_INIT support
-        const intervalId = window.setInterval(() => {
-          if (window.Skedify && window.Skedify.Plugin) {
-            window.clearInterval(intervalId);
-            setPlugin({ Plugin: window.Skedify.Plugin });
-          }
-        }, 200);
-
-        // document.addEventListener("SkedifyPluginEvent", function (event) {
-        //   console.log(event);
-        //   // every event will have a `event.detail.type` attribute, so different events can be distinguished.
-        //   if (
-        //     event.detail.type === window.Skedify.Plugin.EVENT_INIT ||
-        //     event.detail.type === window.Skedify.Plugin.EVENT_CREATION
-        //   ) {
-        //     console.log("Skedify.Plugin available");
-        //     cb(window.Skedify.Plugin);
-        //   }
-        // });
-
-        return () => window.clearInterval(intervalId);
-      }
-    }
-  }, [src, scriptId]);
-
-  return pluginInstance;
-}

package/typings/SkedifyPlugin.d.ts

@@ -1,8 +0,0 @@
-import React from "react";
-import { SkedifyPluginContextProps } from "./SkedifyPluginContext";
-interface SkedifyPluginProps extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
-    configuration: SkedifyPluginContextProps;
-}
-export declare function SkedifyPlugin({ configuration, ...props }: SkedifyPluginProps): JSX.Element;
-export {};
-//# sourceMappingURL=SkedifyPlugin.d.ts.map

package/typings/SkedifyPlugin.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"SkedifyPlugin.d.ts","sourceRoot":"","sources":["../src/SkedifyPlugin.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,yBAAyB,EAAE,MAAM,wBAAwB,CAAC;AAInE,UAAU,kBACR,SAAQ,KAAK,CAAC,iBAAiB,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,cAAc,CAAC;IACrF,aAAa,EAAE,yBAAyB,CAAC;CAC1C;AAED,wBAAgB,aAAa,CAAC,EAAE,aAAa,EAAE,GAAG,KAAK,EAAE,EAAE,kBAAkB,eAsB5E"}

package/typings/SkedifyPluginContext.d.ts

@@ -1,12 +0,0 @@
-import React from "react";
-import type { SkedifyPluginConfiguration } from "./types";
-export interface SkedifyPluginContextProps extends SkedifyPluginConfiguration {
-    /**
-     * The plugin entry point URL.
-     * eg: `https://plugin.skedify.io/{ENTERPRISE_NAME}/skedify-plugin.js`
-     */
-    scriptSrc?: string;
-}
-export declare const SkedifyPluginContext: React.Context<SkedifyPluginContextProps>;
-export declare const SkedifyPluginProvider: React.Provider<SkedifyPluginContextProps>;
-//# sourceMappingURL=SkedifyPluginContext.d.ts.map

package/typings/SkedifyPluginContext.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"SkedifyPluginContext.d.ts","sourceRoot":"","sources":["../src/SkedifyPluginContext.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,SAAS,CAAC;AAE1D,MAAM,WAAW,yBAA0B,SAAQ,0BAA0B;IAC3E;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,oBAAoB,0CAAqD,CAAC;AAEvF,eAAO,MAAM,qBAAqB,2CAAgC,CAAC"}