notificare-react-preview-components 1.1.0 → 1.2.1

package/dist/types.d.ts

@@ -66,6 +66,16 @@ declare const IN_APP_MESSAGING_TRANSLATIONS: {
  */
 type NotificareInAppMessagingTranslationKey = keyof typeof IN_APP_MESSAGING_TRANSLATIONS;
 
+declare const PUSH_ONBOARDING_TRANSLATIONS: {
+    'preview.error.invalidPushOnboardingApplicationInfo': string;
+    'preview.error.notGeneratedPreview': string;
+    'preview.error.checkConsole': string;
+};
+/**
+ * The set of translation keys for push onboarding previews.
+ */
+type NotificarePushOnboardingTranslationKey = keyof typeof PUSH_ONBOARDING_TRANSLATIONS;
+
 /**
  * Defines the structure of a notification object.
  *
@@ -157,6 +167,90 @@ interface NotificareInAppMessageAction {
     readonly destructive?: boolean;
 }
 
+/**
+ * Defines partial information of a Notificare app.
+ *
+ * @property {string} [name] - The name of the application (optional).
+ * @property {string} websitePushConfig - The Website Push configuration of the app.
+ */
+interface NotificarePushOnboardingApplicationInfo {
+    readonly name?: string;
+    readonly websitePushConfig: NotificarePushOnboardingWebsitePushConfig;
+}
+/**
+ * Defines the Website Push configuration of an app.
+ *
+ * @property {string} [icon] - The icon to be displayed in a native browser notification (optional).
+ * @property {NotificarePushOnboardingLaunchConfig} launchConfig - Set of launch options.
+ */
+interface NotificarePushOnboardingWebsitePushConfig {
+    readonly icon?: string;
+    readonly launchConfig: NotificarePushOnboardingLaunchConfig;
+}
+/**
+ * Defines the launch configuration of an app.
+ *
+ * @property {string} [applicationName] - A custom application name to replace the original one at the top of a dialog (optional).
+ * @property {NotificarePushOnboardingFloatingButtonOptions} [floatingButtonOptions] - Set of floating button customization options (optional).
+ * @property {NotificarePushOnboardingAutoOnboardingOptions} [autoOnboardingOptions] - Set of dialog customization options (optional).
+ */
+interface NotificarePushOnboardingLaunchConfig {
+    readonly applicationName?: string;
+    readonly floatingButtonOptions?: NotificarePushOnboardingFloatingButtonOptions;
+    readonly autoOnboardingOptions?: NotificarePushOnboardingAutoOnboardingOptions;
+}
+/**
+ * Defines the floating button customization options.
+ *
+ * @property {NotificarePushOnboardingFloatingButtonAlignment} alignment - Defines the horizontal and vertical alignment of the floating button.
+ * @property {NotificarePushOnboardingFloatingButtonPermissionTexts} permissionTexts - Custom texts for the tooltip on the floating button based on the remote notification permission status.
+ */
+interface NotificarePushOnboardingFloatingButtonOptions {
+    readonly alignment: NotificarePushOnboardingFloatingButtonAlignment;
+    readonly permissionTexts: NotificarePushOnboardingFloatingButtonPermissionTexts;
+}
+/**
+ * Defines the horizontal and vertical alignment of the floating button.
+ *
+ * @property {NotificarePushOnboardingFloatingButtonHorizontalAlignment} horizontal - The horizontal alignment.
+ * @property {NotificarePushOnboardingFloatingButtonVerticalAlignment} vertical - The vertical alignment.
+ */
+interface NotificarePushOnboardingFloatingButtonAlignment {
+    readonly horizontal: NotificarePushOnboardingFloatingButtonHorizontalAlignment;
+    readonly vertical: NotificarePushOnboardingFloatingButtonVerticalAlignment;
+}
+type NotificarePushOnboardingFloatingButtonHorizontalAlignment = 'start' | 'end';
+type NotificarePushOnboardingFloatingButtonVerticalAlignment = 'top' | 'bottom';
+/**
+ * Specifies custom texts for the tooltip on the floating button based on the remote notification permission status.
+ *
+ * @property {string} default - The text to be displayed when remote notifications were neither allowed nor denied by the user.
+ * @property {string} granted - The text to be displayed when the user allows remote notifications.
+ * @property {string} denied - The text to be displayed when the user denies remote notifications.
+ */
+interface NotificarePushOnboardingFloatingButtonPermissionTexts {
+    readonly default: string;
+    readonly granted: string;
+    readonly denied: string;
+}
+/**
+ * Defines the dialog customization options.
+ *
+ * @property {string} message - The main message of the dialog.
+ * @property {string} cancelButton - The text on the cancel button.
+ * @property {string} acceptButton - The text on the accept button.
+ */
+interface NotificarePushOnboardingAutoOnboardingOptions {
+    readonly message: string;
+    readonly cancelButton: string;
+    readonly acceptButton: string;
+}
+
+/**
+ * The remote notification permission status.
+ */
+type NotificarePushOnboardingPermissionStatus = 'default' | 'granted' | 'denied';
+
 /**
  * The language/region code for the UI.
  */
@@ -200,5 +294,25 @@ interface NotificareInAppMessagePreviewProps {
     translations?: Partial<Record<NotificareInAppMessagingTranslationKey, string>>;
 }
 
-export { NotificareInAppMessagePreview, NotificareNotificationPreview };
-export type { NotificareInAppMessage, NotificareInAppMessageAction, NotificareInAppMessagingTranslationKey, NotificareNotification, NotificareNotificationAction, NotificareNotificationAttachment, NotificareNotificationContent, NotificareNotificationPreviewLocale, NotificareNotificationPreviewVariant, NotificarePushTranslationKey };
+/**
+ * Component that displays a push onboarding preview depending on the launch configurations of an app.
+ *
+ * @param {string} [applicationId] - The unique identifier of a Notificare application (optional).
+ * @param {string} [permissionStatus] - The remote notification permission status (optional). It's 'default' by default.
+ * @param {string} applicationInfo - Partial information from a Notificare application.
+ * @param {string} [serviceKey] - A service key provided by a Notificare admin (optional).
+ * @param {string} [locale] - The language/region code for the UI (optional). It's 'en-US' by default.
+ * @param {string} [translations] - A set of custom translations to override the default ones (optional).
+ */
+declare function NotificarePushOnboardingPreview({ applicationId, permissionStatus, applicationInfo, serviceKey, locale, translations, }: NotificarePushOnboardingPreviewProps): react_jsx_runtime.JSX.Element;
+interface NotificarePushOnboardingPreviewProps {
+    applicationId?: string;
+    permissionStatus?: NotificarePushOnboardingPermissionStatus;
+    applicationInfo: NotificarePushOnboardingApplicationInfo;
+    serviceKey?: string;
+    locale?: string;
+    translations?: Partial<Record<NotificarePushOnboardingTranslationKey, string>>;
+}
+
+export { NotificareInAppMessagePreview, NotificareNotificationPreview, NotificarePushOnboardingPreview };
+export type { NotificareInAppMessage, NotificareInAppMessageAction, NotificareInAppMessagingTranslationKey, NotificareNotification, NotificareNotificationAction, NotificareNotificationAttachment, NotificareNotificationContent, NotificareNotificationPreviewLocale, NotificareNotificationPreviewVariant, NotificarePushOnboardingApplicationInfo, NotificarePushOnboardingAutoOnboardingOptions, NotificarePushOnboardingFloatingButtonAlignment, NotificarePushOnboardingFloatingButtonHorizontalAlignment, NotificarePushOnboardingFloatingButtonOptions, NotificarePushOnboardingFloatingButtonPermissionTexts, NotificarePushOnboardingFloatingButtonVerticalAlignment, NotificarePushOnboardingLaunchConfig, NotificarePushOnboardingPermissionStatus, NotificarePushOnboardingTranslationKey, NotificarePushOnboardingWebsitePushConfig, NotificarePushTranslationKey };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "notificare-react-preview-components",
-  "version": "1.1.0",
+  "version": "1.2.1",
   "description": "A set of React components for your admin applications that lets you preview how Notificare notifications, in-app messages, and wallet passes will appear on a user’s device.",
   "author": "Notificare <info@notificare.com> (https://notificare.com)",
   "license": "MIT",
@@ -37,8 +37,8 @@
   ],
   "dependencies": {
     "@vis.gl/react-google-maps": "^1.5.2",
-    "zod": "^3.24.1",
-    "react-intl": "^7.1.11"
+    "react-intl": "^7.1.11",
+    "zod": "^3.24.1"
   },
   "peerDependencies": {
     "react": "^19.0.0",
@@ -66,8 +66,11 @@
     "dotenv": "^16.5.0",
     "eslint": "^9.18.0",
     "eslint-config-prettier": "^10.0.1",
+    "eslint-import-resolver-typescript": "^4.4.4",
     "eslint-plugin-import": "^2.31.0",
+    "eslint-plugin-prettier": "^5.5.4",
     "eslint-plugin-react": "^7.37.4",
+    "eslint-plugin-react-hooks": "^5.2.0",
     "eslint-plugin-storybook": "^9.0.4",
     "globals": "^16.0.0",
     "identity-obj-proxy": "^3.0.0",