fix some issues

src/components/core-sdk/CoreSDKContext.tsx

@@ -1,5 +1,6 @@
 import { hooks } from "@bosonprotocol/react-kit";
 import { useConfigContext } from "components/config/ConfigContext";
+import { CONFIG } from "lib/config";
 import { createContext, useContext } from "react";
 
 import { useProvider } from "../../lib/utils/hooks/connection/connection";
@@ -12,7 +13,7 @@ export function useProviderCoreSDK() {
   const { config } = useConfigContext();
 
   return hooks.useCoreSdk({
-    ipfsMetadataStorageHeaders: config.ipfsMetadataStorageHeaders,
+    ipfsMetadataStorageHeaders: CONFIG.ipfsMetadataStorageHeaders,
     configId: config.envConfig.configId,
     envName: config.envName,
     ipfsMetadataStorageUrl: config.ipfsMetadataStorageUrl,

src/components/detail/DetailWidget/BasicCommitDetailWidget.tsx

@@ -0,0 +1,62 @@
+import { ExternalCommitDetailView } from "@bosonprotocol/react-kit";
+import { useConfigContext } from "components/config/ConfigContext";
+import { MODAL_TYPES } from "components/modal/ModalComponents";
+import { useModal } from "components/modal/useModal";
+import { CONFIG } from "lib/config";
+import { BosonRoutes } from "lib/routing/routes";
+import { useKeepQueryParamsNavigate } from "lib/utils/hooks/useKeepQueryParamsNavigate";
+import { VariantV1 } from "pages/products/types";
+import React, { ReactNode } from "react";
+
+type BasicCommitDetailWidgetProps = {
+  selectedVariant: VariantV1;
+  isPreview: boolean;
+  children?: ReactNode;
+};
+
+export const BasicCommitDetailWidget: React.FC<
+  BasicCommitDetailWidgetProps
+> = ({ selectedVariant, isPreview, children }) => {
+  const { showModal } = useModal();
+  const navigate = useKeepQueryParamsNavigate();
+  const { config } = useConfigContext();
+  return (
+    <ExternalCommitDetailView
+      providerProps={{
+        ...CONFIG,
+        envName: config.envName,
+        configId: config.envConfig.configId,
+        walletConnectProjectId: CONFIG.walletConnect.projectId,
+        defaultCurrencySymbol: CONFIG.defaultCurrency.symbol,
+        defaultCurrencyTicker: CONFIG.defaultCurrency.ticker,
+        licenseTemplate: CONFIG.rNFTLicenseTemplate,
+        minimumDisputeResolutionPeriodDays: CONFIG.minimumDisputePeriodInDays,
+        contactSellerForExchangeUrl: ""
+      }}
+      selectedVariant={selectedVariant}
+      showPriceAsterisk={isPreview}
+      showBosonLogo={false}
+      onExchangePolicyClick={({ exchangePolicyCheckResult }) => {
+        showModal(MODAL_TYPES.EXCHANGE_POLICY_DETAILS, {
+          title: "Exchange Policy Details",
+          offerId: selectedVariant.offer.id,
+          offerData: selectedVariant.offer,
+          exchangePolicyCheckResult: exchangePolicyCheckResult
+        });
+      }}
+      onPurchaseOverview={() => {
+        showModal(MODAL_TYPES.WHAT_IS_REDEEM, {
+          title: "Commit and Redeem"
+        });
+      }}
+      onClickBuyOrSwap={({ swapParams }) => {
+        navigate({ pathname: BosonRoutes.Swap, search: swapParams });
+      }}
+      onAlreadyOwnOfferClick={() => {
+        navigate({ pathname: BosonRoutes.YourAccount });
+      }}
+    >
+      <>{children}</>
+    </ExternalCommitDetailView>
+  );
+};

src/components/form/Upload/Upload.tsx

@@ -292,7 +292,6 @@ function Upload({
           </BosonButton>
         ) : (
           <FileUploadWrapper
-            choosen={files !== null}
             data-disabled={disabled}
             onClick={handleChooseFile}
             error={errorMessage}
@@ -330,7 +329,7 @@ function Upload({
                 ) : (
                   <Image size={24} />
                 )}
-                {placeholder && (
+                {placeholder && !field.value?.length && (
                   <Typography tag="p" style={{ marginBottom: "0" }}>
                     {placeholder}
                   </Typography>

src/components/modal/components/ProductCreateSuccess.tsx

@@ -1,39 +1,31 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import { useGetOfferDetailData } from "@bosonprotocol/react-kit";
 import { formatUnits } from "@ethersproject/units";
 import * as ProgressPrimitive from "@radix-ui/react-progress";
+import { BasicCommitDetailWidget } from "components/detail/DetailWidget/BasicCommitDetailWidget";
 import { BigNumber, FixedNumber } from "ethers";
-import { CONFIG } from "lib/config";
 import { Plus, Warning } from "phosphor-react";
 import styled from "styled-components";
 
-import Price from "../../../components/price/index";
 import { colors } from "../../../lib/styles/colors";
-import { useCustomStoreQueryParameter } from "../../../pages/custom-store/useCustomStoreQueryParameter";
 import {
-  Break,
   ModalGrid,
   ModalImageWrapper,
   Widget
 } from "../../detail/Detail.style";
-import DetailTable from "../../detail/DetailTable";
-import TokenGated from "../../detail/DetailWidget/TokenGated";
 import Tooltip from "../../tooltip/Tooltip";
 import BosonButton from "../../ui/BosonButton";
 import Grid from "../../ui/Grid";
 import Image from "../../ui/Image";
 import Typography from "../../ui/Typography";
 import Video from "../../ui/Video";
-import { MODAL_TYPES } from "../ModalComponents";
-import { useModal } from "../useModal";
+
 interface Props {
   message: string;
   name: string;
   image: string;
   offer: any;
   onCreateNew?: () => void;
   onViewMyItem: () => void;
-  hasMultipleVariants: boolean;
 }
 const Funds = styled.div`
   margin: 2rem auto;
@@ -45,19 +37,6 @@ const Funds = styled.div`
   }
 `;
 
-const StyledPrice = styled(Price)`
-  h3 {
-    font-size: 2rem;
-  }
-  small {
-    font-size: 1rem;
-  }
-  margin-bottom: 2rem;
-  [data-testid="price-grid"] {
-    justify-content: center;
-  }
-`;
-
 const StyledProgress = styled(ProgressPrimitive.Root)`
   padding: 0.3rem;
   margin-top: 0.75rem;
@@ -103,42 +82,14 @@ const Amount = styled.span`
 `;
 
 const PROGRESS = 15;
-const exchangePolicyCheckResult = {
-  isValid: true,
-  errors: []
-};
 export default function ProductCreateSuccess({
   message,
   name,
   image,
   offer,
   onCreateNew,
-  onViewMyItem,
-  hasMultipleVariants
+  onViewMyItem
 }: Props) {
-  const commitProxyAddress = useCustomStoreQueryParameter("commitProxyAddress");
-  const openseaLinkToOriginalMainnetCollection = useCustomStoreQueryParameter(
-    "openseaLinkToOriginalMainnetCollection"
-  );
-
-  const { showModal } = useModal();
-
-  const offerDetailData = useGetOfferDetailData({
-    dateFormat: CONFIG.dateFormat,
-    defaultCurrencySymbol: CONFIG.defaultCurrency.symbol,
-    offer,
-    exchange: null,
-    onExchangePolicyClick: () => {
-      showModal(MODAL_TYPES.EXCHANGE_POLICY_DETAILS, {
-        title: "Exchange Policy Details",
-        offerId: offer.id,
-        offerData: offer,
-        exchangePolicyCheckResult
-      });
-    },
-    exchangePolicyCheckResult
-  });
-
   const suggestedAmount = FixedNumber.fromString(
     formatUnits(
       BigNumber.from(offer?.sellerDeposit).mul(Number(offer?.quantityInitial)),
@@ -177,7 +128,7 @@ export default function ProductCreateSuccess({
           )}
         </ModalImageWrapper>
         <div>
-          <Widget>
+          <Widget style={{ marginBottom: "1rem" }}>
             <Grid flexDirection="column">
               <Typography tag="p" margin="0.5rem 0 0 0">
                 <b>{message}</b>
@@ -189,32 +140,13 @@ export default function ProductCreateSuccess({
                 $fontSize="1.5rem"
               >
                 {name}
-              </Typography>
-              <StyledPrice
-                isExchange={false}
-                currencySymbol={offer.exchangeToken.symbol}
-                value={offer.price}
-                decimals={offer.exchangeToken.decimals}
-                tag="h3"
-                convert
-                withAsterisk={hasMultipleVariants}
-              />
+              </Typography>{" "}
             </Grid>
-            <Break />
-            {offer.condition && (
-              <TokenGated
-                offer={offer}
-                commitProxyAddress={commitProxyAddress}
-                openseaLinkToOriginalMainnetCollection={
-                  openseaLinkToOriginalMainnetCollection
-                }
-                isConditionMet={false}
-              />
-            )}
-            <div style={{ paddingTop: "2rem" }}>
-              <DetailTable align noBorder data={offerDetailData} />
-            </div>
           </Widget>
+          <BasicCommitDetailWidget
+            isPreview
+            selectedVariant={{ offer, variations: [] }}
+          />
           {hasDeposit && (
             <Funds>
               <FundTile tag="p">

src/components/product/Preview.tsx

@@ -14,7 +14,8 @@ import {
   DetailWrapper,
   ImageWrapper,
   LightBackground,
-  MainDetailGrid
+  MainDetailGrid,
+  SellerAndOpenSeaGrid
 } from "../detail/Detail.style";
 import BosonButton from "../ui/BosonButton";
 import Typography from "../ui/Typography";
@@ -58,7 +59,7 @@ export default function Preview({
   const sliderImages = map(productImages, (v) => v?.[0]?.src || "").filter(
     (ipfsLink) => ipfsLink
   );
-  const offerImg = sliderImages?.[0] || "";
+  const offerImg: string = sliderImages?.[0] || "";
 
   const handleClosePreview = () => {
     togglePreview(false);
@@ -68,7 +69,7 @@ export default function Preview({
   const previewOffers = usePreviewOffers({
     isMultiVariant,
     seller,
-    overrides: { decimals }
+    overrides: { decimals, offerImg, visuals_images: sliderImages }
   });
   // Build the Offer structure (in the shape of SubGraph request), based on temporary data (values)
   const [offer] = previewOffers;
@@ -163,15 +164,17 @@ export default function Preview({
                 ) : (
                   <Image src={thumbnailImg} dataTestId="offerImage" />
                 )}
+                <SellerAndOpenSeaGrid>
+                  <SellerID
+                    offer={offer}
+                    buyerOrSeller={offer?.seller as Seller}
+                    justifyContent="flex-start"
+                    withProfileImage
+                    onClick={null}
+                  />
+                </SellerAndOpenSeaGrid>
               </ImageWrapper>
               <div style={{ width: "100%" }}>
-                <SellerID
-                  offer={offer}
-                  buyerOrSeller={offer?.seller as Seller}
-                  justifyContent="flex-start"
-                  withProfileImage
-                  onClick={null}
-                />
                 <Typography
                   tag="h1"
                   data-testid="name"

src/components/product/utils/usePreviewOffer.ts

@@ -18,6 +18,8 @@ type UsePreviewOfferProps = {
   seller?: subgraph.SellerFieldsFragment;
   overrides?: Partial<{
     decimals: number;
+    offerImg: string;
+    visuals_images: string[];
   }>;
 };
 
@@ -101,7 +103,6 @@ export const usePreviewOffers = ({
           price,
           decimals
         });
-      const exchangeDate = Date.now().toString();
       const offer = {
         price: priceBN.toString(),
         sellerDeposit,
@@ -132,12 +133,7 @@ export const usePreviewOffers = ({
         metadataHash: "not-uploaded-yet", // can't be empty
         voidedAt: null,
         disputeResolverId,
-        exchanges: [
-          {
-            committedDate: exchangeDate,
-            redeemedDate: exchangeDate
-          }
-        ],
+        exchanges: [],
         seller,
         exchangeToken: exchangeToken || {
           // this 'or' should never occurr
@@ -152,6 +148,16 @@ export const usePreviewOffers = ({
           escalationResponsePeriod: escalationResponsePeriod
         },
         metadata: {
+          product: {
+            description: values.productInformation.description,
+            ...(overrides.visuals_images && {
+              visuals_images: overrides.visuals_images.map((ipfsLink) => ({
+                url: ipfsLink
+              }))
+            })
+          },
+          ...(overrides.offerImg && { image: overrides.offerImg }),
+          animationUrl: values.productAnimation?.[0]?.src,
           shipping: {
             returnPeriodInDays: parseInt(values.shippingInfo.returnPeriod)
           },
@@ -162,7 +168,8 @@ export const usePreviewOffers = ({
             label: values.termsOfExchange.exchangePolicy.label
           },
           productV1Seller: {
-            name: values.createYourProfile.name
+            name: values.createYourProfile.name,
+            description: values.createYourProfile.description
           }
         },
         condition: condition
@@ -176,12 +183,17 @@ export const usePreviewOffers = ({
       disputeResolverId,
       escalationResponsePeriod,
       overrides.decimals,
+      overrides.offerImg,
+      overrides.visuals_images,
       seller,
       tokenGating,
       validFromDateInMS,
       validUntilDateInMS,
       values.coreTermsOfSale.currency.value,
+      values.createYourProfile.description,
       values.createYourProfile.name,
+      values.productAnimation,
+      values.productInformation.description,
       values.productType?.tokenGatedOffer,
       values.shippingInfo.returnPeriod,
       values.termsOfExchange,