@bosonprotocol/react-kit 0.27.1-alpha.0 → 0.28.0-alpha.0

package/src/hooks/contracts/erc721/useErc721TokenUri.ts

@@ -1,14 +1,13 @@
+import { CoreSDK } from "@bosonprotocol/core-sdk";
 import { useQuery } from "react-query";
-import { useCoreSDKWithContext } from "../../core-sdk/useCoreSdkWithContext";
 
 export const useErc721TokenUri = (
   props: {
     contractAddress: string | undefined;
     tokenIds: (string | null | undefined)[] | undefined;
   },
-  { enabled }: { enabled: boolean | undefined }
+  { enabled, coreSDK }: { enabled: boolean | undefined; coreSDK: CoreSDK }
 ) => {
-  const coreSDK = useCoreSDKWithContext();
   return useQuery(
     ["useErc721TokenUri", coreSDK.uuid, props],
     async () => {

package/src/hooks/contracts/useGetTokenUriImage.ts

@@ -12,71 +12,84 @@ const replaceUrlWithId = ({
   return urlWithIdReplaced;
 };
 
-export type UseGetTokenUriImageArg0 = {
-  tokenUri: string | undefined | null;
-  ipfsGateway?: string;
-  tokenId: string | undefined | null;
-};
 export const useGetTokenUriImage = (
   props: {
-    tokenUri: string | undefined | null;
+    tokenUris: (string | null | undefined)[] | undefined | null;
     ipfsGateway?: string;
-    tokenId: string | undefined | null;
+    tokenIds: (string | null | undefined)[] | undefined | null;
   },
   { enabled }: { enabled: boolean }
 ) => {
-  const { tokenUri, ipfsGateway = "https://ipfs.io/ipfs", tokenId } = props;
+  const { tokenUris, ipfsGateway = "https://ipfs.io/ipfs", tokenIds } = props;
   return useQuery(
     ["useGetTokenUriImage", props],
     async () => {
-      if (!tokenUri || !tokenId) {
-        return "";
+      if (!tokenUris || !tokenIds || tokenUris.length !== tokenIds.length) {
+        return [];
       }
       try {
-        if (tokenUri.toLowerCase().includes("json")) {
-          const base64Data = tokenUri.substring(tokenUri.indexOf(",") + 1);
-          const jsonValue = window.atob(base64Data);
-          const parsedJson = JSON.parse(jsonValue);
-          const image = parsedJson.image;
-          const imageUrl = getImageUrl(image, ipfsGateway);
-          const urlWithIdReplaced = replaceUrlWithId({
-            url: imageUrl,
-            tokenId
-          });
-          return urlWithIdReplaced;
-        }
-        if (tokenUri.startsWith("ipfs")) {
-          const imageUrl = getImageUrl(tokenUri, ipfsGateway);
-          const urlWithIdReplaced = replaceUrlWithId({
-            url: imageUrl,
-            tokenId
-          });
+        return Promise.all(
+          tokenUris.map(async (tokenUri, index) => {
+            const tokenId = tokenIds[index];
+            if (!tokenUri || !tokenId) {
+              return "";
+            }
+            if (tokenUri.startsWith("data:application/json")) {
+              const base64Data = tokenUri.substring(tokenUri.indexOf(",") + 1);
+              const jsonValue = window.atob(base64Data);
+              const parsedJson = JSON.parse(jsonValue);
+              const image = parsedJson.image;
+              const imageUrl = getImageUrl(image, ipfsGateway);
+              const urlWithIdReplaced = replaceUrlWithId({
+                url: imageUrl,
+                tokenId
+              });
+              return urlWithIdReplaced;
+            }
+            if (tokenUri.startsWith("ipfs")) {
+              const imageUrl = getImageUrl(tokenUri, ipfsGateway);
+              const urlWithIdReplaced = replaceUrlWithId({
+                url: imageUrl,
+                tokenId
+              });
+
+              const fetchedMetadata = await fetch(urlWithIdReplaced);
+              try {
+                const jsonMetadata = await fetchedMetadata.json();
+                const image = jsonMetadata.image;
+                const imageUrl = getImageUrl(image, ipfsGateway);
+                return imageUrl;
+              } catch (error) {
+                console.debug(error);
+              }
 
-          const fetchedMetadata = await fetch(urlWithIdReplaced);
-          try {
-            const jsonMetadata = await fetchedMetadata.json();
-            const image = jsonMetadata.image;
-            const imageUrl = getImageUrl(image, ipfsGateway);
-            return imageUrl;
-          } catch (error) {
-            console.debug(error);
-          }
+              return urlWithIdReplaced;
+            }
+            if (tokenUri.startsWith("http")) {
+              const urlWithIdReplaced = replaceUrlWithId({
+                url: tokenUri,
+                tokenId
+              });
+              const fetchedMetadata = await fetch(urlWithIdReplaced);
+              try {
+                const jsonMetadata = await fetchedMetadata.json();
+                const image = jsonMetadata.image;
+                const imageUrl = getImageUrl(image, ipfsGateway);
+                return imageUrl;
+              } catch (error) {
+                console.debug(error);
+              }
 
-          return urlWithIdReplaced;
-        }
-        if (tokenUri.startsWith("http")) {
-          const urlWithIdReplaced = replaceUrlWithId({
-            url: tokenUri,
-            tokenId
-          });
-          return urlWithIdReplaced;
-        }
+              return urlWithIdReplaced;
+            }
 
-        if (tokenUri.startsWith("data:image")) {
-          return tokenUri;
-        }
+            if (tokenUri.startsWith("data:image")) {
+              return tokenUri;
+            }
 
-        return "";
+            return "";
+          })
+        );
       } catch (err) {
         console.error(err);
         throw err;

package/src/hooks/index.ts

@@ -9,3 +9,10 @@ export * from "./useExchanges";
 export * from "./useMetaTx";
 export * from "../components/widgets/finance/useOffersBacked";
 export * from "./contracts/useGetTokenUriImage";
+export * from "./products/useProductByUuid";
+export * from "./bundles/useBundleByUuid";
+export * from "./contracts/erc721/useErc721TokenUri";
+export * from "./contracts/erc721/useErc721Name";
+export * from "./contracts/erc721/useErc721OwnerOf";
+export * from "./contracts/erc1155/useErc1155Name";
+export * from "./contracts/erc1155/useErc1155Uri";

package/src/hooks/offer/useExchangeTokenBalance.ts

@@ -4,6 +4,7 @@ import { BigNumber, ethers } from "ethers";
 import { useAccount, useBalance, useChainId } from "../connection/connection";
 import { useConfigContext } from "../../components/config/ConfigContext";
 import { useErc20Balance } from "../contracts/erc20/useErc20Balance";
+import { useCoreSDKWithContext } from "../core-sdk/useCoreSdkWithContext";
 
 export function useExchangeTokenBalance(
   exchangeToken: Pick<
@@ -13,6 +14,7 @@ export function useExchangeTokenBalance(
   { enabled }: { enabled: boolean }
 ) {
   const chainId = useChainId();
+  const coreSDK = useCoreSDKWithContext();
   const { config } = useConfigContext();
   const chainIdToUse = chainId ?? config.chainId;
   const { address } = useAccount();
@@ -29,7 +31,8 @@ export function useExchangeTokenBalance(
       owner: address
     },
     {
-      enabled: isErc20Enabled && enabled
+      enabled: isErc20Enabled && enabled,
+      coreSDK
     }
   );
   const isNativeEnabled = isNativeCoin && !!chainIdToUse;

package/src/hooks/offer/useIsPhygital.ts

@@ -1,5 +1,6 @@
 import { Offer } from "../../types/offer";
+import { isBundle } from "../../lib/offer/filter";
 
 export const useIsPhygital = ({ offer }: { offer: Offer }) => {
-  return false; // TODO: change
+  return isBundle(offer);
 };

package/src/hooks/products/useProductByUuid.ts

@@ -1,15 +1,14 @@
+import { CoreSDK } from "@bosonprotocol/core-sdk";
 import { useQuery } from "react-query";
-import { useCoreSDKWithContext } from "../core-sdk/useCoreSdkWithContext";
 
-export default function useProductByUuid(
+export function useProductByUuid(
   sellerId: string | undefined | null,
   uuid: string | undefined | null,
+  coreSDK: CoreSDK,
   options: {
     enabled?: boolean;
   } = {}
 ) {
-  const coreSDK = useCoreSDKWithContext();
-
   return useQuery(
     ["get-product-by-uuid", uuid, coreSDK.uuid, sellerId],
     async () => {

package/src/hooks/useCurrentSellers.ts

@@ -340,7 +340,8 @@ export function useCurrentSellers(
       tokenIds: profileIds
     },
     {
-      enabled: enableResultLens && enabled
+      enabled: enableResultLens && enabled,
+      coreSDK
     }
   );
   const lensOwners: (string | null)[] = useMemo(() => {

package/src/index.tsx

@@ -24,6 +24,7 @@ export * from "./components/exchangeCard/ExchangeCard";
 export * from "./components/image/Image";
 export * from "./components/Loading";
 export * from "./components/productCard/ProductCard";
+export * from "./components/productCard/const";
 export * from "./components/skeleton/ProductCardSkeleton";
 export * from "./components/skeleton/CollectionsCardSkeleton";
 export { LoadingBubble } from "./components/skeleton/common";
@@ -58,3 +59,6 @@ export * from "./lib/magicLink/provider";
 export * from "./lib/const/networks";
 export * from "./lib/errors/transactions";
 export * from "./lib/offer/getIsOfferExpired";
+export * from "./lib/bundle/filter";
+export * from "./lib/bundle/const";
+export * from "./lib/offer/filter";

package/src/lib/bundle/const.ts

@@ -0,0 +1,18 @@
+export const digitalTypeMappingDisplay = {
+  "digital-nft": "Digital NFT",
+  "digital-file": "Digital File",
+  experiential: "Experiential"
+} as const;
+
+export const digitalTypeMapping = {
+  "digital-nft": "digital-nft",
+  "digital-file": "digital-file",
+  experiential: "experiential"
+} as const;
+
+export const digitalNftTypeMapping = {
+  wearable: "Wearable",
+  image: "Image",
+  event: "Event",
+  other: "Other"
+};

package/src/lib/bundle/filter.ts

@@ -0,0 +1,24 @@
+import { subgraph } from "@bosonprotocol/core-sdk";
+import type { BundleItem } from "../../types/bundle";
+
+export type ProductV1Item = Extract<
+  BundleItem,
+  { __typename?: "ProductV1ItemMetadataEntity" }
+>;
+
+export const isProductV1Item = (
+  item: Pick<BundleItem, "type" | "__typename">
+): item is ProductV1Item =>
+  item.__typename === "ProductV1ItemMetadataEntity" ||
+  item.type === subgraph.ItemMetadataType.ItemProductV1;
+
+export type NftItem = Extract<
+  BundleItem,
+  { __typename?: "NftItemMetadataEntity" }
+>;
+
+export const isNftItem = (
+  item: Pick<BundleItem, "type" | "__typename">
+): item is NftItem =>
+  item.__typename === "NftItemMetadataEntity" ||
+  item.type === subgraph.ItemMetadataType.ItemNft;

package/src/lib/offer/filter.ts

@@ -0,0 +1,32 @@
+import { subgraph } from "@bosonprotocol/core-sdk";
+import type { Offer } from "../../types/offer";
+
+export type BundleMetadata = Extract<
+  Offer["metadata"],
+  { __typename: "BundleMetadataEntity" }
+>;
+
+export type Bundle = Omit<Offer, "metadata"> & {
+  metadata: BundleMetadata;
+};
+
+export const isBundle = (
+  offer: Pick<Offer | subgraph.OfferFieldsFragment, "metadata">
+): offer is Bundle =>
+  offer.metadata?.__typename === "BundleMetadataEntity" ||
+  offer.metadata?.type === subgraph.MetadataType.Bundle;
+
+export type ProductV1Metadata = Extract<
+  Offer["metadata"],
+  { __typename: "ProductV1MetadataEntity" }
+>;
+
+export type ProductV1 = Omit<Offer, "metadata"> & {
+  metadata: ProductV1Metadata;
+};
+
+export const isProductV1 = (
+  offer: Pick<Offer | subgraph.OfferFieldsFragment, "metadata">
+): offer is ProductV1 =>
+  offer.metadata?.__typename === "ProductV1MetadataEntity" ||
+  offer.metadata?.type === subgraph.MetadataType.ProductV1;

package/src/lib/offer/getOfferAnimationUrl.ts

@@ -0,0 +1,10 @@
+import { subgraph } from "@bosonprotocol/core-sdk";
+import { Offer } from "../../types/offer";
+
+export const getOfferAnimationUrl = (
+  offer: Offer | subgraph.OfferFieldsFragment | undefined | null
+): string => {
+  return offer?.metadata?.animationUrl === "about:blank"
+    ? ""
+    : offer?.metadata?.animationUrl || "";
+};

package/src/lib/offer/getOfferDetails.ts

@@ -1,6 +1,8 @@
-/* eslint @typescript-eslint/no-explicit-any: "off" */
 import { subgraph } from "@bosonprotocol/core-sdk";
 import { Offer } from "../../types/offer";
+import { getOfferAnimationUrl } from "./getOfferAnimationUrl";
+import { isBundle, isProductV1 } from "./filter";
+import { isNftItem, isProductV1Item } from "../bundle/filter";
 
 interface ITable {
   name: string;
@@ -10,37 +12,86 @@ interface IShippingInfo {
   returnPeriodInDays: number | undefined;
   shippingTable: Array<ITable>;
 }
+
+type ProductV1OrProductV1ItemSubProductV1Seller =
+  | Pick<
+      subgraph.ProductV1ItemMetadataEntity["productV1Seller"],
+      "images" | "description"
+    >
+  | Pick<
+      subgraph.ProductV1MetadataEntity["productV1Seller"],
+      "images" | "description"
+    >;
 interface IGetOfferDetails {
   display: boolean;
   name: string;
-  offerImg: string;
+  offerImg: string | undefined;
+  mainImage: string;
   animationUrl: string;
   shippingInfo: IShippingInfo;
   description: string;
-  productData: Array<ITable>;
-  artist: subgraph.ProductV1Seller;
+  artist: ProductV1OrProductV1ItemSubProductV1Seller | null;
   artistDescription: string;
   images: Array<string>;
+  nftItems: subgraph.NftItemMetadataEntity[] | undefined;
+  bundleItems:
+    | Extract<
+        subgraph.OfferFieldsFragment["metadata"],
+        { __typename: "BundleMetadataEntity" }
+      >["items"]
+    | undefined;
 }
-
-export const getOfferAnimationUrl = (
-  offer: Offer | undefined | null
-): string => {
-  return offer?.metadata?.animationUrl === "about:blank"
-    ? ""
-    : offer?.metadata?.animationUrl || "";
+type ProductV1Sub = Pick<
+  subgraph.ProductV1MetadataEntity,
+  "shipping" | "productOverrides"
+> & {
+  product: Pick<
+    subgraph.ProductV1MetadataEntity["product"],
+    "title" | "description" | "visuals_images" | "productV1Seller"
+  >;
+  productV1Seller: Pick<
+    subgraph.ProductV1MetadataEntity["productV1Seller"],
+    "images" | "description"
+  >;
 };
-
-export const getOfferDetails = (offer: Offer): IGetOfferDetails => {
+type ProductV1Subitem = Pick<
+  subgraph.ProductV1ItemMetadataEntity,
+  "shipping" | "productOverrides"
+> & {
+  product: Pick<
+    subgraph.ProductV1ItemMetadataEntity["product"],
+    "title" | "description" | "visuals_images" | "productV1Seller"
+  >;
+  productV1Seller: Pick<
+    subgraph.ProductV1ItemMetadataEntity["productV1Seller"],
+    "images" | "description"
+  >;
+};
+export const getOfferDetails = (
+  offer: Offer | subgraph.OfferFieldsFragment
+): IGetOfferDetails => {
+  const productV1ItemMetadataEntity:
+    | ProductV1Sub
+    | ProductV1Subitem
+    | undefined = isProductV1(offer)
+    ? (offer.metadata as ProductV1Sub)
+    : isBundle(offer)
+    ? (offer.metadata?.items?.find((item) => isProductV1Item(item)) as
+        | ProductV1Subitem
+        | undefined)
+    : undefined;
   const name =
-    offer.metadata?.product?.title || offer.metadata?.name || "Untitled";
+    productV1ItemMetadataEntity?.product?.title ||
+    offer.metadata?.name ||
+    "Untitled";
   const offerImg = offer.metadata?.image;
 
   const animationUrl = getOfferAnimationUrl(offer);
   const shippingInfo = {
-    returnPeriodInDays: offer.metadata?.shipping?.returnPeriodInDays,
+    returnPeriodInDays:
+      productV1ItemMetadataEntity?.shipping?.returnPeriodInDays,
     shippingTable:
-      offer.metadata?.shipping?.supportedJurisdictions?.map(
+      productV1ItemMetadataEntity?.shipping?.supportedJurisdictions?.map(
         (jurisdiction: any) => ({
           name: jurisdiction.label,
           value: jurisdiction.deliveryTime
@@ -48,22 +99,29 @@ export const getOfferDetails = (offer: Offer): IGetOfferDetails => {
       ) || []
   };
   const description =
-    offer.metadata?.product?.description || offer.metadata?.description || "";
-  const productData =
-    offer.metadata?.attributes?.map((attr: any) => ({
-      name: attr.traitType,
-      value:
-        attr.displayType === "date"
-          ? new Date(parseInt(attr.value)).toUTCString()
-          : attr.value
-    })) || [];
-  const artist = offer.metadata?.productV1Seller || null;
-  const artistDescription = offer.metadata?.productV1Seller?.description || "";
+    productV1ItemMetadataEntity?.product?.description ||
+    offer.metadata?.description ||
+    "";
+  const artist = productV1ItemMetadataEntity?.productV1Seller || null;
+  const artistDescription =
+    artist?.description ||
+    productV1ItemMetadataEntity?.product.productV1Seller?.description ||
+    "";
   const images =
-    offer.metadata?.product?.visuals_images?.map(
+    productV1ItemMetadataEntity?.product?.visuals_images?.map(
       ({ url }: { url: string }) => url
     ) || [];
-
+  const variantsImages =
+    productV1ItemMetadataEntity?.productOverrides?.visuals_images?.map(
+      ({ url }: { url: string }) => url
+    ) || [];
+  const bundleItems = isBundle(offer) ? offer.metadata.items : undefined;
+  const nftItems = bundleItems
+    ? bundleItems.filter((item): item is subgraph.NftItemMetadataEntity =>
+        isNftItem(item)
+      )
+    : undefined;
+  const mainImage = offerImg || variantsImages?.[0] || images?.[0] || "";
   return {
     display: false,
     name,
@@ -71,9 +129,11 @@ export const getOfferDetails = (offer: Offer): IGetOfferDetails => {
     animationUrl,
     shippingInfo,
     description,
-    productData,
     artist,
     artistDescription,
-    images
+    images: variantsImages?.length ? variantsImages : images,
+    bundleItems,
+    nftItems,
+    mainImage
   };
 };

package/src/lib/offer/getOfferVariations.ts

@@ -0,0 +1,19 @@
+import { Offer } from "../../types/offer";
+import { isTruthy } from "../../types/helpers";
+
+export const getOfferVariations = (offer: Offer | undefined) => {
+  if (!offer?.metadata || offer.metadata.__typename === "BaseMetadataEntity") {
+    return;
+  }
+  if (offer.metadata.__typename === "ProductV1MetadataEntity") {
+    return offer.metadata.variations;
+  }
+  if (offer.metadata.__typename === "BundleMetadataEntity") {
+    const variations = (offer.metadata.items ?? [])
+      .filter((item) => item.__typename === "ProductV1ItemMetadataEntity")
+      .map((item) => ("variations" in item ? item.variations : undefined))
+      .filter(isTruthy);
+    return variations.length ? variations : undefined;
+  }
+  return;
+};

package/src/stories/ExchangeCard.stories.tsx

@@ -3,6 +3,7 @@ import { ComponentStory, ComponentMeta, Story } from "@storybook/react";
 
 import { ExchangeCard } from "../components/exchangeCard/ExchangeCard";
 import { Currencies } from "../components/currencyDisplay/CurrencyDisplay";
+import { ProductType } from "../components/productCard/const";
 
 // More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
 export default {
@@ -46,6 +47,7 @@ Redeemed.args = {
       errorImageText: "TEST"
     }
   },
+  productType: ProductType.phygital,
   price: 0.1,
   currency: Currencies.ETH,
   isHoverDisabled: true,

package/src/stories/ProductCard.stories.tsx

@@ -2,10 +2,8 @@ import { ComponentMeta, ComponentStory, Story } from "@storybook/react";
 import React from "react";
 
 import { Currencies } from "../components/currencyDisplay/CurrencyDisplay";
-import {
-  ProductCard,
-  ProductType
-} from "../components/productCard/ProductCard";
+import { ProductCard } from "../components/productCard/ProductCard";
+import { ProductType } from "../components/productCard/const";
 
 // More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
 export default {
@@ -54,7 +52,7 @@ ProductCardPrimary.args = {
   tooltip: "lorem ipsum dolor example",
   price: 12345,
   currency: Currencies.POLYGON,
-  productType: ProductType.physical,
+  productType: ProductType.phygital,
   onCardClick: (productId) => {
     console.log("----------ON CLICK-------------");
     console.log("productId", productId);

package/src/stories/widgets/Commit.stories.tsx

@@ -42,6 +42,7 @@ Commit.args = {
   offerId: "",
   defaultSelectedOfferId: "",
   disableVariationsSelects: false,
+  bundleUuid: "",
   productUuid: "086b32-3fcd-00d1-0624-67513e85415c", // with size variations
   sellerId: "138",
   metaTx: {
@@ -80,6 +81,7 @@ CommitTokenGated_ERC20.args = {
   offerId: "",
   defaultSelectedOfferId: "",
   disableVariationsSelects: false,
+  bundleUuid: "",
   productUuid: "cc482a1-c004-d003-c3ca-a1ed7537af1", // token gated no variations
   sellerId: "138",
   metaTx: {
@@ -119,6 +121,7 @@ CommitWithColorAndSizeVariations.args = {
   offerId: "",
   defaultSelectedOfferId: "",
   disableVariationsSelects: false,
+  bundleUuid: "",
   productUuid: "1d4573d-42e-f557-0032-b1ab8170c102", // with color and size variations
   sellerId: "138",
   metaTx: {
@@ -157,6 +160,7 @@ CommitTokenGated_ERC721.args = {
   offerId: "",
   defaultSelectedOfferId: "",
   disableVariationsSelects: false,
+  bundleUuid: "",
   productUuid: "ce7faab-00c-26-a351-c71f615c07c2",
   sellerId: "138",
   metaTx: {
@@ -195,6 +199,7 @@ CommitTokenGated_ERC721_2.args = {
   offerId: "",
   defaultSelectedOfferId: "",
   disableVariationsSelects: false,
+  bundleUuid: "",
   productUuid: "5d14af-ee3b-8ea2-c4bc-4ab732c4b05c",
   sellerId: "26",
   metaTx: {
@@ -233,6 +238,7 @@ CommitTokenGated_ERC1155.args = {
   offerId: "",
   defaultSelectedOfferId: "",
   disableVariationsSelects: false,
+  bundleUuid: "",
   productUuid: "d75860e-da32-224-870e-2a884c51a2ee", // token gated 1155
   sellerId: "138",
   metaTx: {
@@ -250,3 +256,43 @@ CommitTokenGated_ERC1155.args = {
 };
 
 CommitTokenGated_ERC1155.decorators = [(Story) => wrapper(Story)];
+
+export const CommitBundle: ComponentStory<typeof CommitWidget> = Template.bind(
+  {}
+);
+
+// More on args: https://storybook.js.org/docs/react/writing-stories/args
+CommitBundle.args = {
+  envName,
+  configId: envConfig[0].configId,
+  walletConnectProjectId: process.env.REACT_APP_WALLET_CONNECT_PROJECT_ID,
+  dateFormat: "YYYY/MM/DD",
+  defaultCurrencySymbol: "$",
+  defaultCurrencyTicker: "USD",
+  contactSellerForExchangeUrl: "https://bosonapp.io/#/chat/{id}",
+  fairExchangePolicyRules:
+    "ipfs://QmX8Wnq1eWbf7pRhEDQqdAqWp17YSKXQq8ckZVe4YdqAvt",
+  ipfsGateway: process.env.STORYBOOK_DATA_IPFS_GATEWAY,
+  ipfsProjectId: process.env.STORYBOOK_DATA_IPFS_PROJECT_ID,
+  ipfsProjectSecret: process.env.STORYBOOK_DATA_IPFS_PROJECT_SECRET,
+  offerId: "",
+  defaultSelectedOfferId: "",
+  disableVariationsSelects: false,
+  bundleUuid: "efc1ca63-c816-4636-bb09-0202ed5e75c3",
+  productUuid: undefined,
+  sellerId: "138",
+  metaTx: {
+    apiKey: process.env.STORYBOOK_DATA_META_TX_API_KEY as string,
+    apiIds: process.env.STORYBOOK_DATA_META_TX_API_IDS as string
+  },
+  closeWidgetClick: () => {
+    console.log("closeWidgetClick()");
+  },
+  onAlreadyOwnOfferClick: () => {
+    console.log("onAlreadyOwnOfferClick");
+  },
+  forcedAccount: "",
+  showBosonLogo: false
+};
+
+CommitBundle.decorators = [(Story) => wrapper(Story)];

package/src/types/bundle.ts

@@ -0,0 +1,4 @@
+import { subgraph } from "@bosonprotocol/core-sdk";
+
+export type BundleItem =
+  subgraph.BundleMetadataEntityFieldsFragment["items"][number];