beenull/ente
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

added manage payment method button

Browse source
This commit is contained in:
Abhinav-grd 2021-04-08 10:38:15 +05:30
parent f6a391d666
commit bfbff09e0a
3 changed files with 46 additions and 22 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

64
src/components/Sidebar.tsx
View file

@ -36,7 +36,6 @@ interface Props {
} }
export default function Sidebar(props: Props) { export default function Sidebar(props: Props) {
const [usage, SetUsage] = useState<string>(null); const [usage, SetUsage] = useState<string>(null);
const [action, setAction] = useState<string>(null);
const [user, setUser] = useState(null); const [user, setUser] = useState(null);
const [subscription, setSubscription] = useState<Subscription>(null); const [subscription, setSubscription] = useState<Subscription>(null);
useEffect(() => { useEffect(() => {
@ -71,6 +70,14 @@ export default function Sidebar(props: Props) {
props.setConfirmAction(CONFIRM_ACTION.DOWNLOAD_APP); props.setConfirmAction(CONFIRM_ACTION.DOWNLOAD_APP);
} }
} }
async function onManageClick(event) {
try {
event.preventDefault();
await billingService.redirectToCustomerPortal();
} catch (error) {
props.somethingWentWrong();
}
}
const router = useRouter(); const router = useRouter();
return ( return (
@ -105,30 +112,47 @@ export default function Sidebar(props: Props) {
<p>{constants.SUBSCRIPTION_EXPIRED}</p> <p>{constants.SUBSCRIPTION_EXPIRED}</p>
)} )}
</div> </div>
<div style={{ display: 'flex' }}> <div
style={{
display: 'flex',
flexDirection: 'column',
height: '90px',
justifyContent: 'space-around',
}}
>
{isSubscribed(subscription) ? ( {isSubscribed(subscription) ? (
<> <>
<div>
<Button
variant="success"
size="sm"
onClick={() => {
setIsOpen(false);
props.setPlanModalView(true);
}}
>
{constants.CHANGE}
</Button>
<Button
variant="danger"
size="sm"
onClick={() => {
props.setConfirmAction(
CONFIRM_ACTION.CANCEL_SUBSCRIPTION
);
}}
style={{ marginLeft: '10px' }}
>
{constants.CANCEL_SUBSCRIPTION}
</Button>
</div>
<Button <Button
variant="success" variant="secondary"
size="sm" size="sm"
onClick={() => { onClick={onManageClick}
setIsOpen(false); style={{ width: '88%' }}
props.setPlanModalView(true);
}}
> >
{constants.MANAGE} {constants.MANAGEMENT_PORTAL}
</Button>
<Button
variant="danger"
size="sm"
onClick={() => {
props.setConfirmAction(
CONFIRM_ACTION.CANCEL_SUBSCRIPTION
);
}}
style={{ marginLeft: '10px' }}
>
{constants.CANCEL_SUBSCRIPTION}
</Button> </Button>
</> </>
) : ( ) : (

2
src/services/billingService.ts
View file

@ -96,7 +96,6 @@ class billingService {
); );
const subscriptionUpdateResponse: SubscriptionUpdateResponse = const subscriptionUpdateResponse: SubscriptionUpdateResponse =
response.data['subscriptionUpdateResponse']; response.data['subscriptionUpdateResponse'];
console.log(subscriptionUpdateResponse);
switch (subscriptionUpdateResponse.status) { switch (subscriptionUpdateResponse.status) {
case PAYMENT_INTENT_STATUS.SUCCEEDED: case PAYMENT_INTENT_STATUS.SUCCEEDED:
await this.acknowledgeSubscriptionUpdate(); await this.acknowledgeSubscriptionUpdate();
@ -188,6 +187,7 @@ class billingService {
window.location.href = response.data['url']; window.location.href = response.data['url'];
} catch (e) { } catch (e) {
console.error('unable to get customer portal url'); console.error('unable to get customer portal url');
throw e;
} }
} }
public async getUsage() { public async getUsage() {

2
src/utils/strings/englishConstants.tsx
View file

@ -111,7 +111,7 @@ const englishConstants = {
CANCEL_SUBSCRIPTION: 'cancel subscription', CANCEL_SUBSCRIPTION: 'cancel subscription',
CANCEL: 'cancel', CANCEL: 'cancel',
SUBSCRIBE: 'subscribe', SUBSCRIBE: 'subscribe',
MANAGE: 'manage', MANAGEMENT_PORTAL: 'manage payment method',
SUBSCRIPTION_CHANGE_DISABLED: SUBSCRIPTION_CHANGE_DISABLED:
'sorry, this operation is currently not supported on the web, please check your mobile app', 'sorry, this operation is currently not supported on the web, please check your mobile app',
LOGOUT_MESSAGE: 'sure you want to logout?', LOGOUT_MESSAGE: 'sure you want to logout?',