replace hardcoded key with product listing data

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

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

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

@@ -1,25 +1,26 @@
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import {
   Button,
   Col,
   Form,
   Input,
   Row,
+  Spinner,
   Strip,
 } from "@canonical/react-components";
 import { currencyFormatter } from "advantage/react/utils";
+import { getKeyProducts } from "advantage/credentials/api/keys";
+import { Product } from "advantage/subscribe/checkout/utils/types";
+import { useQuery } from "react-query";
 
 const CredKeyShop = () => {
-  const CUEExamKey = {
-    id: "cue-activation-key",
-    longId: "lAEPoNKYCFgZGmddQXplCtcnf5wMpYUXloGygjPK3y0E",
-    name: "CUE Activation Key",
-    price: { value: 4900, currency: "USD" },
-    productID: "cue-activation-key",
-    canBeTrialled: false,
-    private: false,
-    marketplace: "canonical-cube",
-  };
+  const { isLoading, data: keyProducts } = useQuery(
+    ["KeyProducts"],
+    async () => {
+      return getKeyProducts();
+    }
+  );
+  const [CUEExamKey, setCUEExamKey] = useState<Product | null>(null);
   const checkoutData = localStorage.getItem("shop-checkout-data") || "{}";
   const parsedCheckoutData = JSON.parse(checkoutData);
   const initQuantity: number = parsedCheckoutData?.quantity;
@@ -46,6 +47,9 @@ const CredKeyShop = () => {
     );
     location.href = "/account/checkout";
   };
+  useEffect(() => {
+    setCUEExamKey(keyProducts?.find((product: Product) => product.id === "cue-activation-key"));
+  }, [keyProducts]);
   return (
     <>
       <Strip>
@@ -91,9 +95,9 @@ const CredKeyShop = () => {
             )}
           </Col>
           <Col size={3}>
-            <Button appearance="positive" type="submit" onClick={handleSubmit}>
+            {isLoading?<Button appearance="positive"><Spinner></Spinner></Button>:<Button appearance="positive" type="submit" onClick={handleSubmit}>
               Buy Now
-            </Button>
+            </Button>}
           </Col>
         </Row>
       </section>

webapp/app.py

@@ -83,6 +83,7 @@
     get_activation_keys,
     get_filtered_webhook_responses,
     get_issued_badges,
+    get_key_products,
     get_my_issued_badges,
     get_webhook_response,
     issue_badges,
@@ -1160,6 +1161,9 @@ def takeovers_index():
     view_func=activate_activation_key,
     methods=["POST"],
 )
+app.add_url_rule(
+    "/credentials/keys/products", view_func=get_key_products, methods=["GET"]
+)
 app.add_url_rule(
     "/credentials/beta/activation",
     view_func=cred_beta_activation,

webapp/shop/cred/views.py

@@ -714,3 +714,23 @@ def issue_badges(trueability_api, credly_api, **kwargs):
             return (flask.jsonify(new_badge), 500)
     # 403 Forbidden. Request was valid but the server is refusing action
     return flask.jsonify({"status": "badge_not_issued"}), 403
+
+
+@shop_decorator(area="cred", permission="user", response="json")
+def get_key_products(ua_contracts_api, **kwargs):
+    listings = ua_contracts_api.get_product_listings("canonical-cube").get(
+        "productListings"
+    )
+    key_products = [
+        {
+            "id": listing["productID"],
+            "longId": listing["id"],
+            "period": listing["period"],
+            "marketplace": listing["marketplace"],
+            "name": listing["name"],
+            "price": listing["price"],
+        }
+        for listing in listings
+        if listing["productID"].endswith("key")
+    ]
+    return flask.jsonify(key_products)