remove proration preview
This commit is contained in:
Abhinav-grd
parent
8b33de6ff3
commit
b4ff03b79a
|
|
@ -1,84 +0,0 @@
|
|||
import React, { MouseEventHandler, useEffect, useState } from 'react';
|
||||
import { Button, Modal, Spinner } from 'react-bootstrap';
|
||||
import billingService, { Invoice, Plan } from 'services/billingService';
|
||||
import constants from 'utils/strings/constants';
|
||||
|
||||
interface Props {
|
||||
show: boolean;
|
||||
closePreview;
|
||||
updateSubscription;
|
||||
selectedPlan: Plan;
|
||||
}
|
||||
function PreviewProration(props: Props) {
|
||||
const [upcomingInvoice, setUpcomingInvoice] = useState<Invoice>(null);
|
||||
|
||||
useEffect(() => {
|
||||
if (!props.selectedPlan) {
|
||||
return;
|
||||
}
|
||||
const main = async () => {
|
||||
const invoice = await billingService.previewProration(
|
||||
props.selectedPlan.stripeID
|
||||
);
|
||||
console.log(invoice);
|
||||
setUpcomingInvoice(invoice);
|
||||
};
|
||||
main();
|
||||
}, [props.selectedPlan]);
|
||||
return (
|
||||
<Modal
|
||||
show={props.show}
|
||||
onHide={props.closePreview}
|
||||
size="lg"
|
||||
aria-labelledby="contained-modal-title-vcenter"
|
||||
centered
|
||||
>
|
||||
<Modal.Body style={{ padding: '24px' }}>
|
||||
<Modal.Title id="contained-modal-title-vcenter">
|
||||
Proration Preview
|
||||
<hr />
|
||||
{upcomingInvoice ? (
|
||||
<>
|
||||
<li>
|
||||
{`For ${
|
||||
upcomingInvoice.lines.data[0].description
|
||||
} you get ${Math.abs(
|
||||
upcomingInvoice.lines.data[0].amount / 100
|
||||
)} ${upcomingInvoice.lines.data[0].currency}`}
|
||||
</li>
|
||||
<li>
|
||||
{`For ${
|
||||
upcomingInvoice.lines.data[1].description
|
||||
} you are charged ${Math.abs(
|
||||
upcomingInvoice.lines.data[1].amount / 100
|
||||
)} ${upcomingInvoice.lines.data[1].currency}`}
|
||||
</li>
|
||||
<br />
|
||||
<div>
|
||||
Difference Amount to be paid -{' '}
|
||||
{(upcomingInvoice.total -
|
||||
upcomingInvoice.lines.data[2].amount) /
|
||||
100}{' '}
|
||||
{upcomingInvoice.lines.data[1].currency}
|
||||
</div>
|
||||
<div>
|
||||
{`New Purchase ${upcomingInvoice.lines.data[2].description}`}
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
<Spinner animation="border" />
|
||||
)}
|
||||
</Modal.Title>
|
||||
</Modal.Body>
|
||||
<Modal.Footer style={{ borderTop: 'none' }}>
|
||||
<Button variant="secondary" onClick={props.closePreview}>
|
||||
{constants.CLOSE}
|
||||
</Button>
|
||||
<Button variant="primary" onClick={props.updateSubscription}>
|
||||
Update
|
||||
</Button>
|
||||
</Modal.Footer>
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
export default PreviewProration;
|
||||
|
|
@ -12,7 +12,6 @@ import {
|
|||
isSubscribed,
|
||||
isUserRenewingPlan,
|
||||
} from 'utils/billingUtil';
|
||||
import PreviewProration from 'components/PreviewProration';
|
||||
|
||||
export const PlanIcon = styled.div<{ selected: boolean }>`
|
||||
padding-top: 20px;
|
||||
|
|
@ -46,11 +45,6 @@ function PlanSelector(props: Props) {
|
|||
const [loading, setLoading] = useState(false);
|
||||
const subscription = getUserSubscription();
|
||||
const plans = getPlans();
|
||||
const [previewProrationView, setPreviewProrationView] = useState(false);
|
||||
function closePreviewProration() {
|
||||
setPreviewProrationView(false);
|
||||
}
|
||||
const [selectedPlan, setSelectedPlan] = useState<Plan>(null);
|
||||
const selectPlan = async (plan) => {
|
||||
var bannerMessage;
|
||||
try {
|
||||
|
|
@ -59,8 +53,7 @@ function PlanSelector(props: Props) {
|
|||
if (isUserRenewingPlan(plan, subscription)) {
|
||||
return;
|
||||
}
|
||||
setSelectedPlan(plan);
|
||||
setPreviewProrationView(true);
|
||||
await updateSubscription(plan);
|
||||
} else {
|
||||
await billingService.buySubscription(plan.stripeID);
|
||||
}
|
||||
|
|
@ -76,10 +69,9 @@ function PlanSelector(props: Props) {
|
|||
}
|
||||
};
|
||||
|
||||
const updateSubscription = async () => {
|
||||
const updateSubscription = async (plan) => {
|
||||
try {
|
||||
setPreviewProrationView(false);
|
||||
await billingService.updateSubscription(selectedPlan.stripeID);
|
||||
await billingService.updateSubscription(plan.stripeID);
|
||||
let bannerMessage = {
|
||||
message: constants.SUBSCRIPTION_UPDATE_SUCCESS,
|
||||
variant: 'success',
|
||||
|
|
@ -139,7 +131,6 @@ function PlanSelector(props: Props) {
|
|||
</PlanIcon>
|
||||
));
|
||||
return (
|
||||
<>
|
||||
<Modal
|
||||
show={props.modalView}
|
||||
onHide={props.closeModal}
|
||||
|
|
@ -169,13 +160,6 @@ function PlanSelector(props: Props) {
|
|||
)}
|
||||
</Modal.Body>
|
||||
</Modal>
|
||||
<PreviewProration
|
||||
show={previewProrationView}
|
||||
closePreview={closePreviewProration}
|
||||
selectedPlan={selectedPlan}
|
||||
updateSubscription={updateSubscription}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -98,26 +98,6 @@ class billingService {
|
|||
}
|
||||
}
|
||||
|
||||
public async previewProration(productID) {
|
||||
try {
|
||||
const response = await HTTPService.post(
|
||||
`${ENDPOINT}/billing/stripe/preview-proration`,
|
||||
{
|
||||
productID,
|
||||
},
|
||||
null,
|
||||
{
|
||||
'X-Auth-Token': getToken(),
|
||||
}
|
||||
);
|
||||
const invoice: Invoice = response.data['invoice'];
|
||||
// setData(LS_KEYS.SUBSCRIPTION, subscription);
|
||||
return invoice;
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
}
|
||||
}
|
||||
|
||||
public async cancelSubscription() {
|
||||
try {
|
||||
const response = await HTTPService.get(
|
||||
|
|
|
|||
Loading…
Reference in a new issue