feat: Add explore page skeleton

static/js/base/ga.ts

@@ -8,7 +8,7 @@ type Events = {
 const events: Events = {
   ".global-nav a": "nav-0",
   ".p-navigation a": "nav-1",
-  ".p-sticky-footer a": "footer-0",
+  "#footer a": "footer-0",
   "#main-content .p-button--positive": "content-cta-0",
   ".p-strip .p-button--positive": "content-cta-0",
   "#main-content .p-button": "content-cta-1",

static/js/publisher/components/Navigation/Navigation.tsx

@@ -139,7 +139,7 @@ function Navigation({
                     <ul className="p-side-navigation__list u-no-margin--bottom">
                       <li className="p-side-navigation__item--title p-muted-heading">
                         <span className="p-side-navigation__link">
-                          <i className="p-icon--pods is-light p-side-navigation__icon"></i>
+                          <i className="p-icon--units is-light p-side-navigation__icon"></i>
                           <span className="p-side-navigation__label">
                             My stores
                           </span>
@@ -338,7 +338,7 @@ function Navigation({
                       </li>
                       <li className="p-side-navigation__item">
                         <a href="/logout" className="p-side-navigation__link">
-                          <i className="p-icon--begin-downloading is-light p-side-navigation__icon"></i>
+                          <i className="p-icon--log-out is-light p-side-navigation__icon"></i>
                           <span className="p-side-navigation__label">
                             Logout
                           </span>

static/js/publisher/components/PrimaryNav/PrimaryNav.tsx

@@ -72,7 +72,7 @@ function PrimaryNav({
               </li>
               <li className="p-side-navigation__item">
                 <a href="/logout" className="p-side-navigation__link">
-                  <i className="p-icon--begin-downloading is-light p-side-navigation__icon"></i>
+                  <i className="p-icon--log-out is-light p-side-navigation__icon"></i>
                   <span className="p-side-navigation__label">Logout</span>
                 </a>
               </li>

static/js/publisher/components/Tour/TourStep.tsx

@@ -39,7 +39,7 @@ function TourStep(props: TooltipRenderProps) {
             className="u-no-margin--bottom"
             style={{ marginLeft: "1rem" }}
           >
-            <Icon name="chevron-up" style={{ transform: "rotate(90deg)" }} />
+            <Icon name="chevron-left" />
             <span className="u-off-screen">{backProps.title}</span>
           </Button>
 
@@ -54,11 +54,7 @@ function TourStep(props: TooltipRenderProps) {
                   <>Finish tour</>
                 ) : (
                   <>
-                    <Icon
-                      name="chevron-up"
-                      light
-                      style={{ transform: "rotate(-90deg)" }}
-                    />
+                    <Icon name="chevron-right" light />
                     <span className="u-off-screen">{primaryProps.title}</span>
                   </>
                 )}

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}
+        />
       )}
     </>
   );

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

static/js/store/PromoCategory/PromoCategory.tsx

@@ -0,0 +1,77 @@
+import { ReactNode } from "react";
+import { Row, Col, Strip } from "@canonical/react-components";
+
+function PromoCategory(): ReactNode {
+  return (
+    <>
+      <div
+        style={{
+          display: "flex",
+          justifyContent: "space-between",
+          alignItems: "baseline",
+        }}
+      >
+        <h2>Everything for your game night</h2>
+        <p>
+          <a href="/store?categories=games">See all</a>
+        </p>
+      </div>
+      <Strip shallow className="u-no-padding--bottom">
+        <Row>
+          <Col size={4}>
+            <div className="p-card u-no-padding">
+              <img
+                className="p-card__image"
+                src="https://dashboard.snapcraft.io/site_media/appmedia/2018/08/Screenshot_at_2018-08-14_13-05-24.png"
+                alt=""
+              />
+              <div className="p-card__inner">
+                <h3 className="p-heading--5 u-no-margin--bottom">Forestopia</h3>
+                <p className="u-text-muted u-no-padding--top">
+                  <em>Gravity Game Arise</em>
+                </p>
+                <p>Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet</p>
+              </div>
+            </div>
+          </Col>
+          <Col size={4}>
+            <div className="p-card u-no-padding">
+              <img
+                className="p-card__image"
+                src="https://dashboard.snapcraft.io/site_media/appmedia/2018/08/Screenshot_at_2018-08-14_13-05-24.png"
+                alt=""
+              />
+              <div className="p-card__inner">
+                <h3 className="p-heading--5 u-no-margin--bottom">
+                  Anima Revolt Battle Simulator
+                </h3>
+                <p className="u-text-muted u-no-padding--top">
+                  <em>Vdimension</em>
+                </p>
+                <p>Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet</p>
+              </div>
+            </div>
+          </Col>
+          <Col size={4}>
+            <div className="p-card u-no-padding">
+              <img
+                className="p-card__image"
+                src="https://dashboard.snapcraft.io/site_media/appmedia/2018/08/Screenshot_at_2018-08-14_13-05-24.png"
+                alt=""
+              />
+              <div className="p-card__inner">
+                <h3 className="p-heading--5 u-no-margin--bottom">GRIS</h3>
+                <p className="u-text-muted u-no-padding--top">
+                  <em>DevolverDigital</em>
+                </p>
+                <p>Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet</p>
+              </div>
+            </div>
+          </Col>
+        </Row>
+      </Strip>
+    </>
+  );
+}
+
+export default PromoCategory;

static/js/store/PromoCategory/index.ts

@@ -0,0 +1 @@
+export { default } from "./PromoCategory";

static/js/store/components/Blog/Blog.tsx

@@ -0,0 +1,72 @@
+import { ReactNode } from "react";
+import { Row, Col } from "@canonical/react-components";
+
+function Blog(): ReactNode {
+  return (
+    <Row>
+      <Col size={4}>
+        <div
+          style={{
+            backgroundColor: "#2c2c2c",
+            color: "#fff",
+            padding: "40px",
+            display: "flex",
+            height: "100%",
+            alignItems: "center",
+          }}
+        >
+          <div>
+            <h3>Be part of the community</h3>
+            <p>
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ut
+              tempus ante, cut porttitor nbh.
+            </p>
+            <p>
+              <a className="is-dark" href="https://forum.snapcraft.io/">
+                Go to community
+              </a>
+            </p>
+          </div>
+        </div>
+      </Col>
+      <Col size={4}>
+        <img
+          src="https://ubuntu.com/wp-content/uploads/bbb2/image.jpeg"
+          alt=""
+        />
+        <h4>
+          <a href="/blog">Creating Snaps on Ubuntu Touch</a>
+        </h4>
+        <p>
+          Tablets, phones and current technology’s capabilities are phenomenal.
+          Who would have thought a thin, light, barely 10 inch device would
+          provide all the power necessary to run Virtual Machines, wherever one
+          desires while powered on battery?
+        </p>
+        <p className="u-text-muted">
+          <em>by Aaron Prisk on 3 April 2024</em>
+        </p>
+      </Col>
+      <Col size={4}>
+        <img
+          src="https://ubuntu.com/wp-content/uploads/bbb2/image.jpeg"
+          alt=""
+        />
+        <h4>
+          <a href="/blog">Creating Snaps on Ubuntu Touch</a>
+        </h4>
+        <p>
+          Tablets, phones and current technology’s capabilities are phenomenal.
+          Who would have thought a thin, light, barely 10 inch device would
+          provide all the power necessary to run Virtual Machines, wherever one
+          desires while powered on battery?
+        </p>
+        <p className="u-text-muted">
+          <em>by Aaron Prisk on 3 April 2024</em>
+        </p>
+      </Col>
+    </Row>
+  );
+}
+
+export default Blog;

static/js/store/components/Blog/index.ts

@@ -0,0 +1 @@
+export { default } from "./Blog";

static/js/store/components/Categories/Categories.tsx

@@ -0,0 +1,36 @@
+import { ReactNode } from "react";
+import { Row, Col, Strip } from "@canonical/react-components";
+
+import { useCategories } from "../../hooks";
+
+import type { Category } from "../../types";
+
+function Categories(): ReactNode {
+  const { data, isLoading } = useCategories();
+
+  return (
+    <>
+      <h2>Categories</h2>
+      {!isLoading && data && (
+        <Strip shallow className="u-no-padding--bottom">
+          <Row>
+            {data.map((category: Category) => (
+              <Col size={3} key={category.name}>
+                <p className="p-heading--4">
+                  <a
+                    className="p-link--soft"
+                    href={`/store?categories=${category.name}&page=1`}
+                  >
+                    {category.display_name}
+                  </a>
+                </p>
+              </Col>
+            ))}
+          </Row>
+        </Strip>
+      )}
+    </>
+  );
+}
+
+export default Categories;

static/js/store/components/Categories/index.ts

@@ -0,0 +1 @@
+export { default } from "./Categories";

static/js/store/components/LearnHowToSnap/LearnHowToSnap.tsx

@@ -0,0 +1,33 @@
+import { ReactNode } from "react";
+import { Row, Col } from "@canonical/react-components";
+
+function LearnHowToSnap(): ReactNode {
+  return (
+    <div
+      style={{
+        backgroundImage:
+          "url('https://assets.ubuntu.com/v1/e888a79f-suru.png')",
+        backgroundPosition: "top right",
+        backgroundSize: "contain",
+        backgroundRepeat: "no-repeat",
+        backgroundColor: "#f3f3f3",
+        padding: "67px",
+      }}
+    >
+      <Row>
+        <Col size={6}>
+          <h2>Learn how to snap in 30 minutes</h2>
+          <p className="p-heading--4">
+            In this section we could introduce any content that we consider
+            relevant
+          </p>
+          <a className="p-button--positive" href="/store">
+            Call to action
+          </a>
+        </Col>
+      </Row>
+    </div>
+  );
+}
+
+export default LearnHowToSnap;

static/js/store/components/LearnHowToSnap/index.ts

@@ -0,0 +1 @@
+export { default } from "./LearnHowToSnap";