diff --git a/static/js/src/advantage/subscribe/checkout/components/Summary/Summary.tsx b/static/js/src/advantage/subscribe/checkout/components/Summary/Summary.tsx index 28768381f00..2fabf4d4ac7 100644 --- a/static/js/src/advantage/subscribe/checkout/components/Summary/Summary.tsx +++ b/static/js/src/advantage/subscribe/checkout/components/Summary/Summary.tsx @@ -1,4 +1,4 @@ -import React, { useEffect } from "react"; +import React, { useMemo, useEffect } from "react"; import { add, format } from "date-fns"; import { useFormikContext } from "formik"; import { Col, Row, Spinner } from "@canonical/react-components"; @@ -72,6 +72,27 @@ function Summary({ quantity, product, action, setError, coupon }: Props) { (product?.price?.value * ((product?.price?.discount ?? 0) / 100)) / 100; const defaultTotal = (product?.price?.value * quantity) / 100 - discount; + const calculateProductEndDate = () => { + const addObj: { + days?: number; + weeks?: number; + months?: number; + years?: number; + } = {}; + const period = product?.period; + const quantity = product?.periodQuantity ?? 1; + if (period === "monthly" && quantity === 1) { + addObj.months = quantity; + } else if (period === "monthly" && quantity > 1) { + addObj.days = quantity; + } else { + addObj.years = quantity; + } + return format(add(new Date(), addObj), DATE_FORMAT); + }; + + const endDate = useMemo(() => calculateProductEndDate(), [product]); + useEffect(() => { if (error instanceof Error) { let message = <>; @@ -300,14 +321,7 @@ function Summary({ quantity, product, action, setError, coupon }: Props) { ) : (

- - {format( - add(new Date(), { - months: product?.period === "monthly" ? 1 : 12, - }), - DATE_FORMAT - )} - + {endDate}

)} diff --git a/static/js/src/advantage/subscribe/checkout/utils/types.ts b/static/js/src/advantage/subscribe/checkout/utils/types.ts index cc7bdfb7d06..03bd0e93fba 100644 --- a/static/js/src/advantage/subscribe/checkout/utils/types.ts +++ b/static/js/src/advantage/subscribe/checkout/utils/types.ts @@ -68,6 +68,7 @@ export const marketplaceDisplayName = { export interface Product { longId: string; period: UserSubscriptionPeriod; + periodQuantity?: number; marketplace: UserSubscriptionMarketplace; id: string; name: string; diff --git a/webapp/shop/cred/views.py b/webapp/shop/cred/views.py index 08cdc746bf5..caaf2761fc7 100644 --- a/webapp/shop/cred/views.py +++ b/webapp/shop/cred/views.py @@ -851,9 +851,10 @@ def cred_shop(ua_contracts_api, **kwargs): for exam in exams: if product["id"] == exam["id"]: exam["longId"] = product["longId"] - exam["period"] = product["period"] + exam["period"] = "monthly" exam["marketplace"] = product["marketplace"] exam["name"] = product["name"] + exam["periodQuantity"] = 30 # purchase account required for purchasing from marketplace ua_contracts_api.ensure_purchase_account("canonical-cube")