Merge pull request #13076 from albertkol/change-price-to-use-current-…

…no-of-machines

Change cost to use currect number of machines

static/js/src/advantage/react/components/Subscriptions/SubscriptionDetails/DetailsContent/DetailsContent.test.tsx

@@ -1,19 +1,18 @@
 import React from "react";
-import { mount } from "enzyme";
 import { QueryClient, QueryClientProvider } from "react-query";
-
-import DetailsContent from "./DetailsContent";
+import { mount } from "enzyme";
+import { CodeSnippet } from "@canonical/react-components";
+import {
+  UserSubscriptionMarketplace,
+  UserSubscriptionPeriod,
+} from "advantage/api/enum";
 import {
   contractTokenFactory,
   freeSubscriptionFactory,
   userSubscriptionFactory,
   userSubscriptionStatusesFactory,
 } from "advantage/tests/factories/api";
-import {
-  UserSubscriptionPeriod,
-  UserSubscriptionMarketplace,
-} from "advantage/api/enum";
-import { CodeSnippet } from "@canonical/react-components";
+import DetailsContent from "./DetailsContent";
 
 describe("DetailsContent", () => {
   let queryClient: QueryClient;
@@ -35,7 +34,6 @@ describe("DetailsContent", () => {
     );
     expect(wrapper.find("[data-test='expires-col']").text()).toBe("Never");
     expect(wrapper.find("[data-test='billing-col']").text()).toBe("None");
-    expect(wrapper.find("[data-test='cost-col']").text()).toBe("Free");
   });
 
   it("displays ua subscription specific details", () => {
@@ -58,7 +56,6 @@ describe("DetailsContent", () => {
       "09 Jul 2022"
     );
     expect(wrapper.find("[data-test='billing-col']").text()).toBe("Yearly");
-    expect(wrapper.find("[data-test='cost-col']").text()).toBe("$1,500 USD/yr");
   });
 
   it("displays a spinner while loading the contract token", () => {
@@ -120,21 +117,6 @@ describe("DetailsContent", () => {
     );
   });
 
-  it("hides the cost column if there is no cost provided", () => {
-    const contract = userSubscriptionFactory.build();
-    contract.price = null;
-    queryClient.setQueryData("userSubscriptions", [contract]);
-    const wrapper = mount(
-      <QueryClientProvider client={queryClient}>
-        <DetailsContent
-          selectedId={contract.id}
-          setHasUnsavedChanges={jest.fn()}
-        />
-      </QueryClientProvider>
-    );
-    expect(wrapper.find("[data-test='cost-col']").exists()).toBe(false);
-  });
-
   it("displays correctly for blender subscription", () => {
     const contract = userSubscriptionFactory.build({
       marketplace: UserSubscriptionMarketplace.Blender,

static/js/src/advantage/react/components/Subscriptions/SubscriptionDetails/DetailsContent/DetailsContent.tsx

@@ -17,7 +17,6 @@ import {
   formatDate,
   getMachineTypeDisplay,
   getPeriodDisplay,
-  getSubscriptionCost,
   isBlenderSubscription,
   isFreeSubscription,
 } from "advantage/react/utils";
@@ -93,16 +92,6 @@ const DetailsContent = ({ selectedId, setHasUnsavedChanges }: Props) => {
         : getPeriodDisplay(subscription.period),
   };
 
-  const cost = getSubscriptionCost(subscription);
-  const costCol: Feature = {
-    // When a legacy subscription is being displayed then stretch this
-    // column to take up the space where the billing column would
-    // otherwise be.
-    size: subscription.type === UserSubscriptionType.Legacy ? 5 : 3,
-    title: "Cost",
-    value: cost,
-  };
-
   const tokenBlock = token?.contract_token ? (
     <CodeSnippet
       blocks={[
@@ -140,10 +129,6 @@ const DetailsContent = ({ selectedId, setHasUnsavedChanges }: Props) => {
             ? // Don't show the billing column for legacy subscriptions.
               []
             : [billingCol]),
-          ...(cost && subscription.type !== UserSubscriptionType.Legacy
-            ? // Don't show the cost column if it's empty.
-              [costCol]
-            : []),
           ...(isBlender
             ? // Don't show the column for Blender subscriptions.
               []

static/js/src/advantage/react/components/Subscriptions/SubscriptionEdit/SubscriptionEdit.tsx

@@ -10,7 +10,10 @@ import {
   NotificationProps,
   Spinner,
 } from "@canonical/react-components";
-import { UserSubscriptionPeriod } from "advantage/api/enum";
+import {
+  UserSubscriptionMarketplace,
+  UserSubscriptionPeriod,
+} from "advantage/api/enum";
 import { UserSubscription } from "advantage/api/types";
 import {
   usePreviewResizeContract,
@@ -19,7 +22,10 @@ import {
 } from "advantage/react/hooks";
 import { PreviewResizeContractResponse } from "advantage/react/hooks/usePreviewResizeContract";
 import { ResizeContractResponse } from "advantage/react/hooks/useResizeContract";
-import { selectSubscriptionById } from "advantage/react/hooks/useUserSubscriptions";
+import {
+  selectAutoRenewableSubscriptionsByMarketplace,
+  selectSubscriptionById,
+} from "advantage/react/hooks/useUserSubscriptions";
 import {
   currencyFormatter,
   formatDate,
@@ -96,6 +102,7 @@ type ResizeSummaryProps = {
   nextCycle: Date | null;
   preview?: PreviewResizeContractResponse;
   isPreviewLoading: boolean;
+  totalCost: number;
 };
 
 const ResizeSummary = ({
@@ -108,6 +115,7 @@ const ResizeSummary = ({
   nextCycle,
   preview,
   isPreviewLoading,
+  totalCost,
 }: ResizeSummaryProps) => {
   const absoluteDelta = Math.abs(newNumberOfMachines - currentNumberOfMachines);
   if (absoluteDelta === 0) {
@@ -141,14 +149,23 @@ const ResizeSummary = ({
         ) : null}
         {!isPreviewLoading ? (
           <>
+            <br />
             Your {isMonthly ? "monthly" : "yearly"} payment will be{" "}
             <b>
-              {isDecreasing ? "reduced" : "increased"} by{" "}
-              {currencyFormatter.format(
-                preview ? preview.amountDue / 100 : absoluteDelta * unitPrice
-              )}
-              .
+              {isDecreasing
+                ? currencyFormatter.format(
+                    totalCost - absoluteDelta * unitPrice
+                  )
+                : currencyFormatter.format(
+                    totalCost + absoluteDelta * unitPrice
+                  )}
             </b>
+            * . <br />
+            <small>
+              * Taxes and/or balance credits are not included in this price and
+              may apply at renewal time.
+            </small>
+            <br />
           </>
         ) : (
           <Spinner />
@@ -227,6 +244,29 @@ const SubscriptionEdit = ({
     subscription?.current_number_of_machines ?? 0
   );
 
+  const { data: renewableSubscriptions } = useUserSubscriptions({
+    select: selectAutoRenewableSubscriptionsByMarketplace(
+      subscription?.marketplace ?? UserSubscriptionMarketplace.CanonicalUA
+    ),
+  });
+
+  const totalCost: number =
+    renewableSubscriptions?.reduce(
+      (price: number, renewableSubscription: UserSubscription) => {
+        if (renewableSubscription?.period != subscription?.period) {
+          return price;
+        }
+
+        return (
+          price +
+          ((renewableSubscription.price ?? 0) *
+            renewableSubscription.current_number_of_machines) /
+            (100 * renewableSubscription.number_of_machines)
+        );
+      },
+      0
+    ) || 0;
+
   useEffect(() => {
     if (isResized) {
       // Invalidate the data as it all may have changed.
@@ -352,6 +392,7 @@ const SubscriptionEdit = ({
                   nextCycle={nextCycleStart}
                   preview={preview}
                   isPreviewLoading={isPreviewLoading}
+                  totalCost={totalCost}
                 />
               </div>
               <div className="p-subscription__resize-actions u-align--right u-sv3">

static/js/src/advantage/react/utils/index.ts

@@ -4,7 +4,6 @@ export { getFeaturesDisplay } from "./getFeaturesDisplay";
 export { filterAndFormatEntitlements } from "./filterAndFormatEntitlements";
 export { getMachineTypeDisplay } from "./getMachineTypeDisplay";
 export { getPeriodDisplay } from "./getPeriodDisplay";
-export { getSubscriptionCost } from "./getSubscriptionCost";
 export { isFreeSubscription } from "./isFreeSubscription";
 export { isBlenderSubscription } from "./isBlenderSubscription";
 export { makeInteractiveProps } from "./makeInteractiveProps";