WD-10929-fix-exam-names-in-shop (canonical#13832)

* Fix exam name on shop page * change checkout to handle free cue exam * remove 100 off from name and fix name on thank you page
abhigyanghosh30 · May 2, 2024 · 8b852bc · 8b852bc
1 parent 636c84c
commit 8b852bc
Show file tree

Hide file tree

Showing 4 changed files with 63 additions and 15 deletions.
diff --git a/static/js/src/advantage/credentials/components/CredExamShop/CredExamShop.tsx b/static/js/src/advantage/credentials/components/CredExamShop/CredExamShop.tsx
@@ -18,17 +18,23 @@ const CredExamShop = () => {
     {
       id: "cue-linux-essentials",
       name: "CUE.01 Linux",
+      displayName: "CUE.01 Linux",
       metadata: [
         {
           key: "description",
           value:
             "Prove your basic operational knowledge of Linux by demonstrating your ability to secure, operate and maintain basic system resources. Topics include user and group management, file and filesystem navigation, and logs and installation tasks related to system maintenance.",
         },
+        {
+          key: "originalPrice",
+          value: "10000",
+        },
       ],
     },
     {
       id: "cue-02-desktop",
       name: "CUE.02 Desktop",
+      displayName: "CUE.02 Desktop",
       metadata: [
         {
           key: "description",
@@ -40,6 +46,7 @@ const CredExamShop = () => {
     {
       id: "cue-03-server",
       name: "CUE.03 Server",
+      displayName: "CUE.03 Server",
       metadata: [
         {
           key: "description",
@@ -121,7 +128,7 @@ const CredExamShop = () => {
                     <span className="p-radio__label">
                       <RadioInput
                         labelClassName="inner-label"
-                        label={examElement?.name}
+                        label={examElement?.displayName}
                         checked={exam == examIndex}
                         value={examIndex}
                         onChange={handleChange}
@@ -136,12 +143,25 @@ const CredExamShop = () => {
                         className="u-align--right"
                         style={{ paddingRight: "1rem" }}
                       >
-                        {examElement.price === undefined
-                          ? "Coming Soon!"
-                          : "Price: " +
-                            currencyFormatter.format(
+                        {examElement.price === undefined ? (
+                          <span>Coming Soon</span>
+                        ) : (
+                          <span>
+                            Price:{" "}
+                            {examElement.metadata[1].value !== undefined ? (
+                              <s>
+                                {currencyFormatter.format(
+                                  parseInt(examElement.metadata[1].value) / 100
+                                )}
+                              </s>
+                            ) : (
+                              <></>
+                            )}{" "}
+                            {currencyFormatter.format(
                               examElement.price.value / 100
                             )}
+                          </span>
+                        )}
                       </h5>
                     </span>
                   </label>
@@ -162,7 +182,7 @@ const CredExamShop = () => {
               >
                 <RadioInput
                   inline
-                  label={examElement?.name}
+                  label={examElement?.displayName}
                   checked={exam == examIndex}
                   value={examIndex}
                   onChange={handleChange}
@@ -178,10 +198,25 @@ const CredExamShop = () => {
                     className="u-align--right"
                     style={{ paddingRight: "1rem" }}
                   >
-                    {examElement.price === undefined
-                      ? "Coming Soon!"
-                      : "Price: " +
-                        currencyFormatter.format(examElement.price.value / 100)}
+                    {examElement.price === undefined ? (
+                      <span>Coming Soon</span>
+                    ) : (
+                      <span>
+                        Price:{" "}
+                        {examElement.metadata[1].value !== undefined ? (
+                          <s>
+                            {currencyFormatter.format(
+                              parseInt(examElement.metadata[1].value) / 100
+                            )}
+                          </s>
+                        ) : (
+                          <></>
+                        )}{" "}
+                        {currencyFormatter.format(
+                          examElement.price.value / 100
+                        )}
+                      </span>
+                    )}
                   </h5>
                 </span>
               </div>
@@ -198,7 +233,7 @@ const CredExamShop = () => {
         <Row>
           <Col size={6} style={{ display: "flex" }}>
             <p className="p-heading--2" style={{ marginBlock: "auto" }}>
-              {ExamProducts[exam]?.name}
+              {ExamProducts[exam]?.displayName}
             </p>
           </Col>
           <Col size={3} small={2} style={{ display: "flex" }}>

diff --git a/static/js/src/advantage/credentials/utils/utils.ts b/static/js/src/advantage/credentials/utils/utils.ts
@@ -6,8 +6,10 @@ export type Product = {
   price?: {
     value: number;
     currency: string;
+    original?: number;
   };
   id: string;
   marketplace?: UserSubscriptionMarketplace;
   metadata: Array<{ key: string; value: string }>;
+  displayName?: string;
 };
diff --git a/static/js/src/advantage/subscribe/checkout/components/BuyButton/BuyButton.tsx b/static/js/src/advantage/subscribe/checkout/components/BuyButton/BuyButton.tsx
@@ -315,9 +315,15 @@ const BuyButton = ({ setError, quantity, product, action }: Props) => {
         if (request.readyState === 4) {
           localStorage.removeItem("shop-checkout-data");
           if (product.marketplace == "canonical-cube") {
-            location.href = `/credentials/shop/order-thank-you?productName=${encodeURIComponent(
-              product.name
-            )}&quantity=${quantity}`;
+            if (product.name === "cue-linux-essentials-free") {
+              location.href = `/credentials/shop/order-thank-you?productName=${encodeURIComponent(
+                "CUE.01 Linux"
+              )}&quantity=${quantity}`;
+            } else {
+              location.href = `/credentials/shop/order-thank-you?productName=${encodeURIComponent(
+                product.name
+              )}&quantity=${quantity}`;
+            }
           } else if (!window.loginSession) {
             const email = userInfo?.customerInfo?.email || values.email || "";
             let urlBase = "/pro/subscribe";

diff --git a/static/js/src/advantage/subscribe/checkout/components/Summary/Summary.tsx b/static/js/src/advantage/subscribe/checkout/components/Summary/Summary.tsx
@@ -55,7 +55,11 @@ function Summary({ quantity, product, action, setError }: Props) {
       ? "Plan type"
       : "Products";
   const productName =
-    action !== "offer" ? product?.name : product?.name.replace(", ", "<br>");
+    action !== "offer"
+      ? product?.name === "cue-linux-essentials-free"
+        ? "CUE.01 Linux"
+        : product?.name
+      : product?.name.replace(", ", "<br>");
   const discount =
     (product?.price?.value * ((product?.price?.discount ?? 0) / 100)) / 100;
   const defaultTotal = (product?.price?.value * quantity) / 100 - discount;
@@ -124,6 +128,7 @@ function Summary({ quantity, product, action, setError }: Props) {
             <>
               {total == 0 &&
                 priceData !== undefined &&
+                product?.name !== "cue-linux-essentials-free" &&
                 "This is because you have likely already paid for this product for the current billing period."}
             </>
           </p>