Skip to content

Commit

Permalink
feat: group subscriptions by editable/non-editable
Browse files Browse the repository at this point in the history 
WD-14147
  • Loading branch information
@fasih-mehmood
fasih-mehmood committed Aug 19, 2024
1 parent 7e244f9 commit 7c345db
Show file tree
Hide file tree
Showing 8 changed files with 514 additions and 188 deletions.
90 changes: 14 additions & 76 deletions .../src/advantage/react/components/Subscriptions/SubscriptionDetails/SubscriptionDetails.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,7 @@ import RenewalButton from "../RenewalButton";
import SubscriptionCancel from "../SubscriptionCancel";
import SubscriptionEdit from "../SubscriptionEdit";
import DetailsContent from "./DetailsContent";
import SubscriptionStatusChip from "../SubscriptionStatusChip";

type Props = {
modalActive?: boolean;
Expand Down Expand Up @@ -130,82 +131,19 @@ export const SubscriptionDetails = forwardRef<HTMLDivElement, Props>(
>
Close
</button>
{subscription.statuses.is_expired ? (
<button className="p-chip--negative">
<span className="p-chip__value">Expired</span>
</button>
) : (
<>
{subscription.type == "legacy" && subscription.renewal_id ? (
<>
{subscription.statuses.is_renewed ? (
<button className="p-chip--positive">
<span className="p-chip__value">Renewed</span>
</button>
) : (
<>
{subscription.statuses.is_renewal_actionable &&
subscription.statuses.is_renewable ? (
<button className="p-chip--caution">
<span className="p-chip__value">Not renewed</span>
</button>
) : null}
</>
)}
</>
) : null}
{subscription.type == "monthly" ||
subscription.type == "yearly" ? (
<>
{subscription.statuses.is_subscription_active &&
!subscription.statuses.is_cancelled ? (
<>
{subscription.statuses.is_renewed ? (
<button className="p-chip--positive">
<span className="p-chip__value">
Auto-renewal on
</span>
</button>
) : null}
{!subscription.statuses.is_renewed ? (
<button className="p-chip--caution">
<span className="p-chip__value">
Auto-renewal off
</span>
</button>
) : null}
</>
) : null}
{subscription.statuses.is_cancelled ? (
<button className="p-chip--negative">
<span className="p-chip__value">Cancelled</span>
</button>
) : null}
</>
) : null}
{subscription.type == "trial" ? (
<>
{subscription.statuses.is_subscription_active ? (
<>
{subscription.statuses.is_renewed &&
!subscription.statuses.is_cancelled ? (
<button className="p-chip--positive">
<span className="p-chip__value">
Auto-renewal on
</span>
</button>
) : null}
</>
) : null}
{subscription.statuses.is_cancelled ? (
<button className="p-chip--negative">
<span className="p-chip__value">Cancelled</span>
</button>
) : null}
</>
) : null}
</>
)}
{
<SubscriptionStatusChip subscription={subscription}>
{(data) =>
data ? (
<button className={`p-chip--${data.type}`}>
<span className="p-chip__value">{data.status}</span>
</button>
) : (
<></>
)
}
</SubscriptionStatusChip>
}
</header>
<ExpiryNotification
borderless
Expand Down
103 changes: 17 additions & 86 deletions ...ic/js/src/advantage/react/components/Subscriptions/SubscriptionList/ListCard/ListCard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ import {
ExpiryNotificationSize,
ORDERED_STATUS_KEYS,
} from "../../ExpiryNotification/ExpiryNotification";
import SubscriptionStatusChip from "../../SubscriptionStatusChip";

type Props = {
isSelected?: boolean;
Expand Down Expand Up @@ -47,6 +48,7 @@ const ListCard = ({
</>
);
}

return (
<Card
className={classNames("p-subscriptions__list-card u-no-padding", {
Expand All @@ -69,92 +71,21 @@ const ListCard = ({
{isFree ? "Free Personal Token" : subscription.product_name}
</h5>

{subscription.statuses.is_expired ? (
<button className="p-chip--negative">
<span className="p-chip__value" data-test="card-type">
Expired
</span>
</button>
) : (
<>
{subscription.type == "legacy" && subscription.renewal_id ? (
<>
{subscription.statuses.is_renewed ? (
<button className="p-chip--positive">
<span className="p-chip__value" data-test="card-type">
Renewed
</span>
</button>
) : (
<>
{subscription.statuses.is_renewal_actionable &&
subscription.statuses.is_renewable ? (
<button className="p-chip--caution">
<span className="p-chip__value" data-test="card-type">
Not renewed
</span>
</button>
) : null}
</>
)}
</>
) : null}
{subscription.type == "monthly" ||
subscription.type == "yearly" ? (
<>
{subscription.statuses.is_subscription_active &&
!subscription.statuses.is_cancelled ? (
<>
{subscription.statuses.is_renewed ? (
<button className="p-chip--positive">
<span className="p-chip__value" data-test="card-type">
Auto-renewal on
</span>
</button>
) : null}
{!subscription.statuses.is_renewed ? (
<button className="p-chip--caution">
<span className="p-chip__value">
Auto-renewal off
</span>
</button>
) : null}
</>
) : null}
{subscription.statuses.is_cancelled ? (
<button className="p-chip--negative">
<span className="p-chip__value" data-test="card-type">
Cancelled
</span>
</button>
) : null}
</>
) : null}
{subscription.type == "trial" ? (
<>
{subscription.statuses.is_subscription_active ? (
<>
{subscription.statuses.is_renewed &&
!subscription.statuses.is_cancelled ? (
<button className="p-chip--positive">
<span className="p-chip__value" data-test="card-type">
Auto-renewal on
</span>
</button>
) : null}
</>
) : null}
{subscription.statuses.is_cancelled ? (
<button className="p-chip--negative">
<span className="p-chip__value" data-test="card-type">
Cancelled
</span>
</button>
) : null}
</>
) : null}
</>
)}
{
<SubscriptionStatusChip subscription={subscription}>
{(data) =>
data ? (
<button className={`p-chip--${data.type}`}>
<span className="p-chip__value" data-test="card-type">
{data.status}
</span>
</button>
) : (
<></>
)
}
</SubscriptionStatusChip>
}
</div>

<Row>
Expand Down
22 changes: 19 additions & 3 deletions .../js/src/advantage/react/components/Subscriptions/SubscriptionList/ListGroup/ListGroup.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,14 +5,23 @@ import { useUserSubscriptions } from "advantage/react/hooks";

import RenewalSettings from "../RenewalSettings";
import { UserSubscriptionMarketplace } from "advantage/api/enum";
import classNames from "classnames";

type Props = {
children: ReactNode;
title: string;
subtitle?: string;
marketplace: UserSubscriptionMarketplace;
selfServiceable?: boolean;
};

const ListGroup = ({ children, title, marketplace }: Props): JSX.Element => {
const ListGroup = ({
children,
title,
subtitle,
marketplace,
selfServiceable = true,
}: Props): JSX.Element => {
const { data: renewableSubscriptions } = useUserSubscriptions({
select: selectAutoRenewableSubscriptionsByMarketplace(marketplace),
});
Expand All @@ -22,7 +31,9 @@ const ListGroup = ({ children, title, marketplace }: Props): JSX.Element => {
return (
<div className="p-subscriptions__list-group">
<div
className="p-subscriptions__list-group-title"
className={classNames("p-subscriptions__list-group-title", {
"u-no-margin--bottom": subtitle,
})}
ref={(element) => {
positionNode.current = element;
// Fire state change so that the menu rerenders now that the ref
Expand All @@ -33,13 +44,18 @@ const ListGroup = ({ children, title, marketplace }: Props): JSX.Element => {
<span className="p-text--small-caps u-align-text--small-to-default u-no-margin--bottom">
{title}
</span>
{(renewableSubscriptions?.length ?? 0 > 0) ? (
{(renewableSubscriptions?.length ?? 0 > 0) && selfServiceable ? (
<RenewalSettings
positionNodeRef={positionNode}
marketplace={marketplace}
/>
) : null}
</div>
{subtitle ? (
<div className="p-subscriptions__list-group-subtitle">
<span className="p-text--small u-text--muted">{subtitle}</span>
</div>
) : null}
{children}
</div>
);
Expand Down
Loading

0 comments on commit 7c345db

Please sign in to comment.