From 018d45d95e89df5866738f6ab7b7ab7820bdc767 Mon Sep 17 00:00:00 2001
From: Steve Rydz <steve.rydz@canonical.com>
Date: Wed, 12 Feb 2025 10:15:19 +0000
Subject: [PATCH] fix: Fix listing preview issues

Fix listing preview screenshots

Fix display of screenshots on listing preview

Fix license on listing preview

Fix listing preview websites

Fix listing preview source code section
---
 .../pages/Listing/ListingForm/ListingForm.tsx |  7 ++-
 .../pages/Listing/PreviewForm/PreviewForm.tsx | 48 +++++++++++++------
 templates/store/snap-details.html             |  2 -
 webapp/publisher/snaps/listing_views.py       |  4 +-
 4 files changed, 42 insertions(+), 19 deletions(-)

diff --git a/static/js/publisher/pages/Listing/ListingForm/ListingForm.tsx b/static/js/publisher/pages/Listing/ListingForm/ListingForm.tsx
index c55ad2bc60..f9fab9a223 100644
--- a/static/js/publisher/pages/Listing/ListingForm/ListingForm.tsx
+++ b/static/js/publisher/pages/Listing/ListingForm/ListingForm.tsx
@@ -179,7 +179,12 @@ function ListingForm({ data, refetch }: Props): JSX.Element {
         </Strip>
       </form>
       {snapId && (
-        <PreviewForm snapName={snapId} getValues={getValues} watch={watch} />
+        <PreviewForm
+          snapName={snapId}
+          getValues={getValues}
+          watch={watch}
+          data={data}
+        />
       )}
     </>
   );
diff --git a/static/js/publisher/pages/Listing/PreviewForm/PreviewForm.tsx b/static/js/publisher/pages/Listing/PreviewForm/PreviewForm.tsx
index 5dbb06f504..807024912e 100644
--- a/static/js/publisher/pages/Listing/PreviewForm/PreviewForm.tsx
+++ b/static/js/publisher/pages/Listing/PreviewForm/PreviewForm.tsx
@@ -5,6 +5,9 @@ type Props = {
   snapName: string;
   getValues: UseFormGetValues<FieldValues>;
   watch: UseFormWatch<FieldValues>;
+  data: {
+    categories: { name: string; slug: string }[];
+  };
 };
 
 type ListingData = {
@@ -25,13 +28,15 @@ type ListingData = {
   }>;
   summary: string;
   description: string;
+  video: { type: string; status: string; url: string }[] | null;
+  license: string;
 };
 
-function PreviewForm({ snapName, getValues, watch }: Props) {
+function PreviewForm({ snapName, getValues, watch, data }: Props) {
   const watchWebsites = watch("websites");
   const watchContacts = watch("contacts");
   const watchDonations = watch("donations");
-  const watchSource = watch("source");
+  const watchSource = watch("source_code");
   const watchIssues = watch("issues");
 
   const listingData: ListingData = {
@@ -69,6 +74,8 @@ function PreviewForm({ snapName, getValues, watch }: Props) {
     ],
     summary: getValues("summary"),
     description: getValues("description"),
+    video: null,
+    license: "",
   };
 
   const screenshotUrls = getValues("screenshot_urls");
@@ -87,25 +94,36 @@ function PreviewForm({ snapName, getValues, watch }: Props) {
   const secondaryCategory = getValues("secondary_category");
 
   if (primaryCategory) {
-    listingData.categories.push({
-      name: primaryCategory,
-      slug: primaryCategory,
-    });
+    const primaryCategoryData = data.categories.find(
+      (cat) => cat.slug === primaryCategory,
+    );
+
+    if (primaryCategoryData) {
+      listingData.categories.push(primaryCategoryData);
+    }
   }
 
   if (secondaryCategory) {
-    listingData.categories.push({
-      name: secondaryCategory,
-      slug: secondaryCategory,
-    });
+    const secondaryCategoryData = data.categories.find(
+      (cat) => cat.slug === secondaryCategory,
+    );
+
+    if (secondaryCategoryData) {
+      listingData.categories.push(secondaryCategoryData);
+    }
   }
 
-  window.localStorage.setItem(
-    `${snapName}-initial`,
-    JSON.stringify(listingData),
-  );
+  const videoUrl = getValues("video_urls");
+
+  if (videoUrl) {
+    listingData.video = [{ type: "video", status: "uploaded", url: videoUrl }];
+  }
 
-  window.localStorage.setItem(snapName, JSON.stringify(listingData));
+  listingData.license = getValues("license");
+
+  if (getValues("primary_website")) {
+    listingData.links.website.unshift(getValues("primary_website"));
+  }
 
   return (
     <Form
diff --git a/templates/store/snap-details.html b/templates/store/snap-details.html
index d240d43399..2d8673928f 100644
--- a/templates/store/snap-details.html
+++ b/templates/store/snap-details.html
@@ -321,13 +321,11 @@ <h5 class="p-notification__title">Error</h5>
           Raven.captureException(e);
         }
 
-        {% if not is_preview %}
         try {
           snapcraft.public.storeDetails.screenshots('#js-snap-screenshots');
         } catch(e) {
           Raven.captureException(e);
         }
-        {% endif %}
 
         try {
           snapcraft.public.storeDetails.videos('.js-video-slide');
diff --git a/webapp/publisher/snaps/listing_views.py b/webapp/publisher/snaps/listing_views.py
index 1ce3a6bb83..ad0b8c646f 100644
--- a/webapp/publisher/snaps/listing_views.py
+++ b/webapp/publisher/snaps/listing_views.py
@@ -299,7 +299,9 @@ def post_preview(snap_name):
     icon = helpers.get_icon(context["images"])
     context["screenshots"] = filter_screenshots(context["images"])
     context["icon_url"] = icon
-    context["video"] = get_video(context["images"])
+
+    if context["video"]:
+        context["video"] = get_video(context["video"])
 
     # Channel map
     context["channel_map"] = []