creditCardEditModal.tsx 1.4 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152
  1. import {Fragment} from 'react';
  2. import type {Location} from 'history';
  3. import type {ModalRenderProps} from 'sentry/actionCreators/modal';
  4. import {t} from 'sentry/locale';
  5. import type {Organization} from 'sentry/types/organization';
  6. import {decodeScalar} from 'sentry/utils/queryString';
  7. import CreditCardSetup from 'getsentry/components/creditCardSetup';
  8. import type {Subscription} from 'getsentry/types';
  9. import trackGetsentryAnalytics from 'getsentry/utils/trackGetsentryAnalytics';
  10. type Props = ModalRenderProps & {
  11. onSuccess: (data: Subscription) => void;
  12. organization: Organization;
  13. location?: Location;
  14. };
  15. function CreditCardEditModal({
  16. Header,
  17. Body,
  18. closeModal,
  19. organization,
  20. onSuccess,
  21. location,
  22. }: Props) {
  23. const referrer = decodeScalar(location?.query?.referrer);
  24. return (
  25. <Fragment>
  26. <Header>{t('Update Credit Card')}</Header>
  27. <Body>
  28. <CreditCardSetup
  29. isModal
  30. organization={organization}
  31. onCancel={closeModal}
  32. onSuccess={data => {
  33. onSuccess(data);
  34. closeModal();
  35. trackGetsentryAnalytics('billing_details.updated_cc', {
  36. organization,
  37. referrer: decodeScalar(referrer),
  38. });
  39. }}
  40. buttonText={t('Save Changes')}
  41. referrer={referrer}
  42. />
  43. </Body>
  44. </Fragment>
  45. );
  46. }
  47. export default CreditCardEditModal;