@nosto/nosto-react 0.4.1 → 0.4.3

package/src/components/{Category/index.client.tsx → NostoCategory.tsx}

@@ -1,5 +1,5 @@
-import { useEffect } from "react";
-import { useNostoContext } from "../Provider/context.client";
+import { useNostoContext } from "./context"
+import { useNostoApi } from "../utils/hooks"
 
 /**
  * You can personalise your category and collection pages by using the NostoCategory component.
@@ -21,45 +21,24 @@ import { useNostoContext } from "../Provider/context.client";
  * If the category being viewed is `Mens >> Jackets`, you must provide the name as `/Mens/Jackets`.
  * You must ensure that the category path provided here matches that of the categories tagged in your products.
  *
- * @group Personalisation Components
+ * @group Components
  */
-export default function NostoCategory(props: {
-  category: string;
-  placements?: string[];
-}): JSX.Element {
-  const { category } = props;
-  const {
-    clientScriptLoaded,
-    currentVariation,
-    responseMode,
-    recommendationComponent,
-    useRenderCampaigns,
-  } = useNostoContext();
+export default function NostoCategory(props: { category: string; placements?: string[] }) {
+  const { category, placements } = props
+  const { recommendationComponent, useRenderCampaigns } = useNostoContext()
 
-  const { renderCampaigns, pageTypeUpdated } = useRenderCampaigns("home");
+  const { renderCampaigns, pageTypeUpdated } = useRenderCampaigns("home")
 
-  useEffect(() => {
-    if (clientScriptLoaded && pageTypeUpdated) {
-      window.nostojs((api) => {
-        api
-          .defaultSession()
-          .setVariation(currentVariation)
-          .setResponseMode(responseMode)
-          .viewCategory(category)
-          .setPlacements(props.placements || api.placements.getPlacements())
-          .load()
-          .then((data) => {
-            renderCampaigns(data, api);
-          });
-      });
-    }
-  }, [
-    clientScriptLoaded,
-    category,
-    currentVariation,
-    recommendationComponent,
-    pageTypeUpdated,
-  ]);
+  useNostoApi(
+    async (api) => {
+      const data = await api.defaultSession()
+        .viewCategory(category)
+        .setPlacements(placements || api.placements.getPlacements())
+        .load()
+      renderCampaigns(data, api)
+    },
+    [category, recommendationComponent, pageTypeUpdated]
+  )
 
   return (
     <>
@@ -70,5 +49,5 @@ export default function NostoCategory(props: {
         {category}
       </div>
     </>
-  );
+  )
 }

package/src/components/NostoCheckout.tsx

@@ -0,0 +1,47 @@
+import { useNostoContext } from "./context"
+import { useNostoApi } from "../utils/hooks"
+
+/**
+ * You can personalise your cart and checkout pages by using the NostoCheckout component.
+ * The component does not require any props.
+ *
+ * By default, your account, when created, has two cart-page placements named `categorypage-nosto-1` and `categorypage-nosto-2`.
+ * You may omit these and use any identifier you need.
+ * The identifiers used here are simply provided to illustrate the example.
+ *
+ * @example
+ * ```
+ * <div className="checkout-page">
+ *   <NostoPlacement id="checkout-nosto-1" />
+ *   <NostoPlacement id="checkout-nosto-2" />
+ *   <NostoCheckout />
+ * </div>
+ * ```
+ *
+ * @group Components
+ */
+
+export default function NostoCheckout(props: { placements?: string[] }) {
+  const { recommendationComponent, useRenderCampaigns } = useNostoContext()
+
+  const { renderCampaigns, pageTypeUpdated } = useRenderCampaigns("checkout")
+
+  useNostoApi(
+    async (api) => {
+      const data = await api.defaultSession()
+        .viewCart()
+        .setPlacements(props.placements || api.placements.getPlacements())
+        .load()
+      renderCampaigns(data, api)
+    },
+    [recommendationComponent, pageTypeUpdated]
+  )
+
+  return (
+    <>
+      <div className="nosto_page_type" style={{ display: "none" }}>
+        cart
+      </div>
+    </>
+  )
+}

package/src/components/{Home/index.client.tsx → NostoHome.tsx}

@@ -1,5 +1,5 @@
-import { useEffect } from "react";
-import { useNostoContext } from "../Provider/context.client";
+import { useNostoContext } from "./context"
+import { useNostoApi } from "../utils/hooks"
 
 /**
  * The `NostoHome` component must be used to personalise the home page. The component does not require any props.
@@ -22,42 +22,23 @@ import { useNostoContext } from "../Provider/context.client";
  * </div>
  * ```
  *
- * @group Personalisation Components
+ * @group Components
  */
-export default function NostoHome(props: {
-  placements?: string[];
-}): JSX.Element {
-  const {
-    clientScriptLoaded,
-    currentVariation,
-    responseMode,
-    recommendationComponent,
-    useRenderCampaigns,
-  } = useNostoContext();
+export default function NostoHome(props: { placements?: string[] }) {
+  const { recommendationComponent, useRenderCampaigns } = useNostoContext()
 
-  const { renderCampaigns, pageTypeUpdated } = useRenderCampaigns("home");
+  const { renderCampaigns, pageTypeUpdated } = useRenderCampaigns("home")
 
-  useEffect(() => {
-    if (clientScriptLoaded && pageTypeUpdated) {
-      window.nostojs((api) => {
-        api
-          .defaultSession()
-          .setVariation(currentVariation)
-          .setResponseMode(responseMode)
-          .viewFrontPage()
-          .setPlacements(props.placements || api.placements.getPlacements())
-          .load()
-          .then((data) => {
-            renderCampaigns(data, api);
-          });
-      });
-    }
-  }, [
-    clientScriptLoaded,
-    currentVariation,
-    recommendationComponent,
-    pageTypeUpdated,
-  ]);
+  useNostoApi(
+    async (api) => {
+      const data = await api.defaultSession()
+        .viewFrontPage()
+        .setPlacements(props.placements || api.placements.getPlacements())
+        .load()
+      renderCampaigns(data, api)
+    },
+    [recommendationComponent, pageTypeUpdated]
+  )
 
   return (
     <>
@@ -65,5 +46,5 @@ export default function NostoHome(props: {
         front
       </div>
     </>
-  );
+  )
 }

package/src/components/NostoOrder.tsx

@@ -0,0 +1,55 @@
+import { Purchase } from "../types"
+import { useNostoContext } from "./context"
+import { snakeize } from "../utils/snakeize"
+import { useNostoApi } from "../utils/hooks"
+
+/**
+ * You can personalise your order-confirmation/thank-you page by using the `NostoOrder` component.
+ * The component requires that you provide it with the details of the order.
+ *
+ * By default, your account, when created, has one other-page placement named `thankyou-nosto-1`.
+ * You may omit this and use any identifier you need. The identifier used here is simply provided to illustrate the example.
+ *
+ * The order prop requires a value that adheres to the type `Purchase`.
+ *
+ * @example
+ * ```
+ * <div className="thankyou-page">
+ *     <NostoPlacement id="thankyou-nosto-1" />
+ *     <NostoOrder order={{ purchase: toOrder(order) }} />
+ * </div>
+ * ```
+ *
+ * @group Components
+ */
+export default function NostoOrder(props: {
+  order: { purchase: Purchase }
+  placements?: string[]
+}) {
+  const { order, placements } = props
+  const { recommendationComponent, useRenderCampaigns } = useNostoContext()
+
+  const { renderCampaigns, pageTypeUpdated } = useRenderCampaigns("order")
+
+  useNostoApi(
+    async (api) => {
+      const data = await api.defaultSession()
+        .addOrder(snakeize(order))
+        .setPlacements(placements || api.placements.getPlacements())
+        .load()
+      renderCampaigns(data, api)
+    },
+    [recommendationComponent, pageTypeUpdated]
+  )
+
+  return (
+    <>
+      <div className="nosto_page_type" style={{ display: "none" }}>
+        order
+      </div>
+      <div className="nosto_order" style={{ display: "none" }}>
+        {order.purchase.number}
+      </div>
+    </>
+  )
+}

package/src/components/NostoOther.tsx

@@ -0,0 +1,46 @@
+import { useNostoContext } from "./context"
+import { useNostoApi } from "../utils/hooks"
+
+/**
+ * You can personalise your miscellaneous pages by using the NostoOther component.
+ * The component does not require any props.
+ *
+ * By default, your account, when created, has two other-page placements named `other-nosto-1` and `other-nosto-2`.
+ * You may omit these and use any identifier you need.
+ * The identifiers used here are simply provided to illustrate the example.
+ *
+ * @example
+ * ```
+ * <div className="other-page">
+ *     <NostoPlacement id="other-nosto-1" />
+ *     <NostoPlacement id="other-nosto-2" />
+ *     <NostoOther />
+ * </div>;
+ * ```
+ *
+ * @group Components
+ */
+export default function NostoOther(props: { placements?: string[] }) {
+  const { recommendationComponent, useRenderCampaigns } = useNostoContext()
+
+  const { renderCampaigns, pageTypeUpdated } = useRenderCampaigns("other")
+
+  useNostoApi(
+    async (api) => {
+      const data = await api.defaultSession()
+        .viewOther()
+        .setPlacements(props.placements || api.placements.getPlacements())
+        .load()
+      renderCampaigns(data, api)
+    },
+    [recommendationComponent, pageTypeUpdated]
+  )
+
+  return (
+    <>
+      <div className="nosto_page_type" style={{ display: "none" }}>
+        other
+      </div>
+    </>
+  )
+}

package/src/components/{Placement/index.client.tsx → NostoPlacement.tsx}

@@ -1,4 +1,4 @@
-import React from "react";
+import React from "react"
 
 /**
  * Nosto React has a special component called NostoPlacement.
@@ -11,12 +11,9 @@ import React from "react";
  * <NostoPlacement id="frontpage-nosto-1" />
  * ```
  *
- * @group Personalisation Components
+ * @group Components
  */
-export default function NostoPlacement(props: {
-  id: string;
-  pageType?: string;
-}): JSX.Element {
-  const { id, pageType } = props;
-  return <div className="nosto_element" id={id} key={id + (pageType || "")} />;
+export default function NostoPlacement(props: { id: string; pageType?: string }) {
+  const { id, pageType } = props
+  return <div className="nosto_element" id={id} key={id + (pageType || "")} />
 }

package/src/components/{Product/index.client.tsx → NostoProduct.tsx}

@@ -1,6 +1,6 @@
-import { Product } from "../../types";
-import { useNostoContext } from "../Provider/context.client";
-import { useDeepCompareEffect } from "../../utils/hooks";
+import { Product } from "../types"
+import { useNostoContext } from "./context"
+import { useNostoApi } from "../utils/hooks"
 
 /**
  * The NostoProduct component must be used to personalise the product page.
@@ -24,45 +24,29 @@ import { useDeepCompareEffect } from "../../utils/hooks";
  * </div>
  * ```
  *
- * @group Personalisation Components
+ * @group Components
  */
 export default function NostoProduct(props: {
-  product: string;
-  tagging?: Product;
-  placements?: string[];
-}): JSX.Element {
-  const { product, tagging } = props;
-  const {
-    clientScriptLoaded,
-    currentVariation,
-    responseMode,
-    recommendationComponent,
-    useRenderCampaigns,
-  } = useNostoContext();
+  product: string
+  tagging?: Product
+  placements?: string[]
+}) {
+  const { product, tagging, placements } = props
+  const { recommendationComponent, useRenderCampaigns } = useNostoContext()
 
-  const { renderCampaigns, pageTypeUpdated } = useRenderCampaigns("product");
+  const { renderCampaigns, pageTypeUpdated } = useRenderCampaigns("product")
 
-  useDeepCompareEffect(() => {
-    if (clientScriptLoaded && pageTypeUpdated) {
-      window.nostojs((api) => {
-        api
-          .defaultSession()
-          .setResponseMode(responseMode)
-          .viewProduct(product)
-          .setPlacements(props.placements || api.placements.getPlacements())
-          .load()
-          .then((data) => {
-            renderCampaigns(data, api);
-          });
-      });
-    }
-  }, [
-    clientScriptLoaded,
-    currentVariation,
-    product,
-    recommendationComponent,
-    pageTypeUpdated,
-  ]);
+  useNostoApi(
+    async (api) => {
+      const data = await api.defaultSession()
+        .viewProduct(product)
+        .setPlacements(placements || api.placements.getPlacements())
+        .load()
+      renderCampaigns(data, api)
+    },
+    [product, recommendationComponent, pageTypeUpdated],
+    { deep: true }
+  )
 
   return (
     <>
@@ -70,41 +54,23 @@ export default function NostoProduct(props: {
         product
       </div>
       <div className="nosto_product" style={{ display: "none" }}>
-        {tagging?.variationId && (
-          <span className="variation_id">{tagging.variationId}</span>
-        )}
+        {tagging?.variationId && <span className="variation_id">{tagging.variationId}</span>}
         {product && <span className="product_id">{product}</span>}
         {tagging?.name && <span className="name">{tagging.name}</span>}
         {tagging?.url && <span className="url">{tagging.url.toString()}</span>}
-        {tagging?.imageUrl && (
-          <span className="image_url">{tagging.imageUrl.toString()}</span>
-        )}
-        {tagging?.availability && (
-          <span className="availability">{tagging.availability}</span>
-        )}
+        {tagging?.imageUrl && <span className="image_url">{tagging.imageUrl.toString()}</span>}
+        {tagging?.availability && <span className="availability">{tagging.availability}</span>}
         {tagging?.price && <span className="price">{tagging.price}</span>}
-        {tagging?.listPrice && (
-          <span className="list_price">{tagging.listPrice}</span>
-        )}
+        {tagging?.listPrice && <span className="list_price">{tagging.listPrice}</span>}
         {tagging?.priceCurrencyCode && (
-          <span className="price_currency_code">
-            {tagging.priceCurrencyCode}
-          </span>
+          <span className="price_currency_code">{tagging.priceCurrencyCode}</span>
         )}
         {tagging?.brand && <span className="brand">{tagging.brand}</span>}
-        {tagging?.description && (
-          <span className="description">{tagging.description}</span>
-        )}
-        {tagging?.googleCategory && (
-          <span className="description">{tagging.googleCategory}</span>
-        )}
-        {tagging?.condition && (
-          <span className="condition">{tagging.condition}</span>
-        )}
+        {tagging?.description && <span className="description">{tagging.description}</span>}
+        {tagging?.googleCategory && <span className="description">{tagging.googleCategory}</span>}
+        {tagging?.condition && <span className="condition">{tagging.condition}</span>}
         {tagging?.gender && <span className="gender">{tagging.gender}</span>}
-        {tagging?.ageGroup && (
-          <span className="age_group">{tagging.ageGroup}</span>
-        )}
+        {tagging?.ageGroup && <span className="age_group">{tagging.ageGroup}</span>}
         {tagging?.gtin && <span className="gtin">{tagging.gtin}</span>}
         {tagging?.category &&
           tagging?.category.map((category, index) => (
@@ -130,12 +96,8 @@ export default function NostoProduct(props: {
               {tag}
             </span>
           ))}
-        {tagging?.ratingValue && (
-          <span className="rating_value">{tagging.ratingValue}</span>
-        )}
-        {tagging?.reviewCount && (
-          <span className="review_count">{tagging.reviewCount}</span>
-        )}
+        {tagging?.ratingValue && <span className="rating_value">{tagging.ratingValue}</span>}
+        {tagging?.reviewCount && <span className="review_count">{tagging.reviewCount}</span>}
         {tagging?.alternateImageUrls &&
           tagging.alternateImageUrls.map((url, index) => (
             <span className="alternate_image_url" key={index}>
@@ -158,17 +120,11 @@ export default function NostoProduct(props: {
               {sku?.id && <span className="product_id">{sku.id}</span>}
               {sku?.name && <span className="name">{sku.name}</span>}
               {sku?.price && <span className="price">{sku.price}</span>}
-              {sku?.listPrice && (
-                <span className="list_price">{sku.listPrice}</span>
-              )}
+              {sku?.listPrice && <span className="list_price">{sku.listPrice}</span>}
               {sku?.url && <span className="url">{sku.url.toString()}</span>}
-              {sku?.imageUrl && (
-                <span className="image_url">{sku.imageUrl.toString()}</span>
-              )}
+              {sku?.imageUrl && <span className="image_url">{sku.imageUrl.toString()}</span>}
               {sku?.gtin && <span className="gtin">{sku.gtin}</span>}
-              {sku?.availability && (
-                <span className="availability">{sku.availability}</span>
-              )}
+              {sku?.availability && <span className="availability">{sku.availability}</span>}
               {sku?.customFields &&
                 Object.keys(sku.customFields).map(
                   (field, index) =>
@@ -183,5 +139,5 @@ export default function NostoProduct(props: {
           ))}
       </div>
     </>
-  );
+  )
 }