@bosonprotocol/react-kit 0.30.0-alpha.5 → 0.30.0-alpha.7

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bosonprotocol/react-kit",
   "description": "React toolkit with smart components and hooks for building on top of the Boson Protocol.",
-  "version": "0.30.0-alpha.5",
+  "version": "0.30.0-alpha.7",
   "main": "./dist/cjs/index.js",
   "module": "./dist/esm/index.js",
   "types": "./dist/cjs/index.d.ts",
@@ -15,8 +15,8 @@
   "license": "Apache-2.0",
   "dependencies": {
     "@bosonprotocol/chat-sdk": "^1.3.1-alpha.9",
-    "@bosonprotocol/core-sdk": "^1.40.2-alpha.2",
-    "@bosonprotocol/ethers-sdk": "^1.14.2-alpha.2",
+    "@bosonprotocol/core-sdk": "^1.40.2-alpha.4",
+    "@bosonprotocol/ethers-sdk": "^1.14.2-alpha.4",
     "@bosonprotocol/ipfs-storage": "^1.11.3",
     "@davatar/react": "1.11.1",
     "@ethersproject/units": "5.6.0",
@@ -170,5 +170,5 @@
   "overrides": {
     "typescript": "^5.1.6"
   },
-  "gitHead": "b7eed91db80f93ffd7f8f14b1d38fbb0e64ac2c3"
+  "gitHead": "6e75e2bd6b1b426bb605a92a2fd31bd82f294f01"
 }

package/src/components/modal/components/Redeem/Confirmation/Confirmation.tsx

@@ -134,6 +134,9 @@ export default function Confirmation({
   const [zipField] = useField(FormModel.formFields.zip.name);
   const [countryField] = useField(FormModel.formFields.country.name);
   const [emailField] = useField(FormModel.formFields.email.name);
+  const [walletAddressField] = useField(
+    FormModel.formFields.walletAddress.name
+  );
   const [phoneField] = useField(FormModel.formFields.phone.name);
   const redemptionInfo = {
     exchangeId,
@@ -249,7 +252,8 @@ ${FormModel.formFields.state.placeholder}: ${message.deliveryDetails.state}
 ${FormModel.formFields.zip.placeholder}: ${message.deliveryDetails.zip}
 ${FormModel.formFields.country.placeholder}: ${message.deliveryDetails.country}
 ${FormModel.formFields.email.placeholder}: ${message.deliveryDetails.email}
-${FormModel.formFields.phone.placeholder}: ${message.deliveryDetails.phone}`;
+${FormModel.formFields.phone.placeholder}: ${message.deliveryDetails.phone}
+${FormModel.formFields.walletAddress.placeholder}: ${message.deliveryDetails.walletAddress}`;
 
       const newMessage = {
         threadId: {
@@ -300,6 +304,7 @@ ${FormModel.formFields.phone.placeholder}: ${message.deliveryDetails.phone}`;
           <div>{zipField.value}</div>
           <div>{countryField.value}</div>
           <div>{emailField.value}</div>
+          <div>{walletAddressField.value}</div>
           <div>{phoneField.value}</div>
         </Grid>
         <Grid flexDirection="row" flexBasis="0">

package/src/components/modal/components/Redeem/RedeemForm/RedeemForm.tsx

@@ -1,14 +1,18 @@
 import React from "react";
+import type { Country as CountryCode } from "react-phone-number-input";
 import { useBreakpoints } from "../../../../../hooks/useBreakpoints";
+import { BuyerTransferInfo } from "../../../../../lib/bundle/const";
+import { getHasBuyerTransferInfos } from "../../../../../lib/offer/filter";
+import { Exchange } from "../../../../../types/exchange";
 import { Button } from "../../../../buttons/Button";
+import { CountrySelect } from "../../../../form/CountrySelect";
 import Input from "../../../../form/Input";
 import Phone from "../../../../form/Phone";
 import { Grid } from "../../../../ui/Grid";
 import { Typography } from "../../../../ui/Typography";
 import { FormModel } from "../RedeemFormModel";
-import { CountrySelect } from "../../../../form/CountrySelect";
-import type { Country as CountryCode } from "react-phone-number-input";
 interface Props {
+  exchange: Exchange | null;
   isValid: boolean;
   onNextClick: () => void;
   onBackClick: () => void;
@@ -55,11 +59,17 @@ const fatfMemberCountries: CountryCode[] = [
 ];
 
 export default function RedeemForm({
+  exchange,
   isValid,
   onNextClick,
   onBackClick
 }: Props) {
   const { isLteXS } = useBreakpoints();
+  const requestBuyerAddress = exchange?.offer
+    ? getHasBuyerTransferInfos(exchange.offer, [
+        BuyerTransferInfo.walletAddress
+      ])
+    : false;
   return (
     <>
       <Typography
@@ -142,6 +152,14 @@ export default function RedeemForm({
             placeholder={FormModel.formFields.email.placeholder}
           />
         </Grid>
+        {requestBuyerAddress && (
+          <Grid flexDirection="column" alignItems="flex-start">
+            <Input
+              name={FormModel.formFields.walletAddress.name}
+              placeholder={FormModel.formFields.walletAddress.placeholder}
+            />
+          </Grid>
+        )}
         <Grid flexDirection="column" alignItems="flex-start">
           <Phone
             name={FormModel.formFields.phone.name}

package/src/components/modal/components/Redeem/RedeemForm/RedeemFormView.tsx

@@ -45,6 +45,7 @@ export default function RedeemFormView({
         <p>Invalid exchange state.</p>
       ) : (
         <RedeemForm
+          exchange={exchange}
           isValid={isValid}
           onNextClick={onNextClick}
           onBackClick={onBackClick}

package/src/components/modal/components/Redeem/RedeemFormModel.ts

@@ -36,6 +36,12 @@ export const FormModel = {
       placeholder: "Email",
       mustBeEmail: "This is not an e-mail"
     },
+    walletAddress: {
+      name: "walletAddress",
+      requiredErrorMessage: "This field is required",
+      placeholder: "WalletAddress",
+      mustBeWalletAddress: "This is not a wallet address"
+    },
     phone: {
       name: "phone",
       requiredErrorMessage: "This field is required",
@@ -44,4 +50,4 @@ export const FormModel = {
   }
 } as const;
 
-export type FormType = Record<keyof typeof FormModel["formFields"], string>;
+export type FormType = Record<keyof (typeof FormModel)["formFields"], string>;

package/src/components/modal/components/Redeem/RedeemNonModal.tsx

@@ -56,6 +56,8 @@ import {
   DetailContextProps,
   DetailViewProvider
 } from "../common/detail/DetailViewProvider";
+import { getHasBuyerTransferInfos } from "../../../../lib/offer/filter";
+import { BuyerTransferInfo } from "../../../../lib/bundle/const";
 
 const colors = theme.colors.light;
 const UlWithWordBreak = styled.ul`
@@ -328,6 +330,11 @@ function RedeemNonModal({
   const emailPreference =
     exchange?.seller.metadata?.contactPreference ===
     ContactPreference.XMTP_AND_EMAIL;
+  const requestBuyerAddress = exchange?.offer
+    ? getHasBuyerTransferInfos(exchange.offer, [
+        BuyerTransferInfo.walletAddress
+      ])
+    : false;
   const validationSchema = useMemo(() => {
     return Yup.object({
       [FormModel.formFields.name.name]: Yup.string()
@@ -356,11 +363,21 @@ function RedeemNonModal({
             .required(FormModel.formFields.email.requiredErrorMessage)
             .email(FormModel.formFields.email.mustBeEmail)
         : Yup.string().trim().email(FormModel.formFields.email.mustBeEmail),
+      [FormModel.formFields.walletAddress.name]: requestBuyerAddress
+        ? Yup.string()
+            .trim()
+            .required(FormModel.formFields.walletAddress.requiredErrorMessage)
+            .test(
+              "mustBeAddress",
+              FormModel.formFields.walletAddress.mustBeWalletAddress,
+              (value) => (value ? ethers.utils.isAddress(value) : true)
+            )
+        : Yup.string().trim(),
       [FormModel.formFields.phone.name]: Yup.string()
         .trim()
         .required(FormModel.formFields.phone.requiredErrorMessage)
     });
-  }, [emailPreference]);
+  }, [emailPreference, requestBuyerAddress]);
   type FormType = Yup.InferType<typeof validationSchema>;
   const [{ currentStep }, setStep] = useState<{
     previousStep: ActiveStep[];
@@ -495,6 +512,7 @@ function RedeemNonModal({
             [FormModel.formFields.zip.name]: "",
             [FormModel.formFields.country.name]: "",
             [FormModel.formFields.email.name]: "",
+            [FormModel.formFields.walletAddress.name]: "",
             [FormModel.formFields.phone.name]: ""
           }
         }
@@ -509,6 +527,7 @@ function RedeemNonModal({
             !errors[FormModel.formFields.zip.name] &&
             !errors[FormModel.formFields.country.name] &&
             !errors[FormModel.formFields.email.name] &&
+            !errors[FormModel.formFields.walletAddress.name] &&
             !errors[FormModel.formFields.phone.name];
 
           return (

package/src/lib/bundle/const.ts

@@ -27,3 +27,9 @@ export const ercTokenMapping = {
   erc721: "ERC721",
   erc1155: "ERC1155"
 } as const;
+
+export const BUYER_TRANSFER_INFO_KEY = "buyerTransferInfo";
+export enum BuyerTransferInfo {
+  "email" = "email",
+  "walletAddress" = "walletAddress"
+}

package/src/lib/offer/filter.ts

@@ -1,5 +1,8 @@
 import { subgraph } from "@bosonprotocol/core-sdk";
 import type { Offer } from "../../types/offer";
+import { NftItem, isNftItem } from "../bundle/filter";
+import { BUYER_TRANSFER_INFO_KEY, BuyerTransferInfo } from "../bundle/const";
+import { isTruthy } from "../../types/helpers";
 
 export type BundleMetadata = Extract<
   Offer["metadata"],
@@ -30,3 +33,28 @@ export const isProductV1 = (
 ): offer is ProductV1 =>
   offer.metadata?.__typename === "ProductV1MetadataEntity" ||
   offer.metadata?.type === subgraph.MetadataType.PRODUCT_V1;
+
+const getBuyerTransferInfoTerm = (item: NftItem) =>
+  item.terms?.find((term) => term.key === BUYER_TRANSFER_INFO_KEY);
+export const getBuyerTransferInfos = (
+  offer: Offer | subgraph.OfferFieldsFragment
+): Set<string> => {
+  return isBundle(offer)
+    ? new Set(
+        offer.metadata.items
+          .filter(isNftItem)
+          .map((item) => getBuyerTransferInfoTerm(item)?.value)
+          .filter(isTruthy)
+      )
+    : new Set();
+};
+
+export const getHasBuyerTransferInfos = (
+  offer: Offer | subgraph.OfferFieldsFragment,
+  valuesToFind: BuyerTransferInfo[]
+): boolean => {
+  const buyerTransferInfos = getBuyerTransferInfos(offer);
+  return valuesToFind.every((buyerTransferInfoValue) => {
+    return buyerTransferInfos.has(buyerTransferInfoValue);
+  });
+};

package/src/lib/offer/getOfferDetails.ts

@@ -89,30 +89,41 @@ export const getOfferDetails = (
   const animationUrl = getOfferAnimationUrl(offer);
   const shippingInfo = {
     returnPeriodInDays:
-      productV1ItemMetadataEntity?.shipping?.returnPeriodInDays,
+      productV1ItemMetadataEntity?.shipping?.returnPeriodInDays ||
+      isProductV1(offer)
+        ? (offer.metadata as ProductV1Sub).shipping?.returnPeriodInDays
+        : undefined,
     shippingTable:
-      productV1ItemMetadataEntity?.shipping?.supportedJurisdictions?.map(
-        (jurisdiction: any) => ({
-          name: jurisdiction.label,
-          value: jurisdiction.deliveryTime
-        })
-      ) || []
+      (productV1ItemMetadataEntity?.shipping || isProductV1(offer)
+        ? (offer.metadata as ProductV1Sub).shipping
+        : undefined
+      )?.supportedJurisdictions?.map((jurisdiction: any) => ({
+        name: jurisdiction.label,
+        value: jurisdiction.deliveryTime
+      })) || []
   };
   const description =
     productV1ItemMetadataEntity?.product?.description ||
     offer.metadata?.description ||
     "";
-  const artist = productV1ItemMetadataEntity?.productV1Seller || null;
+  const artist =
+    productV1ItemMetadataEntity?.productV1Seller || isProductV1(offer)
+      ? (offer.metadata as ProductV1Sub).productV1Seller
+      : null;
   const artistDescription =
     artist?.description ||
     productV1ItemMetadataEntity?.product.productV1Seller?.description ||
     "";
   const images =
-    productV1ItemMetadataEntity?.product?.visuals_images?.map(
-      ({ url }: { url: string }) => url
-    ) || [];
+    (productV1ItemMetadataEntity?.product || isProductV1(offer)
+      ? (offer.metadata as ProductV1Sub).product
+      : undefined
+    )?.visuals_images?.map(({ url }: { url: string }) => url) || [];
   const variantsImages =
-    productV1ItemMetadataEntity?.productOverrides?.visuals_images?.map(
+    (productV1ItemMetadataEntity || isProductV1(offer)
+      ? (offer.metadata as ProductV1Sub)
+      : undefined
+    )?.productOverrides?.visuals_images?.map(
       ({ url }: { url: string }) => url
     ) || [];
   const bundleItems = isBundle(offer) ? offer.metadata.items : undefined;