ads-web-sdkm 2.0.24
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +369 -0
- package/dist/AdsCarousel.css +1 -0
- package/dist/AdsCarousel.d.ts +1 -0
- package/dist/AdsCarousel.js +519 -0
- package/dist/AdsCarousel.js.map +1 -0
- package/dist/Brandshop.css +1 -0
- package/dist/Brandshop.d.ts +1 -0
- package/dist/Brandshop.js +918 -0
- package/dist/Brandshop.js.map +1 -0
- package/dist/Brandshops.css +1 -0
- package/dist/Brandshops.d.ts +1 -0
- package/dist/Brandshops.js +103 -0
- package/dist/Brandshops.js.map +1 -0
- package/dist/Image-zvdPHg5N.js +35 -0
- package/dist/Image-zvdPHg5N.js.map +1 -0
- package/dist/ReactQueryProvider-D__k2BsQ.js +6755 -0
- package/dist/ReactQueryProvider-D__k2BsQ.js.map +1 -0
- package/dist/ads-CChrT00a.js +4470 -0
- package/dist/ads-CChrT00a.js.map +1 -0
- package/dist/api/queries/useGetAds.d.ts +16 -0
- package/dist/api/queries/useGetBrandshop.d.ts +14 -0
- package/dist/api/queries/useGetBrandshopList.d.ts +11 -0
- package/dist/api/queries/useGetCollection.d.ts +11 -0
- package/dist/api/services/getAds.d.ts +14 -0
- package/dist/api/services/getBrandshop.d.ts +13 -0
- package/dist/api/services/getBrandshopList.d.ts +11 -0
- package/dist/api/services/getCollection.d.ts +4 -0
- package/dist/components/Brandshop/Banner.d.ts +6 -0
- package/dist/components/Brandshop/BannerSection.d.ts +15 -0
- package/dist/components/Brandshop/BannerWithLink.d.ts +8 -0
- package/dist/components/Brandshop/Brandshop.d.ts +16 -0
- package/dist/components/Brandshop/BrandshopContent.d.ts +3 -0
- package/dist/components/Brandshop/BrandshopError.d.ts +6 -0
- package/dist/components/Brandshop/BrandshopSection.d.ts +18 -0
- package/dist/components/Brandshop/BrandshopSkeleton.d.ts +1 -0
- package/dist/components/Brandshop/CategorySection.d.ts +14 -0
- package/dist/components/Brandshop/NavigationSection.d.ts +16 -0
- package/dist/components/Brandshop/ProductSliderSection.d.ts +18 -0
- package/dist/components/Brandshop/index.d.ts +1 -0
- package/dist/components/Brandshops/Brandshops.d.ts +11 -0
- package/dist/components/Brandshops/BrandshopsList.d.ts +3 -0
- package/dist/components/Brandshops/BrandshopsSkeleton.d.ts +6 -0
- package/dist/components/Brandshops/index.d.ts +1 -0
- package/dist/components/Card/Card.d.ts +8 -0
- package/dist/components/Carousel/AdBanner.d.ts +17 -0
- package/dist/components/Carousel/AdBanners.d.ts +24 -0
- package/dist/components/Carousel/AdCarousel.d.ts +43 -0
- package/dist/components/Carousel/AdSkeleton.d.ts +8 -0
- package/dist/components/Carousel/AdsCarousel.d.ts +24 -0
- package/dist/components/Carousel/index.d.ts +1 -0
- package/dist/components/Chip/Chip.d.ts +6 -0
- package/dist/components/ErrorBoundary/ErrorBoundary.d.ts +18 -0
- package/dist/components/Image/Image.d.ts +13 -0
- package/dist/components/ProductsCarousel/CouponBadge.d.ts +8 -0
- package/dist/components/ProductsCarousel/DiscountChip.d.ts +12 -0
- package/dist/components/ProductsCarousel/PriceDisplay.d.ts +8 -0
- package/dist/components/ProductsCarousel/ProductCard.d.ts +15 -0
- package/dist/components/ProductsCarousel/ProductCardSkeleton.d.ts +5 -0
- package/dist/components/ProductsCarousel/ProductSliderSkeleton.d.ts +5 -0
- package/dist/components/ProductsCarousel/ProductTitle.d.ts +5 -0
- package/dist/components/ProductsCarousel/ProductsCarousel.d.ts +11 -0
- package/dist/hooks/use-async-memo.d.ts +1 -0
- package/dist/hooks/use-is-platform.d.ts +8 -0
- package/dist/hooks/useDetectScrolledToBottom.d.ts +5 -0
- package/dist/hooks/useSwipeThreshold.d.ts +4 -0
- package/dist/providers/ReactQueryProvider.d.ts +5 -0
- package/dist/types/ads.d.ts +116 -0
- package/dist/types/brandshop.d.ts +62 -0
- package/dist/types/brandshopsList.d.ts +32 -0
- package/dist/types/configTypes.d.ts +16 -0
- package/dist/types/enums.d.ts +8 -0
- package/dist/types/products.d.ts +72 -0
- package/dist/types/tenures.d.ts +11 -0
- package/dist/types/types.d.ts +2 -0
- package/dist/utils/analytics/trackAdsEvent.d.ts +16 -0
- package/dist/utils/analytics/trackBrandshopEvents.d.ts +15 -0
- package/dist/utils/helpers/ads.d.ts +3 -0
- package/dist/utils/helpers/authToken.d.ts +5 -0
- package/dist/utils/helpers/discountChip.d.ts +14 -0
- package/dist/utils/helpers/getBaseUrl.d.ts +4 -0
- package/dist/utils/helpers/mergeClasses.d.ts +1 -0
- package/dist/utils/helpers/price-utils.d.ts +1 -0
- package/dist/utils/helpers/productDiscounts.d.ts +3 -0
- package/dist/utils/helpers/products.d.ts +4 -0
- package/dist/utils/helpers/text.d.ts +1 -0
- package/dist/utils/helpers/translate.d.ts +63 -0
- package/dist/utils/helpers/utilities.d.ts +1 -0
- package/dist/utils/validations/ads.d.ts +7 -0
- package/package.json +81 -0
package/README.md
ADDED
|
@@ -0,0 +1,369 @@
|
|
|
1
|
+
# 🧩 Ads Web SDK
|
|
2
|
+
|
|
3
|
+
This SDK enables seamless integration of dynamic advertisement banners in React applications. It supports multilingual setup, ad placement targeting, and click event tracking for both category and product promotions.
|
|
4
|
+
|
|
5
|
+
---
|
|
6
|
+
|
|
7
|
+
## 📦 Installation
|
|
8
|
+
|
|
9
|
+
```bash
|
|
10
|
+
# Create .npmrc file then add this code here:
|
|
11
|
+
|
|
12
|
+
registry=https://registry.npmjs.org/
|
|
13
|
+
@btechlabs:registry=https://npm.pkg.github.com
|
|
14
|
+
always-auth=true
|
|
15
|
+
//npm.pkg.github.com/:_authToken=${GITHUB_TOKEN}
|
|
16
|
+
|
|
17
|
+
## Ensure GITHUB_TOKEN is set in your environment variables ##
|
|
18
|
+
|
|
19
|
+
# Installing ads-web-sdk
|
|
20
|
+
|
|
21
|
+
1. Go to [Github account settings](https://github.com/settings/tokens)
|
|
22
|
+
2. Generate a personal access token, make sure to select `read:packages`
|
|
23
|
+
3. Run `npm login --registry=https://npm.pkg.github.com --scope=@btechlabs`
|
|
24
|
+
4. Enter your Github username
|
|
25
|
+
5. Enter your personal access token from step 2 as the password
|
|
26
|
+
|
|
27
|
+
Now you can install ads-web-sdk packages from Github Packages.
|
|
28
|
+
|
|
29
|
+
#Run
|
|
30
|
+
npm install @btechlabs/ads-web-sdk
|
|
31
|
+
# or
|
|
32
|
+
yarn add @btechlabs/ads-web-sdk
|
|
33
|
+
|
|
34
|
+
```
|
|
35
|
+
|
|
36
|
+
---
|
|
37
|
+
|
|
38
|
+
## 🖼️ Rendering Ads with `<AdsCarousel />`
|
|
39
|
+
|
|
40
|
+
The `AdsCarousel` component is used to display banners at specific UI locations.
|
|
41
|
+
|
|
42
|
+
### ✅ Example 1: Home Top Banner (No `params` Required)
|
|
43
|
+
|
|
44
|
+
```tsx
|
|
45
|
+
import { AdsCarousel } from '@btechlabs/ads-web-sdk/AdsCarousel';
|
|
46
|
+
import '@btechlabs/ads-web-sdk/AdsCarousel.css';
|
|
47
|
+
|
|
48
|
+
<AdsCarousel locationId="Green_Home_Top_Banner" language="en" environment="production" adServerApiKey="YOUR_API_KEY" trackAdHandler={(eventName, eventProperties) => posthog.capture(eventName, eventProperties)} />;
|
|
49
|
+
```
|
|
50
|
+
|
|
51
|
+
### ✅ Example 2: Category Top Banner (**Requires `params`**)
|
|
52
|
+
|
|
53
|
+
```tsx
|
|
54
|
+
<AdsCarousel
|
|
55
|
+
locationId="Green_Category_Top_Banner"
|
|
56
|
+
language="en"
|
|
57
|
+
environment="production"
|
|
58
|
+
adServerApiKey="YOUR_API_KEY"
|
|
59
|
+
trackAdHandler={(eventName, eventProperties) => posthog.capture(eventName, eventProperties)}
|
|
60
|
+
params={{ category_id: '123' }}
|
|
61
|
+
autoplayDelay={3000}
|
|
62
|
+
onAdClick={(event) => {
|
|
63
|
+
console.log('Ad clicked:', event);
|
|
64
|
+
}}
|
|
65
|
+
/>
|
|
66
|
+
```
|
|
67
|
+
|
|
68
|
+
---
|
|
69
|
+
|
|
70
|
+
## ⚙️ Props Reference
|
|
71
|
+
|
|
72
|
+
```tsx
|
|
73
|
+
| Prop | Type | Required | Default | Description |
|
|
74
|
+
|----------------------|------------------------------------------------------------------|------------|-----------|----------------------------------------------------------------------|
|
|
75
|
+
| `locationId` | 'Green_Home_Top_Banner' | 'Green_Category_Top_Banner' | ✅ | – | The ad placement location. |
|
|
76
|
+
| `language` | 'en' | 'ar' | ✅ | – | Language for ad content. |
|
|
77
|
+
| `environment` | 'production' | 'staging' | 'test' | 'development' | ✅ | – | Environment to target the correct API endpoints. |
|
|
78
|
+
| `adServerApiKey` | string | ✅ | – | API key to authorize SDK requests. |
|
|
79
|
+
| `trackAdHandler` | (eventName: string, eventProps: Record<string, unknown>) => void | Optional | – | Custom event tracking method (e.g. posthog.capture). |
|
|
80
|
+
| `logError` | (error: unknown, options?: TCaptureErrorOptions) => void | Optional | – | Consumer-provided error logger (Sentry/Datadog/custom). |
|
|
81
|
+
| `params` | Record<string, string> | Optional | – | Required for some locations (e.g. category_id for category banners). |
|
|
82
|
+
| `banners` | AdData[] | Optional | – | Provide banners directly to render (skips fetching). |
|
|
83
|
+
| `autoplayDelay` | number | Optional | 4000 | Time in ms between automatic slide transitions. |
|
|
84
|
+
| `swipeThreshold` | number | Optional | 10 | Drag threshold (% of width) to trigger a swipe. |
|
|
85
|
+
| `transitionDuration` | number | Optional | 20 | Speed of transitions (lower = faster). |
|
|
86
|
+
| `showProgressBar` | boolean | Optional | true | Displays an progress bar on the active slide (delay progress) |
|
|
87
|
+
| `onAdClick` | (event: TLinkClickEvent) => void | Optional | – | Handle click events triggered from ad banners.
|
|
88
|
+
| `isLoggedin` | boolean | Optional | – | If user is logged in or guest.
|
|
89
|
+
| `userId` | string | Optional | – | Logged in user id.
|
|
90
|
+
```
|
|
91
|
+
|
|
92
|
+
---
|
|
93
|
+
|
|
94
|
+
## 🖱️ Click Event Types
|
|
95
|
+
|
|
96
|
+
The `onAdClick` handler receives an event with one of the following types:
|
|
97
|
+
|
|
98
|
+
### 1. `single category`
|
|
99
|
+
|
|
100
|
+
Triggered when a single category-based banner is clicked.
|
|
101
|
+
|
|
102
|
+
```ts
|
|
103
|
+
{
|
|
104
|
+
type: 'single_category';
|
|
105
|
+
value: string; // category ID
|
|
106
|
+
filters: {
|
|
107
|
+
key: string;
|
|
108
|
+
value: string[];
|
|
109
|
+
}[];
|
|
110
|
+
}
|
|
111
|
+
```
|
|
112
|
+
|
|
113
|
+
**Use case**: Navigate to a filtered product listing page based on category and filters.
|
|
114
|
+
|
|
115
|
+
---
|
|
116
|
+
|
|
117
|
+
### 2. `multiple categories`
|
|
118
|
+
|
|
119
|
+
Triggered when a multiple category-based banner is clicked.
|
|
120
|
+
|
|
121
|
+
```ts
|
|
122
|
+
{
|
|
123
|
+
type: 'multiple_categories';
|
|
124
|
+
value: string[]; // category IDs
|
|
125
|
+
filters: {
|
|
126
|
+
key: string;
|
|
127
|
+
value: string[];
|
|
128
|
+
}[];
|
|
129
|
+
}
|
|
130
|
+
```
|
|
131
|
+
|
|
132
|
+
**Use case**: Navigate to a filtered product listing page based on categories and filters.
|
|
133
|
+
|
|
134
|
+
---
|
|
135
|
+
|
|
136
|
+
### 3. `single product`
|
|
137
|
+
|
|
138
|
+
Triggered when the user clicks a product-specific ad.
|
|
139
|
+
|
|
140
|
+
```ts
|
|
141
|
+
{
|
|
142
|
+
type: 'single_product';
|
|
143
|
+
value: string; // Offering ID
|
|
144
|
+
slug?: string;
|
|
145
|
+
}
|
|
146
|
+
```
|
|
147
|
+
|
|
148
|
+
**Use case**: Redirect to the product detail page.
|
|
149
|
+
|
|
150
|
+
---
|
|
151
|
+
|
|
152
|
+
### 3. `collection`
|
|
153
|
+
|
|
154
|
+
Triggered when the user clicks a collection-specific ad.
|
|
155
|
+
|
|
156
|
+
```ts
|
|
157
|
+
{
|
|
158
|
+
type: 'collection';
|
|
159
|
+
value: string; // collection ID
|
|
160
|
+
}
|
|
161
|
+
```
|
|
162
|
+
|
|
163
|
+
**Use case**: Redirect to the collection PLP page.
|
|
164
|
+
|
|
165
|
+
---
|
|
166
|
+
|
|
167
|
+
## 🧪 Full Usage Example
|
|
168
|
+
|
|
169
|
+
```tsx
|
|
170
|
+
import { AdsCarousel } from '@btechlabs/ads-web-sdk/AdsCarousel';
|
|
171
|
+
import '@btechlabs/ads-web-sdk/AdsCarousel.css';
|
|
172
|
+
|
|
173
|
+
function CategoryPage() {
|
|
174
|
+
return (
|
|
175
|
+
<div>
|
|
176
|
+
<h1>Category Page</h1>
|
|
177
|
+
<AdsCarousel
|
|
178
|
+
locationId="Green_Category_Top_Banner"
|
|
179
|
+
language="en"
|
|
180
|
+
environment="production"
|
|
181
|
+
adServerApiKey="your-api-key"
|
|
182
|
+
trackAdHandler={(eventName, eventProperties) => posthog.capture(eventName, eventProperties)}
|
|
183
|
+
params={{ category_id: '456' }}
|
|
184
|
+
autoplayDelay={3000}
|
|
185
|
+
onAdClick={(event) => {
|
|
186
|
+
if (event.type === 'single_category') {
|
|
187
|
+
// Navigate to filtered product list
|
|
188
|
+
} else if (event.type === 'single_product') {
|
|
189
|
+
// Redirect to product details
|
|
190
|
+
}
|
|
191
|
+
}}
|
|
192
|
+
/>
|
|
193
|
+
</div>
|
|
194
|
+
);
|
|
195
|
+
}
|
|
196
|
+
```
|
|
197
|
+
|
|
198
|
+
---
|
|
199
|
+
|
|
200
|
+
## ❗ Error Handling & Reporting
|
|
201
|
+
|
|
202
|
+
The SDK surfaces recoverable issues via your **logError** function. For unexpected runtime crashes, use an **Error Boundary** to catch errors and render a fallback UI.
|
|
203
|
+
|
|
204
|
+
### 1) Provide a logger (`logError`)
|
|
205
|
+
|
|
206
|
+
```ts
|
|
207
|
+
import * as Sentry from '@sentry/react';
|
|
208
|
+
|
|
209
|
+
export type TCaptureErrorOptions = {
|
|
210
|
+
level?: 'error' | 'warning' | 'info' | 'fatal' | 'debug' | 'log';
|
|
211
|
+
tags?: { [key: string]: string };
|
|
212
|
+
context?: { data: { source: string; [key: string]: unknown } };
|
|
213
|
+
};
|
|
214
|
+
|
|
215
|
+
export const logError = (error: unknown, options: TCaptureErrorOptions = {}) => {
|
|
216
|
+
Sentry.captureException(error, {
|
|
217
|
+
level: options.level,
|
|
218
|
+
tags: options.tags,
|
|
219
|
+
extra: options.context?.data,
|
|
220
|
+
});
|
|
221
|
+
};
|
|
222
|
+
```
|
|
223
|
+
|
|
224
|
+
Then pass it to the SDK:
|
|
225
|
+
|
|
226
|
+
```tsx
|
|
227
|
+
<AdsCarousel
|
|
228
|
+
locationId="Green_Home_Top_Banner"
|
|
229
|
+
language="en"
|
|
230
|
+
environment={test}
|
|
231
|
+
adServerApiKey={your - api - key}
|
|
232
|
+
trackAdHandler={(eventType, payload) => posthog.capture(eventType, payload)}
|
|
233
|
+
logError={logError} // 👈 pass it here
|
|
234
|
+
/>
|
|
235
|
+
```
|
|
236
|
+
|
|
237
|
+
### 2) Wrap banners with an Error Boundary (optional but recommended)
|
|
238
|
+
|
|
239
|
+
```tsx
|
|
240
|
+
<ErrorBoundary fallback={<FallbackAd />}>
|
|
241
|
+
<AdsCarousel locationId="Green_Home_Top_Banner" onAdClick={(data) => setClickedAd(data?.type)} adServerApiKey={your - api - key} environment={test} trackAdHandler={(eventType, payload) => posthog.capture(eventType, payload)} logError={logError} language={lang} />
|
|
242
|
+
</ErrorBoundary>
|
|
243
|
+
```
|
|
244
|
+
|
|
245
|
+
### 3) What gets reported
|
|
246
|
+
|
|
247
|
+
- **API Errors:**
|
|
248
|
+
The SDK validates API responses and reports descriptive errors via `logError`.
|
|
249
|
+
- `401 Unauthorized` → "Unauthorized access – invalid Ad server API key"
|
|
250
|
+
- `400 Bad Request` → "Bad request – invalid parameters"
|
|
251
|
+
- Other non-OK responses → "Ad server API error: <response message>" (validates `locationId`)
|
|
252
|
+
- **Missing / invalid environment:**
|
|
253
|
+
If `environment` is missing or invalid, the SDK logs an **error**.
|
|
254
|
+
- **Missing / invalid tracker:**
|
|
255
|
+
If `trackAdHandler` is missing or not a function, the SDK logs a **warning**.
|
|
256
|
+
|
|
257
|
+
- **Image load failure:**
|
|
258
|
+
When a banner image fails to load, the SDK logs an **error** and swaps to your `fallbackImg` if provided.
|
|
259
|
+
|
|
260
|
+
- **Unexpected render errors:**
|
|
261
|
+
Any unhandled runtime/render errors are caught by your **Error Boundary**, which lets you show a fallback UI (e.g., `<FallbackAd />`).
|
|
262
|
+
|
|
263
|
+
---
|
|
264
|
+
|
|
265
|
+
# 🛍️ Brandshop
|
|
266
|
+
|
|
267
|
+
The `Brandshop` component is used to display a full brand shop experience within your application. It supports multilingual content, dynamic brandshop loading.
|
|
268
|
+
|
|
269
|
+
---
|
|
270
|
+
|
|
271
|
+
## ✅ Example Usage
|
|
272
|
+
|
|
273
|
+
```tsx
|
|
274
|
+
import Brandshop from '@btechlabs/ads-web-sdk/Brandshop';
|
|
275
|
+
import '@btechlabs/ads-web-sdk/Brandshop.css';
|
|
276
|
+
|
|
277
|
+
<Brandshop
|
|
278
|
+
adServerApiKey="YOUR_API_KEY"
|
|
279
|
+
brandshopId="YOUR_BRANDSHOP_ID"
|
|
280
|
+
environment="test"
|
|
281
|
+
language="en"
|
|
282
|
+
isLoggedin={true}
|
|
283
|
+
trackBrandshopHandler={(eventName, eventProperties) => posthog.capture(eventName, eventProperties)}
|
|
284
|
+
onLinkClick={(event) => {
|
|
285
|
+
console.log('Link clicked:', event);
|
|
286
|
+
}}
|
|
287
|
+
/>;
|
|
288
|
+
```
|
|
289
|
+
|
|
290
|
+
---
|
|
291
|
+
|
|
292
|
+
## ⚙️ Props Reference
|
|
293
|
+
|
|
294
|
+
```tsx
|
|
295
|
+
| Prop | Type | Required | Default | Description |
|
|
296
|
+
|-----------------------|------------------------------------------------------------------|------------|-----------|---------------------------------------------------------|
|
|
297
|
+
| `brandshopId` | string | ✅ | – | The unique identifier for the brandshop to be rendered. |
|
|
298
|
+
| `language` | 'en' | 'ar' | ✅ | – | Language for brandshop content. |
|
|
299
|
+
| `environment` | 'production' | 'staging' | 'test' | 'development' | ✅ | – | Target environment for fetching brandshop data. |
|
|
300
|
+
| `adServerApiKey` | string | ✅ | – | API key to authorize SDK requests. |
|
|
301
|
+
| `onLinkClick` | (event: TLinkClickEvent) => void | ✅ | – | Callback for handling link clicks inside the brandshop. |
|
|
302
|
+
| `trackBrandshopHandler` | (eventName: string, eventProps: Record<string, unknown>) => void | optional | – | Custom event tracking method.
|
|
303
|
+
| `brandshop` | TBrandshopData | Optional | – | Provide brandshop details directly to render (skips fetching internally). |
|
|
304
|
+
| `isLoggedin` | boolean | ✅ | – | If user is logged in or guest. |
|
|
305
|
+
```
|
|
306
|
+
|
|
307
|
+
---
|
|
308
|
+
|
|
309
|
+
### Example
|
|
310
|
+
|
|
311
|
+
```tsx
|
|
312
|
+
<Brandshop
|
|
313
|
+
adServerApiKey="YOUR_API_KEY"
|
|
314
|
+
brandshopId="12345"
|
|
315
|
+
environment="production"
|
|
316
|
+
language="en"
|
|
317
|
+
isLoggedin={false}
|
|
318
|
+
trackBrandshopHandler={(eventName, eventProperties) => posthog.capture(eventName, eventProperties)}
|
|
319
|
+
onLinkClick={(event) => {
|
|
320
|
+
console.log('Link clicked:', event);
|
|
321
|
+
}}
|
|
322
|
+
/>
|
|
323
|
+
```
|
|
324
|
+
|
|
325
|
+
---
|
|
326
|
+
|
|
327
|
+
## ❗ Error Handling
|
|
328
|
+
|
|
329
|
+
If any required prop (such as `brandshopId`, `language`, `environment`, or `adServerApiKey`) is missing, the SDK will log a descriptive warning in the console. Ensure all required values are provided before using the `Brandshop` component.
|
|
330
|
+
|
|
331
|
+
---
|
|
332
|
+
|
|
333
|
+
## 🏬 Brandshops Entry Point
|
|
334
|
+
|
|
335
|
+
The `Brandshops` entry point is used to display a horizontally scrollable list of available brandshops. Each brandshop is rendered as a logo button that triggers your `onBrandshopClick` handler when clicked.
|
|
336
|
+
|
|
337
|
+
---
|
|
338
|
+
|
|
339
|
+
### ✅ Example Usage
|
|
340
|
+
|
|
341
|
+
```tsx
|
|
342
|
+
import { Brandshops } from '@btechlabs/ads-web-sdk/Brandshops';
|
|
343
|
+
import '@btechlabs/ads-web-sdk/Brandshops.css';
|
|
344
|
+
|
|
345
|
+
<Brandshops
|
|
346
|
+
adServerApiKey="YOUR_API_KEY"
|
|
347
|
+
environment="production"
|
|
348
|
+
language="en"
|
|
349
|
+
onBrandshopClick={(id) => {
|
|
350
|
+
console.log('Brandshop clicked:', id);
|
|
351
|
+
}}
|
|
352
|
+
/>;
|
|
353
|
+
```
|
|
354
|
+
|
|
355
|
+
---
|
|
356
|
+
|
|
357
|
+
## ⚙️ Props Reference
|
|
358
|
+
|
|
359
|
+
```tsx
|
|
360
|
+
| Prop | Type | Required | Default | Description |
|
|
361
|
+
|-------------------|---------------------------------------------------|------------|-----------|---------------------------------------------------------|
|
|
362
|
+
| `language` | 'en' | 'ar' | ✅ | – | Language for brandshop content. |
|
|
363
|
+
| `environment` | 'production' | 'staging' | 'test' | 'development' | ✅ | – | Target environment for fetching brandshop data. |
|
|
364
|
+
| `adServerApiKey` | string | ✅ | – | API key to authorize SDK requests. |
|
|
365
|
+
| `onBrandshopClick`| (brandshopId: string) => void | ✅ | – | Callback triggered when a brandshop is clicked.
|
|
366
|
+
| `title` | string | optional | – | Brandshop entry point title.
|
|
367
|
+
```
|
|
368
|
+
|
|
369
|
+
---
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
._navButtonNext_vq3ll_1,._navButtonPrev_vq3ll_3{background-color:#fff;border:1px solid #EEEEEF}._activeDot_vq3ll_13,._progressBar_vq3ll_15{background-color:#fff}._inactiveDot_vq3ll_23,._progressContainer_vq3ll_25{background-color:#ffffff80}/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-border-style:solid;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-duration:initial;--tw-ease:initial}}}@layer tailwind-theme{:root,:host{--spacing-2xsmall:8px;--spacing-small:16px;--spacing-large:24px;--spacing-2xlarge:40px;--font-sans:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--font-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;--color-white:#fff;--spacing:.25rem;--animate-pulse:pulse 2s cubic-bezier(.4,0,.6,1)infinite;--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4,0,.2,1);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono)}}@layer tailwind-base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab,red,red)){::placeholder{color:color-mix(in oklab,currentcolor 50%,transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer tailwind-utilities{[dir=rtl] .flip-horizontal{transform:translateY(-50%)scaleX(-1)}[dir=rtl] .custom-translate-x-1-2{transform:translate(50%)}.custom-translate-x-1-2{transform:translate(-50%)}.custom-translate-y-1-2{transform:translateY(-50%)}.bg-secondarySupportiveL4{background-color:#eeeeef}.absolute{position:absolute}.relative{position:relative}.static{position:static}.start-1\/2{inset-inline-start:50%}.start-small{inset-inline-start:var(--spacing-small)}.end-small{inset-inline-end:var(--spacing-small)}.top-0{top:calc(var(--spacing)*0)}.top-1\/2{top:50%}.right-0{right:calc(var(--spacing)*0)}.right-auto{right:auto}.bottom-small{bottom:var(--spacing-small)}.left-0{left:calc(var(--spacing)*0)}.left-auto{left:auto}.m-0{margin:calc(var(--spacing)*0)}.mt-4{margin-top:calc(var(--spacing)*4)}.block{display:block}.flex{display:flex}.grid{display:grid}.hidden{display:none}.aspect-\[720\/400\]{aspect-ratio:720/400}.aspect-square{aspect-ratio:1}.h-1{height:calc(var(--spacing)*1)}.h-\[30px\]{height:30px}.h-full{height:100%}.w-1{width:calc(var(--spacing)*1)}.w-12{width:calc(var(--spacing)*12)}.w-\[30px\]{width:30px}.w-full{width:100%}.min-w-0{min-width:calc(var(--spacing)*0)}.shrink-0{flex-shrink:0}.grow-0{flex-grow:0}.basis-full{flex-basis:100%}.transform{transform:var(--tw-rotate-x,)var(--tw-rotate-y,)var(--tw-rotate-z,)var(--tw-skew-x,)var(--tw-skew-y,)}.animate-pulse{animation:var(--animate-pulse)}.cursor-pointer{cursor:pointer}.resize{resize:both}.appearance-none{appearance:none}.flex-col{flex-direction:column}.place-items-center{place-items:center}.items-center{align-items:center}.justify-center{justify-content:center}.gap-2xsmall{gap:var(--spacing-2xsmall)}.gap-large{gap:var(--spacing-large)}.overflow-hidden{overflow:hidden}.rounded{border-radius:.25rem}.rounded-full{border-radius:3.40282e38px}.border-0{border-style:var(--tw-border-style);border-width:0}.border-\[0\.5px\]{border-style:var(--tw-border-style);border-width:.5px}.bg-\[\#e2e2e2\]{background-color:#e2e2e2}.bg-transparent{background-color:#0000}.bg-white{background-color:var(--color-white)}.bg-white\/50{background-color:#ffffff80}@supports (color:color-mix(in lab,red,red)){.bg-white\/50{background-color:color-mix(in oklab,var(--color-white)50%,transparent)}}.object-contain{object-fit:contain}.object-cover{object-fit:cover}.p-0{padding:calc(var(--spacing)*0)}.p-2xsmall{padding:var(--spacing-2xsmall)}.p-6{padding:calc(var(--spacing)*6)}.shadow-\[0_1px_2px_0_\#E0E3E8\]{--tw-shadow:0 1px 2px 0 var(--tw-shadow-color,#e0e3e8);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.transition-\[width\]{transition-property:width;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.duration-\[60ms\]{--tw-duration:60ms;transition-duration:60ms}.ease-linear{--tw-ease:linear;transition-timing-function:linear}.outline-none{--tw-outline-style:none;outline-style:none}.disabled\:hidden:disabled{display:none}@media (min-width:1024px){.laptop\:aspect-\[2400\/800\]{aspect-ratio:2400/800}.laptop\:rounded-\[24px\]{border-radius:24px}.laptop\:px-2xlarge{padding-inline:var(--spacing-2xlarge)}@media (hover:hover){.laptop\:group-hover\:flex:is(:where(.group):hover *){display:flex}.laptop\:group-hover\:disabled\:hidden:is(:where(.group):hover *):disabled{display:none}}}}@property --tw-rotate-x{syntax:"*";inherits:false}@property --tw-rotate-y{syntax:"*";inherits:false}@property --tw-rotate-z{syntax:"*";inherits:false}@property --tw-skew-x{syntax:"*";inherits:false}@property --tw-skew-y{syntax:"*";inherits:false}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-duration{syntax:"*";inherits:false}@property --tw-ease{syntax:"*";inherits:false}@keyframes pulse{50%{opacity:.5}}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './components/Carousel/index'
|