exam data from prod listing

static/js/src/advantage/credentials/api/keys.js

@@ -52,3 +52,15 @@ export async function getKeyProducts() {
   const data = await response.json();
   return data;
 }
+
+export async function getExamProducts() {
+  let response = await fetch("/credentials/exam/products", {
+    method: "GET",
+    headers: {
+      Accept: "application/json",
+      "Content-Type": "application/json",
+    },
+  });
+  const data = await response.json();
+  return data;
+}

static/js/src/advantage/credentials/components/CredExamShop/CredExamShop.tsx

@@ -1,29 +1,22 @@
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import {
   Button,
   Col,
   RadioInput,
   Row,
   Strip,
+  Spinner,
 } from "@canonical/react-components";
 import classNames from "classnames";
 import { currencyFormatter } from "advantage/react/utils";
+import { Product } from "advantage/subscribe/blender/utils/utils";
+import { useQuery } from "react-query";
+import { getExamProducts } from "advantage/credentials/api/keys";
 
 const CredExamShop = () => {
-  const ExamProducts = [
+  const ExamProductDescriptions = [
     {
       id: "cue-linux-essentials",
-      longId: "lAK5jL8zvMjZOwaysIMQyGRAdOLgTQQH0xpezu2oYp74",
-      name: "CUE Linux Essentials",
-      period: "none",
-      price: {
-        currency: "USD",
-        value: 4900,
-      },
-      productID: "cue-linux-essentials",
-      status: "active",
-      private: false,
-      marketplace: "canonical-cube",
       metadata: [
         {
           key: "description",
@@ -34,13 +27,6 @@ const CredExamShop = () => {
     },
     {
       id: "cue-02-desktop",
-      longId: "lAMGrt4buzUR0-faJqg-Ot6dgNLn7ubIpWiyDgOrsDCg",
-      name: "CUE.02 Desktop QuickCert",
-      price: { value: 4900, currency: "USD" },
-      productID: "cue-02-desktop",
-      canBeTrialled: false,
-      private: true,
-      marketplace: "canonical-cube",
       metadata: [
         {
           key: "description",
@@ -51,13 +37,6 @@ const CredExamShop = () => {
     },
     {
       id: "cue-03-server",
-      longId: "lAMGrt4buzUR0-faJqg-Ot6dgNLn7ubIpWiyDgOrsDCg",
-      name: "CUE.03 Server QuickCert",
-      price: { value: 4900, currency: "USD" },
-      productID: "cue-03-server",
-      canBeTrialled: false,
-      private: true,
-      marketplace: "canonical-cube",
       metadata: [
         {
           key: "description",
@@ -67,6 +46,10 @@ const CredExamShop = () => {
       ],
     },
   ];
+  const { isLoading, data: ExamData } = useQuery(["ExamProducts"], async () => {
+    return getExamProducts();
+  });
+  const [ExamProducts, setExamProducts] = useState<Product[]>([]);
   const [exam, setExam] = useState(0);
   const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     setExam(parseInt(event.target.value));
@@ -88,6 +71,28 @@ const CredExamShop = () => {
     );
     location.href = "/account/checkout";
   };
+  useEffect(() => {
+    const tempExamProducts = [];
+    console.log(ExamData);
+    if(ExamData === undefined) {
+      return;
+    }
+    for (const exam of ExamData) {
+      for (const examDescription of ExamProductDescriptions) {
+        if (exam.id === examDescription.id) {
+          exam.metadata = examDescription.metadata;
+          tempExamProducts.push(exam);
+        }
+      }
+    }
+    setExamProducts(tempExamProducts);
+    console.log(ExamData);
+    console.log(tempExamProducts);
+  }, [ExamData]);
+  if (isLoading) {
+    return <Spinner />;
+  }
+
   return (
     <>
       <Strip className="product-selector">
@@ -118,7 +123,7 @@ const CredExamShop = () => {
                     <span className="p-radio__label">
                       <RadioInput
                         labelClassName="inner-label"
-                        label={examElement.name}
+                        label={examElement?.name}
                         checked={exam == examIndex}
                         value={examIndex}
                         onChange={handleChange}
@@ -162,7 +167,7 @@ const CredExamShop = () => {
               >
                 <RadioInput
                   inline
-                  label={examElement.name}
+                  label={examElement?.name}
                   checked={exam == examIndex}
                   value={examIndex}
                   onChange={handleChange}
@@ -198,7 +203,7 @@ const CredExamShop = () => {
         <Row>
           <Col size={6} style={{ display: "flex" }}>
             <p className="p-heading--2" style={{ marginBlock: "auto" }}>
-              {ExamProducts[exam].name}
+              {ExamProducts[exam]?.name}
             </p>
           </Col>
           <Col size={3} small={2} style={{ display: "flex" }}>

static/js/src/advantage/credentials/components/CredKeyShop/CredKeyShop.tsx

@@ -48,7 +48,11 @@ const CredKeyShop = () => {
     location.href = "/account/checkout";
   };
   useEffect(() => {
-    setCUEExamKey(keyProducts?.find((product: Product) => product.id === "cue-activation-key"));
+    setCUEExamKey(
+      keyProducts?.find(
+        (product: Product) => product.id === "cue-activation-key"
+      )
+    );
   }, [keyProducts]);
   return (
     <>
@@ -95,9 +99,19 @@ const CredKeyShop = () => {
             )}
           </Col>
           <Col size={3}>
-            {isLoading?<Button appearance="positive"><Spinner></Spinner></Button>:<Button appearance="positive" type="submit" onClick={handleSubmit}>
-              Buy Now
-            </Button>}
+            {isLoading ? (
+              <Button appearance="positive">
+                <Spinner></Spinner>
+              </Button>
+            ) : (
+              <Button
+                appearance="positive"
+                type="submit"
+                onClick={handleSubmit}
+              >
+                Buy Now
+              </Button>
+            )}
           </Col>
         </Row>
       </section>

static/js/src/advantage/subscribe/blender/utils/utils.ts

@@ -29,6 +29,7 @@ export type Product = {
   id: ProductIDs;
   productID: string;
   marketplace: UserSubscriptionMarketplace;
+  metadata?: Array<{ key: string; value: string }>;
 };
 
 export type ProductListings = {

webapp/app.py

@@ -81,6 +81,7 @@
     cred_syllabus_data,
     cred_your_exams,
     get_activation_keys,
+    get_exam_products,
     get_filtered_webhook_responses,
     get_issued_badges,
     get_key_products,
@@ -1131,6 +1132,9 @@ def takeovers_index():
 app.add_url_rule("/credentials/cancel-exam", view_func=cred_cancel_exam)
 app.add_url_rule("/credentials/assessments", view_func=cred_assessments)
 app.add_url_rule("/credentials/exam", view_func=cred_exam)
+app.add_url_rule(
+    "/credentials/exam/products", view_func=get_exam_products, methods=["GET"]
+)
 app.add_url_rule(
     "/credentials/exit-survey",
     view_func=cred_submit_form,

webapp/shop/cred/views.py

@@ -734,3 +734,22 @@ def get_key_products(ua_contracts_api, **kwargs):
         if listing["productID"].endswith("key")
     ]
     return flask.jsonify(key_products)
+
+
+@shop_decorator(area="cred", permission="user", response="json")
+def get_exam_products(ua_contracts_api, **kwargs):
+    listings = ua_contracts_api.get_product_listings("canonical-cube").get(
+        "productListings"
+    )
+    exam_products = [
+        {
+            "id": listing["productID"],
+            "longId": listing["id"],
+            "period": listing["period"],
+            "marketplace": listing["marketplace"],
+            "name": listing["name"],
+            "price": listing["price"],
+        }
+        for listing in listings
+    ]
+    return flask.jsonify(exam_products)