notificare-react-preview-components/dist/types.d.ts

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.

import * as react_jsx_runtime from 'react/jsx-runtime';

declare const PUSH_TRANSLATIONS: {
    'controls.platform': string;
    'controls.formFactor': string;
    'controls.operatingSystem': string;
    'controls.operatingSystem.macos': string;
    'controls.variant': string;
    'controls.displayMode.lockScreen': string;
    'controls.displayMode.expandedLockScreen': string;
    'controls.displayMode.appUi': string;
    'preview.error.notGeneratedPreview': string;
    'preview.error.checkConsole': string;
    'preview.error.invalidNotification': string;
    'preview.error.provideGoogleMapsApiKey': string;
    'preview.error.notSupportedPreviewVariant': string;
    'preview.error.invalidUrl': string;
    'preview.error.iosStoreAppNotFound': string;
    'preview.error.webshotFail': string;
    'preview.error.notSupportedNotificationTypePreviewVariant': string;
    'preview.error.notSupportedUrlResolverWithUrlSchemePreview': string;
    'preview.error.urlResolverInvalidUrl': string;
    'preview.error.urlResolverNoNotificareWebViewQueryParameter': string;
    'preview.error.notSupportedUrlResolverWithDynamicLink': string;
    'preview.error.notSupportedUrlResolverWithRelativeUrl': string;
    'preview.error.googleMapsAuthFailure': string;
    'preview.error.googleMapsLoadFailure': string;
    'preview.error.noValidContentObject': string;
    'preview.error.iosStoreAppLoadFailure': string;
    'preview.android.alert.appUi.cancel': string;
    'preview.android.inAppBrowser.appUi.pageTitleLoading': string;
    'preview.android.lockscreen.time': string;
    'preview.ios.alert.appUi.cancel': string;
    'preview.ios.alert.appUi.ok': string;
    'preview.ios.inAppBrowser.appUi.done': string;
    'preview.ios.inAppBrowser.appUi.notSecure': string;
    'preview.ios.rate.appUi.rateNow': string;
    'preview.ios.rate.appUi.doNotRate': string;
    'preview.ios.store.appUi.done': string;
    'preview.ios.store.appUi.install': string;
    'preview.ios.store.appUi.ratings': string;
    'preview.ios.store.appUi.age': string;
    'preview.ios.store.appUi.yearsOld': string;
    'preview.ios.store.appUi.category': string;
    'preview.ios.store.appUi.developer': string;
    'preview.ios.store.appUi.whatsNew': string;
    'preview.ios.store.appUi.historyVersion': string;
    'preview.ios.store.appUi.screenshots': string;
    'preview.ios.lockScreen.time': string;
    'preview.web.desktop.macos.lockScreen.time': string;
    'preview.web.desktop.macos.lockScreen.settings': string;
    'preview.web.desktop.macos.lockScreen.options': string;
};
/**
 * The set of translation keys for push notification previews.
 */
type NotificarePushTranslationKey = keyof typeof PUSH_TRANSLATIONS;

declare const IN_APP_MESSAGING_TRANSLATIONS: {
    'preview.error.invalidInAppMessage': string;
    'preview.error.notGeneratedPreview': string;
    'preview.error.checkConsole': string;
};
/**
 * The set of translation keys for in-app message previews.
 */
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.
 *
 * @property {string} type - The type of the notification (e.g., "re.notifica.notification.Alert", "re.notifica.notification.WebView").
 * @property {string} [title] - The title of the notification (optional).
 * @property {string} [subtitle] - The subtitle of the notification (optional).
 * @property {string} message - The message of the notification.
 * @property {NotificareNotificationContent[]} [content] - An array of content objects associated with the notification (optional). Their structure depends on the notification type.
 * @property {NotificareNotificationAction[]} [actions] - An array of actions associated with the notification (optional).
 * @property {NotificareNotificationAttachment[]} [attachments] - An array of attachments associated with the notification (optional).
 */
interface NotificareNotification {
    readonly type: string;
    readonly title?: string;
    readonly subtitle?: string;
    readonly message: string;
    readonly content?: NotificareNotificationContent[];
    readonly actions?: NotificareNotificationAction[];
    readonly attachments?: NotificareNotificationAttachment[];
}
/**
 * Defines the content associated with the notification.
 *
 * @property {string} type - The type of content.
 * @property {unknown} data - The content data. Its structure depends on the type.
 */
interface NotificareNotificationContent {
    readonly type: string;
    readonly data: unknown;
}
/**
 * Defines an action associated with the notification.
 *
 * @property {string} type - The type of action (e.g., "re.notifica.action.Callback", "re.notifica.action.SMS").
 * @property {string} label - The label for the action.
 * @property {string} [target] - The target of the action (optional).
 * @property {boolean} [camera] - Whether the action involves a camera (optional).
 * @property {boolean} [keyboard] - Whether the action involves a keyboard (optional).
 */
interface NotificareNotificationAction {
    readonly type: string;
    readonly label: string;
    readonly target?: string;
    readonly camera?: boolean;
    readonly keyboard?: boolean;
}
/**
 * Defines an attachment associated with the notification.
 *
 * @property {string} mimeType - The MIME type of the attachment (e.g., "image/jpeg", "image/png").
 * @property {string} uri - The URI of the attachment.
 */
interface NotificareNotificationAttachment {
    readonly mimeType: string;
    readonly uri: string;
}

/**
 * Defines the notification preview variant to be shown.
 */
type NotificareNotificationPreviewVariant = 'android-lockscreen' | 'android-lockscreen-expanded' | 'android-app-ui' | 'ios-lockscreen' | 'ios-lockscreen-expanded' | 'ios-app-ui' | 'web-desktop-macos' | 'web-iphone-app-ui' | 'web-android-app-ui';

/**
 * Defines the structure of an in-app message object.
 *
 * @property {string} type - The type of the in-app message (e.g., "re.notifica.inappmessage.Banner", "re.notifica.inappmessage.Card").
 * @property {string} [title] - The title of the in-app message (optional).
 * @property {string} [message] - The message of the in-app message (optional).
 * @property {string} [image] - The image of the in-app message (optional).
 * @property {NotificareInAppMessageAction} [primaryAction] - The primary action of the in-app message (optional).
 * @property {NotificareInAppMessageAction} [secondaryAction] - The secondary action of the in-app message (optional).
 */
interface NotificareInAppMessage {
    readonly type: string;
    readonly title?: string;
    readonly message?: string;
    readonly image?: string;
    readonly primaryAction?: NotificareInAppMessageAction;
    readonly secondaryAction?: NotificareInAppMessageAction;
}
/**
 * Defines an action associated with the in-app message.
 *
 * @property {string} [label] - The label for the action (option).
 * @property {boolean} [destructive] - Whether the action performs an irreversible operation (optional).
 */
interface NotificareInAppMessageAction {
    readonly label?: string;
    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.
 */
type NotificareNotificationPreviewLocale = string;

/**
 * Component that displays a notification preview for different platforms.
 *
 * @param {NotificareNotification} notification - The notification to be displayed in the preview.
 * @param {string} applicationId - The unique identifier of a Notificare application (optional).
 * @param {boolean} [showControls] - Whether the controls should be shown (optional). It's true by default.
 * @param {NotificareNotificationPreviewVariant} variant - The variant of the notification preview (optional). It's 'android-lockscreen' by default.
 * @param {string} [serviceKey] - A service key provided by a Notificare admin.
 * @param {string} [googleMapsAPIKey] - A Google Maps API key (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 NotificareNotificationPreview({ notification, applicationId, showControls, variant, serviceKey, googleMapsAPIKey, locale, translations, }: NotificareNotificationPreviewProps): react_jsx_runtime.JSX.Element;
interface NotificareNotificationPreviewProps {
    notification: NotificareNotification;
    applicationId?: string;
    showControls?: boolean;
    variant?: NotificareNotificationPreviewVariant;
    serviceKey: string;
    googleMapsAPIKey?: string;
    locale?: NotificareNotificationPreviewLocale;
    translations?: Partial<Record<NotificarePushTranslationKey, string>>;
}

/**
 * Component that displays an in-app message preview.
 *
 * @param {NotificareInAppMessage} inAppMessage - The in-app message to be displayed in the preview.
 * @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 NotificareInAppMessagePreview({ inAppMessage, locale, translations, }: NotificareInAppMessagePreviewProps): react_jsx_runtime.JSX.Element;
interface NotificareInAppMessagePreviewProps {
    inAppMessage: NotificareInAppMessage;
    locale?: string;
    translations?: Partial<Record<NotificareInAppMessagingTranslationKey, string>>;
}

/**
 * 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 };