added manage payment method button
This commit is contained in:
parent
f6a391d666
commit
bfbff09e0a
|
@ -36,7 +36,6 @@ interface Props {
|
|||
}
|
||||
export default function Sidebar(props: Props) {
|
||||
const [usage, SetUsage] = useState<string>(null);
|
||||
const [action, setAction] = useState<string>(null);
|
||||
const [user, setUser] = useState(null);
|
||||
const [subscription, setSubscription] = useState<Subscription>(null);
|
||||
useEffect(() => {
|
||||
|
@ -71,6 +70,14 @@ export default function Sidebar(props: Props) {
|
|||
props.setConfirmAction(CONFIRM_ACTION.DOWNLOAD_APP);
|
||||
}
|
||||
}
|
||||
async function onManageClick(event) {
|
||||
try {
|
||||
event.preventDefault();
|
||||
await billingService.redirectToCustomerPortal();
|
||||
} catch (error) {
|
||||
props.somethingWentWrong();
|
||||
}
|
||||
}
|
||||
const router = useRouter();
|
||||
|
||||
return (
|
||||
|
@ -105,30 +112,47 @@ export default function Sidebar(props: Props) {
|
|||
<p>{constants.SUBSCRIPTION_EXPIRED}</p>
|
||||
)}
|
||||
</div>
|
||||
<div style={{ display: 'flex' }}>
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '90px',
|
||||
justifyContent: 'space-around',
|
||||
}}
|
||||
>
|
||||
{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
|
||||
variant="success"
|
||||
variant="secondary"
|
||||
size="sm"
|
||||
onClick={() => {
|
||||
setIsOpen(false);
|
||||
props.setPlanModalView(true);
|
||||
}}
|
||||
onClick={onManageClick}
|
||||
style={{ width: '88%' }}
|
||||
>
|
||||
{constants.MANAGE}
|
||||
</Button>
|
||||
<Button
|
||||
variant="danger"
|
||||
size="sm"
|
||||
onClick={() => {
|
||||
props.setConfirmAction(
|
||||
CONFIRM_ACTION.CANCEL_SUBSCRIPTION
|
||||
);
|
||||
}}
|
||||
style={{ marginLeft: '10px' }}
|
||||
>
|
||||
{constants.CANCEL_SUBSCRIPTION}
|
||||
{constants.MANAGEMENT_PORTAL}
|
||||
</Button>
|
||||
</>
|
||||
) : (
|
||||
|
|
|
@ -96,7 +96,6 @@ class billingService {
|
|||
);
|
||||
const subscriptionUpdateResponse: SubscriptionUpdateResponse =
|
||||
response.data['subscriptionUpdateResponse'];
|
||||
console.log(subscriptionUpdateResponse);
|
||||
switch (subscriptionUpdateResponse.status) {
|
||||
case PAYMENT_INTENT_STATUS.SUCCEEDED:
|
||||
await this.acknowledgeSubscriptionUpdate();
|
||||
|
@ -188,6 +187,7 @@ class billingService {
|
|||
window.location.href = response.data['url'];
|
||||
} catch (e) {
|
||||
console.error('unable to get customer portal url');
|
||||
throw e;
|
||||
}
|
||||
}
|
||||
public async getUsage() {
|
||||
|
|
|
@ -111,7 +111,7 @@ const englishConstants = {
|
|||
CANCEL_SUBSCRIPTION: 'cancel subscription',
|
||||
CANCEL: 'cancel',
|
||||
SUBSCRIBE: 'subscribe',
|
||||
MANAGE: 'manage',
|
||||
MANAGEMENT_PORTAL: 'manage payment method',
|
||||
SUBSCRIPTION_CHANGE_DISABLED:
|
||||
'sorry, this operation is currently not supported on the web, please check your mobile app',
|
||||
LOGOUT_MESSAGE: 'sure you want to logout?',
|
||||
|
|
Loading…
Reference in a new issue