Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[MSSDK-1480] add new info box for unavailable upgrades & refactor OfferCards #274

Merged
merged 10 commits into from
Nov 27, 2023
Merged

[MSSDK-1480] add new info box for unavailable upgrades & refactor OfferCards #274

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
05e94ad
MSSDK-1480 refactor OfferCard component
iwonakulacz Jul 14, 2023
3d3b846
rewrite OfferMyAccountCard to TS
iwonakulacz Jul 31, 2023
49506d0
rewrite OfferSwtichCard to TS
iwonakulacz Aug 1, 2023
917a190
refactor
iwonakulacz Aug 1, 2023
af2cfd1
fix loaders
iwonakulacz Aug 1, 2023
5bf8af6
fix switches list presentation when there is only pause offer
iwonakulacz Aug 1, 2023
b1a6e10
add translation for new copy
iwonakulacz Aug 1, 2023
20bc30d
sync with master
jakkorczak Sep 12, 2023
fe0ae95
Merge branch 'main' into MSSDK-1480-new-info-box
jakkorczak Sep 28, 2023
4871ec3
merge with main
jakkorczak Nov 24, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
22 changes: 12 additions & 10 deletions src/api/Customer/types/getCustomerOffers.types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,15 +8,17 @@ export type CustomerOffer = {
offerType: string;
totalPrice: number;
offerTitle: string;
externalPaymentId: string;
inTrial: boolean;
nextPaymentAt: number;
nextPaymentCurrency: string;
nextPaymentPrice: number;
paymentGateway: PaymentGateway;
paymentMethod: string;
pendingSwitchId: unknown;
period: string;
subscriptionId?: number;
customerCurrency: string;
// optional params exists only for subscriptions
externalPaymentId?: string;
inTrial?: boolean;
nextPaymentAt?: number;
nextPaymentCurrency?: string;
nextPaymentPrice?: number;
paymentGateway?: PaymentGateway;
paymentMethod?: string;
pendingSwitchId?: string;
period?: string;
subscriptionId?: number;
isExternallyManaged?: boolean;
};
99 changes: 10 additions & 89 deletions src/components/CurrentPlan/CurrentPlan.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,11 +6,11 @@ import { Trans, useTranslation } from 'react-i18next';
import { getData } from 'util/appConfigHelper';

import { ReactComponent as NoSubscriptionsIcon } from 'assets/images/errors/sad_coupon.svg';
import { dateFormat, currencyFormat, INFINITE_DATE } from 'util/planHelper';
import { setOfferToSwitch } from 'redux/planDetailsSlice';

import MyAccountError from 'components/MyAccountError';
import OfferCard from 'components/OfferCard';
import OfferMyAccountCard from 'components/OfferMyAccountCard';
import OfferMyAccountCardLoader from 'components/OfferMyAccountCard/OfferMyAccountCardLoader';
import SubscriptionManagement from 'components/SubscriptionManagement';
import MessageBox from 'components/MessageBox';

Expand All @@ -29,7 +29,7 @@ import {
export const SkeletonCard = () => {
return (
<SubscriptionStyled>
<OfferCard isDataLoaded={false} />
<OfferMyAccountCardLoader />
</SubscriptionStyled>
);
};
Expand Down Expand Up @@ -79,15 +79,11 @@ const EmptyPlanView = () => {
);
};

const supportedPaymentGateways = ['paypal', 'card', 'adyen', 'gift'];

const CurrentPlan = () => {
const [isMessageBoxOpened, setIsMessageBoxOpened] = useState(false);
const [messageBoxType, setMessageBoxType] = useState(null);
const [messageBoxText, setMessageBoxText] = useState('');
const [messageSubscriptionId, setMessageSubscriptionId] = useState(null);
const { t } = useTranslation();
const { pauseOffersIDs } = useSelector(store => store.offers);
const {
data: subscriptions,
loading: isLoading,
Expand All @@ -96,15 +92,6 @@ const CurrentPlan = () => {
const { offerToSwitch } = useSelector(state => state.plan);
const dispatch = useDispatch();

const getInfoBoxType = subscription => {
if (subscription.offerType !== 'S') return '';
if (subscription.status === 'active' && subscription.pendingSwitchId)
return 'SWITCH';
if (supportedPaymentGateways.includes(subscription.paymentGateway))
return '';
return 'INAPP_SUBSCRIPTION';
};

const showMessageBox = (type, text, subscriptionId) => {
setIsMessageBoxOpened(true);
setMessageBoxType(type);
Expand All @@ -122,56 +109,6 @@ const CurrentPlan = () => {
<WrapStyled>
<>
{subscriptions.map(subItem => {
const isPaused = pauseOffersIDs.includes(subItem.offerId);
let description;
let price;
let currency;
let renewalDate;

switch (subItem.offerType) {
case 'S':
price = subItem.nextPaymentPrice;
currency = currencyFormat[subItem.nextPaymentCurrency];
renewalDate = dateFormat(subItem.expiresAt);
if (subItem.expiresAt === INFINITE_DATE)
renewalDate = t(
'currentplan.next-season-start',
'the next season start'
);
if (subItem.status === 'active' && !subItem.pendingSwitchId) {
description = `${t(
'currentplan.subscription.renews-info',
'Renews automatically on {{renewalDate}}',
{
renewalDate
}
)}`;
} else if (subItem.status === 'cancelled') {
description = `${t(
'currentplan.subscription.expire-info',
'This plan will expire on {{renewalDate}}',
{
renewalDate
}
)}`;
} else {
description = '';
}

break;
case 'P':
price = subItem.totalPrice;
currency = currencyFormat[subItem.customerCurrency];
description = `${t(
'currentplan.pass.expires-on',
'Expires on'
)} ${dateFormat(subItem.expiresAt)}`;

break;
default:
break;
}

return (
<SubscriptionStyled
as="article"
Expand All @@ -194,22 +131,7 @@ const CurrentPlan = () => {
offerToSwitch.offerId === subItem.offerId
}
>
<OfferCard
period={subItem.period}
offerType={subItem.offerType}
title={subItem.offerTitle}
description={description}
currency={currency}
price={price}
isMyAccount
showInfoBox={getInfoBoxType(subItem)}
paymentMethod={subItem.paymentMethod}
pendingSwitchId={subItem.pendingSwitchId}
expiresAt={subItem.expiresAt}
offerId={subItem.offerId}
isPriceBoxHidden={isPaused}
isPaused={isPaused}
/>
<OfferMyAccountCard offerId={subItem.offerId} />
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🤠

{isMessageBoxOpened &&
messageSubscriptionId === subItem.subscriptionId && (
<StatusMessageWrapStyled>
Expand All @@ -219,13 +141,12 @@ const CurrentPlan = () => {
/>
</StatusMessageWrapStyled>
)}
{subItem.offerType === 'S' &&
supportedPaymentGateways.includes(subItem.paymentGateway) && (
<SubscriptionManagement
subscription={subItem}
showMessageBox={showMessageBox}
/>
)}
{subItem.offerType === 'S' && !subItem.isExternallyManaged && (
<SubscriptionManagement
subscription={subItem}
showMessageBox={showMessageBox}
/>
)}
</SubscriptionStyled>
);
})}
Expand Down
Loading