avada-crossapp-banner 0.0.1

package/README.md

@@ -0,0 +1,217 @@
+# @avada/crossapp-banner
+
+Shared CrossApp Banner components and hooks for Avada Shopify apps.
+
+## Installation
+
+```bash
+npm install @avada/crossapp-banner
+# or
+yarn add @avada/crossapp-banner
+```
+
+## Peer Dependencies
+
+This library requires the following peer dependencies:
+
+```json
+{
+  "react": ">=16.8.0",
+  "react-dom": ">=16.8.0",
+  "@shopify/polaris": ">=12.0.0",
+  "@shopify/polaris-icons": ">=7.0.0",
+  "@shopify/react-i18n": ">=7.0.0"
+}
+```
+
+## Usage
+
+### Basic Usage
+
+```tsx
+import {
+  CrossAppBanner,
+  createCrossAppConfig,
+  getAgeVerificationAppData,
+} from '@avada/crossapp-banner';
+import '@avada/crossapp-banner/dist/styles.css';
+
+// Create config for your app
+const config = createCrossAppConfig({
+  appPrefix: 'cb', // 'cb' | 'ol' | 'ac' | 'av'
+  apiClient: fetchAuthenticatedApi, // Your API client
+  storeDispatch: (action) => store.dispatch(action), // Optional
+});
+
+// Get app data
+const appData = getAgeVerificationAppData(shop, {
+  eventPrefix: 'cb',
+  utmSource: 'cookiebar',
+});
+
+function MyComponent() {
+  return (
+    <CrossAppBanner
+      config={config}
+      appData={appData}
+      sourcePage="dashboard"
+      shop={shop}
+      onClose={() => console.log('Banner closed')}
+      onShopUpdate={(data) => dispatch(setShop(data))}
+    />
+  );
+}
+```
+
+### With i18n Support
+
+```tsx
+import {CrossAppBannerWithI18n} from '@avada/crossapp-banner';
+
+// Requires @shopify/react-i18n context
+function MyComponent() {
+  return (
+    <CrossAppBannerWithI18n
+      config={config}
+      appData={appData}
+      sourcePage="settings"
+    />
+  );
+}
+```
+
+### Using the Display Banner Hook
+
+```tsx
+import {useDisplayBanner} from '@avada/crossapp-banner';
+
+function MyBanner() {
+  const {shouldDisplay, hideBanner, handleCloseBanner} = useDisplayBanner({
+    storageKey: 'my-banner-key',
+    shopKey: 'banner_promotion',
+    shop: activeShop,
+    checkShop: true,
+    disableCount: 3,
+    targetDateType: '7_days_after',
+    apiClient: fetchAuthenticatedApi,
+    onShopUpdate: (data) => dispatch(setShop(data)),
+    onClose: () => console.log('Closed'),
+  });
+
+  if (!shouldDisplay) return null;
+
+  return (
+    <div>
+      <button onClick={() => handleCloseBanner()}>Close</button>
+    </div>
+  );
+}
+```
+
+## API Reference
+
+### Components
+
+#### `CrossAppBanner`
+Main banner component without i18n.
+
+#### `CrossAppBannerWithI18n`
+Banner component with `@shopify/react-i18n` support.
+
+#### `CrossAppIcon`
+Icon component for different apps.
+
+#### `DownloadIcon`
+Download icon SVG component.
+
+### Hooks
+
+#### `useDisplayBanner`
+Hook to manage banner display state with localStorage persistence.
+
+### Utilities
+
+#### `createCrossAppConfig(config)`
+Create a configuration object for the banner.
+
+#### `getCookieBarAppData(shop, options?)`
+Get app data for Cookie Bar promotion.
+
+#### `getAgeVerificationAppData(shop, options?)`
+Get app data for Age Verification promotion.
+
+#### `getAccessibilityAppData(shop, options?)`
+Get app data for Accessibility promotion.
+
+#### `shouldExcludeShop(shop)`
+Check if a shop should be excluded from cross-app promotions.
+
+### Constants
+
+- `APP_HANDLES` - App handle identifiers
+- `APP_DOMAINS` - App domains
+- `SHOPIFY_APP_HANDLES` - Shopify app handles
+- `EXCLUDED_SHOPIFY_PLANS` - Plans to exclude
+- `EXCLUDED_COUNTRIES` - Countries to exclude
+- `TARGET_STORAGE_TYPES` - Storage type options
+
+## Types
+
+All types are exported and can be imported:
+
+```tsx
+import type {
+  AppHandle,
+  AppPrefix,
+  CrossAppConfig,
+  CrossAppData,
+  CrossAppBannerProps,
+  UseDisplayBannerConfig,
+} from '@avada/crossapp-banner';
+```
+
+## Migration from Existing Code
+
+### Before (duplicated code)
+
+```tsx
+// order-limit/CrossApp.js
+import {useStore} from '@assets/reducers/storeReducer';
+import {setShop} from '@assets/actions/storeActions';
+
+const CrossApp = ({appData}) => {
+  const {dispatch, state: {shop}} = useStore();
+  // ... 170+ lines of duplicated code
+};
+```
+
+### After (using library)
+
+```tsx
+// order-limit/CrossApp.js
+import {CrossAppBannerWithI18n, createCrossAppConfig} from '@avada/crossapp-banner';
+import '@avada/crossapp-banner/dist/styles.css';
+
+const config = createCrossAppConfig({
+  appPrefix: 'ol',
+  apiClient: fetchAuthenticatedApi,
+  storeDispatch: (action) => setShop(dispatch, action.payload),
+});
+
+const CrossApp = ({appData}) => {
+  const {dispatch, state: {shop}} = useStore();
+
+  return (
+    <CrossAppBannerWithI18n
+      config={config}
+      appData={appData}
+      shop={shop}
+      onShopUpdate={(data) => setShop(dispatch, data)}
+    />
+  );
+};
+```
+
+## License
+
+MIT

package/dist/components/CrossAppBanner/CrossAppBanner.d.ts

@@ -0,0 +1,10 @@
+import { CrossAppBannerProps } from "../../types";
+import "./CrossAppBanner.scss";
+/**
+ * CrossApp Banner Component
+ *
+ * A reusable banner component for cross-promoting Avada apps.
+ * Supports configuration-based customization for different apps.
+ */
+export declare function CrossAppBanner({ config, appData, sourcePage, shop, onClose, onShopUpdate, }: CrossAppBannerProps): import("react/jsx-runtime").JSX.Element | null;
+export default CrossAppBanner;

package/dist/components/CrossAppBanner/CrossAppBannerWithI18n.d.ts

@@ -0,0 +1,10 @@
+import { CrossAppBannerProps } from '../../types';
+import './CrossAppBanner.scss';
+/**
+ * CrossApp Banner Component with i18n support
+ *
+ * A reusable banner component for cross-promoting Avada apps.
+ * Uses @shopify/react-i18n for translations.
+ */
+export declare function CrossAppBannerWithI18n({ config, appData, sourcePage, shop, onClose, onShopUpdate, }: CrossAppBannerProps): import("react/jsx-runtime").JSX.Element | null;
+export default CrossAppBannerWithI18n;

package/dist/components/CrossAppBanner/index.d.ts

@@ -0,0 +1,3 @@
+export { CrossAppBanner } from './CrossAppBanner';
+export { CrossAppBannerWithI18n } from './CrossAppBannerWithI18n';
+export default CrossAppBanner;

package/dist/components/icons/CrossAppIcon.d.ts

@@ -0,0 +1,10 @@
+import { AppHandle } from '../../types';
+export interface CrossAppIconProps {
+    app: AppHandle;
+    size?: number;
+}
+/**
+ * CrossApp icon component that renders the appropriate icon based on app handle
+ */
+export declare function CrossAppIcon({ app, size }: CrossAppIconProps): import("react/jsx-runtime").JSX.Element;
+export default CrossAppIcon;

package/dist/components/icons/DownloadIcon.d.ts

@@ -0,0 +1,7 @@
+export interface DownloadIconProps {
+    width?: number;
+    height?: number;
+    fill?: string;
+}
+export declare function DownloadIcon({ width, height, fill, }: DownloadIconProps): import("react/jsx-runtime").JSX.Element;
+export default DownloadIcon;

package/dist/components/icons/index.d.ts

@@ -0,0 +1,4 @@
+export { DownloadIcon } from './DownloadIcon';
+export type { DownloadIconProps } from './DownloadIcon';
+export { CrossAppIcon } from './CrossAppIcon';
+export type { CrossAppIconProps } from './CrossAppIcon';

package/dist/constants/index.d.ts

@@ -0,0 +1,116 @@
+import { AppHandle, CrossAppData, TargetStorageType } from '../types';
+/**
+ * App handle constants
+ */
+export declare const APP_HANDLES: {
+    readonly ORDER_LIMIT: AppHandle;
+    readonly ACCESSIBILITY: AppHandle;
+    readonly COOKIE_BAR: AppHandle;
+    readonly AGE_VERIFICATION: AppHandle;
+};
+/**
+ * App domains
+ */
+export declare const APP_DOMAINS: {
+    readonly COOKIE_BAR: "cookie.avada.io";
+    readonly AGE_VERIFICATION: "age-verification-b0fa4.firebaseapp.com";
+    readonly ACCESSIBILITY: "accessibility.avada.io";
+};
+/**
+ * Shopify app handles
+ */
+export declare const SHOPIFY_APP_HANDLES: {
+    readonly COOKIE_BAR: "avada-cookie-bar";
+    readonly AGE_VERIFICATION: "sun-age-verification-popup";
+    readonly ACCESSIBILITY: "avada-accessibility";
+};
+/**
+ * Shopify plans to exclude from cross-app promotion
+ */
+export declare const EXCLUDED_SHOPIFY_PLANS: readonly ["partner_test", "affiliate", "staff", "frozen", "fraudulent", "cancelled", "paused"];
+/**
+ * Countries to exclude from cross-app promotion
+ */
+export declare const EXCLUDED_COUNTRIES: readonly ["IN", "VN"];
+/**
+ * Email suffixes to exclude
+ */
+export declare const EXCLUDED_EMAIL_SUFFIXES: readonly ["shopify.com"];
+/**
+ * Avada email suffixes
+ */
+export declare const AVADA_EMAIL_SUFFIXES: readonly ["avadagroup.com", "avada.io"];
+/**
+ * Target storage types for display banner
+ */
+export declare const TARGET_STORAGE_TYPES: Record<string, TargetStorageType>;
+/**
+ * Default banner close key prefix
+ */
+export declare const BANNER_CLOSE_KEY_PREFIX = "bannerCloseCount_";
+/**
+ * Get Shopify store name from domain
+ */
+export declare function getShopifyName(domain: string): string;
+/**
+ * Check if shop should be excluded from cross-app promotion
+ */
+export declare function shouldExcludeShop(shop: {
+    shopifyPlan?: string;
+    country?: string;
+    email?: string;
+}): boolean;
+/**
+ * Get Cookie Bar app data for cross-app promotion
+ */
+export declare function getCookieBarAppData(shop: {
+    shopifyDomain: string;
+    cookieBarInstalled?: boolean;
+}, options?: {
+    showPlanBtn?: boolean;
+    eventPrefix?: string;
+}): CrossAppData;
+/**
+ * Get Age Verification app data for cross-app promotion
+ */
+export declare function getAgeVerificationAppData(shop: {
+    shopifyDomain: string;
+    ageVerificationInstalled?: boolean;
+    hideVerificationBanner?: boolean;
+}, options?: {
+    eventPrefix?: string;
+    utmSource?: string;
+}): CrossAppData;
+/**
+ * Get Accessibility app data for cross-app promotion
+ */
+export declare function getAccessibilityAppData(shop: {
+    shopifyDomain: string;
+    accessibilityInstalled?: boolean;
+}, options?: {
+    eventPrefix?: string;
+}): CrossAppData;
+/**
+ * Create cross-app config helper
+ */
+export declare function createCrossAppConfig(config: {
+    appPrefix: 'cb' | 'av' | 'ac' | 'ol';
+    apiClient: (url: string, options?: {
+        method?: string;
+        body?: Record<string, unknown>;
+    }) => Promise<unknown>;
+    storeDispatch?: (action: unknown) => void;
+    closeIcon?: React.ReactNode;
+    bannerEventEndpoint?: string;
+    shopUpdateEndpoint?: string;
+}): {
+    appPrefix: "cb" | "av" | "ac" | "ol";
+    apiClient: (url: string, options?: {
+        method?: string;
+        body?: Record<string, unknown>;
+    }) => Promise<unknown>;
+    storeDispatch: ((action: unknown) => void) | undefined;
+    closeIcon: import("react").ReactNode;
+    bannerEventEndpoint: string;
+    shopUpdateEndpoint: string;
+};

package/dist/hooks/index.d.ts

@@ -0,0 +1,2 @@
+export { useDisplayBanner } from './useDisplayBanner';
+export type { UseDisplayBannerConfig } from './useDisplayBanner';

package/dist/hooks/useDisplayBanner.d.ts

@@ -0,0 +1,66 @@
+import { UseDisplayBannerReturn, TargetStorageType } from '../types';
+export interface UseDisplayBannerConfig {
+    /**
+     * Storage key for tracking display state
+     */
+    storageKey: string;
+    /**
+     * Shop key for tracking dismissed banners per shop
+     */
+    shopKey?: string;
+    /**
+     * Current shop data
+     */
+    shop?: {
+        dismissedBanners?: string[];
+        [key: string]: unknown;
+    };
+    /**
+     * Whether to check shop dismissed banners
+     * @default false
+     */
+    checkShop?: boolean;
+    /**
+     * Number of closes before permanently dismissing
+     * @default 3
+     */
+    disableCount?: number;
+    /**
+     * Target storage type for next display
+     * @default 'next_day'
+     */
+    targetDateType?: TargetStorageType;
+    /**
+     * API client function for making requests
+     */
+    apiClient?: (url: string, options?: {
+        method?: string;
+        body?: Record<string, unknown>;
+    }) => Promise<{
+        success?: boolean;
+        data?: Record<string, unknown>;
+    }>;
+    /**
+     * Endpoint for updating shop data
+     * @default '/shops?type=banner'
+     */
+    shopUpdateEndpoint?: string;
+    /**
+     * Callback when shop data is updated
+     */
+    onShopUpdate?: (shopData: Record<string, unknown>) => void;
+    /**
+     * Callback when banner is closed
+     */
+    onClose?: () => void;
+    /**
+     * Whether to check storage for display state
+     * @default true
+     */
+    checkStorage?: boolean;
+}
+/**
+ * Hook to manage banner display state with localStorage persistence
+ */
+export declare function useDisplayBanner({ storageKey, shopKey, shop, checkShop, disableCount, targetDateType, apiClient, shopUpdateEndpoint, onShopUpdate, onClose, checkStorage, }: UseDisplayBannerConfig): UseDisplayBannerReturn;
+export default useDisplayBanner;