first commit

common/resources/client/billing/billing-page/panels/payment-method-panel.tsx

@@ -0,0 +1,77 @@
+import {useBillingUser} from '../use-billing-user';
+import {BillingPlanPanel} from '../billing-plan-panel';
+import {Trans} from '../../../i18n/trans';
+import {Link} from 'react-router-dom';
+import {EditIcon} from '../../../icons/material/Edit';
+import {Fragment} from 'react';
+import paypalSvg from './paypal.svg';
+import {SvgImage} from '../../../ui/images/svg-image/svg-image';
+
+export function PaymentMethodPanel() {
+  const {user, subscription} = useBillingUser();
+  if (!user || !subscription) return null;
+
+  const isPaypal = subscription.gateway_name === 'paypal';
+  const PaymentMethod = isPaypal ? PaypalPaymentMethod : CardPaymentMethod;
+
+  return (
+    <BillingPlanPanel title={<Trans message="Payment method" />}>
+      <PaymentMethod
+        methodClassName="whitespace-nowrap text-base max-w-[464px] flex items-center gap-10"
+        linkClassName="flex items-center gap-4 text-muted mt-18 block hover:underline"
+      />
+    </BillingPlanPanel>
+  );
+}
+
+interface PaymentMethodProps {
+  methodClassName: string;
+  linkClassName: string;
+}
+function CardPaymentMethod({
+  methodClassName,
+  linkClassName,
+}: PaymentMethodProps) {
+  const {user} = useBillingUser();
+  if (!user) return null;
+  return (
+    <Fragment>
+      <div className={methodClassName}>
+        <span className="capitalize">{user.card_brand}</span> ••••
+        {user.card_last_four}
+        {user.card_expires && (
+          <div className="ml-auto">
+            <Trans message="Expires :date" values={{date: user.card_expires}} />
+          </div>
+        )}
+      </div>
+      <Link className={linkClassName} to="/billing/change-payment-method">
+        <EditIcon size="sm" />
+        <Trans message="Change payment method" />
+      </Link>
+    </Fragment>
+  );
+}
+
+function PaypalPaymentMethod({
+  methodClassName,
+  linkClassName,
+}: PaymentMethodProps) {
+  const {subscription} = useBillingUser();
+  return (
+    <Fragment>
+      <div className={methodClassName}>
+        <SvgImage src={paypalSvg} />
+      </div>
+      <a
+        className={linkClassName}
+        href={`https://www.sandbox.paypal.com/myaccount/autopay/connect/${subscription?.gateway_id}/funding`}
+        target="_blank"
+        rel="noreferrer"
+      >
+        <EditIcon size="sm" />
+        <Trans message="Change payment method" />
+      </a>
+    </Fragment>
+  );
+}