workwonders-sdk 0.0.1

package/src/types/changelogSummaryDto.ts

@@ -0,0 +1,24 @@
+/**
+ * Generated by orval v7.11.2 🍺
+ * Do not edit manually.
+ * Work Wonders API
+ * OpenAPI spec version: 1.0
+ */
+import type { ChangelogSummaryDtoShowMode } from "./changelogSummaryDtoShowMode";
+import type { ChangelogContextConditionsDto } from "./changelogContextConditionsDto";
+
+export interface ChangelogSummaryDto {
+  showMode: ChangelogSummaryDtoShowMode;
+  /** The ID of the changelog */
+  id: number;
+  /** The date and time the changelog was created */
+  createdAt: string;
+  /** The date and time the changelog was updated */
+  updatedAt: string;
+  /** The changelog translations */
+  availableLanguages: string[];
+  /** @nullable */
+  publishedAt: string | null;
+  contextConditions: ChangelogContextConditionsDto;
+}
+

package/src/types/changelogSummaryDtoShowMode.ts

@@ -0,0 +1,15 @@
+/**
+ * Generated by orval v7.11.2 🍺
+ * Do not edit manually.
+ * Work Wonders API
+ * OpenAPI spec version: 1.0
+ */
+
+export type ChangelogSummaryDtoShowMode =
+  (typeof ChangelogSummaryDtoShowMode)[keyof typeof ChangelogSummaryDtoShowMode];
+
+// eslint-disable-next-line @typescript-eslint/no-redeclare
+export const ChangelogSummaryDtoShowMode = {
+  Regular: 'Regular',
+  ContextBased: 'ContextBased',
+} as const;

package/src/types/organizationChangelogConfigDto.ts

@@ -0,0 +1,12 @@
+/**
+ * Generated by orval v7.11.2 🍺
+ * Do not edit manually.
+ * Work Wonders API
+ * OpenAPI spec version: 1.0
+ */
+
+export interface OrganizationChangelogConfigDto {
+  disableCollaboration: boolean;
+  showLatestChangelogOnFirstVisit: boolean;
+}
+

package/src/types/organizationDto.ts

@@ -0,0 +1,56 @@
+/**
+ * Generated by orval v7.11.2 🍺
+ * Do not edit manually.
+ * Work Wonders API
+ * OpenAPI spec version: 1.0
+ */
+import type { OrganizationDtoAccessLevel } from "./organizationDtoAccessLevel";
+import type { OrganizationDtoRole } from "./organizationDtoRole";
+import type { OrganizationDtoTheme } from "./organizationDtoTheme";
+import type { OrganizationDtoEnabledModulesItem } from "./organizationDtoEnabledModulesItem";
+import type { OrganizationChangelogConfigDto } from "./organizationChangelogConfigDto";
+import type { OrganizationFeedbackPostConfigDto } from "./organizationFeedbackPostConfigDto";
+import type { OrganizationFeaturesDto } from "./organizationFeaturesDto";
+
+export interface OrganizationDto {
+  /** Whether organization is public or private */
+  accessLevel: OrganizationDtoAccessLevel;
+  /** @nullable */
+  role: OrganizationDtoRole;
+  /** The theme of the organization */
+  theme: OrganizationDtoTheme;
+  /** Array of enabled module types */
+  enabledModules: OrganizationDtoEnabledModulesItem[];
+  /** The organization id */
+  id: number;
+  /** The organization name */
+  name: string;
+  /**
+   * The organization website url
+   * @nullable
+   */
+  websiteUrl: string | null;
+  /**
+   * Company SSO URL
+   * @nullable
+   */
+  ssoUrl: string | null;
+  /** The organization slug */
+  slug: string;
+  /** The languages of the organization */
+  languages: string[];
+  /** The default language of the organization */
+  defaultLanguage: string;
+  /**
+   * The logo URL of the organization
+   * @nullable
+   */
+  logoUrl: string | null;
+  primaryColor: string;
+  backgroundColor: string;
+  changelogConfig: OrganizationChangelogConfigDto;
+  feedbackPostConfig: OrganizationFeedbackPostConfigDto;
+  features: OrganizationFeaturesDto;
+  removeWorkWondersBranding: boolean;
+}
+

package/src/types/organizationDtoAccessLevel.ts

@@ -0,0 +1,18 @@
+/**
+ * Generated by orval v7.11.2 🍺
+ * Do not edit manually.
+ * Work Wonders API
+ * OpenAPI spec version: 1.0
+ */
+
+/**
+ * Whether organization is public or private
+ */
+export type OrganizationDtoAccessLevel =
+  (typeof OrganizationDtoAccessLevel)[keyof typeof OrganizationDtoAccessLevel];
+
+// eslint-disable-next-line @typescript-eslint/no-redeclare
+export const OrganizationDtoAccessLevel = {
+  Public: 'Public',
+  Private: 'Private',
+} as const;

package/src/types/organizationDtoEnabledModulesItem.ts

@@ -0,0 +1,17 @@
+/**
+ * Generated by orval v7.11.2 🍺
+ * Do not edit manually.
+ * Work Wonders API
+ * OpenAPI spec version: 1.0
+ */
+
+export type OrganizationDtoEnabledModulesItem =
+  (typeof OrganizationDtoEnabledModulesItem)[keyof typeof OrganizationDtoEnabledModulesItem];
+
+// eslint-disable-next-line @typescript-eslint/no-redeclare
+export const OrganizationDtoEnabledModulesItem = {
+  FEEDBACK: 'FEEDBACK',
+  HELP_CENTER: 'HELP_CENTER',
+  SUPPORT: 'SUPPORT',
+  CHANGELOG: 'CHANGELOG',
+} as const;

package/src/types/organizationDtoRole.ts

@@ -0,0 +1,21 @@
+/**
+ * Generated by orval v7.11.2 🍺
+ * Do not edit manually.
+ * Work Wonders API
+ * OpenAPI spec version: 1.0
+ */
+
+/**
+ * @nullable
+ */
+export type OrganizationDtoRole =
+  | (typeof OrganizationDtoRole)[keyof typeof OrganizationDtoRole]
+  | null;
+
+// eslint-disable-next-line @typescript-eslint/no-redeclare
+export const OrganizationDtoRole = {
+  Admin: "Admin",
+  Manager: "Manager",
+  User: "User",
+} as const;
+

package/src/types/organizationDtoTheme.ts

@@ -0,0 +1,18 @@
+/**
+ * Generated by orval v7.11.2 🍺
+ * Do not edit manually.
+ * Work Wonders API
+ * OpenAPI spec version: 1.0
+ */
+
+/**
+ * The theme of the organization
+ */
+export type OrganizationDtoTheme =
+  (typeof OrganizationDtoTheme)[keyof typeof OrganizationDtoTheme];
+
+// eslint-disable-next-line @typescript-eslint/no-redeclare
+export const OrganizationDtoTheme = {
+  Light: 'Light',
+  Dark: 'Dark',
+} as const;

package/src/types/organizationFeaturesDto.ts

@@ -0,0 +1,18 @@
+/**
+ * Generated by orval v7.11.2 🍺
+ * Do not edit manually.
+ * Work Wonders API
+ * OpenAPI spec version: 1.0
+ */
+
+export interface OrganizationFeaturesDto {
+  maxSeats: number;
+  roleBeasedPermissions: boolean;
+  aiAssistant: boolean;
+  helpCenterCustomDomain: boolean;
+  changelogCustomDomain: boolean;
+  removeWorkWondersBranding: boolean;
+  widgets: boolean;
+  customChangelogCategories: boolean;
+  customFeedbackPostCategories: boolean;
+}

package/src/types/organizationFeedbackPostConfigDto.ts

@@ -0,0 +1,14 @@
+/**
+ * Generated by orval v7.11.2 🍺
+ * Do not edit manually.
+ * Work Wonders API
+ * OpenAPI spec version: 1.0
+ */
+import type { OrganizationFeedbackPostConfigDtoCopywriting } from './organizationFeedbackPostConfigDtoCopywriting';
+
+export interface OrganizationFeedbackPostConfigDto {
+  copywriting: OrganizationFeedbackPostConfigDtoCopywriting;
+  allowDownvoting: boolean;
+  hideVoteCountUntilVote: boolean;
+  allowAnonymousVoting: boolean;
+}

package/src/types/organizationFeedbackPostConfigDtoCopywriting.ts

@@ -0,0 +1,11 @@
+/**
+ * Generated by orval v7.11.2 🍺
+ * Do not edit manually.
+ * Work Wonders API
+ * OpenAPI spec version: 1.0
+ */
+import type { OrganizationFeedbackPostCopywritingDto } from './organizationFeedbackPostCopywritingDto';
+
+export type OrganizationFeedbackPostConfigDtoCopywriting = {
+  [key: string]: OrganizationFeedbackPostCopywritingDto;
+};

package/src/types/organizationFeedbackPostCopywritingDto.ts

@@ -0,0 +1,13 @@
+/**
+ * Generated by orval v7.11.2 🍺
+ * Do not edit manually.
+ * Work Wonders API
+ * OpenAPI spec version: 1.0
+ */
+
+export interface OrganizationFeedbackPostCopywritingDto {
+  title: string;
+  buttonText: string;
+  message: string;
+  widgetButtonText: string;
+}

package/src/vite-env.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="vite/client" />
+
+interface ImportMetaEnv {
+  readonly VITE_WORKWONDERS_URL: string;
+  readonly VITE_WORKWONDERS_API_URL: string;
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv;
+}
+

package/src/workwonders-sdk.ts

@@ -0,0 +1,417 @@
+import ky from "ky";
+import { type OrganizationDto } from "./types/organizationDto";
+import { ChangelogSummaryDto } from "./types/changelogSummaryDto";
+
+interface InitArgs {
+  organization: string;
+  token?: string;
+  locale?: string;
+}
+
+export class WorkWondersSdk {
+  private ky = ky.create({
+    prefixUrl: import.meta.env.VITE_WORKWONDERS_API_URL,
+  });
+
+  private $feedbackContainer: HTMLDivElement | null = null;
+  private $changelogContainer: HTMLDivElement | null = null;
+  private $changelogIframe: HTMLIFrameElement | null = null;
+  private $changelogMiniContainer: HTMLDivElement | null = null;
+  private $feedbackButton: HTMLButtonElement | null = null;
+
+  private widgetBaseUrl = "";
+  private args: InitArgs | null = null;
+  private organizationData: OrganizationDto | null = null;
+
+  private contextBasedChangelogs: ChangelogSummaryDto[] = [];
+
+  init = async (args: InitArgs) => {
+    this.args = args;
+
+    console.log(this.contextBasedChangelogs);
+
+    if (this.$changelogContainer) {
+      this.$changelogContainer.remove();
+      this.$changelogContainer = null;
+    }
+
+    if (this.$feedbackContainer) {
+      this.$feedbackContainer.remove();
+      this.$feedbackContainer = null;
+    }
+
+    if (this.$changelogMiniContainer) {
+      this.$changelogMiniContainer.remove();
+      this.$changelogMiniContainer = null;
+    }
+
+    if (this.$feedbackButton) {
+      this.$feedbackButton.remove();
+      this.$feedbackButton = null;
+    }
+
+    if (!args.organization) {
+      console.error("Cannot init Work Wonders SDK. Organization is required.");
+      return;
+    }
+
+    const organizationData = await this.ky
+      .get<OrganizationDto>(`organizations/${args.organization}`)
+      .then((res) => res.json());
+
+    if (organizationData.accessLevel === "Private" && !args.token) {
+      console.error(
+        "Cannot init Work Wonders SDK. This organization is private, a token is required."
+      );
+      return;
+    }
+
+    if (!organizationData.features.widgets) {
+      console.error(
+        "Cannot init Work Wonders SDK. This organization does not have widgets feature enabled."
+      );
+      return;
+    }
+
+    this.organizationData = organizationData;
+
+    const language =
+      organizationData.languages.find((lang) => lang === args.locale) ??
+      organizationData.defaultLanguage;
+
+    args.locale = language;
+
+    const workwondersUrl = new URL(import.meta.env.VITE_WORKWONDERS_URL);
+
+    this.widgetBaseUrl = `https://${args.organization}.${workwondersUrl.host}/widget/`;
+
+    console.log("Work Wonders SDK initialized");
+  };
+
+  initFeedbackWidget = () => {
+    if (this.$feedbackContainer) {
+      return;
+    }
+
+    const args = this.args;
+    const organizationData = this.organizationData;
+
+    if (!args) {
+      return;
+    }
+
+    if (!organizationData) {
+      return;
+    }
+
+    if (!organizationData.enabledModules.includes("FEEDBACK")) {
+      console.warn("Feedback module is not enabled for this organization.");
+      return;
+    }
+
+    const $feedbackContainer = document.createElement("div");
+    this.$feedbackContainer = $feedbackContainer;
+
+    $feedbackContainer.id = "workwonders-feedback-container";
+    $feedbackContainer.classList.add("workwonders-widget-container");
+    $feedbackContainer.classList.add("workwonders-widget-container--hidden");
+
+    const $feedbackIframe = document.createElement("iframe");
+    $feedbackIframe.id = "workwonders-feedback-iframe";
+    $feedbackIframe.classList.add("workwonders-widget-iframe");
+    $feedbackIframe.classList.add("workwonders-feedback-iframe");
+
+    const widgetUrl = new URL("feedback", `${this.widgetBaseUrl}`);
+    widgetUrl.searchParams.append("jwt", args.token || "");
+    widgetUrl.searchParams.append("lang", args.locale || "");
+    $feedbackIframe.src = widgetUrl.toString();
+
+    $feedbackContainer.onclick = () => {
+      this.closeFeedbackWidget();
+    };
+
+    $feedbackContainer.appendChild($feedbackIframe);
+
+    document.body.appendChild($feedbackContainer);
+
+    this.initFeedbackButton();
+  };
+
+  private initFeedbackButton() {
+    if (this.$feedbackButton) {
+      return;
+    }
+
+    const args = this.args;
+    const organizationData = this.organizationData;
+
+    if (!args?.locale || !organizationData) {
+      return;
+    }
+
+    const $feedbackButton = document.createElement("button");
+    this.$feedbackButton = $feedbackButton;
+
+    const buttonText =
+      organizationData.feedbackPostConfig.copywriting[args.locale]
+        ?.widgetButtonText ??
+      organizationData.feedbackPostConfig.copywriting[
+        organizationData.defaultLanguage
+      ].widgetButtonText ??
+      "Feedback";
+
+    $feedbackButton.id = "workwonders-feedback-button";
+    $feedbackButton.textContent = buttonText;
+    $feedbackButton.classList.add("workwonders-feedback-button");
+    $feedbackButton.style.backgroundColor = organizationData.primaryColor;
+
+    $feedbackButton.onclick = () => {
+      this.openFeedbackWidget();
+    };
+
+    document.body.appendChild($feedbackButton);
+  }
+
+  initChangelogWidget = async () => {
+    if (this.$changelogContainer) {
+      return;
+    }
+
+    const args = this.args;
+    const organizationData = this.organizationData;
+
+    if (!args?.locale || !organizationData) {
+      return;
+    }
+
+    if (!organizationData.enabledModules.includes("CHANGELOG")) {
+      console.warn("Changelog module is not enabled for this organization.");
+      return;
+    }
+
+    const $changelogContainer = document.createElement("div");
+    this.$changelogContainer = $changelogContainer;
+
+    const existingsChangelogs = await this.ky
+      .get<ChangelogSummaryDto[]>(
+        `organizations/${args.organization}/changelogs/summary?language=${args.locale}`
+      )
+      .then((res) => res.json())
+      .then((changelogs) =>
+        changelogs.sort(
+          (a: ChangelogSummaryDto, b: ChangelogSummaryDto) =>
+            new Date(b.publishedAt ?? 0).getTime() -
+            new Date(a.publishedAt ?? 0).getTime()
+        )
+      );
+
+    const regularChangelogs = existingsChangelogs.filter(
+      (changelog: ChangelogSummaryDto) => changelog.showMode === "Regular"
+    );
+
+    this.contextBasedChangelogs = existingsChangelogs.filter(
+      (changelog: ChangelogSummaryDto) => changelog.showMode === "ContextBased"
+    );
+
+    $changelogContainer.id = "workwonders-changelog-container";
+    $changelogContainer.classList.add(
+      "workwonders-widget-container",
+      "workwonders-widget-container--hidden"
+    );
+
+    const $changelogIframe = document.createElement("iframe");
+    $changelogIframe.id = "workwonders-changelog-iframe";
+    $changelogIframe.classList.add(
+      "workwonders-widget-iframe",
+      "workwonders-changelog-iframe"
+    );
+
+    const seenChangelogs = localStorage.getItem(
+      `workwonders-seen-changelogs-${args.organization}`
+    );
+    const seenChangelogsArray = seenChangelogs
+      ? JSON.parse(seenChangelogs)
+      : [];
+
+    const unseenChangelogs = regularChangelogs.filter(
+      (changelog: { id: number }) => !seenChangelogsArray.includes(changelog.id)
+    );
+
+    const shouldShowChangelogOnStart =
+      unseenChangelogs.length > 0 &&
+      (seenChangelogsArray.length > 0 ||
+        organizationData.changelogConfig.showLatestChangelogOnFirstVisit);
+
+    if (shouldShowChangelogOnStart) {
+      const changelogIdsToShow =
+        seenChangelogsArray.length === 0
+          ? [unseenChangelogs[0].id]
+          : unseenChangelogs.map((c: { id: number }) => c.id);
+
+      this.showChangelogs(changelogIdsToShow, args.locale);
+    }
+
+    $changelogContainer.onclick = () => {
+      this.closeChangelogWidget();
+    };
+
+    document.body.appendChild($changelogContainer);
+  };
+
+  showChangelogs = (changelogIdsToShow: number[], language: string) => {
+    const widgetUrl = new URL("changelog", `${this.widgetBaseUrl}`);
+    widgetUrl.searchParams.append("jwt", this.args?.token || "");
+    widgetUrl.searchParams.append("lang", language);
+    widgetUrl.searchParams.append("changelogIds", changelogIdsToShow.join(","));
+
+    const $changelogIframe = this.$changelogIframe;
+    const $changelogContainer = this.$changelogContainer;
+
+    if (!$changelogIframe || !$changelogContainer) {
+      return;
+    }
+
+    $changelogIframe.src = widgetUrl.toString();
+
+    $changelogContainer.appendChild($changelogIframe);
+
+    $changelogIframe.onload = () => {
+      const currentSeenChangelogs = localStorage.getItem(
+        `workwonders-seen-changelogs-${this.args?.organization}`
+      );
+      const currentSeenChangelogsArray = currentSeenChangelogs
+        ? JSON.parse(currentSeenChangelogs)
+        : [];
+
+      const newSeenChangelogs = [
+        ...currentSeenChangelogsArray,
+        ...changelogIdsToShow,
+      ];
+
+      localStorage.setItem(
+        `workwonders-seen-changelogs-${this.args?.organization}`,
+        JSON.stringify(newSeenChangelogs)
+      );
+
+      $changelogContainer.classList.remove(
+        "workwonders-widget-container--hidden"
+      );
+    };
+  };
+
+  initChangelogWidgetMini = () => {
+    if (this.$changelogMiniContainer) {
+      return;
+    }
+
+    const args = this.args;
+    const organizationData = this.organizationData;
+
+    if (!args) {
+      return;
+    }
+
+    if (!organizationData) {
+      return;
+    }
+
+    if (!organizationData.enabledModules.includes("CHANGELOG")) {
+      console.warn("Changelog module is not enabled for this organization.");
+      return;
+    }
+
+    const $changelogMiniContainer = document.createElement("div");
+    this.$changelogMiniContainer = $changelogMiniContainer;
+
+    $changelogMiniContainer.id = "workwonders-changelog-mini-container";
+    $changelogMiniContainer.classList.add("workwonders-widget-container");
+    $changelogMiniContainer.classList.add(
+      "workwonders-changelog-mini-container"
+    );
+    $changelogMiniContainer.classList.add(
+      "workwonders-widget-container--hidden"
+    );
+
+    const $changelogMiniIframe = document.createElement("iframe");
+    $changelogMiniIframe.id = "workwonders-changelog-mini-iframe";
+    $changelogMiniIframe.classList.add("workwonders-widget-iframe");
+    $changelogMiniIframe.classList.add("workwonders-changelog-mini-iframe");
+
+    const widgetUrl = new URL("changelog/mini", `${this.widgetBaseUrl}`);
+    widgetUrl.searchParams.append("jwt", args.token || "");
+    widgetUrl.searchParams.append("lang", args.locale || "");
+
+    $changelogMiniIframe.src = widgetUrl.toString();
+
+    $changelogMiniContainer.appendChild($changelogMiniIframe);
+
+    $changelogMiniContainer.onclick = () => {
+      this.closeChangelogMiniWidget();
+    };
+
+    document.body.appendChild($changelogMiniContainer);
+  };
+
+  openFeedbackWidget = () => {
+    if (this.$feedbackContainer) {
+      this.$feedbackContainer.classList.remove(
+        "workwonders-widget-container--hidden"
+      );
+    }
+  };
+
+  openChangelogWidget = (id?: string) => {
+    if (this.$changelogContainer) {
+      if (id) {
+        const $iframe = document.getElementById(
+          "workwonders-changelog-iframe"
+        ) as HTMLIFrameElement;
+
+        const widgetUrl = new URL("changelog", `${this.widgetBaseUrl}`);
+        widgetUrl.searchParams.append("jwt", this.args?.token || "");
+        widgetUrl.searchParams.append("lang", this.args?.locale || "");
+        widgetUrl.searchParams.append("changelogIds", id);
+        $iframe.src = widgetUrl.toString();
+      }
+
+      this.$changelogContainer.classList.remove(
+        "workwonders-widget-container--hidden"
+      );
+    }
+  };
+
+  openChangelogMiniWidget = () => {
+    if (this.$changelogMiniContainer) {
+      console.log("Opening changelog mini");
+      this.$changelogMiniContainer.classList.remove(
+        "workwonders-widget-container--hidden"
+      );
+    }
+  };
+
+  closeChangelogWidget = () => {
+    if (this.$changelogContainer) {
+      this.$changelogContainer.classList.add(
+        "workwonders-widget-container--hidden"
+      );
+    }
+  };
+
+  closeFeedbackWidget = () => {
+    if (this.$feedbackContainer) {
+      this.$feedbackContainer.classList.add(
+        "workwonders-widget-container--hidden"
+      );
+    }
+  };
+
+  closeChangelogMiniWidget = () => {
+    if (this.$changelogMiniContainer) {
+      console.log("Closing changelog mini");
+      this.$changelogMiniContainer.classList.add(
+        "workwonders-widget-container--hidden"
+      );
+    }
+  };
+}
+