-
Notifications
You must be signed in to change notification settings - Fork 9
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
feat: APP-202 buy credits step 2 #2418
Merged
Merged
Changes from all commits
Commits
Show all changes
14 commits
Select commit
Hold shift + click to select a range
63d5e31
chore: add PaymentInfoForm/
blushi 3ae868d
chore: add PaymentInfoForm first story
blushi ba2dfcf
feat: wrap up CustomerInfo and storybook workaround
blushi 1da5e49
feat: add CardInfo without existing payment method
blushi 7d4817b
fix: Checkbox disabled color
blushi 5d06d33
feat: add Radio with existing payment methods
blushi 492cd3f
chore: revert CheckedIcon
blushi 1c5db94
chore: revert storybook vite config
blushi 1819a04
chore: rename registry stories to marketplace
blushi 49b7e2a
chore: rm import
blushi fc5fc72
fix: email optional if crypto
blushi 661c2e6
fix: use zod union for optional email
blushi 9930ac4
fix: address review comments
blushi b207fdc
chore: address review comments
blushi File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
Binary file not shown.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
2 changes: 1 addition & 1 deletion
2
web-marketplace/src/components/molecules/ScrollableCodebox/ScrollableCodebox.stories.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
2 changes: 1 addition & 1 deletion
2
web-marketplace/src/components/organisms/MetadataForm/MetadataForm.stories.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
48 changes: 48 additions & 0 deletions
48
web-marketplace/src/components/organisms/PaymentInfoForm/PaymentInfoForm.CardInfo.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,48 @@ | ||
import { useEffect } from 'react'; | ||
import { useFormContext, useWatch } from 'react-hook-form'; | ||
import { PaymentElement } from '@stripe/react-stripe-js'; | ||
|
||
import CheckboxLabel from 'web-components/src/components/inputs/new/CheckboxLabel/CheckboxLabel'; | ||
import { Body } from 'web-components/src/components/typography'; | ||
|
||
import { paymentElementOptions } from './PaymentInfoForm.constants'; | ||
import { PaymentInfoFormSchemaType } from './PaymentInfoForm.schema'; | ||
|
||
type CardInfoProps = { | ||
accountId?: string; | ||
className?: string; | ||
}; | ||
export const CardInfo = ({ accountId, className }: CardInfoProps) => { | ||
const ctx = useFormContext<PaymentInfoFormSchemaType>(); | ||
const { register, control, setValue } = ctx; | ||
|
||
const createAccount = useWatch({ | ||
control: control, | ||
name: 'createAccount', | ||
}); | ||
const savePaymentMethod = useWatch({ | ||
control: control, | ||
name: 'savePaymentMethod', | ||
}); | ||
|
||
useEffect(() => { | ||
setValue('savePaymentMethod', createAccount); | ||
}, [createAccount, setValue]); | ||
|
||
return ( | ||
<div className={className}> | ||
<PaymentElement id="payment-element" options={paymentElementOptions} /> | ||
<CheckboxLabel | ||
className="pt-30" | ||
checked={savePaymentMethod} | ||
disabled={!createAccount && !accountId} | ||
label={ | ||
<Body size="sm" className="text-grey-700"> | ||
Save my credit card info for next time | ||
</Body> | ||
} | ||
{...register('savePaymentMethod')} | ||
/> | ||
</div> | ||
); | ||
}; |
104 changes: 104 additions & 0 deletions
104
web-marketplace/src/components/organisms/PaymentInfoForm/PaymentInfoForm.CustomerInfo.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,104 @@ | ||
import { useFormContext, useWatch } from 'react-hook-form'; | ||
|
||
// import { msg, Trans } from '@lingui/macro'; | ||
// import { useLingui } from '@lingui/react'; | ||
import OutlinedButton from 'web-components/src/components/buttons/OutlinedButton'; | ||
import Card from 'web-components/src/components/cards/Card'; | ||
import CheckboxLabel from 'web-components/src/components/inputs/new/CheckboxLabel/CheckboxLabel'; | ||
import TextField from 'web-components/src/components/inputs/new/TextField/TextField'; | ||
import { Body, Title } from 'web-components/src/components/typography'; | ||
|
||
import { Wallet } from 'lib/wallet/wallet'; | ||
|
||
import { PaymentInfoFormSchemaType } from './PaymentInfoForm.schema'; | ||
import { PaymentOptionsType } from './PaymentInfoForm.types'; | ||
|
||
export type CustomerInfoProps = { | ||
paymentOption: PaymentOptionsType; | ||
wallet?: Wallet; | ||
accountId?: string; | ||
accountEmail?: string; | ||
accountName?: string; | ||
login: () => void; | ||
retiring: boolean; | ||
}; | ||
|
||
export const CustomerInfo = ({ | ||
paymentOption, | ||
wallet, | ||
accountEmail, | ||
accountName, | ||
accountId, | ||
retiring, | ||
login, | ||
}: CustomerInfoProps) => { | ||
// const { _ } = useLingui(); | ||
const ctx = useFormContext<PaymentInfoFormSchemaType>(); | ||
const { register, formState, control } = ctx; | ||
const { errors } = formState; | ||
|
||
const createAccount = useWatch({ | ||
control: control, | ||
name: 'createAccount', | ||
}); | ||
|
||
return ( | ||
<Card className="py-30 px-20 sm:py-50 sm:px-40 border-grey-300"> | ||
<div className="flex justify-between flex-wrap gap-20"> | ||
<Title variant="h6">Customer info</Title> | ||
{!accountId && !wallet && ( | ||
<OutlinedButton onClick={login} className="text-xs py-[9px] px-20"> | ||
log in for faster checkout | ||
</OutlinedButton> | ||
)} | ||
</div> | ||
{retiring && ( | ||
<TextField | ||
label="Your name" | ||
description={`This name will appear on the retirement certificate unless you choose to retire anonymously in the next step. It is also your user profile name.`} | ||
{...register('name')} | ||
error={!!errors['name']} | ||
helperText={errors['name']?.message} | ||
disabled={!!accountName} | ||
/> | ||
)} | ||
<TextField | ||
className={!accountId && !wallet ? 'mb-30' : ''} | ||
label="Your email" | ||
description={ | ||
!!wallet && !accountEmail ? ( | ||
<> | ||
Input an email address to receive a receipt of your purchase. | ||
<i> | ||
Take note: we will email you a prompt to associate this email | ||
with your account for easier future access. This is entirely | ||
optional. | ||
</i> | ||
</> | ||
) : paymentOption === 'card' ? ( | ||
`We need an email address to send you a receipt of your purchase.` | ||
) : ( | ||
`We will send your receipt to the email address below, which is already linked to your account.` | ||
) | ||
} | ||
{...register('email')} | ||
error={!!errors['email']} | ||
helperText={errors['email']?.message} | ||
disabled={!!accountEmail} | ||
optional={!!wallet} | ||
/> | ||
{!accountId && !wallet && ( | ||
<CheckboxLabel | ||
checked={createAccount} | ||
label={ | ||
<Body size="sm" className="text-grey-700"> | ||
Yes, please create an account for me so I can easily see my | ||
purchase details and retirement certificate when I log in | ||
</Body> | ||
} | ||
{...register('createAccount')} | ||
/> | ||
)} | ||
</Card> | ||
); | ||
}; |
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
TODO use lingui once issue running storybook locally is fixed
temporary fix is to do the following #2418 (comment)