Skip to content

Commit 1a8560e

Browse files
suejung-sentrysuejung-sentry
committed
wip
1 parent 34bfe3e commit 1a8560e

File tree

8 files changed

+85
-64
lines changed

8 files changed

+85
-64
lines changed

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

Lines changed: 15 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ function AddressCard({
3232
const billingDetails =
3333
subscriptionDetail?.defaultPaymentMethod?.billingDetails
3434

35-
const isAddressSameAsPrimary = true // TODO
35+
const isAddressSameAsPrimary = false // TODO
3636

3737
return (
3838
<div className={cn('flex gap-2', className)}>
@@ -46,13 +46,11 @@ function AddressCard({
4646
/>
4747
)}
4848
{!isEditMode && (
49-
<>
50-
<BillingInner
51-
billingDetails={billingDetails}
52-
setEditMode={setEditMode}
53-
isAddressSameAsPrimary={isAddressSameAsPrimary}
54-
/>
55-
</>
49+
<BillingInner
50+
billingDetails={billingDetails}
51+
setEditMode={setEditMode}
52+
isAddressSameAsPrimary={isAddressSameAsPrimary}
53+
/>
5654
)}
5755
</div>
5856
)
@@ -69,12 +67,21 @@ function BillingInner({
6967
setEditMode,
7068
isAddressSameAsPrimary,
7169
}: BillingInnerProps) {
70+
const isEmptyAddress =
71+
!billingDetails?.address?.line1 &&
72+
!billingDetails?.address?.line2 &&
73+
!billingDetails?.address?.city &&
74+
!billingDetails?.address?.state &&
75+
!billingDetails?.address?.postalCode
76+
7277
if (billingDetails) {
7378
return (
7479
<div>
7580
<h4 className="mb-2 font-semibold">Billing address</h4>
7681
{isAddressSameAsPrimary ? (
7782
<p>Same as primary address</p>
83+
) : isEmptyAddress ? (
84+
<p>-</p>
7885
) : (
7986
<>
8087
<p>{`${billingDetails.address?.line1 ?? ''} ${

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

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import PaymentMethod from './PaymentMethod'
77
import Button from 'ui/Button'
88
import { useState } from 'react'
99
import A from 'ui/A'
10-
import EditablePaymentMethod from './EditablePaymentMethod'
10+
import EditablePaymentMethod from './EditPaymentMethod'
1111

1212
interface URLParams {
1313
provider: string
@@ -32,8 +32,9 @@ function BillingDetails() {
3232
console.log('iseditmode', isEditMode)
3333

3434
return (
35-
<div className="flex flex-col border">
36-
<div className="grid grid-cols-[1fr_auto] items-center gap-4 p-4">
35+
<div className="flex flex-col divide-y border">
36+
{/* Billing Details Section */}
37+
<div className="flex items-center justify-between gap-4 p-4">
3738
<div>
3839
<h3 className="font-semibold">Billing details</h3>
3940
<p className="pt-1 text-xs text-ds-gray-octonary">
@@ -50,17 +51,19 @@ function BillingDetails() {
5051
onClick={() => setEditMode(true)}
5152
variant="default"
5253
disabled={!isAdmin}
54+
className="flex-none"
5355
>
5456
Edit payment
5557
</Button>
5658
) : (
5759
<Button
5860
hook="button"
5961
onClick={() => setEditMode(false)}
60-
variant="danger"
62+
variant="default"
6163
disabled={!isAdmin}
64+
className="flex-none"
6265
>
63-
Cancel edit
66+
Back
6467
</Button>
6568
)}
6669
</div>

‎src/pages/PlanPage/subRoutes/CurrentOrgPlan/BillingDetails/EditablePaymentMethod/EditablePaymentMethod.tsx renamed to ‎src/pages/PlanPage/subRoutes/CurrentOrgPlan/BillingDetails/EditPaymentMethod/EditPaymentMethod.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -145,7 +145,7 @@ interface EditablePaymentMethodProps {
145145
clientSecret: string
146146
}
147147

148-
const EditablePaymentMethod: React.FC<EditablePaymentMethodProps> = ({
148+
const EditPaymentMethod: React.FC<EditablePaymentMethodProps> = ({
149149
clientSecret,
150150
}) => {
151151
return (
@@ -163,4 +163,4 @@ const EditablePaymentMethod: React.FC<EditablePaymentMethodProps> = ({
163163
)
164164
}
165165

166-
export default EditablePaymentMethod
166+
export default EditPaymentMethod

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export { default } from './EditPaymentMethod'

‎src/pages/PlanPage/subRoutes/CurrentOrgPlan/BillingDetails/EditablePaymentMethod/index.ts

Lines changed: 0 additions & 1 deletion
This file was deleted.

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

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -28,21 +28,21 @@ function CardInformation({ subscriptionDetail, card }: CardInformationProps) {
2828

2929
return (
3030
<div className="flex flex-col gap-2">
31-
<div className="flex gap-2">
31+
<div className="flex gap-1">
3232
<img
33-
className="h-auto w-16 self-center"
33+
className="h-auto w-8 self-center"
3434
alt="credit card logo"
3535
src={typeCard?.logo}
3636
/>
3737
<div className="flex flex-col self-center">
38-
<b className="tracking-widest">••••&nbsp;{card?.last4}</b>
38+
<b>••••&nbsp;{card?.last4}</b>
3939
</div>
4040
</div>
4141
<p className="text-ds-gray-quinary">
4242
Expires {card?.expMonth}/{lastTwoDigits(card?.expYear)}
4343
</p>
4444
{nextBilling && (
45-
<p className="text-sm text-ds-gray-quinary">
45+
<p className="text-ds-gray-quinary">
4646
Your next billing date is{' '}
4747
<span className="text-ds-gray-octonary">{nextBilling}</span>.
4848
</p>

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

Lines changed: 53 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -32,50 +32,60 @@ function PaymentMethod({
3232

3333
console.log(isEditMode)
3434
return (
35-
<ExpandableSection>
36-
<ExpandableSection.Trigger className="p-4">
37-
<h3 className="font-semibold">{heading}</h3>
38-
</ExpandableSection.Trigger>
39-
<ExpandableSection.Content className="px-4 pb-4">
40-
{!isPrimary ? (
41-
<p className="pl-4 text-sm text-ds-gray-quaternary">
42-
By default, if the primary payment fails, the secondary will be
43-
charged automatically.
44-
</p>
45-
) : null}
46-
<div className="flex gap-2">
47-
<PaymentCard
48-
className="flex-1"
49-
isEditMode={isEditMode}
50-
setEditMode={setEditMode}
51-
subscriptionDetail={subscriptionDetail}
52-
provider={provider}
53-
owner={owner}
54-
/>
55-
<div className="flex-1 border-x border-ds-gray-tertiary px-4 pt-4">
56-
<h4 className="font-semibold">{isCreditCard ? 'Cardholder name' : 'Full name'}</h4>
57-
<p>N/A</p>
35+
<div>
36+
<ExpandableSection className="m-0 border-0" defaultOpen={isPrimary}>
37+
<ExpandableSection.Trigger className="p-4">
38+
<h3 className="font-semibold">{heading}</h3>
39+
</ExpandableSection.Trigger>
40+
<ExpandableSection.Content className="border-0 pt-0 text-xs">
41+
<div className="pb-4 pl-4 pt-2">
42+
{!isPrimary ? (
43+
<p className="mb-6 text-ds-gray-quaternary">
44+
By default, if the primary payment fails, the secondary will be
45+
charged automatically.
46+
</p>
47+
) : null}
48+
<div className="flex">
49+
{/* Payment method summary */}
50+
<PaymentCard
51+
className="w-2/5 flex-1"
52+
isEditMode={isEditMode}
53+
setEditMode={setEditMode}
54+
subscriptionDetail={subscriptionDetail}
55+
provider={provider}
56+
owner={owner}
57+
/>
58+
{/* Cardholder name */}
59+
<div className="mx-4 w-1/5 border-x border-ds-gray-tertiary px-4">
60+
<h4 className="mb-2 font-semibold">
61+
{isCreditCard ? 'Cardholder name' : 'Full name'}
62+
</h4>
63+
<p>N/A</p>
64+
</div>
65+
{/* Address */}
66+
<AddressCard
67+
className="flex-1"
68+
isEditMode={isEditMode}
69+
setEditMode={setEditMode}
70+
subscriptionDetail={subscriptionDetail}
71+
provider={provider}
72+
owner={owner}
73+
/>
74+
</div>
75+
{!isPrimary ? (
76+
<Button
77+
hook="button"
78+
disabled={!isAdmin}
79+
onClick={() => console.log('TODO - implement me')}
80+
className="mt-4"
81+
>
82+
Set as primary
83+
</Button>
84+
) : null}
5885
</div>
59-
<AddressCard
60-
className="flex-1"
61-
isEditMode={isEditMode}
62-
setEditMode={setEditMode}
63-
subscriptionDetail={subscriptionDetail}
64-
provider={provider}
65-
owner={owner}
66-
/>
67-
</div>
68-
{!isPrimary ? (
69-
<Button
70-
hook="button"
71-
disabled={!isAdmin}
72-
onClick={() => console.log('TODO - implement me')}
73-
>
74-
Set as primary
75-
</Button>
76-
) : null}
77-
</ExpandableSection.Content>
78-
</ExpandableSection>
86+
</ExpandableSection.Content>
87+
</ExpandableSection>
88+
</div>
7989
)
8090
}
8191

‎src/ui/Button/Button.tsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -134,7 +134,8 @@ function Button({
134134
const className = cs(
135135
baseClass,
136136
{ [baseDisabledClasses]: !isLoading },
137-
pickVariant(variant, isLoading)
137+
pickVariant(variant, isLoading),
138+
props.className
138139
)
139140

140141
const content = (

0 commit comments

Comments
 (0)