wip

src/pages/PlanPage/subRoutes/CurrentOrgPlan/BillingDetails/Address/AddressCard.tsx

@@ -1,4 +1,4 @@
 import { useState } from 'react'
 import { z } from 'zod'
 
 import {
@@ -6,9 +6,9 @@
   SubscriptionDetailSchema,
 } from 'services/account'
 import A from 'ui/A'
 import Button from 'ui/Button'
 import Icon from 'ui/Icon'
 
 import AddressForm from './AddressForm'
 import { cn } from 'shared/utils/cn'
 
@@ -32,7 +32,7 @@
   const billingDetails =
     subscriptionDetail?.defaultPaymentMethod?.billingDetails
 
-  const isAddressSameAsPrimary = true // TODO
+  const isAddressSameAsPrimary = false // TODO
 
   return (
     <div className={cn('flex gap-2', className)}>
@@ -46,13 +46,11 @@
         />
       )}
       {!isEditMode && (
-        <>
-          <BillingInner
-            billingDetails={billingDetails}
-            setEditMode={setEditMode}
-            isAddressSameAsPrimary={isAddressSameAsPrimary}
-          />
-        </>
+        <BillingInner
+          billingDetails={billingDetails}
+          setEditMode={setEditMode}
+          isAddressSameAsPrimary={isAddressSameAsPrimary}
+        />
       )}
     </div>
   )
@@ -69,12 +67,21 @@
   setEditMode,
   isAddressSameAsPrimary,
 }: BillingInnerProps) {
+  const isEmptyAddress =
+    !billingDetails?.address?.line1 &&
+    !billingDetails?.address?.line2 &&
+    !billingDetails?.address?.city &&
+    !billingDetails?.address?.state &&
+    !billingDetails?.address?.postalCode
+
   if (billingDetails) {
     return (
       <div>
         <h4 className="mb-2 font-semibold">Billing address</h4>
         {isAddressSameAsPrimary ? (
           <p>Same as primary address</p>
+        ) : isEmptyAddress ? (
+          <p>-</p>
         ) : (
           <>
             <p>{`${billingDetails.address?.line1 ?? ''} ${
@@ -105,7 +112,7 @@
           hook="open-modal"
           variant="primary"
           onClick={() => setEditMode(true)}
           to={undefined}
           disabled={false}
         >
           Set address

src/pages/PlanPage/subRoutes/CurrentOrgPlan/BillingDetails/BillingDetails.tsx

@@ -7,7 +7,7 @@
 import Button from 'ui/Button'
 import { useState } from 'react'
 import A from 'ui/A'
-import EditablePaymentMethod from './EditablePaymentMethod'
+import EditablePaymentMethod from './EditPaymentMethod'
 
 interface URLParams {
   provider: string
@@ -32,8 +32,9 @@
   console.log('iseditmode', isEditMode)
 
   return (
-    <div className="flex flex-col border">
-      <div className="grid grid-cols-[1fr_auto] items-center gap-4 p-4">
+    <div className="flex flex-col divide-y border">
+      {/* Billing Details Section */}
+      <div className="flex items-center justify-between gap-4 p-4">
         <div>
           <h3 className="font-semibold">Billing details</h3>
           <p className="pt-1 text-xs text-ds-gray-octonary">
@@ -50,22 +51,24 @@
             onClick={() => setEditMode(true)}
             variant="default"
             disabled={!isAdmin}
+            className="flex-none"
           >
             Edit payment
           </Button>
         ) : (
           <Button
             hook="button"
             onClick={() => setEditMode(false)}
-            variant="danger"
+            variant="default"
             disabled={!isAdmin}
+            className="flex-none"
           >
-            Cancel edit
+            Back
           </Button>
         )}
       </div>
       {isEditMode ? (
         <EditablePaymentMethod />
       ) : (
         <>
           <EmailAddress />

src/pages/PlanPage/subRoutes/CurrentOrgPlan/BillingDetails/EditablePaymentMethod/EditablePaymentMethod.tsx → src/pages/PlanPage/subRoutes/CurrentOrgPlan/BillingDetails/EditPaymentMethod/EditPaymentMethod.tsx

@@ -22,11 +22,11 @@
 const PaymentForm: React.FC<PaymentFormProps> = ({ clientSecret }) => {
   const stripe = useStripe()
   const elements = useElements()
   const [paymentMethod, setPaymentMethod] = useState<'card' | 'bank'>('card')
   const [isSubmitting, setIsSubmitting] = useState(false)
   const [errorMessage, setErrorMessage] = useState<string | null>(null)
 
   const handleSubmit = async (event: React.FormEvent) => {
     event.preventDefault()
     setIsSubmitting(true)
     setErrorMessage(null)
@@ -38,7 +38,7 @@
     }
 
     const paymentElement = elements.getElement(
       paymentMethod === 'card' ? CardElement : IbanElement
     )
 
     if (!paymentElement) {
@@ -54,7 +54,7 @@
         return_url: 'https://your-website.com/order-complete', // Redirect URL
       },
     })
 
     if (error) {
       setErrorMessage(error.message || 'An unexpected error occurred.')
       setIsSubmitting(false)
@@ -135,7 +135,7 @@
   }
 
   return (
     <Elements stripe={stripePromise} options={options}>
       <PaymentForm clientSecret={clientSecret} />
     </Elements>
   )
@@ -145,7 +145,7 @@
   clientSecret: string
 }
 
-const EditablePaymentMethod: React.FC<EditablePaymentMethodProps> = ({
+const EditPaymentMethod: React.FC<EditablePaymentMethodProps> = ({
   clientSecret,
 }) => {
   return (
@@ -163,4 +163,4 @@
   )
 }
 
-export default EditablePaymentMethod
+export default EditPaymentMethod

src/pages/PlanPage/subRoutes/CurrentOrgPlan/BillingDetails/EditPaymentMethod/index.ts

@@ -0,0 +1 @@
+export { default } from './EditPaymentMethod'

src/pages/PlanPage/subRoutes/CurrentOrgPlan/BillingDetails/PaymentCard/CardInformation.tsx

@@ -28,21 +28,21 @@ function CardInformation({ subscriptionDetail, card }: CardInformationProps) {
 
   return (
     <div className="flex flex-col gap-2">
-      <div className="flex gap-2">
+      <div className="flex gap-1">
         <img
-          className="h-auto w-16 self-center"
+          className="h-auto w-8 self-center"
           alt="credit card logo"
           src={typeCard?.logo}
         />
         <div className="flex flex-col self-center">
-          <b className="tracking-widest">••••&nbsp;{card?.last4}</b>
+          <b>••••&nbsp;{card?.last4}</b>
         </div>
       </div>
       <p className="text-ds-gray-quinary">
         Expires {card?.expMonth}/{lastTwoDigits(card?.expYear)}
       </p>
       {nextBilling && (
-        <p className="text-sm text-ds-gray-quinary">
+        <p className="text-ds-gray-quinary">
           Your next billing date is{' '}
           <span className="text-ds-gray-octonary">{nextBilling}</span>.
         </p>

src/pages/PlanPage/subRoutes/CurrentOrgPlan/BillingDetails/PaymentMethod/PaymentMethod.tsx

@@ -32,50 +32,60 @@ function PaymentMethod({
 
   console.log(isEditMode)
   return (
-    <ExpandableSection>
-      <ExpandableSection.Trigger className="p-4">
-        <h3 className="font-semibold">{heading}</h3>
-      </ExpandableSection.Trigger>
-      <ExpandableSection.Content className="px-4 pb-4">
-        {!isPrimary ? (
-          <p className="pl-4 text-sm text-ds-gray-quaternary">
-            By default, if the primary payment fails, the secondary will be
-            charged automatically.
-          </p>
-        ) : null}
-        <div className="flex gap-2">
-          <PaymentCard
-            className="flex-1"
-            isEditMode={isEditMode}
-            setEditMode={setEditMode}
-            subscriptionDetail={subscriptionDetail}
-            provider={provider}
-            owner={owner}
-          />
-          <div className="flex-1 border-x border-ds-gray-tertiary px-4 pt-4">
-            <h4 className="font-semibold">{isCreditCard ? 'Cardholder name' : 'Full name'}</h4>
-            <p>N/A</p>
+    <div>
+      <ExpandableSection className="m-0 border-0" defaultOpen={isPrimary}>
+        <ExpandableSection.Trigger className="p-4">
+          <h3 className="font-semibold">{heading}</h3>
+        </ExpandableSection.Trigger>
+        <ExpandableSection.Content className="border-0 pt-0 text-xs">
+          <div className="pb-4 pl-4 pt-2">
+            {!isPrimary ? (
+              <p className="mb-6 text-ds-gray-quaternary">
+                By default, if the primary payment fails, the secondary will be
+                charged automatically.
+              </p>
+            ) : null}
+            <div className="flex">
+              {/* Payment method summary */}
+                <PaymentCard
+                  className="w-2/5 flex-1"
+                  isEditMode={isEditMode}
+                  setEditMode={setEditMode}
+                  subscriptionDetail={subscriptionDetail}
+                  provider={provider}
+                  owner={owner}
+                />
+              {/* Cardholder name */}
+              <div className="mx-4 w-1/5 border-x border-ds-gray-tertiary px-4">
+                <h4 className="mb-2 font-semibold">
+                  {isCreditCard ? 'Cardholder name' : 'Full name'}
+                </h4>
+                <p>N/A</p>
+              </div>
+              {/* Address */}
+                <AddressCard
+                  className="flex-1"
+                  isEditMode={isEditMode}
+                  setEditMode={setEditMode}
+                  subscriptionDetail={subscriptionDetail}
+                  provider={provider}
+                  owner={owner}
+                />
+            </div>
+            {!isPrimary ? (
+              <Button
+                hook="button"
+                disabled={!isAdmin}
+                onClick={() => console.log('TODO - implement me')}
+                className="mt-4"
+              >
+                Set as primary
+              </Button>
+            ) : null}
           </div>
-          <AddressCard
-            className="flex-1"
-            isEditMode={isEditMode}
-            setEditMode={setEditMode}
-            subscriptionDetail={subscriptionDetail}
-            provider={provider}
-            owner={owner}
-          />
-        </div>
-        {!isPrimary ? (
-          <Button
-            hook="button"
-            disabled={!isAdmin}
-            onClick={() => console.log('TODO - implement me')}
-          >
-            Set as primary
-          </Button>
-        ) : null}
-      </ExpandableSection.Content>
-    </ExpandableSection>
+        </ExpandableSection.Content>
+      </ExpandableSection>
+    </div>
   )
 }
 

src/ui/Button/Button.tsx

@@ -134,7 +134,8 @@ function Button({
   const className = cs(
     baseClass,
     { [baseDisabledClasses]: !isLoading },
-    pickVariant(variant, isLoading)
+    pickVariant(variant, isLoading),
+    props.className
   )
 
   const content = (