@okendo/shopify-hydrogen 0.0.5 → 0.0.8
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 +133 -150
- package/dist/esnext/components/OkendoProvider.server.d.ts +7 -2
- package/dist/esnext/components/OkendoProvider.server.js +4 -3
- package/dist/esnext/components/OkendoProvider.server.js.map +1 -1
- package/dist/esnext/components/OkendoReviewsWidget.server.js.map +1 -1
- package/dist/esnext/components/OkendoWidget.client.d.ts +1 -1
- package/dist/esnext/components/OkendoWidget.client.js.map +1 -1
- package/dist/esnext/shared/index.d.ts +1 -0
- package/dist/esnext/shared/index.js +1 -0
- package/dist/esnext/shared/index.js.map +1 -1
- package/dist/esnext/shared/requestUtils.d.ts +1 -1
- package/dist/esnext/shared/requestUtils.js.map +1 -1
- package/dist/esnext/shared/sharedTypes.d.ts +1 -0
- package/dist/esnext/shared/sharedTypes.js +2 -0
- package/dist/esnext/shared/sharedTypes.js.map +1 -0
- package/package.json +2 -3
package/README.md
CHANGED
|
@@ -2,10 +2,10 @@
|
|
|
2
2
|
|
|
3
3
|
This is the React component library to support Okendo Widget Plus Widgets in Shopify Hydrogen Projects.
|
|
4
4
|
|
|
5
|
-
Currently we
|
|
5
|
+
Currently we provide server side components for 2 widgets:
|
|
6
6
|
|
|
7
|
-
1. Reviews List
|
|
8
|
-
2. Star Ratings
|
|
7
|
+
1. [Reviews List](#components--okendo-reviews-widget)
|
|
8
|
+
2. [Star Ratings](#components--okendo-star-rating)
|
|
9
9
|
|
|
10
10
|
<br/>
|
|
11
11
|
|
|
@@ -13,16 +13,15 @@ Currently we support server side components for 2 widgets:
|
|
|
13
13
|
|
|
14
14
|
1. [What is Okendo Shopify Hydrogen](#introduction)
|
|
15
15
|
2. [Guided Installation](#installation)
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
3. [How to Use Okendo Hydrogen Components In Your Hydrogen Apps](#
|
|
19
|
-
4. [
|
|
20
|
-
5. [
|
|
21
|
-
6. [View Our Okendo Sample Hydrogen App](#learnmore)
|
|
16
|
+
- [Configure Hydrogen App](#configure-hydrogen-app-config)
|
|
17
|
+
- [Expose Shopify Metafields](#expose-shopify-metafields)
|
|
18
|
+
3. [How to Use Okendo Hydrogen Components In Your Hydrogen Apps](#how-to-use-okendo-hydrogen-components-in-your-hydrogen-app)
|
|
19
|
+
4. [Components](#components)
|
|
20
|
+
5. [View Our Okendo Sample Hydrogen App](#view-our-okendo-sample-hydrogen-app)
|
|
22
21
|
|
|
23
22
|
<br/><br/>
|
|
24
23
|
|
|
25
|
-
# What is Okendo Shopify Hydrogen
|
|
24
|
+
# What is Okendo Shopify Hydrogen? <a id="introduction" name="introduction"></a>
|
|
26
25
|
|
|
27
26
|
Okendo Shopify Hydrogen is a React component library to be used in Shopify Hydrogen apps. This utilises [Shopify’s Hydrogen framework](https://shopify.dev/custom-storefronts/hydrogen/framework) which is used to create custom storefronts using both server-side rendered and client-side rendered React components.
|
|
28
27
|
|
|
@@ -30,7 +29,7 @@ The purpose of this library is for a Hydrogen-based React Shopify storefront to
|
|
|
30
29
|
|
|
31
30
|
<br/>
|
|
32
31
|
|
|
33
|
-
# Guided Installation <a name="installation"></a>
|
|
32
|
+
# Guided Installation <a id="installation" name="installation"></a>
|
|
34
33
|
|
|
35
34
|
The purpose of this documentation is to guide you on the following:
|
|
36
35
|
|
|
@@ -48,20 +47,16 @@ The purpose of this documentation is to guide you on the following:
|
|
|
48
47
|
|
|
49
48
|
<br/>
|
|
50
49
|
|
|
51
|
-
<a name="
|
|
50
|
+
## Configure Hydrogen app config <a id="configure-hydrogen-app-config" name="configure-hydrogen-app-config"></a>
|
|
52
51
|
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
1. Open **hydrogen.config.js** in your project.
|
|
52
|
+
1. Open **hydrogen.config.js** in your project.
|
|
56
53
|
2. Make the following changes and save the file:
|
|
57
|
-
- Update
|
|
58
|
-
- Update
|
|
54
|
+
- Update `storeDomain` to specify your store's domain name.
|
|
55
|
+
- Update `storefrontToken` to specify your Storefront API access token.
|
|
59
56
|
|
|
60
57
|
<br/>
|
|
61
58
|
|
|
62
|
-
<a name="
|
|
63
|
-
|
|
64
|
-
## 2. Expose Shopify Metafields
|
|
59
|
+
## Expose Shopify Metafields <a id="expose-shopify-metafields" name="expose-shopify-metafields"></a>
|
|
65
60
|
|
|
66
61
|
Okendo Reviews utilise Product and Shop specific [metafields](https://shopify.dev/api/examples/metafields) in order to function and provide a seamless user experience. You will need to expose these metafields so that they can be retrieved by your Hydrogen app.
|
|
67
62
|
|
|
@@ -75,10 +70,11 @@ The preferred method to expose Metafields is to [contact Okendo Support](mailto:
|
|
|
75
70
|
|
|
76
71
|
<details>
|
|
77
72
|
<summary>Learn How to Expose Metafields Via The Storefront API</summary>
|
|
78
|
-
|
|
79
|
-
# Exposing Metafields via GraphQL
|
|
80
73
|
|
|
81
|
-
##
|
|
74
|
+
## Exposing Metafields via GraphQL
|
|
75
|
+
|
|
76
|
+
|
|
77
|
+
### Using Curl
|
|
82
78
|
|
|
83
79
|
You can also expose the required Okendo Shopify Metafields by using GraphQL with curl.
|
|
84
80
|
|
|
@@ -195,12 +191,11 @@ mutation {
|
|
|
195
191
|
'
|
|
196
192
|
```
|
|
197
193
|
|
|
198
|
-
|
|
194
|
+
### Using GraphQL IDE
|
|
199
195
|
|
|
200
196
|
1. Open your GraphQL IDE (such as Postman) and make a `POST` request with the following details:
|
|
201
|
-
|
|
202
|
-
- **
|
|
203
|
-
- **Headers:** - X-Shopify-Access-Token: {access_token} - Content-Type: application/json 2. Execute the following request to expose the `WidgetPreRenderStyleTag` Shop Metafield.
|
|
197
|
+
- **URL:** https://{shop}.myshopify.com/admin/api/2022-04/graphql.json
|
|
198
|
+
- **Headers:** - X-Shopify-Access-Token: {access_token} - Content-Type: application/json 2. Execute the following request to expose the `WidgetPreRenderStyleTag` Shop Metafield.
|
|
204
199
|
|
|
205
200
|
```graphql
|
|
206
201
|
mutation {
|
|
@@ -290,165 +285,153 @@ mutation {
|
|
|
290
285
|
|
|
291
286
|
**References**
|
|
292
287
|
|
|
293
|
-
[https://shopify.dev/api/examples/metafields#step-1-expose-metafields](https://shopify.dev/api/examples/metafields#step-1-expose-metafields)
|
|
294
|
-
[https://shopify.dev/api/admin-graphql/2022-04/mutations/metafieldstorefrontvisibilitycreate](https://shopify.dev/api/admin-graphql/2022-04/mutations/metafieldstorefrontvisibilitycreate)
|
|
288
|
+
- [https://shopify.dev/api/examples/metafields#step-1-expose-metafields](https://shopify.dev/api/examples/metafields#step-1-expose-metafields)
|
|
289
|
+
- [https://shopify.dev/api/admin-graphql/2022-04/mutations/metafieldstorefrontvisibilitycreate](https://shopify.dev/api/admin-graphql/2022-04/mutations/metafieldstorefrontvisibilitycreate)
|
|
295
290
|
</details>
|
|
296
291
|
|
|
297
292
|
<br/><br/>
|
|
298
293
|
|
|
299
|
-
<a name="
|
|
294
|
+
# How to Use Okendo Hydrogen Components In Your Hydrogen App <a id="how-to-use-okendo-hydrogen-components-in-your-hydrogen-app" name="3-how-to-use-okendo-hydrogen-components-in-your-hydrogen-app"></a>
|
|
300
295
|
|
|
301
|
-
##
|
|
302
|
-
|
|
303
|
-
### Installation
|
|
296
|
+
## Installation
|
|
304
297
|
|
|
305
298
|
1. In your Hydrogen app directory, run `npm install @okendo/shopify-hydrogen` inside a terminal or PowerShell window.
|
|
306
|
-
2.
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
|
|
326
|
-
|
|
327
|
-
|
|
328
|
-
|
|
329
|
-
|
|
330
|
-
|
|
331
|
-
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
|
|
335
|
-
|
|
336
|
-
|
|
337
|
-
|
|
338
|
-
|
|
339
|
-
|
|
340
|
-
|
|
341
|
-
|
|
342
|
-
|
|
343
|
-
|
|
344
|
-
|
|
345
|
-
|
|
346
|
-
|
|
347
|
-
|
|
348
|
-
|
|
349
|
-
|
|
350
|
-
|
|
351
|
-
|
|
352
|
-
|
|
353
|
-
|
|
354
|
-
|
|
355
|
-
|
|
356
|
-
|
|
357
|
-
|
|
358
|
-
|
|
299
|
+
2. **Optional:** Create (or add to) your `.env` file at the top level of your project (next to **hydrogen.config.js**) the following, where `<your_subscriber_id>` is replaced with your Okendo Subscriber ID:
|
|
300
|
+
|
|
301
|
+
```sh
|
|
302
|
+
# .env
|
|
303
|
+
VITE_OKENDO_SUBSCRIBER_ID=<your_subscriber_id>
|
|
304
|
+
```
|
|
305
|
+
|
|
306
|
+
3. Open **vite.config.js** and add `import okendo from '@okendo/shopify-hydrogen/plugin';` to the list of imports.
|
|
307
|
+
4. Add `okendo()` to the list of `plugins`.
|
|
308
|
+
|
|
309
|
+
```tsx
|
|
310
|
+
/* vite.config.js */
|
|
311
|
+
import {defineConfig} from 'vite';
|
|
312
|
+
import hydrogen from '@shopify/hydrogen/plugin';
|
|
313
|
+
import okendo from '@okendo/shopify-hydrogen/plugin';
|
|
314
|
+
|
|
315
|
+
// https://vitejs.dev/config/
|
|
316
|
+
export default defineConfig({
|
|
317
|
+
plugins: [hydrogen(), okendo()],
|
|
318
|
+
optimizeDeps: {include: ['@headlessui/react']},
|
|
319
|
+
test: {
|
|
320
|
+
globals: true,
|
|
321
|
+
testTimeout: 10000,
|
|
322
|
+
hookTimeout: 10000,
|
|
323
|
+
},
|
|
324
|
+
});
|
|
325
|
+
```
|
|
326
|
+
|
|
327
|
+
5. Open **App.server.jsx** and import `OkendoProvider`.
|
|
328
|
+
6. Include the `OkendoProvider` as shown below, passing through the `request` prop from the main `App` and your `subscriberId` from your Vite environment variables.
|
|
329
|
+
|
|
330
|
+
```tsx
|
|
331
|
+
/* App.server.jsx */
|
|
332
|
+
import {OkendoProvider} from '@okendo/shopify-hydrogen';
|
|
333
|
+
|
|
334
|
+
function App({request}) {
|
|
335
|
+
return (
|
|
336
|
+
<Suspense fallback={<LoadingFallback />}>
|
|
337
|
+
<ShopifyProvider>
|
|
338
|
+
<!-- *** Include OkendoProvider HERE *** -->
|
|
339
|
+
<OkendoProvider
|
|
340
|
+
request={request}
|
|
341
|
+
subscriberId={import.meta.env.VITE_OKENDO_SUBSCRIBER_ID}
|
|
342
|
+
/>
|
|
343
|
+
<ServerCartProvider>
|
|
344
|
+
<DefaultSeo />
|
|
345
|
+
<Router>
|
|
346
|
+
<FileRoutes />
|
|
347
|
+
<Route path="*" page={<NotFound />} />
|
|
348
|
+
</Router>
|
|
349
|
+
</ServerCartProvider>
|
|
350
|
+
<PerformanceMetrics />
|
|
351
|
+
{import.meta.env.DEV && <PerformanceMetricsDebug />}
|
|
352
|
+
</ShopifyProvider>
|
|
353
|
+
</Suspense>
|
|
354
|
+
);
|
|
355
|
+
```
|
|
356
|
+
|
|
357
|
+
If your app doesn't use Vite environment variables from a `.env` file, you could also provide your Okendo Subscriber ID through other means, i.e. directly:
|
|
358
|
+
|
|
359
|
+
``` tsx
|
|
360
|
+
<OkendoProvider
|
|
361
|
+
request={request}
|
|
362
|
+
subscriberId={okendoSubscriberId}
|
|
363
|
+
/>
|
|
364
|
+
```
|
|
365
|
+
|
|
366
|
+
## Widget Usage
|
|
367
|
+
|
|
368
|
+
Import `OkendoReviewsWidget` and `OkendoStarRating` and use as JSX components. Pass in the Shopify Product ID as a prop.
|
|
369
|
+
|
|
370
|
+
The `productId` prop is optional for the `OkendoReviewsWidget`. Not providing it will mean that the widget will display reviews for all products, which is ideal for homepages or collection pages.
|
|
359
371
|
|
|
360
372
|
```tsx
|
|
361
373
|
import {
|
|
362
374
|
OkendoReviewsWidget,
|
|
363
375
|
OkendoStarRating,
|
|
364
|
-
} from
|
|
376
|
+
} from '@okendo/shopify-hydrogen';
|
|
377
|
+
|
|
378
|
+
...
|
|
365
379
|
|
|
366
380
|
const okendoReviewsWidget = <OkendoReviewsWidget productId={product.id} />;
|
|
367
381
|
const okendoStarRating = <OkendoStarRating productId={product.id} />;
|
|
368
382
|
```
|
|
369
383
|
|
|
370
|
-
> ℹ️ If you
|
|
371
|
-
|
|
372
|
-
<br/>
|
|
373
|
-
|
|
374
|
-
---
|
|
375
|
-
|
|
376
|
-
<a name="componentprops"></a>
|
|
377
|
-
|
|
378
|
-
## Component Props
|
|
379
|
-
|
|
380
|
-
<br/>
|
|
381
|
-
|
|
382
|
-
### OkendoProviderProps
|
|
383
|
-
|
|
384
|
-
| Name | Type | Description | Optional |
|
|
385
|
-
| ------------------------ | -------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- |
|
|
386
|
-
| subscriberId | string | The Okendo subscriber ID. | no |
|
|
387
|
-
| apiDomain | string | To override the default Okendo API Domain. (Default: api.okendo.io/v1) | yes |
|
|
388
|
-
| cdnDomain | string | To override the default Okendo CDN domain. (Default: d3hw6dc1ow8pp2.cloudfront.net) | yes |
|
|
389
|
-
| productUrlFormatOverride | (product: Pick<ReviewWithProductPublic, 'productHandle' \| 'productId' \| 'variantId'>) => string; | By default, we use Hydrogen’s default product routing. **Advanced Usage Only:** Function hook which allows the custom configuration of the Shopify product URLs from the Okendo Reviews Widget. | yes |
|
|
384
|
+
> ℹ️ Okendo widgets are server components. If you want to use them within a client component, you must pass the widget components as props to your client component. Widget components can be used directly in a server component. [Learn more here](https://shopify.dev/api/hydrogen/components#customizing-hydrogen-components).
|
|
390
385
|
|
|
391
|
-
<br
|
|
392
|
-
|
|
393
|
-
### OkendoReviewsWidgetProps
|
|
386
|
+
<br />
|
|
394
387
|
|
|
395
|
-
|
|
396
|
-
| --------- | ------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- |
|
|
397
|
-
| productId | string | The Shopify Product ID. If provided, the Reviews Widget will be configured to display reviews specific to that product. Otherwise, the Reviews Widget will display reviews for all products. | yes |
|
|
388
|
+
# Components <a id="components" name="components"></a>
|
|
398
389
|
|
|
399
|
-
|
|
390
|
+
### OkendoProvider
|
|
400
391
|
|
|
401
|
-
|
|
392
|
+
Top level component for enabling Okendo Widgets.
|
|
402
393
|
|
|
403
|
-
|
|
404
|
-
| --------- | ------ | ----------------------- | -------- |
|
|
405
|
-
| productId | string | The Shopify Product ID. | no |
|
|
406
|
-
|
|
407
|
-
<br/>
|
|
408
|
-
|
|
409
|
-
---
|
|
410
|
-
|
|
411
|
-
<br/>
|
|
394
|
+
We recommend using it directly inside the `<ShopifyProvider>` as its first child in **App.server.jsx**.
|
|
412
395
|
|
|
413
|
-
|
|
396
|
+
It will provide:
|
|
414
397
|
|
|
415
|
-
|
|
398
|
+
- Okendo Subscriber settings
|
|
399
|
+
- Okendo widget CSS, including:
|
|
400
|
+
- Base variables
|
|
401
|
+
- Custom CSS specified in the Okendo Admin (if applicable)
|
|
402
|
+
- "Above the fold" CSS essential for Server-Side Rendered (SSR) widgets. This ensures styled widgets prior to client-side hydration.
|
|
403
|
+
- Okendo widget initialisation script
|
|
404
|
+
- Used to render/hydrate widgets on the page
|
|
416
405
|
|
|
417
|
-
|
|
406
|
+
| Name | Type | Description | Required |
|
|
407
|
+
| ------------------------------------- | ----------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- |
|
|
408
|
+
| <code>request</code> | <code>ServerComponentRequest</code> | The request passed into <code>App.server.jsx</code> | yes |
|
|
409
|
+
| <code>subscriberId</code> | <code>string</code> | The Okendo subscriber ID. | yes |
|
|
410
|
+
| <code>apiDomain</code> | <code>string</code> | To override the default Okendo API Domain. (Default: <code>api.okendo.io/v1</code>) | no |
|
|
411
|
+
| <code>cdnDomain</code> | <code>string</code> | To override the default Okendo CDN domain. (Default: <code>cdn-static.okendo.io</code>) | no |
|
|
412
|
+
| <code>productUrlFormatOverride</code> | <code>(product: ReviewProduct) => string</code> | By default, we use Hydrogen's out of the box product routing.<br />**Advanced Usage Only:** Function hook which allows the custom configuration of the Shopify product URLs from the Okendo Reviews Widget. | no |
|
|
418
413
|
|
|
419
|
-
|
|
414
|
+
### OkendoReviewsWidget<a id="components--okendo-reviews-widget" name="components--okendo-reviews-widget"></a>
|
|
420
415
|
|
|
421
|
-
|
|
416
|
+
The Okendo Reviews List widget.
|
|
422
417
|
|
|
423
|
-
|
|
418
|
+
| Name | Type | Description | Required |
|
|
419
|
+
| --------- | ------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- |
|
|
420
|
+
| <code>productId</code> | <code>string</code> | The Shopify Product ID. If provided, the Reviews Widget will be configured to display reviews specific to that product. Otherwise, the Reviews Widget will display reviews for all products. | no |
|
|
424
421
|
|
|
425
|
-
|
|
426
|
-
|
|
427
|
-
- Okendo Subscriber Settings JSON
|
|
428
|
-
- Widget Pre-Render Style Tags Metafield: This is the "Above the fold" CSS essential for rendering server-side rendered (SSR) Okendo Reviews Widget (first page) and Star Ratings. This ensures styled widgets before client-side hydration occurs.
|
|
429
|
-
- Base CSS Vars
|
|
430
|
-
- Okendo Initialisation Script: This is used to render the widgets on the page.
|
|
431
|
-
- Any custom CSS specified in the Okendo Admin.
|
|
432
|
-
|
|
433
|
-
<br/>
|
|
434
|
-
|
|
435
|
-
### OkendoStarRating.server
|
|
436
|
-
|
|
437
|
-
This is the server-side rendered Star Rating widget - It then invokes the client side `OkendoWidget.client.tsx` component to perform client side hydration.
|
|
422
|
+
### OkendoStarRating<a id="components--okendo-star-rating" name="components--okendo-star-rating"></a>
|
|
423
|
+
The Okendo Star Rating widget.
|
|
438
424
|
|
|
425
|
+
| Name | Type | Description | Required |
|
|
426
|
+
| ---------------------- | ------------------- | ----------------------- | -------- |
|
|
427
|
+
| <code>productId</code> | <code>string</code> | The Shopify Product ID. | yes |
|
|
439
428
|
<br/>
|
|
440
429
|
|
|
441
|
-
### OkendoReviewsWidget.server
|
|
442
|
-
|
|
443
|
-
This is the server-side rendered Reviews List widget - It then invokes the client side `OkendoWidget.client.tsx` component to perform client side hydration.
|
|
444
|
-
|
|
445
430
|
---
|
|
446
431
|
|
|
447
432
|
<br/>
|
|
448
433
|
|
|
449
|
-
<a name="
|
|
450
|
-
|
|
451
|
-
## View Our Okendo Sample Hydrogen App
|
|
434
|
+
## View Our Okendo Sample Hydrogen App <a id="view-our-okendo-sample-hydrogen-app" name="view-our-okendo-sample-hydrogen-app"></a>
|
|
452
435
|
|
|
453
436
|
We have created a Shopify Hydrogen sample application with our widgets pre-installed.
|
|
454
437
|
|
|
@@ -1,12 +1,17 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { ServerComponentRequest } from '@shopify/hydrogen/dist/esnext/framework/Hydration/ServerComponentRequest.server';
|
|
3
|
-
import type { ReviewWithProductPublic } from '@okendo/reviews-common';
|
|
4
3
|
export declare const OkendoProvider: React.FunctionComponent<OkendoProviderProps>;
|
|
5
4
|
interface OkendoProviderProps {
|
|
6
5
|
apiDomain?: string;
|
|
7
6
|
cdnDomain?: string;
|
|
8
|
-
|
|
7
|
+
children?: React.ReactNode;
|
|
8
|
+
productUrlFormatOverride?: (product: ReviewProduct) => string;
|
|
9
9
|
request: ServerComponentRequest;
|
|
10
10
|
subscriberId: string;
|
|
11
11
|
}
|
|
12
|
+
interface ReviewProduct {
|
|
13
|
+
productHandle?: string;
|
|
14
|
+
productId: string;
|
|
15
|
+
variantId?: string;
|
|
16
|
+
}
|
|
12
17
|
export {};
|
|
@@ -4,9 +4,9 @@ import { fetchSync, useShopQuery, gql, CacheMinutes } from '@shopify/hydrogen';
|
|
|
4
4
|
import { Head } from '@shopify/hydrogen/client';
|
|
5
5
|
import { okendoError, setInOkendoRequestContext } from '../shared';
|
|
6
6
|
const kDefaultOkendoApiDomain = 'api.okendo.io/v1';
|
|
7
|
-
const kDefaultOkendoCdnDomain = '
|
|
7
|
+
const kDefaultOkendoCdnDomain = 'cdn-static.okendo.io';
|
|
8
8
|
export const OkendoProvider = (props) => {
|
|
9
|
-
const { apiDomain, cdnDomain, productUrlFormatOverride, request, subscriberId } = props;
|
|
9
|
+
const { apiDomain, cdnDomain, children, productUrlFormatOverride, request, subscriberId } = props;
|
|
10
10
|
// Download subscriber widget plus settings.
|
|
11
11
|
const url = `https://${apiDomain !== null && apiDomain !== void 0 ? apiDomain : kDefaultOkendoApiDomain}/stores/${subscriberId}/widget_plus_settings`;
|
|
12
12
|
const settingsResponse = fetchSync(url, { preload: true });
|
|
@@ -62,6 +62,7 @@ export const OkendoProvider = (props) => {
|
|
|
62
62
|
React.createElement("script", null, initScriptContents),
|
|
63
63
|
productUrlFormatter && React.createElement("script", { type: "text/javascript" }, `window.okeProductUrlFormatter = ${productUrlFormatter}`)),
|
|
64
64
|
preRenderStyleTags,
|
|
65
|
-
parse(starSymbols)
|
|
65
|
+
parse(starSymbols),
|
|
66
|
+
children));
|
|
66
67
|
};
|
|
67
68
|
//# sourceMappingURL=OkendoProvider.server.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"OkendoProvider.server.js","sourceRoot":"","sources":["../../../src/components/OkendoProvider.server.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,MAAM,mBAAmB,CAAC;AACtC,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,GAAG,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAC/E,OAAO,EAAE,IAAI,EAAE,MAAM,0BAA0B,CAAC;
|
|
1
|
+
{"version":3,"file":"OkendoProvider.server.js","sourceRoot":"","sources":["../../../src/components/OkendoProvider.server.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from 'react';\nimport parse from 'html-react-parser';\nimport { fetchSync, useShopQuery, gql, CacheMinutes } from '@shopify/hydrogen';\nimport { Head } from '@shopify/hydrogen/client';\nimport { ServerComponentRequest } from '@shopify/hydrogen/dist/esnext/framework/Hydration/ServerComponentRequest.server';\nimport type { Metafield } from '@shopify/hydrogen/dist/esnext/storefront-api-types';\n\nimport { okendoError, setInOkendoRequestContext, SKO } from '../shared';\n\nconst kDefaultOkendoApiDomain = 'api.okendo.io/v1';\nconst kDefaultOkendoCdnDomain = 'cdn-static.okendo.io';\n\nexport const OkendoProvider: React.FunctionComponent<OkendoProviderProps> = (props): JSX.Element | null => {\n const { apiDomain, cdnDomain, children, productUrlFormatOverride, request, subscriberId } = props;\n\n // Download subscriber widget plus settings.\n const url = `https://${apiDomain ?? kDefaultOkendoApiDomain}/stores/${subscriberId}/widget_plus_settings`;\n const settingsResponse = fetchSync(url, { preload: true });\n\n if (!settingsResponse.response.ok) {\n console.error(okendoError('Failed to retrieve subscriber settings. Please check your environment variables.'));\n setInOkendoRequestContext(request, 'setupFailed', true);\n return null;\n }\n\n const { cssVariables, customCss, reviewsHeaderConfig, starSymbols } = settingsResponse.json() as WidgetPlusSettingsResponse;\n const cssVariablesNormalized = cssVariables.replace('<style id=\"oke-css-vars\">', '').replace('</style>', '');\n const customCssNormalized = customCss ? customCss.replace('<style id=\"oke-reviews-custom-css\">', '').replace('</style>', '') : '';\n\n // Download contents of widget initialisation script.\n const initScriptResponse = fetchSync(`https://${cdnDomain ?? kDefaultOkendoCdnDomain}/reviews-widget-plus/js/okendo-reviews.js`, {\n cache: CacheMinutes(),\n preload: true\n });\n\n if (!initScriptResponse.response.ok) {\n console.error(okendoError('Failed to retrieve widget initialization script.'));\n setInOkendoRequestContext(request, 'setupFailed', true);\n return null;\n }\n\n const initScriptContents = initScriptResponse.text();\n\n // Set up product URL formatter.\n const productUrlFormatter = typeof productUrlFormatOverride === 'function'\n ? productUrlFormatOverride\n : (product: ReviewProduct) =>\n product?.productHandle\n ? `/products/${product.productHandle}/${product.variantId ? '?variantId=' + product.variantId : ''}`\n : undefined;\n\n // Get pre-rendered style settings.\n const query = gql`\n query metafields {\n shop {\n widgetPreRenderStyleTags: metafield(namespace: \"okendo\", key: \"WidgetPreRenderStyleTags\") {\n value\n }\n }\n }\n `;\n\n const {\n data: { shop: { widgetPreRenderStyleTags } }\n } = useShopQuery<OkendoProviderMetafields>({\n query: query,\n preload: true\n });\n\n const preRenderStyleTags = widgetPreRenderStyleTags?.value ? parse(widgetPreRenderStyleTags.value) : '';\n\n if (!preRenderStyleTags) {\n console.warn(okendoError('Failed to retrieve pre-rendered widget style settings.'));\n }\n\n return (\n <>\n <Head>\n <script id=\"oke-reviews-settings\" type=\"application/json\">{JSON.stringify(reviewsHeaderConfig)}</script>\n <style id=\"oke-css-vars\">{cssVariablesNormalized}</style>\n {customCssNormalized && <style id=\"oke-reviews-custom-css\">{customCssNormalized}</style>}\n <meta name=\"oke:subscriber_id\" content={subscriberId} />\n <script>{initScriptContents}</script>\n {productUrlFormatter && <script type=\"text/javascript\">{`window.okeProductUrlFormatter = ${productUrlFormatter}`}</script>}\n </Head>\n {preRenderStyleTags}\n {parse(starSymbols)}\n {children}\n </>\n );\n}\n\ninterface OkendoProviderProps {\n apiDomain?: string;\n cdnDomain?: string;\n children?: React.ReactNode;\n productUrlFormatOverride?: (product: ReviewProduct) => string;\n request: ServerComponentRequest;\n subscriberId: string;\n}\n\ninterface OkendoProviderMetafields {\n shop: {\n widgetPreRenderStyleTags?: Pick<Metafield, 'value'>\n };\n}\n\ninterface ReviewProduct {\n productHandle?: string;\n productId: string;\n variantId?: string;\n}\n\ninterface WidgetPlusSettingsResponse {\n reviewsHeaderConfig: SKO;\n cssVariables: string;\n starSymbols: string;\n customCss?: string;\n}\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"OkendoReviewsWidget.server.js","sourceRoot":"","sources":["../../../src/components/OkendoReviewsWidget.server.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,MAAM,mBAAmB,CAAC;AACtC,OAAO,EAAE,YAAY,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;
|
|
1
|
+
{"version":3,"file":"OkendoReviewsWidget.server.js","sourceRoot":"","sources":["../../../src/components/OkendoReviewsWidget.server.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,MAAM,mBAAmB,CAAC;AACtC,OAAO,EAAE,YAAY,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAGtD,OAAO,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAC;AAC3D,OAAO,EAAE,kBAAkB,EAAO,uBAAuB,EAAE,oBAAoB,EAAE,MAAM,WAAW,CAAC;AAEnG,MAAM,CAAC,MAAM,mBAAmB,GAAsD,CAAC,KAAK,EAA6B,EAAE;;IACvH,MAAM,EAAE,WAAW,EAAE,GAAG,uBAAuB,EAAE,CAAC;IAClD,IAAI,WAAW,EAAE;QACb,OAAO,IAAI,CAAC;KACf;IAED,MAAM,EAAE,SAAS,EAAE,GAAG,KAAK,CAAC;IAE5B,MAAM,YAAY,GAAG,SAAS;QAC1B,CAAC,CAAC;;;;;;SAMD;QACD,CAAC,CAAC,EAAE,CAAC;IAET,MAAM,KAAK,GAAG,GAAG,CAAA;0BACK,SAAS,CAAC,CAAC,CAAC,mBAAmB,CAAC,CAAC,CAAC,EAAE;cAChD,YAAY;;;;;;;KAOrB,CAAC;IAEF,MAAM,EACF,IAAI,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,EAC1B,GAAG,YAAY,CAAgC;QAC5C,KAAK,EAAE,KAAK;QACZ,OAAO,EAAE,IAAI;QACb,SAAS,EAAE;YACP,SAAS;SACZ;KACJ,CAAC,CAAC;IAEH,IAAI,SAAS,IAAI,CAAC,CAAA,MAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,oBAAoB,0CAAE,KAAK,CAAA,EAAE;QACpD,OAAO,CAAC,IAAI,CAAC,oBAAoB,CAAC,qBAAqB,EAAE,sBAAsB,CAAC,CAAC,CAAC;KACrF;IAED,IAAI,CAAC,CAAA,MAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,4BAA4B,0CAAE,KAAK,CAAA,EAAE;QAC5C,OAAO,CAAC,IAAI,CAAC,oBAAoB,CAAC,qBAAqB,EAAE,8BAA8B,CAAC,CAAC,CAAC;KAC7F;IAED,MAAM,cAAc,GAAQ;QACxB,iBAAiB,EAAE,EAAE;KACxB,CAAC;IAEF,IAAI,SAAS,EAAE;QACX,MAAM,eAAe,GAAG,kBAAkB,CAAC,SAAS,CAAC,CAAC;QACtD,IAAI,eAAe,EAAE;YACjB,cAAc,CAAC,6BAA6B,CAAC,GAAG,eAAe,CAAC;SACnE;KACJ;IAED,OAAO,CACH;QACK,KAAK,CAAC,MAAA,MAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,4BAA4B,0CAAE,KAAK,mCAAI,EAAE,CAAC;QACvD,oBAAC,kBAAkB,IAAC,cAAc,EAAE,cAAc,EAAE,gBAAgB,EAAE,MAAA,MAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,oBAAoB,0CAAE,KAAK,mCAAI,EAAE,GAAI,CACrH,CACN,CAAC;AACN,CAAC,CAAC;AAeF,eAAe,mBAAmB,CAAC","sourcesContent":["import React from 'react';\nimport parse from 'html-react-parser';\nimport { useShopQuery, gql } from '@shopify/hydrogen';\nimport type { Metafield } from '@shopify/hydrogen/dist/esnext/storefront-api-types';\n\nimport { OkendoWidgetClient } from './OkendoWidget.client';\nimport { getOkendoProductId, SKO, useOkendoRequestContext, widgetMetafieldError } from '../shared';\n\nexport const OkendoReviewsWidget: React.FunctionComponent<OkendoReviewsWidgetProps> = (props): React.ReactElement | null => {\n const { setupFailed } = useOkendoRequestContext();\n if (setupFailed) {\n return null;\n }\n\n const { productId } = props;\n\n const productQuery = productId\n ? `\n product(id: $productId) {\n reviewsWidgetSnippet: metafield(namespace: \"okendo\", key: \"ReviewsWidgetSnippet\") {\n value\n }\n }\n `\n : '';\n\n const query = gql`\n query metafields${productId ? '($productId: ID!)' : ''} {\n ${productQuery}\n shop {\n widgetPreRenderBodyStyleTags: metafield(namespace: \"okendo\", key: \"WidgetPreRenderBodyStyleTags\") {\n value\n }\n }\n }\n `;\n\n const {\n data: { product, shop }\n } = useShopQuery<OkendoReviewsWidgetMetafields>({\n query: query,\n preload: true,\n variables: {\n productId\n }\n });\n\n if (productId && !product?.reviewsWidgetSnippet?.value) {\n console.warn(widgetMetafieldError('OkendoReviewsWidget', 'ReviewsWidgetSnippet'));\n }\n\n if (!shop?.widgetPreRenderBodyStyleTags?.value) {\n console.warn(widgetMetafieldError('OkendoReviewsWidget', 'WidgetPreRenderBodyStyleTags'));\n }\n\n const dataAttributes: SKO = {\n 'data-oke-widget': ''\n };\n\n if (productId) {\n const okendoProductId = getOkendoProductId(productId);\n if (okendoProductId) {\n dataAttributes['data-oke-reviews-product-id'] = okendoProductId;\n }\n }\n\n return (\n <>\n {parse(shop?.widgetPreRenderBodyStyleTags?.value ?? '')}\n <OkendoWidgetClient dataAttributes={dataAttributes} metafieldContent={product?.reviewsWidgetSnippet?.value ?? ''} />\n </>\n );\n};\n\ninterface OkendoReviewsWidgetProps {\n productId?: string;\n}\n\ninterface OkendoReviewsWidgetMetafields {\n product: {\n reviewsWidgetSnippet?: Pick<Metafield, 'value'>;\n };\n shop: {\n widgetPreRenderBodyStyleTags?: Pick<Metafield, 'value'>;\n };\n}\n\nexport default OkendoReviewsWidget;\n"]}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import type { SKO } from '@okendo/reviews-common';
|
|
3
2
|
import type { ReviewsWidgetPlus } from '@okendo/reviews-widget-plus/dist-utils/ReviewsWidgetPlus';
|
|
3
|
+
import type { SKO } from '../shared';
|
|
4
4
|
export declare const OkendoWidgetClient: React.FunctionComponent<OkendoWidgetClientProps>;
|
|
5
5
|
export interface OkendoWidgetClientProps {
|
|
6
6
|
dataAttributes: SKO;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"OkendoWidget.client.js","sourceRoot":"","sources":["../../../src/components/OkendoWidget.client.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAIjD,MAAM,CAAC,MAAM,kBAAkB,GAAqD,CAAC,KAAK,EAAE,EAAE;IAC1F,MAAM,EAAE,cAAc,EAAE,gBAAgB,GAAG,EAAE,EAAE,GAAG,KAAK,CAAC;IACxD,MAAM,eAAe,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAErD,MAAM,uBAAuB,GAAG,GAAG,EAAE;QACjC,IAAI,eAAe,CAAC,OAAO,EAAE;YACzB,MAAM,CAAC,YAAY,CAAC,UAAU,CAAC,eAAe,CAAC,OAAO,CAAC,CAAC;SAC3D;IACL,CAAC,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACX,IAAI,MAAM,CAAC,YAAY,EAAE;YACrB,uBAAuB,EAAE,CAAC;SAC7B;aACI;YACD,MAAM,CAAC,gBAAgB,CAAC,mBAAmB,EAAE,uBAAuB,CAAC,CAAC;SACzE;IACL,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,CACH,6BAAK,GAAG,EAAE,eAAe,KAAM,cAAc,EAAE,uBAAuB,EAAE,EAAE,MAAM,EAAE,gBAAgB,EAAE,GAAQ,CAC/G,CAAC;AACN,CAAC,CAAA","sourcesContent":["import React, { useEffect, useRef } from 'react';\nimport type {
|
|
1
|
+
{"version":3,"file":"OkendoWidget.client.js","sourceRoot":"","sources":["../../../src/components/OkendoWidget.client.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAIjD,MAAM,CAAC,MAAM,kBAAkB,GAAqD,CAAC,KAAK,EAAE,EAAE;IAC1F,MAAM,EAAE,cAAc,EAAE,gBAAgB,GAAG,EAAE,EAAE,GAAG,KAAK,CAAC;IACxD,MAAM,eAAe,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAErD,MAAM,uBAAuB,GAAG,GAAG,EAAE;QACjC,IAAI,eAAe,CAAC,OAAO,EAAE;YACzB,MAAM,CAAC,YAAY,CAAC,UAAU,CAAC,eAAe,CAAC,OAAO,CAAC,CAAC;SAC3D;IACL,CAAC,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACX,IAAI,MAAM,CAAC,YAAY,EAAE;YACrB,uBAAuB,EAAE,CAAC;SAC7B;aACI;YACD,MAAM,CAAC,gBAAgB,CAAC,mBAAmB,EAAE,uBAAuB,CAAC,CAAC;SACzE;IACL,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,CACH,6BAAK,GAAG,EAAE,eAAe,KAAM,cAAc,EAAE,uBAAuB,EAAE,EAAE,MAAM,EAAE,gBAAgB,EAAE,GAAQ,CAC/G,CAAC;AACN,CAAC,CAAA","sourcesContent":["import React, { useEffect, useRef } from 'react';\nimport type { ReviewsWidgetPlus } from '@okendo/reviews-widget-plus/dist-utils/ReviewsWidgetPlus';\nimport type { SKO } from '../shared';\n\nexport const OkendoWidgetClient: React.FunctionComponent<OkendoWidgetClientProps> = (props) => {\n const { dataAttributes, metafieldContent = '' } = props;\n const widgetContainer = useRef<HTMLDivElement>(null);\n\n const initialiseReviewsWidget = () => {\n if (widgetContainer.current) {\n window.okeWidgetApi.initWidget(widgetContainer.current);\n }\n };\n\n useEffect(() => {\n if (window.okeWidgetApi) {\n initialiseReviewsWidget();\n }\n else {\n window.addEventListener('oke-script-loaded', initialiseReviewsWidget);\n }\n }, []);\n\n return (\n <div ref={widgetContainer} {...dataAttributes} dangerouslySetInnerHTML={{ __html: metafieldContent }}></div>\n );\n}\n\nexport interface OkendoWidgetClientProps {\n dataAttributes: SKO;\n metafieldContent?: string;\n}\n\ndeclare global {\n interface Window {\n okeWidgetApi: ReviewsWidgetPlus.WidgetWindowApi;\n }\n}\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/shared/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,gBAAgB,CAAC","sourcesContent":["export * from './errorUtils';\nexport * from './productUtils';\nexport * from './requestUtils';\n"]}
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/shared/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,eAAe,CAAC","sourcesContent":["export * from './errorUtils';\nexport * from './productUtils';\nexport * from './requestUtils';\nexport * from './sharedTypes';\n"]}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { SKO } from '@okendo/reviews-common';
|
|
2
1
|
import { ServerComponentRequest } from '@shopify/hydrogen/dist/esnext/framework/Hydration/ServerComponentRequest.server';
|
|
2
|
+
import { SKO } from './sharedTypes';
|
|
3
3
|
export declare function setInOkendoRequestContext(request: ServerComponentRequest, key: keyof OkendoRequestContextKeys, value: RequestContextSafeType | RequestContextSafeType[]): void;
|
|
4
4
|
export declare function useOkendoRequestContext(): OkendoRequestContext;
|
|
5
5
|
interface OkendoRequestContextKeys {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"requestUtils.js","sourceRoot":"","sources":["../../../src/shared/requestUtils.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"requestUtils.js","sourceRoot":"","sources":["../../../src/shared/requestUtils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,gEAAgE,CAAC;AAIlG,MAAM,UAAU,yBAAyB,CAAC,OAA+B,EAAE,GAAmC,EAAE,KAAwD;IACpK,MAAM,oBAAoB,GAAyB,OAAO,CAAC,GAAG,CAAC,oBAAoB,IAAI,EAAE,CAAC;IAC1F,oBAAoB,CAAC,GAAG,CAAC,GAAG,KAAY,CAAC;IACzC,OAAO,CAAC,GAAG,CAAC,oBAAoB,GAAG,oBAAoB,CAAC;AAC5D,CAAC;AAED,MAAM,UAAU,uBAAuB;IACnC,MAAM,EAAE,GAAG,EAAE,EAAE,oBAAoB,EAAE,EAAE,GAAG,gBAAgB,EAAE,CAAC;IAC7D,OAAO,oBAAoB,IAAI,EAAE,CAAC;AACtC,CAAC","sourcesContent":["import { useServerRequest } from '@shopify/hydrogen/dist/esnext/foundation/ServerRequestProvider';\nimport { ServerComponentRequest } from '@shopify/hydrogen/dist/esnext/framework/Hydration/ServerComponentRequest.server';\nimport { SKO } from './sharedTypes';\n\nexport function setInOkendoRequestContext(request: ServerComponentRequest, key: keyof OkendoRequestContextKeys, value: RequestContextSafeType | RequestContextSafeType[]): void {\n const okendoRequestContext: OkendoRequestContext = request.ctx.okendoRequestContext || {};\n okendoRequestContext[key] = value as any;\n request.ctx.okendoRequestContext = okendoRequestContext;\n}\n\nexport function useOkendoRequestContext(): OkendoRequestContext {\n const { ctx: { okendoRequestContext } } = useServerRequest();\n return okendoRequestContext || {};\n}\n\ninterface OkendoRequestContextKeys {\n setupFailed: boolean;\n}\n\nexport interface OkendoRequestContext extends OkendoRequestContextKeysWithSKO { }\n\ntype OkendoRequestContextKeysWithSKO = OkendoRequestContextKeys & SKO;\n\ntype RequestContextSafeType = string | number | boolean;\n"]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare type SKO = Record<string, unknown>;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"sharedTypes.js","sourceRoot":"","sources":["../../../src/shared/sharedTypes.ts"],"names":[],"mappings":"","sourcesContent":["export type SKO = Record<string, unknown>;\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@okendo/shopify-hydrogen",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.8",
|
|
4
4
|
"description": "A component library containing Okendo Reviews React components.",
|
|
5
5
|
"main": "dist/esnext/index.js",
|
|
6
6
|
"files": [
|
|
@@ -14,9 +14,8 @@
|
|
|
14
14
|
"prepublishOnly": "npm run build"
|
|
15
15
|
},
|
|
16
16
|
"author": "Okendo",
|
|
17
|
-
"license": "
|
|
17
|
+
"license": "MIT",
|
|
18
18
|
"dependencies": {
|
|
19
|
-
"@okendo/reviews-common": "^4.157.0",
|
|
20
19
|
"html-react-parser": "^1.4.13"
|
|
21
20
|
},
|
|
22
21
|
"devDependencies": {
|