ads-web-sdkm 2.0.24

package/dist/types/ads.d.ts

@@ -0,0 +1,116 @@
+export declare enum AdsDestinationType {
+    Category = "category",
+    SingleProduct = "single product",
+    Collection = "collection",
+    Brandshop = "brandshop"
+}
+/**
+ * API device type required from the Ads server.
+ */
+export declare enum AdsDeviceType {
+    Mobile = "mob",
+    Web = "web"
+}
+/**
+ * API response from the Ads server.
+ */
+export type AdsApiResponse = {
+    success: boolean;
+    error: AdsApiError | null;
+    data: AdData[];
+};
+/**
+ * Structure of an error returned from the Ads API.
+ */
+export type AdsApiError = {
+    message: string;
+    severity: string;
+    details: string;
+};
+/**
+ * Represents a single advertisement item with all necessary metadata.
+ */
+export type AdData = {
+    ad_type: string;
+    ad_title: string;
+    ad_id: number | string;
+    ad_slot: number;
+    media_type: string;
+    media: string;
+    media_aspect_ratio: string;
+    link: AdLink;
+    campaign_title: string;
+    campaign_id: number | string;
+    brand_name: string;
+    brand_id: number | string;
+    default_content_id?: string;
+    default_content_title?: string;
+};
+/**
+ * Contains the display text and destination configuration for an ad's CTA (call to action).
+ */
+export interface AdLink {
+    link_text: string;
+    link_destination: LinkDestination;
+}
+/**
+ * Represents the navigation target of the ad (e.g., category or single product),
+ * including IDs and optional filters.
+ */
+export interface LinkDestination {
+    type: string;
+    val: string[];
+    filters: {
+        key: string;
+        value: string[];
+    }[];
+}
+/**
+ * Supported ad location identifiers.
+ */
+export type TAdsLocations = 'Green_Category_Top_Banner' | 'Green_Home_Top_Banner';
+/**
+ * Payload emitted when a category-type ad with single category is clicked.
+ */
+export type SingleCategoryClickEvent = {
+    type: 'single_category';
+    value: string;
+    filters: {
+        key: string;
+        value: string[];
+    }[];
+};
+/**
+ * Payload emitted when a category-type ad with multiple category is clicked.
+ */
+export type MultipleCategoriesClickEvent = {
+    type: 'multiple_categories';
+    value: string[];
+    filters: {
+        key: string;
+        value: string[];
+    }[];
+};
+/**
+ * Payload emitted when a single-product-type ad is clicked.
+ */
+export type ProductClickEvent = {
+    type: 'single_product';
+    value: string;
+    slug?: string;
+};
+/**
+ * Payload emitted when a collection-type ad is clicked.
+ */
+export type CollectionClickEvent = {
+    type: 'collection';
+    value: string;
+};
+export type BrandshopClickEvent = {
+    type: 'brandshop';
+    value: string;
+};
+/**
+ * Union of all supported ad click payloads.
+ */
+export type TLinkClickEvent = MultipleCategoriesClickEvent | SingleCategoryClickEvent | ProductClickEvent | CollectionClickEvent | BrandshopClickEvent;

package/dist/types/brandshop.d.ts

@@ -0,0 +1,62 @@
+export type TSectionType = 'banner' | 'nav' | 'category' | 'productSlider';
+export type TLinkDestination = {
+    type: string;
+    val: string[];
+    filters: {
+        key: string;
+        value: string[];
+    }[];
+};
+export type TLink = {
+    link_destination: TLinkDestination;
+    link_text: string;
+    link_display_order: number;
+};
+export type TNavigationLinkItem = {
+    tracking_id: string;
+    link: TLink;
+};
+export type TBrandshopDataItem = {
+    image?: string | null;
+    link: TLink | null;
+    display_order: number;
+    tracking_id: string;
+    category_name?: string;
+    logo?: string;
+    navigation_links?: TNavigationLinkItem[];
+    collection_id?: string;
+};
+export type TBrandshopSection = {
+    section_title: string;
+    section_type: TSectionType;
+    section_size: number;
+    show_section_title: boolean;
+    section_display_order: number;
+    tracking_id: string;
+    data: TBrandshopDataItem[];
+};
+export type TBrandshopError = {
+    message: string;
+    severity: string;
+    details: string;
+};
+export type TBrandshopData = {
+    id: string;
+    name: string;
+    tracking_id: string;
+    content: TBrandshopSection[];
+    slug?: string;
+    meta_data?: {
+        title?: string;
+        description?: string;
+    };
+};
+export type TBrandshopApiResponse = {
+    success: boolean;
+    data: TBrandshopData;
+    error: TBrandshopError | null;
+};
+export type TBrandshopCollection = {
+    collection_id?: string;
+    tracking_id: string;
+};

package/dist/types/brandshopsList.d.ts

@@ -0,0 +1,32 @@
+export type TBrandshopsList = {
+    id: string;
+    name: string;
+    logo_url: string;
+    created_at: number;
+    updated_at: number;
+    slug?: string;
+};
+export type TPagination = {
+    total: number;
+    limit: number;
+    offset: number;
+    has_more: boolean;
+};
+export type TBrandshopsListSuccessResponse = {
+    success: boolean;
+    data: {
+        brandshops: TBrandshopsList[];
+        pagination: TPagination;
+    };
+    error: null;
+};
+export type TBrandshopsListErrorResponse = {
+    success: boolean;
+    data: null;
+    error: {
+        severity: string;
+        message: string;
+        details: string;
+    };
+};
+export type TBrandshopsResponse = TBrandshopsListSuccessResponse | TBrandshopsListErrorResponse;

package/dist/types/configTypes.d.ts

@@ -0,0 +1,16 @@
+export type TEnvironment = 'production' | 'staging' | 'test' | 'development';
+export type TService = 'adServer';
+export type TCaptureErrorOptions = {
+    level?: 'error' | 'warning' | 'info' | 'fatal' | 'debug' | 'log';
+    tags?: {
+        [key: string]: string;
+    };
+    context?: {
+        data: {
+            source: string;
+            [key: string]: unknown;
+        };
+    };
+};
+export type TLogError = (error: unknown, options?: TCaptureErrorOptions) => void;
+export type TTrackEvents = (eventName: string, eventProperties: Record<string, unknown>) => void;

package/dist/types/enums.d.ts

@@ -0,0 +1,8 @@
+export declare enum Language {
+    Arabic = "ar",
+    English = "en"
+}
+export declare enum DeviceType {
+    Mobile = "mob",
+    Web = "web"
+}

package/dist/types/products.d.ts

@@ -0,0 +1,72 @@
+export declare enum DiscountValueTypesEnum {
+    PERCENTAGE = "PERCENTAGE",
+    AMOUNT = "AMOUNT"
+}
+export declare enum DiscountTypesEnum {
+    PROMOTION = 1,
+    COUPON = 2
+}
+export type TPrice = {
+    is_price_dropped: boolean;
+    currency: string;
+    base: string;
+    final: string;
+    final_float_price: string;
+};
+export type TDiscount = {
+    order: DiscountTypesEnum;
+    name: string;
+    description: string;
+    type: DiscountValueTypesEnum;
+    value: string;
+    discount_value: string;
+    price_after_discount: string;
+};
+export type TProductDiscount = {
+    value: string;
+    priceAfterDiscount: string;
+};
+export type TDiscountsMap = {
+    promotion: TProductDiscount | null;
+    coupon: TProductDiscount | null;
+};
+export type TColorVariant = {
+    offering_id: string;
+    variant_id: string;
+    slug: string;
+    id: string;
+    name: string;
+    value: string;
+    decorator: string;
+};
+export type TCollectionItem = {
+    offering_id: string;
+    variant_id: string;
+    title: string;
+    slug: string;
+    brand: string;
+    main_image: string;
+    formatted_main_image: string;
+    gallery: string[];
+    price: TPrice;
+    stock_quantity: number;
+    discounts: TDiscount[];
+    colors: TColorVariant[];
+    categories_tree: string[];
+    dimensions: string;
+};
+export type TApiError = {
+    message: string;
+    severity: string;
+    details: string;
+};
+export type TCollectionData = {
+    collection_id: string;
+    total_items: number;
+    items: TCollectionItem[];
+};
+export type TCollectionResponse = {
+    success: boolean;
+    data: TCollectionData | null;
+    error: TApiError | null;
+};

package/dist/types/tenures.d.ts

@@ -0,0 +1,11 @@
+export type TTenure = {
+    monthlyAmount: string;
+    murabaha: number;
+    tenure: string;
+};
+export type TMyloGetInstallmentInfoPDP = TTenure[];
+export type TMyloGetInstallmentInfoPLP = {
+    amount: string;
+    tenure: string;
+    message: string;
+};

package/dist/types/types.d.ts

@@ -0,0 +1,2 @@
+export type TLanguage = 'ar' | 'en';
+export type TDirection = 'ltr' | 'rtl';

package/dist/utils/analytics/trackAdsEvent.d.ts

@@ -0,0 +1,16 @@
+type TAdsEventProperties = {
+    adTitle: string;
+    adFriendlyId: number | string;
+    campaignTitle: string;
+    campaignFriendlyId: number | string;
+    brandTitle: string;
+    brandFriendlyId: number | string;
+    location_id: string;
+    slot_number: string;
+    platform: string;
+    userStatus: string;
+    userId: string;
+};
+type TAdsEventNamesEnum = 'ads_banner_impression' | 'ads_banner_click';
+export declare const trackAdsBannerEvent: (eventName: TAdsEventNamesEnum, { adTitle, adFriendlyId, campaignTitle, campaignFriendlyId, brandTitle, brandFriendlyId, location_id, slot_number, platform, userStatus, userId, }: TAdsEventProperties, trackEvent?: (eventName: string, eventProperties: Record<string, unknown>) => void) => void;
+export {};

package/dist/utils/analytics/trackBrandshopEvents.d.ts

@@ -0,0 +1,15 @@
+import { TTrackEvents } from '../../types/configTypes';
+
+type TBrandshopLoginStatus = 'logged_in' | 'guest';
+type TBrandshopEventNamesEnum = 'ads_bs_pageload' | 'ads_bs_pageend' | 'ads_bs_section_view' | 'ads_bs_content_click';
+type TBrandshopEventProperties = {
+    userStatus: TBrandshopLoginStatus;
+    platform: 'Web';
+    brandName?: string;
+    sectionName?: string;
+    sectionOrder?: string;
+    contentName?: string;
+    contentOrder?: string;
+};
+export declare const trackBrandshopEvent: (eventName: TBrandshopEventNamesEnum, props: TBrandshopEventProperties, trackEvent?: TTrackEvents) => void;
+export {};

package/dist/utils/helpers/ads.d.ts

@@ -0,0 +1,3 @@
+import { TLinkClickEvent, LinkDestination } from '../../types/ads';
+
+export declare const buildLinkDestination: (destination: LinkDestination) => TLinkClickEvent | null;

package/dist/utils/helpers/authToken.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Generates a HMAC-SHA256 token with an expiration timestamp.
+ * @returns A Promise resolving to a tuple of [token, expirationTimestamp].
+ */
+export declare function generateAccessToken(adServerApiKey: string): Promise<[string, string]>;

package/dist/utils/helpers/discountChip.d.ts

@@ -0,0 +1,14 @@
+type TDiscountChipProps = {
+    label: string;
+    variant: 'coupon' | 'promotion' | 'priceDrop';
+};
+type TChipInput = {
+    saveLabelText: string;
+    couponText: string;
+    priceDropText: string;
+    promotionValue?: string;
+    hasCoupon?: boolean;
+    isPriceDropped?: boolean;
+};
+export declare const getDiscountChipDetails: (props: TChipInput) => TDiscountChipProps | null;
+export {};

package/dist/utils/helpers/getBaseUrl.d.ts

@@ -0,0 +1,4 @@
+import { TEnvironment, TService } from '../../types/configTypes';
+
+export declare const ENV_SERVICE_BASE_URLS: Record<TEnvironment, Record<TService, string>>;
+export declare function getBaseUrl(service: TService, env: TEnvironment): string;

package/dist/utils/helpers/mergeClasses.d.ts

@@ -0,0 +1 @@
+export declare function mergeClasses(...classes: (string | false | null | undefined)[]): string;

package/dist/utils/helpers/price-utils.d.ts

@@ -0,0 +1 @@
+export declare const parsePriceToNumber: (priceString: string) => number;

package/dist/utils/helpers/productDiscounts.d.ts

@@ -0,0 +1,3 @@
+import { TDiscountsMap, TDiscount } from '../../types/products';
+
+export declare const getDiscounts: (discounts: TDiscount[], currency: string) => TDiscountsMap;

package/dist/utils/helpers/products.d.ts

@@ -0,0 +1,4 @@
+import { LinkDestination } from '../../types/ads';
+import { TCollectionItem } from '../../types/products';
+
+export declare const mapProductToLinkDestination: (product: TCollectionItem) => LinkDestination;

package/dist/utils/helpers/text.d.ts

@@ -0,0 +1 @@
+export declare const truncateText: (text: string, maxLength: number) => string;

package/dist/utils/helpers/translate.d.ts

@@ -0,0 +1,63 @@
+import { TLanguage } from '../../types/types';
+
+export declare const translations: {
+    readonly en: {
+        readonly couponBadge: {
+            readonly extra: "Extra";
+            readonly offAtCheckout: "off at checkout";
+        };
+        readonly discountChip: {
+            readonly save: "Save";
+            readonly onlineExclusive: "Online exclusive offer";
+            readonly priceDrop: "Price drop";
+        };
+        readonly mylo: {
+            readonly from: "From";
+            readonly perMonth: "/mo with";
+        };
+    };
+    readonly ar: {
+        readonly couponBadge: {
+            readonly extra: "خصم إضافي";
+            readonly offAtCheckout: "يطبق عند الدفع";
+        };
+        readonly discountChip: {
+            readonly save: "هتوفر";
+            readonly onlineExclusive: "عرض أونلاين حصري";
+            readonly priceDrop: "سعر أقل";
+        };
+        readonly mylo: {
+            readonly from: "يبدأ من";
+            readonly perMonth: "/الشهر مع";
+        };
+    };
+};
+export declare const getTranslation: (language: TLanguage) => {
+    readonly couponBadge: {
+        readonly extra: "Extra";
+        readonly offAtCheckout: "off at checkout";
+    };
+    readonly discountChip: {
+        readonly save: "Save";
+        readonly onlineExclusive: "Online exclusive offer";
+        readonly priceDrop: "Price drop";
+    };
+    readonly mylo: {
+        readonly from: "From";
+        readonly perMonth: "/mo with";
+    };
+} | {
+    readonly couponBadge: {
+        readonly extra: "خصم إضافي";
+        readonly offAtCheckout: "يطبق عند الدفع";
+    };
+    readonly discountChip: {
+        readonly save: "هتوفر";
+        readonly onlineExclusive: "عرض أونلاين حصري";
+        readonly priceDrop: "سعر أقل";
+    };
+    readonly mylo: {
+        readonly from: "يبدأ من";
+        readonly perMonth: "/الشهر مع";
+    };
+};

package/dist/utils/helpers/utilities.d.ts

@@ -0,0 +1 @@
+export declare const debounce: <T extends unknown[]>(callback: (...args: T) => void, delay: number) => ((...args: T) => void);

package/dist/utils/validations/ads.d.ts

@@ -0,0 +1,7 @@
+import { TAdsLocations } from '../../types/ads';
+import { TLanguage } from '../../types/types';
+import { TTrackEvents, TLogError } from '../../types/configTypes';
+
+export declare function validateLocationId(locationId: TAdsLocations): void;
+export declare function validateLanguage(language: TLanguage): void;
+export declare function validateTrackHandler(track?: TTrackEvents, logError?: TLogError): TTrackEvents;

package/package.json

@@ -0,0 +1,81 @@
+{
+  "name": "ads-web-sdkm",
+  "version": "2.0.24",
+  "description": "SDK for integrating Ads Web components in B.TECH",
+  "type": "module",
+  "main": "./dist/index.umd.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    "./AdsCarousel": {
+      "import": "./dist/AdsCarousel.js",
+      "types": "./dist/AdsCarousel.d.ts"
+    },
+    "./Brandshop": {
+      "import": "./dist/Brandshop.js",
+      "types": "./dist/Brandshop.d.ts"
+    },
+    "./Brandshops": {
+      "import": "./dist/Brandshops.js",
+      "types": "./dist/Brandshops.d.ts"
+    },
+    "./AdsCarousel.css": "./dist/AdsCarousel.css",
+    "./Brandshop.css": "./dist/Brandshop.css",
+    "./Brandshops.css": "./dist/Brandshops.css"
+  },
+  "typesVersions": {
+    "*": {
+      "AdsCarousel": [
+        "dist/AdsCarousel.d.ts"
+      ],
+      "Brandshop": [
+        "dist/Brandshop.d.ts"
+      ],
+      "Brandshops": [
+        "dist/Brandshops.d.ts"
+      ]
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsc && vite build",
+    "dev": "vite",
+    "preview": "vite preview"
+  },
+  "keywords": [
+    "react",
+    "button",
+    "tailwind",
+    "component"
+  ],
+  "peerDependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@tailwindcss/vite": "^4.1.11",
+    "@types/crypto-js": "^4.2.2",
+    "@types/node": "^24.0.10",
+    "@types/react": "^19.1.8",
+    "@types/react-dom": "^19.1.6",
+    "@vitejs/plugin-react": "^4.5.2",
+    "tailwindcss": "^4.1.11",
+    "typescript": "~5.8.3",
+    "vite": "^7.0.0",
+    "vite-plugin-dts": "^3.8.3"
+  },
+  "dependencies": {
+    "@tanstack/react-query": "^5.82.0",
+    "crypto-js": "^4.2.0",
+    "embla-carousel": "8.6.0",
+    "embla-carousel-autoplay": "^8.6.0",
+    "embla-carousel-react": "8.6.0",
+    "mylo-online-checkout-sdk": "^4.0.3",
+    "posthog-js": "^1.257.0",
+    "react-intersection-observer": "^9.16.0",
+    "react-loading-skeleton": "^3.5.0",
+    "tailwind-merge": "^3.3.1"
+  }
+}