@pushwoosh/smart-components-kit 1.0.25 → 1.0.27

package/OpenActions/components/OpenActionsSummary/OpenActionsSummary.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { type OpenActionsSummaryProps } from '../../types';
+export declare const OpenActionsSummary: ({ openActions }: OpenActionsSummaryProps) => React.JSX.Element;

package/OpenActions/components/OpenActionsSummary/OpenActionsSummary.js

@@ -0,0 +1,89 @@
+import React from 'react';
+import { useParams, Link as ReactLink } from 'react-router-dom';
+import { Link, Spinner } from '@pushwoosh/dumb-components';
+import { Color, PlatformsIcons, PlatformsLabels, Tag } from '@pushwoosh/kit-constants';
+import { Horizontal, useAsync, Vertical } from '@pushwoosh/kit-helpers';
+import { OpenIcon, PlatformLogoIcon } from '@pushwoosh/kit-icons';
+import { H4, Text } from '@pushwoosh/kit-typography';
+import { LinkRow, ClickActionSection } from './styles';
+import { useSPAContext } from '../../../context';
+import { getSafariUrl } from '../../helpers';
+export const OpenActionsSummary = ({
+  openActions
+}) => {
+  var _applicationData$valu;
+  const {
+    platformsDeeplinkUrls = {},
+    defaultDeeplinkUrl: allPlatformsDeeplinkUrl,
+    webPageUrl,
+    safariUrlArgs,
+    showRichmedia
+  } = openActions ?? {};
+  const {
+    applicationCode
+  } = useParams();
+  const {
+    rpcGateway
+  } = useSPAContext();
+  const applicationData = useAsync(() => rpcGateway.applications.Get({
+    code: applicationCode
+  }), [applicationCode]);
+  const hasCustomPlatformsDeeplink = Object.keys(platformsDeeplinkUrls).length > 0;
+  const safariUrl = !hasCustomPlatformsDeeplink && getSafariUrl(((_applicationData$valu = applicationData.value) === null || _applicationData$valu === void 0 ? void 0 : _applicationData$valu.application) || null, safariUrlArgs ?? '');
+  const renderInfoBlock = (device, action, url = null) => React.createElement(Vertical, null, React.createElement("span", null, "For", ' ', React.createElement("strong", null, device), ' ', "subscribers:", ' ', React.createElement("strong", null, action)), url && React.createElement(LinkRow, null, React.createElement(Link, {
+    as: Tag.A,
+    rel: "noopener noreferrer",
+    target: "_blank",
+    href: url
+  }, url)));
+  const renderPlatformDeepLink = (platformKey, url, label = 'deep link') => {
+    const isEnumKey = typeof platformKey === 'number';
+    const icon = isEnumKey ? PlatformsIcons[platformKey] : null;
+    const labelText = isEnumKey ? PlatformsLabels[platformKey] : platformKey;
+    return React.createElement(ClickActionSection, {
+      key: platformKey
+    }, React.createElement(Horizontal, {
+      "$gap": 8,
+      "$justifyContent": "start",
+      "$alignItems": "start"
+    }, icon && React.createElement(PlatformLogoIcon, {
+      size: "small",
+      type: icon,
+      color: Color.LOCKED
+    }), React.createElement(Text, {
+      "$variant": "h4",
+      "$color": Color.LOCKED,
+      "$uppercase": true
+    }, labelText, ' ', label)), React.createElement(LinkRow, null, url));
+  };
+  const renderRichmedia = richmedia => {
+    if (richmedia.url) {
+      return React.createElement(Vertical, null, React.createElement(H4, null, "Show in-app banner"), React.createElement(ClickActionSection, null, React.createElement(LinkRow, null, richmedia.url)));
+    } else if (richmedia.code) {
+      return React.createElement(Horizontal, {
+        "$gap": 4,
+        "$justifyContent": "start",
+        "$alignItems": "center"
+      }, React.createElement(H4, null, "Show in-app banner:"), React.createElement(Text, null, richmedia.code), React.createElement(ReactLink, {
+        to: `/applications/${applicationCode}/rich-media/${richmedia.code}/edit`,
+        target: "_blank"
+      }, React.createElement(OpenIcon, {
+        color: Color.SOFT,
+        size: "small",
+        view: "lined"
+      })));
+    }
+    return null;
+  };
+  return React.createElement(Vertical, {
+    "$gap": 8
+  }, React.createElement(Text, {
+    "$variant": "h4",
+    "$uppercase": true
+  }, "On click actions"), React.createElement(Vertical, {
+    "$gap": 8
+  }, !openActions ? React.createElement(Spinner, {
+    color: Color.MAIN,
+    size: "medium"
+  }) : React.createElement(React.Fragment, null, hasCustomPlatformsDeeplink && renderInfoBlock('mobile', 'follow the Deep link'), Object.entries(platformsDeeplinkUrls).map(([platformKey, url]) => renderPlatformDeepLink(+platformKey, url)), allPlatformsDeeplinkUrl && hasCustomPlatformsDeeplink && renderPlatformDeepLink('Other platforms', allPlatformsDeeplinkUrl), allPlatformsDeeplinkUrl && !hasCustomPlatformsDeeplink && renderInfoBlock('mobile', 'follow the Deep link', allPlatformsDeeplinkUrl), !allPlatformsDeeplinkUrl && !hasCustomPlatformsDeeplink && renderInfoBlock('mobile', 'open home page in application'), webPageUrl && renderInfoBlock('web', 'open URL in browser', webPageUrl), webPageUrl && safariUrl && renderInfoBlock('Safari', 'open URL in Safari browser', safariUrl), !webPageUrl && renderInfoBlock('web', 'open home page in browser'), showRichmedia && renderRichmedia(showRichmedia))));
+};

package/OpenActions/components/OpenActionsSummary/index.d.ts

@@ -0,0 +1,2 @@
+export { OpenActionsSummary } from './OpenActionsSummary';
+export * from '../../types';

package/OpenActions/components/OpenActionsSummary/index.js

@@ -0,0 +1,2 @@
+export { OpenActionsSummary } from './OpenActionsSummary';
+export * from '../../types';

package/OpenActions/components/OpenActionsSummary/styles.d.ts

@@ -0,0 +1,57 @@
+export declare const LinkRow: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const ClickActionSection: import("styled-components").StyledComponent<"div", any, {
+    $alignContent?: "end" | "start" | "center" | "space-between" | "space-around" | "space-evenly" | "stretch" | undefined;
+    $alignItems?: "end" | "start" | "center" | "stretch" | "baseline" | undefined;
+    $bgColor?: string | undefined;
+    $border?: string | ({
+        top?: string | undefined;
+        right?: string | undefined;
+        bottom?: string | undefined;
+        left?: string | undefined;
+    } | {
+        horizontal: string;
+        top?: string | undefined;
+        bottom?: string | undefined;
+    } | {
+        vertical: string;
+        right?: string | undefined;
+        left?: string | undefined;
+    }) | undefined;
+    $borderRadius?: (string | number) | undefined;
+    $boxShadow?: string | undefined;
+    $gap?: (string | number) | undefined;
+    $gridAutoFlow?: "row" | "column" | "dense" | "row dense" | "column dense" | undefined;
+    $justifyContent?: "end" | "start" | "center" | "space-between" | "space-around" | "space-evenly" | "stretch" | undefined;
+    $justifyItems?: "end" | "start" | "center" | "stretch" | "baseline" | undefined;
+    $margin?: (string | number) | ({
+        top?: (string | number) | undefined;
+        right?: (string | number) | undefined;
+        bottom?: (string | number) | undefined;
+        left?: (string | number) | undefined;
+    } | {
+        horizontal: string | number;
+        top?: (string | number) | undefined;
+        bottom?: (string | number) | undefined;
+    } | {
+        vertical: string | number;
+        right?: (string | number) | undefined;
+        left?: (string | number) | undefined;
+    }) | undefined;
+    $padding?: (string | number) | ({
+        top?: (string | number) | undefined;
+        right?: (string | number) | undefined;
+        bottom?: (string | number) | undefined;
+        left?: (string | number) | undefined;
+    } | {
+        horizontal: string | number;
+        top?: (string | number) | undefined;
+        bottom?: (string | number) | undefined;
+    } | {
+        vertical: string | number;
+        right?: (string | number) | undefined;
+        left?: (string | number) | undefined;
+    }) | undefined;
+    $placeItems?: "end" | "start" | "center" | "stretch" | undefined;
+} & {
+    $gridAutoFlow: string;
+}, "$gridAutoFlow">;

package/OpenActions/components/OpenActionsSummary/styles.js

@@ -0,0 +1,11 @@
+import styled from 'styled-components';
+import { Color } from '@pushwoosh/kit-constants';
+import { Vertical } from '@pushwoosh/kit-helpers';
+export const LinkRow = styled.div.withConfig({
+  displayName: "LinkRow",
+  componentId: "sc-wfitxs-0"
+})(["white-space:nowrap;text-overflow:ellipsis;overflow:hidden;"]);
+export const ClickActionSection = styled(Vertical).withConfig({
+  displayName: "ClickActionSection",
+  componentId: "sc-wfitxs-1"
+})(["overflow:hidden;background:", ";padding:16px;"], Color.SOFT_LIGHT);

package/OpenActions/components/OpenActionsSummaryByPreset.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { type Preset } from '@pushwoosh/rpc-v2-http-api-data/presets';
+type OpenActionsByPresetProps = {
+    pushPreset: Preset;
+};
+export declare const OpenActionsSummaryByPreset: ({ pushPreset }: OpenActionsByPresetProps) => React.JSX.Element;
+export {};

package/OpenActions/components/OpenActionsSummaryByPreset.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import { OpenActionsSummary } from './OpenActionsSummary';
+import { usePresetOpenActions } from '../usePresetOpenActions';
+export const OpenActionsSummaryByPreset = ({
+  pushPreset
+}) => {
+  const openActions = usePresetOpenActions(pushPreset);
+  return React.createElement(OpenActionsSummary, {
+    openActions: openActions
+  });
+};

package/OpenActions/helpers.d.ts

@@ -0,0 +1,6 @@
+import { type Application } from '@pushwoosh/rpc-v2-http-api-data/applications';
+export declare const isWebLink: (url: string) => boolean;
+export declare const formatDeeplink: (template: string, deeplinkParams: {
+    [param: string]: string;
+}) => string;
+export declare const getSafariUrl: (application: Application | null, safariUrlArguments: string) => string;

package/OpenActions/helpers.js

@@ -0,0 +1,14 @@
+import { AllPlatforms } from '@pushwoosh/kit-constants';
+export const isWebLink = url => {
+  return url.startsWith('http://') || url.startsWith('https://');
+};
+export const formatDeeplink = (template, deeplinkParams) => Object.keys(deeplinkParams).reduce((url, paramName) => url.replace(`{${paramName}}`, deeplinkParams[paramName]), template);
+export const getSafariUrl = (application, safariUrlArguments) => {
+  var _application$platform, _application$properti;
+  if (!application) {
+    return '';
+  }
+  const isSafariConfigured = !!((_application$platform = application.platforms) !== null && _application$platform !== void 0 && (_application$platform = _application$platform[AllPlatforms.Safari]) !== null && _application$platform !== void 0 && _application$platform.isConfigured);
+  const safariUrlTemplate = ((_application$properti = application.properties) === null || _application$properti === void 0 ? void 0 : _application$properti.safari_url_template) || '';
+  return isSafariConfigured ? `${safariUrlTemplate}/${safariUrlArguments}` : '';
+};

package/OpenActions/index.d.ts

@@ -0,0 +1,4 @@
+export { usePresetOpenActions } from './usePresetOpenActions';
+export { OpenActionsSummaryByPreset } from './components/OpenActionsSummaryByPreset';
+export { OpenActionsSummary } from './components/OpenActionsSummary';
+export * from './types';

package/OpenActions/index.js

@@ -0,0 +1,4 @@
+export { usePresetOpenActions } from './usePresetOpenActions';
+export { OpenActionsSummaryByPreset } from './components/OpenActionsSummaryByPreset';
+export { OpenActionsSummary } from './components/OpenActionsSummary';
+export * from './types';

package/OpenActions/types.d.ts

@@ -0,0 +1,18 @@
+import { type AllPlatforms } from '@pushwoosh/kit-constants';
+export type ParsedOpenActions = {
+    platformsDeeplinkUrls: Partial<Record<AllPlatforms, string>>;
+    defaultDeeplinkUrl: string | null;
+    webPageUrl: string | null;
+    showRichmedia: {
+        url?: string;
+        code?: string;
+    } | null;
+    safariUrlArgs: string | null;
+};
+export type OpenActionsSummaryProps = {
+    openActions: ParsedOpenActions | undefined;
+};
+export type RouterParams = {
+    applicationCode?: string;
+    groupCode?: string;
+};

package/OpenActions/types.js

@@ -0,0 +1 @@
+export {};

package/OpenActions/usePresetOpenActions.d.ts

@@ -0,0 +1,3 @@
+import { type Preset } from '@pushwoosh/rpc-v2-http-api-data/presets';
+import { type ParsedOpenActions } from './types';
+export declare const usePresetOpenActions: (pushPreset: Preset | undefined) => ParsedOpenActions | undefined;

package/OpenActions/usePresetOpenActions.js

@@ -0,0 +1,91 @@
+import { useCallback, useEffect, useState } from 'react';
+import { useToast } from '@pushwoosh/dumb-components';
+import { useSPAContext } from '../context';
+import { formatDeeplink } from './helpers';
+const WEB_PLATFORM_KEY = 0;
+export const usePresetOpenActions = pushPreset => {
+  const [openActions, setOpenActions] = useState(undefined);
+  const {
+    rpcGateway
+  } = useSPAContext();
+  const {
+    openToast
+  } = useToast();
+  const getDeeplinkUrl = useCallback(async deeplinkCommonInfo => {
+    try {
+      const res = await rpcGateway.deeplinks.Get({
+        code: deeplinkCommonInfo.code
+      });
+      return formatDeeplink(res.deeplink.template || '', deeplinkCommonInfo.params);
+    } catch {
+      openToast({
+        title: `Error getting deeplink by code: ${deeplinkCommonInfo.code}`,
+        type: 'error'
+      });
+      return '';
+    }
+  }, [openToast, rpcGateway]);
+  const getOpenActionsByPreset = useCallback(async () => {
+    var _pushPreset$localized, _pushPreset$openActio;
+    if (!pushPreset) {
+      return;
+    }
+    const safariUrlArgs = ((_pushPreset$localized = pushPreset.localizedProperties.default) === null || _pushPreset$localized === void 0 || (_pushPreset$localized = _pushPreset$localized.safari) === null || _pushPreset$localized === void 0 || (_pushPreset$localized = _pushPreset$localized.urlArguments) === null || _pushPreset$localized === void 0 ? void 0 : _pushPreset$localized[0]) ?? null;
+    const webPageUrl = pushPreset.url;
+    const {
+      platformsDeeplinkUrls,
+      showRichmedia
+    } = await getPlatformDeeplinksByOpenActions(pushPreset, getDeeplinkUrl);
+    let defaultDeeplinkUrl = null;
+    // openAction - for common all mobile deeplink; web url is located in 'url' prop, openActions - map with mobile deeplink platform as a key (0 we should ignore)
+    if (((_pushPreset$openActio = pushPreset.openAction) === null || _pushPreset$openActio === void 0 || (_pushPreset$openActio = _pushPreset$openActio.kind) === null || _pushPreset$openActio === void 0 ? void 0 : _pushPreset$openActio.type) === 'deepLink') {
+      const deeplinkCommonInfo = pushPreset.openAction.kind.data;
+      defaultDeeplinkUrl = await getDeeplinkUrl(deeplinkCommonInfo);
+    }
+    // setTimeout нужен, чтобы не получать ошибку 'ResizeObserver loop completed with undelivered notifications.'
+    setTimeout(() => {
+      setOpenActions({
+        webPageUrl,
+        defaultDeeplinkUrl,
+        platformsDeeplinkUrls,
+        safariUrlArgs,
+        showRichmedia
+      });
+    }, 0);
+  }, [getDeeplinkUrl, pushPreset]);
+  useEffect(() => {
+    getOpenActionsByPreset();
+  }, [getOpenActionsByPreset]);
+  return openActions;
+};
+const getPlatformDeeplinksByOpenActions = async (pushPreset, getDeeplinkUrl) => {
+  const platformsDeeplinkUrls = {};
+  let showRichmedia = null;
+  await Promise.all(Object.entries(pushPreset.openActions).filter(([plKey]) => +plKey !== WEB_PLATFORM_KEY).map(async ([plKey, action]) => {
+    var _action$kind, _action$kind2, _action$kind3;
+    const platformKey = +plKey;
+    if ((action === null || action === void 0 || (_action$kind = action.kind) === null || _action$kind === void 0 ? void 0 : _action$kind.type) === 'deepLink') {
+      const deeplinkCommonInfo = action.kind.data;
+      platformsDeeplinkUrls[platformKey] = await getDeeplinkUrl(deeplinkCommonInfo);
+    }
+    if ((action === null || action === void 0 || (_action$kind2 = action.kind) === null || _action$kind2 === void 0 ? void 0 : _action$kind2.type) === 'link') {
+      const deeplinkCommonInfo = action.kind.data;
+      platformsDeeplinkUrls[platformKey] = deeplinkCommonInfo.url;
+    }
+    if ((action === null || action === void 0 || (_action$kind3 = action.kind) === null || _action$kind3 === void 0 ? void 0 : _action$kind3.type) === 'richMedia') {
+      if (action.kind.data.kind.type === 'url') {
+        showRichmedia = {
+          url: action.kind.data.kind.data
+        };
+      } else if (action.kind.data.kind.type === 'code') {
+        showRichmedia = {
+          code: action.kind.data.kind.data
+        };
+      }
+    }
+  }));
+  return {
+    platformsDeeplinkUrls,
+    showRichmedia
+  };
+};

package/context/types.d.ts

@@ -1,7 +1,8 @@
 import { type History } from 'history';
 import type { GrpcBridge } from '@pushwoosh/grpc-bridge';
 import type { GrpcClient, HttpClient, RpcClient } from '@pushwoosh/http-client';
-import type { API } from '@pushwoosh/rpc-v2-http-api-data';
+import type { API as RpcGatewayJourneyAPI } from '@pushwoosh/rpc-gateway-journey-data';
+import type { API as RpcGatewayAPI } from '@pushwoosh/rpc-v2-http-api-data';
 import type { SessionStore } from '@pushwoosh/session-store';
 export type SPAContextType = {
     readonly history: History;
@@ -10,7 +11,8 @@ export type SPAContextType = {
     readonly grpcClient: GrpcClient;
     readonly grpcBridge: GrpcBridge;
     readonly sessionStore: SessionStore;
-    readonly rpcGateway: API;
+    readonly rpcGateway: RpcGatewayAPI;
+    readonly rpcGatewayJourney: RpcGatewayJourneyAPI;
     readonly language: string;
     readonly helpers: {
         getApiOrigin: (name: string) => string;

package/index.d.ts

@@ -6,3 +6,4 @@ export * from './LanguagesSelector';
 export * from './RichMessageEditorSmart';
 export * from './CampaignsConfigurationDrawer';
 export * from './ExportCSV';
+export * from './OpenActions';

package/index.js

@@ -5,4 +5,5 @@ export * from './PlatformsConfigurationDrawer';
 export * from './LanguagesSelector';
 export * from './RichMessageEditorSmart';
 export * from './CampaignsConfigurationDrawer';
-export * from './ExportCSV';
+export * from './ExportCSV';
+export * from './OpenActions';

package/package.json

@@ -21,7 +21,7 @@
     "@pushwoosh/dumb-components": "^1.1.2",
     "@pushwoosh/kit-constants": "^1.6.9",
     "@pushwoosh/kit-helpers": "^4.8.1",
-    "@pushwoosh/kit-icons": "^2.1.2",
+    "@pushwoosh/kit-icons": "^2.1.6",
     "@pushwoosh/kit-typography": "^1.7.3"
   },
   "devDependencies": {
@@ -43,6 +43,7 @@
     "@pushwoosh/grpc-bridge": "^1.5.36",
     "@pushwoosh/http-client": "^2.5.0",
     "@pushwoosh/rpc-v2-http-api-data": "^0.1.501",
+    "@pushwoosh/rpc-gateway-journey-data": "^0.26.206",
     "@pushwoosh/session-store": "^2.5.0",
     "react": "^16.14.0 || ^18.0.0",
     "react-dom": "^16.14.0 || ^18.0.0"
@@ -50,5 +51,5 @@
   "engines": {
     "node": ">= 18"
   },
-  "version": "1.0.25"
+  "version": "1.0.27"
 }