@orangelogic/orange-dam-content-browser-sdk 2.1.55 → 2.2.0-alpha

package/src/styles.css

@@ -0,0 +1,42 @@
+@import url('https://design-system.orangelogic.com/css/ol-light.css');
+
+#cortex-asset-picker-root {
+  --cx-button-text-transform: none;
+  --default-representative-background-color: #6cdaf3;
+  --default-representative-color: #377a86;
+  
+  color: var(--cx-color-neutral);
+  font-family: var(--cx-font-sans);
+  font-synthesis-weight: auto;
+}
+
+#cortex-asset-picker-root *:not(:defined) {
+  opacity: 0;
+}
+
+#cortex-asset-picker-root * {
+  box-sizing: border-box;
+}
+
+#cortex-asset-picker-root ::-webkit-scrollbar {
+  width: 17px;
+  height: 17px;
+}
+
+#cortex-asset-picker-root ::-webkit-scrollbar-corner {
+  background-color: transparent;
+}
+
+#cortex-asset-picker-root ::-webkit-scrollbar-thumb {
+  border-radius: 13px;
+  background: #8e8e93;
+  background-clip: padding-box;
+  border: 7px solid rgba(0, 0, 0, 0);
+  min-height: 50px;
+}
+
+#cortex-asset-picker-root ::-webkit-scrollbar-thumb:hover {
+  background: #5b5b6f;
+  background-clip: padding-box;
+  border: 4px solid rgba(0, 0, 0, 0);
+}

package/src/types/assets.ts

@@ -0,0 +1,71 @@
+import { Asset } from './search';
+
+export type GetLargestDownloadLinkRes = {
+  downloadLink: string;
+};
+
+export type AssetsState = {
+  errorMessage?: string;
+};
+
+export enum ImageImportStatus {
+  Importing,
+  Success,
+  Failed,
+}
+
+export type ImageImport = {
+  image: Asset;
+  message?: string;
+  status: ImageImportStatus;
+};
+
+export enum TransformationAction {
+  Resize,
+  Crop,
+  Rotate,
+}
+
+export type Transformation = {
+  key: TransformationAction;
+  value: {
+    width?: number;
+    height?: number;
+    x?: number;
+    y?: number;
+    rotation?: number;
+  };
+};
+
+export type TrackingParameter = { key: string; value: string };
+
+export enum Unit {
+  Pixel = 'pixels',
+  AspectRatio = 'aspect-ratio',
+}
+
+export type SortOrder = {
+  description: string;
+  id: string;
+  isDefault?: boolean;
+  legacyValue: string;
+  name: string;
+  sortDirection: string;
+  sortDirectionDisplayName: string;
+  sortDirectionGroupKey: string;
+  sortType: string;
+};
+
+
+/**
+* ShowDialog: no loader, the format dialog is ready to open
+* 
+* ShowLoader : show loader, hide the format dialog
+* 
+* Hide: hide loader, hide the format dialog
+*/
+export enum FormatLoaderState {
+  Hide = 'hide',
+  ShowLoader = 'show-loader',
+  ShowDialog = 'show-dialog',
+}

package/src/types/auth.ts

@@ -0,0 +1,42 @@
+export type AuthorizationResult = {
+  requestID: string;
+};
+
+export enum GetAccessKeyResponseCode {
+  Authorized = 'Authorized',
+  RepeatRequest = 'RepeatRequest',
+  NotAuthorized = 'NotAuthorized',
+}
+
+export type GetAccessKeyResponse = {
+  accessKey?: string;
+  code: GetAccessKeyResponseCode;
+  message?: string;
+};
+
+export type GetAccessTokenResponse = {
+  accessToken?: string;
+  success: boolean;
+};
+
+export type RequestAuthorizeRes = {
+  nonce: string;
+  requestID: string;
+};
+
+export type GetAccessKeyRes = {
+  accessKey?: string;
+  code: GetAccessKeyResponseCode;
+  message?: string;
+};
+
+export type GetAccessTokenRes = {
+  accessToken?: string;
+  success: boolean;
+};
+
+export type OAuthRes = {
+  accessKey?: string;
+  accessToken?: string;
+  siteUrl: string;
+};

package/src/types/common.ts

@@ -0,0 +1,11 @@
+/**
+ * The error response from Cortex API.
+ * The body will always contain a message and an error code. Other field usually the placeholder for error message.
+ */
+export type CortexErrorResponse = {
+  Message: string;
+  ErrorCode: 'OL_ERR_001_NOTFOUND' | 'OL_ERR_002_NOTALLOWED' | 'OL_ERR_003_REMOVED' | 'OL_ASSETLINKSERVICE_ERROR_001_LINKS_TO_NON_REQUIRED_FORMATS_NOT_ALLOWED' | 'OL_ERR_006_BADREQUEST';
+  'Asset ID'?: string;
+  'Asset Identifier'?: string;
+  'Format'?: string;
+};

package/src/types/download.ts

@@ -0,0 +1,8 @@
+export type GetDownloadLinksResponse = {
+  downloadLinks: DownloadLink[];
+};
+
+type DownloadLink = {
+  downloadLink: string;
+  recordID: string;
+};

package/src/types/navigation.ts

@@ -0,0 +1,3 @@
+export type NavigationState = {
+  currentPage: 'home' | 'settings';
+};

package/src/types/search.ts

@@ -0,0 +1,116 @@
+export type Folder = {
+  id: string;
+  title: string;
+  docType: string;
+  path: string[];
+  parents: Folder[];
+  fullPath: string;
+  hasChildren: boolean;
+};
+
+export type Asset = {
+  docType: MediaType;
+  docSubType: string;
+  extension: string;
+  height?: string;
+  id: string;
+  identifier: string;
+  imageUrl: string;
+  originalUrl: string;
+  name: string;
+  scrubUrl: string;
+  size: string;
+  tags: string;
+  width?: string;
+  allowATSLink?: boolean;
+};
+
+export type ContentItem = {
+  fields: {
+    [key: string]: string;
+  };
+  recordID: string;
+};
+
+export type GetContentResponse = {
+  contentItems?: ContentItem[];
+  facets: Record<string, Record<string, number>>;
+  totalCount: number;
+};
+
+export type GetContentRequest = {
+  extensions: string[];
+  folderID: string;
+  isSeeThrough: boolean;
+  mediaTypes: string[];
+  start: number;
+  pageSize: number;
+  searchText: string;
+  sortOrder?: string;
+  statuses: string[];
+  visibilityClasses: string[];
+  useSession?: string;
+};
+
+export type GetAssetLinkResponse = {
+  extraFields?: {
+    [key: string]: string;
+  };
+  imageUrl: string;
+  metadata?: {
+    [key: string]: string;
+  };
+};
+
+export type GetTransformedAssetLinkResponse = {
+  expirationDate: string | null,
+  fileExtension: string | null,
+  format: string,
+  identifier: string,
+  imageResizingMethod: string | null
+  link: string,
+  maxHeight: number,
+  maxWidth: number,
+  recordID: string,
+};
+
+export enum MediaType {
+  Album = 'Album',
+  Audio = 'Audio',
+  Image = 'Image',
+  Multimedia = 'Multimedia',
+  Story = 'Story',
+  Video = 'Video',
+  Widget = 'Widget',
+}
+
+export enum GridView {
+  Small = 'small',
+  Medium = 'medium',
+  Large = 'large',
+}
+
+export enum SortDirection {
+  Ascending = 'ascending',
+  Descending = 'descending',
+}
+
+export type Filter = {
+  mediaTypes: string[],
+  visibilityClasses: string[],
+  statuses: string[],
+  extensions: string[],
+};
+
+export type Proxy = {
+  cdnName: string | null;
+  extension: string | null;
+  id: string;
+  formatHeight: number;
+  formatWidth: number;
+  height: number;
+  permanentLink: string | null;
+  proxyLabel: string;
+  proxyName: string;
+  width: number;
+};

package/{build/types/storage.d.ts → src/types/storage.ts}

@@ -1 +1 @@
-export type StorageType = 'SessionStorage' | 'LocalStorage' | 'Cookies' | 'CustomStorage';
+export type StorageType = 'SessionStorage' | 'LocalStorage' | 'Cookies';

package/src/types/user.ts

@@ -0,0 +1,6 @@
+export type UserInfo = {
+  avatar: string;
+  email: string;
+  fullName: string;
+  loginID: string;
+};

package/src/utils/api.ts

@@ -0,0 +1,186 @@
+import { Mutex } from 'async-mutex';
+
+import { RootState, store } from '@/store';
+import { getAccessTokenService } from '@/store/auth/auth.service';
+import {
+  accessTokenSelector, AUTH_FEATURE_KEY, logout, setAccessToken,
+} from '@/store/auth/auth.slice';
+import {
+  BaseQueryFn, FetchArgs, fetchBaseQuery, FetchBaseQueryError,
+} from '@reduxjs/toolkit/dist/query';
+
+import { getRequestUrl } from './getRequestUrl';
+
+type CortexFetchOptions = RequestInit & {
+  /**
+   * Time out in milliseconds
+   */
+  timeout?: number;
+  /**
+   * Extended with timeout option and retry option. This value is true by default.
+   * Fetch the data from the given url with retry when the response is not ok or have status code 401
+   * This function will try to fetch the data again with a new token if the previous token is expired
+   * The token will be refreshed similar to the logic in AppBaseQuery
+   */
+  retryWhenUnauthorize?: boolean
+};
+
+const mutex = new Mutex();
+
+function appendQueryStringParam(
+  args: string | FetchArgs,
+  key: string,
+  value: string,
+): string | FetchArgs {
+  let urlEnd = typeof args === 'string' ? args : args.url;
+
+  if (urlEnd.indexOf('?') < 0) urlEnd += '?';
+  else urlEnd += '&';
+
+  urlEnd += `${key}=${value}`;
+
+  return typeof args === 'string' ? urlEnd : { ...args, url: urlEnd };
+}
+
+export const AppBaseQuery: BaseQueryFn<
+string | FetchArgs,
+unknown,
+FetchBaseQueryError
+> = async (args, api, extraOptions) => {
+  const rootState = api.getState() as RootState;
+  const token = accessTokenSelector(rootState);
+  if (token)
+    args = appendQueryStringParam(args, 'Token', token);
+  const authState = rootState[AUTH_FEATURE_KEY];
+  const rawBaseQuery = fetchBaseQuery({
+    baseUrl: authState.siteUrl,
+  });
+
+  await mutex.waitForUnlock();
+  const result = await rawBaseQuery(args, api, extraOptions);
+
+  if (result.error && result.error.status === 401) {
+    if (!mutex.isLocked()) {
+      const release = await mutex.acquire();
+      try {
+        if (authState.accessKey) {
+          const accessToken = (
+            await getAccessTokenService(authState.accessKey)
+          ).accessToken;
+          api.dispatch(setAccessToken(accessToken));
+        }
+      } finally {
+        release();
+      }
+    } else {
+      await mutex.waitForUnlock();
+      return rawBaseQuery(args, api, extraOptions);
+    }
+  }
+
+  return result;
+};
+
+export function GetValueByKeyCaseInsensitive(
+  obj: { [key: string]: string },
+  key: string,
+) {
+  const lowerCaseKey = key.toLowerCase();
+  const foundKey = Object.keys(obj).find(
+    (k) => k.toLowerCase() === lowerCaseKey,
+  );
+  return foundKey ? obj[foundKey] : undefined;
+}
+
+/*
+ * Check if the available status of the site url
+ * If site is not available then we will return an error message, else null
+ */
+export const checkCorrectSiteUrl = (url: string): Promise<string | null> => {
+  return new Promise((resolve, rejected) => {
+    const img = new Image();
+    img.onload = () => resolve(null);
+    img.onerror = () => rejected();
+    img.src = `${url}${url.endsWith('/') ? '' : '/'}Include/ImageUsedToCheckSiteAvailabilityFromBrowser.gif`;
+  });
+};
+
+
+/**
+ * Wrapper of fetch API with timeout option
+ * @param resource 
+ * @param options 
+ * @returns 
+ */
+const fetchWithTimeout = async (resource: RequestInfo | URL, options?: RequestInit & { timeout?: number }) => {
+  const { timeout } = options ?? {};
+
+  if (timeout) {
+    const controller = new AbortController();
+    const id = setTimeout(() => controller.abort(), timeout);
+
+    const response = await fetch(resource, {
+      ...options,
+      signal: options?.signal ?? controller.signal,
+    });
+    clearTimeout(id);
+    return response;
+  } else {
+    return await fetch(resource, options);
+  }
+};
+
+/**
+ * Wrapper of fetch API with timeout option
+ * @param resource 
+ * @param options 
+ * @returns 
+ */
+export const cortexFetch = async (resource: string, options?: CortexFetchOptions) => {
+  const { retryWhenUnauthorize = true } = options || {};
+  const authState = store.getState()[AUTH_FEATURE_KEY];
+  resource = getRequestUrl(authState.siteUrl, resource, authState.accessToken);
+  const response = await fetchWithTimeout(resource, options);
+
+  if (retryWhenUnauthorize && !response.ok && response.status === 401) {
+    await mutex.waitForUnlock();
+
+    if (!mutex.isLocked()) {
+      const release = await mutex.acquire();
+      try {
+        if (!authState.accessKey || !authState.siteUrl) {
+          store.dispatch(logout());
+          return response;
+        } else {
+          let needsLoggingOut = false;
+          try {
+            const tokenResp = await getAccessTokenService(authState.accessKey);
+
+            if (tokenResp.accessToken) {
+              store.dispatch(setAccessToken(tokenResp.accessToken));
+              resource = getRequestUrl(authState.siteUrl, resource, authState.accessToken);
+              return await fetchWithTimeout(resource, options);
+            } else {
+              needsLoggingOut = true;
+              return response;
+            }
+          } catch (e) {
+            needsLoggingOut = true;
+            return response;
+          } finally {
+            if (needsLoggingOut) {
+              store.dispatch(logout());
+            }
+          }
+        }
+      } finally {
+        release();
+      }
+    } else {
+      await mutex.waitForUnlock();
+      return await fetchWithTimeout(resource, options);
+    }
+  }
+
+  return response;
+};

package/src/utils/array.ts

@@ -0,0 +1,25 @@
+/**
+ * Check if an array has elements
+ * @param arr array to check
+ * @returns 
+ */
+export const hasElements = (arr: object | undefined | null): boolean => {
+  return !!arr && Object.keys(arr).length > 0;
+};
+
+/**
+ * Removes duplicate elements from an array based on a key generated by the provided callback function.
+ * @param arr - The array from which to remove duplicates.
+ * @param keyGenerator - A callback function that generates a unique key for each element.
+ * @returns A new array with unique elements.
+ */
+export const uniqueArray = <T>(arr: T[], keyGenerator: (element: T) => string = (element) => element as string): T[] => {
+  const uniqueElements: { [key: string]: T } = {};
+
+  arr.forEach((element) => {
+    const key = keyGenerator(element);
+    uniqueElements[key] = element;
+  });
+
+  return Object.keys(uniqueElements).map((key) => uniqueElements[key]);
+};