From 257a5eef3b0287a5ac1f3841b615b0d92c508480 Mon Sep 17 00:00:00 2001
From: Tatis <lois@tryshowtime.com>
Date: Mon, 10 Jan 2022 07:40:17 -0600
Subject: [PATCH] Update styles and semantics for listed for per feedback
 (#660)

---
 .../src/components/SpotlightItem.js           | 48 +++++++++++----
 apps/next-react/src/components/TokenCard.js   | 61 +++++++------------
 .../src/components/TokenDetailBody.js         | 46 +++++++++-----
 3 files changed, 89 insertions(+), 66 deletions(-)

diff --git a/apps/next-react/src/components/SpotlightItem.js b/apps/next-react/src/components/SpotlightItem.js
index 192ac9f908..1976e27492 100644
--- a/apps/next-react/src/components/SpotlightItem.js
+++ b/apps/next-react/src/components/SpotlightItem.js
@@ -120,6 +120,9 @@ const SpotlightItem = ({
     myProfile?.profile_id === thisItem?.listing?.profile_id &&
     typeof myProfile?.profile_id === "number";
 
+  const freeItem = item?.listing?.min_price === 0;
+  const singleEdition = item?.listing?.total_edition_quantity === 1;
+
   return (
     <>
       {typeof document !== "undefined" ? (
@@ -510,8 +513,9 @@ const SpotlightItem = ({
                     </div>
                     {item.listing && (
                       <p className="text-xs font-semibold text-gray-600 dark:text-gray-400">
-                        {item.listing.total_edition_quantity} Editions /{" "}
-                        {parseInt(item.listing.royalty_percentage)}% Royalties
+                        {singleEdition
+                          ? `${item.listing.total_edition_quantity} Edition`
+                          : `${item.listing.total_edition_quantity} Editions`}
                       </p>
                     )}
                   </div>
@@ -601,16 +605,36 @@ const SpotlightItem = ({
                 </div>
                 <div className="mt-8 inline-block">
                   {item.listing ? (
-                    <Button
-                      disabled={ifListedIsOwner}
-                      style="primary"
-                      title="Buy on Showtime"
-                      onClick={() => setBuyModalOpen(true)}
-                    >
-                      {ifListedIsOwner
-                        ? `Listed for ${item.listing.min_price} ${item.listing.currency}`
-                        : `Buy for ${item.listing.min_price} ${item.listing.currency}`}
-                    </Button>
+                    <>
+                      {ifListedIsOwner ? (
+                        <p className="px-4 text-sm sm:text-base dark:text-gray-500">
+                          {freeItem ? (
+                            "Listed for Free"
+                          ) : (
+                            <>
+                              {`Price ${item.listing.min_price} ${item.listing.currency}`}
+                            </>
+                          )}
+                        </p>
+                      ) : (
+                        <Button
+                          disabled={ifListedIsOwner}
+                          style="primary"
+                          title="Buy on Showtime"
+                          onClick={() => setBuyModalOpen(true)}
+                        >
+                          <p className="text-sm sm:text-base">
+                            {freeItem ? (
+                              "Price Free"
+                            ) : (
+                              <>
+                                {`Price ${item.listing.min_price} ${item.listing.currency}`}
+                              </>
+                            )}
+                          </p>
+                        </Button>
+                      )}
+                    </>
                   ) : (
                     <Button
                       style="primary"
diff --git a/apps/next-react/src/components/TokenCard.js b/apps/next-react/src/components/TokenCard.js
index 74cc74f6b8..e2539c1249 100644
--- a/apps/next-react/src/components/TokenCard.js
+++ b/apps/next-react/src/components/TokenCard.js
@@ -24,8 +24,6 @@ import {
   CHAIN_IDENTIFIERS,
   COLLECTION_NAME_TRUNCATE_LENGTH,
 } from "../lib/constants";
-import ShowtimeIcon from "./Icons/ShowtimeIcon";
-import Tippy from "@tippyjs/react";
 
 const TokenCard = ({
   originalItem,
@@ -53,12 +51,13 @@ const TokenCard = ({
   const [muted, setMuted] = useState(true);
   const [refreshing, setRefreshing] = useState(false);
   const [showModel, setShowModel] = useState(false);
+
   const hasMatchingListing = item?.listing?.all_sellers?.find((seller) => {
     return seller.profile_id === pageProfile?.profile_id;
   });
-  const ifListedIsOwner =
-    myProfile?.profile_id === item?.listing?.profile_id &&
-    typeof myProfile?.profile_id === "number";
+
+  const freeListedItem = item?.listing?.min_price === 0;
+  const singleItem = item?.token_count === 1;
 
   // Automatically load models that have no preview image. We don't account for video here because currently token_animation_url is a glb file.
   useEffect(() => {
@@ -657,13 +656,6 @@ const TokenCard = ({
               >
                 {item.token_name}
               </p>
-              {SHOWTIME_CONTRACTS.includes(item.contract_address) && (
-                <Tippy content="Created on Showtime">
-                  <div className="flex items-center justify-center">
-                    <ShowtimeIcon className="w-5 h-5 rounded-full fill-gold" />
-                  </div>
-                </Tippy>
-              )}
             </div>
             <div className="mt-4 flex items-center justify-between">
               <div className="flex items-center space-x-4">
@@ -737,34 +729,21 @@ const TokenCard = ({
                         </div>
                       </a>
                     </Link>
-                    {ifListedIsOwner ? (
-                      <section className="space-x-4 flex items-end hover:bg-gray-100 dark:hover:bg-gray-900 py-0.5 px-3 -my-0.5 -mx-3 rounded-lg transition bg-gray-100 dark:bg-gray-900">
-                        <div>
-                          <span className="text-xs font-medium text-gray-600 dark:text-gray-500">
-                            Listed for
-                          </span>
-                          <p className="text-sm font-bold text-gray-900 dark:text-gray-200 whitespace-nowrap">
-                            {parseFloat(item.listing.min_price)} $
+                    <section className="space-x-4 py-0.5 px-3 -my-0.5 -mx-3 rounded-lg">
+                      <p className="text-right text-xs font-medium text-gray-600 dark:text-gray-500">
+                        Price
+                      </p>
+                      <p className="text-sm font-bold text-gray-900 dark:text-gray-200 whitespace-nowrap">
+                        {freeListedItem ? (
+                          "Free"
+                        ) : (
+                          <>
+                            {parseFloat(item.listing.min_price)}{" "}
                             {item.listing.currency}
-                          </p>
-                        </div>
-                      </section>
-                    ) : (
-                      <button
-                        onClick={() => setBuyModal(item)}
-                        className="space-x-4 flex items-end hover:bg-gray-100 dark:hover:bg-gray-900 py-0.5 px-3 -my-0.5 -mx-3 rounded-lg transition"
-                      >
-                        <div className="text-right">
-                          <span className="text-xs text-right font-medium text-gray-600 dark:text-gray-500">
-                            Buy
-                          </span>
-                          <p className="text-sm font-bold text-gray-900 dark:text-gray-200 whitespace-nowrap">
-                            {parseFloat(item.listing.min_price)} $
-                            {item.listing.currency}
-                          </p>
-                        </div>
-                      </button>
-                    )}
+                          </>
+                        )}
+                      </p>
+                    </section>
                   </div>
                 ) : item.owner_count && item.owner_count > 1 ? (
                   pageProfile && listId === 2 ? (
@@ -872,7 +851,9 @@ const TokenCard = ({
                 </p>
               </div>
               <p className="text-xs font-semibold text-gray-600 dark:text-gray-400">
-                {item.token_count ? `${item.token_count} Editions` : "1/1"}
+                {singleItem || !item.token_count
+                  ? "1 Edition"
+                  : `${item.token_count} Editions`}
               </p>
             </div>
           </div>
diff --git a/apps/next-react/src/components/TokenDetailBody.js b/apps/next-react/src/components/TokenDetailBody.js
index 6a2968f8a1..548b6b60cc 100644
--- a/apps/next-react/src/components/TokenDetailBody.js
+++ b/apps/next-react/src/components/TokenDetailBody.js
@@ -154,10 +154,13 @@ const TokenDetailBody = ({
   const isOwnedByUser =
     typeof myProfile?.profile_id === "number" &&
     myProfile?.profile_id === item?.owner_id;
+
   const ifListedIsOwner =
     myProfile?.profile_id === item?.listing?.profile_id &&
     typeof myProfile?.profile_id === "number";
 
+  const freeItem = item?.listing?.min_price === 0;
+
   return (
     <>
       {typeof document !== "undefined" ? (
@@ -626,20 +629,35 @@ const TokenDetailBody = ({
                 </div>
 
                 {item.listing ? (
-                  <button
-                    disabled={ifListedIsOwner}
-                    title="Buy on Showtime"
-                    className={`border-2 text-gray-800 dark:text-gray-500 border-transparent shadow-md dark:shadow-none dark:border-gray-500 dark:hover:border-gray-400 hover:text-gray-900 dark:hover:text-gray-400 px-4 py-2 rounded-full transition focus:outline-none flex items-center space-x-1 ${
-                      ifListedIsOwner ? "bg-gray-100 cursor-default" : null
-                    }`}
-                    onClick={() => setBuyModalOpen(true)}
-                  >
-                    <p className="text-sm sm:text-base">
-                      {ifListedIsOwner
-                        ? `Listed for ${item.listing.min_price} $${item.listing.currency}`
-                        : `Buy for ${item.listing.min_price} $${item.listing.currency}`}
-                    </p>
-                  </button>
+                  <>
+                    {ifListedIsOwner ? (
+                      <p className="px-4 text-sm sm:text-base dark:text-gray-500">
+                        {freeItem ? (
+                          "Listed for Free"
+                        ) : (
+                          <>
+                            {`Price ${item.listing.min_price} ${item.listing.currency}`}
+                          </>
+                        )}
+                      </p>
+                    ) : (
+                      <button
+                        title="Buy on Showtime"
+                        className="border-2 text-gray-800 dark:text-gray-500 border-transparent shadow-md dark:shadow-none dark:border-gray-500 dark:hover:border-gray-400 hover:text-gray-900 dark:hover:text-gray-400 px-4 py-2 rounded-full transition focus:outline-none flex items-center space-x-1"
+                        onClick={() => setBuyModalOpen(true)}
+                      >
+                        <p className="text-sm sm:text-base">
+                          {freeItem ? (
+                            "Price Free"
+                          ) : (
+                            <>
+                              {`Price ${item.listing.min_price} ${item.listing.currency}`}
+                            </>
+                          )}
+                        </p>
+                      </button>
+                    )}
+                  </>
                 ) : isOwnedByUser &&
                   SHOWTIME_CONTRACTS.includes(item.contract_address) ? (
                   <button