Skip to content
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.

Sign up for GitHub

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

Create project step three #74

Open
wants to merge 6 commits into
base: master
Choose a base branch
from
Open

Create project step three #74

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
1f86811
New step - tier form
k-dimitrijevs Jan 26, 2023
31ff566
Validation messages for cards & remove card
k-dimitrijevs Jan 26, 2023
006332a
Tier card remove icon change
k-dimitrijevs Jan 26, 2023
68e373d
Tier form cards moved to new component + code clean up
k-dimitrijevs Jan 27, 2023
1a658f1
Tier card component & disable remove button if tiers ar fewer than 3
k-dimitrijevs Jan 27, 2023
1d2ecd7
Fix key
Jan 28, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
79 changes: 79 additions & 0 deletions components/create-a-project/form/TierCard.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,79 @@
import Input from '@/components/forms/input'
import classNames from 'classnames'
import { XIcon } from '@heroicons/react/outline'

export default function TierCard({
tier,
index,
fundingType,
error,
removeTier,
changeTier,
handleBlur,
}) {
return (
<div className='col-span-6 flow-root rounded-lg bg-slate-200 py-4 px-4 shadow-md shadow-gray-300 hover:cursor-pointer xl:col-span-3 2xl:col-span-2'>
<div className='flex w-full'>
<div className='mb-2 flex w-3/5 text-2xl font-bold text-neutral-900'>
Tier {index + 1}
</div>
<div className='flex w-2/5 justify-end'>
<XIcon
onClick={removeTier}
className='h-7 text-gray-400 hover:text-gray-500'
/>
</div>
</div>

<p className='pt-2 font-sans text-sm font-normal text-neutral-700'>
NFT price:
</p>
<div className='flex w-full flex-wrap'>
<Input
name='tiers'
value={tier.price}
onChange={changeTier('price')}
onBlur={handleBlur}
placeholder='Enter target amount'
type='number'
/>
<div className='my-auto ml-2 flex'>
<img
src={`assets/${fundingType}.svg`}
className={classNames(
'my-auto mr-2',
fundingType === 'eth' ? 'h-7' : 'h-5',
)}
/>
<p className='text-lg font-bold text-neutral-900'>
{fundingType.toUpperCase()}
</p>
</div>

{error && error.length > 0 && (
<div className='flex w-full flex-row items-center text-xs text-red-500'>
{error[index] && error[index].price && <p>{error[index].price}</p>}
</div>
)}
</div>

<p className='pt-2 font-sans text-sm font-normal text-neutral-700'>
Number of NFTs:
</p>
<Input
name='tiers'
value={tier.count}
onChange={changeTier('count')}
onBlur={handleBlur}
placeholder='Enter target amount'
type='number'
/>

{error && error.length > 0 && (
<div className='flex w-full flex-row items-center text-xs text-red-500'>
{error[index] && error[index].count && <p>{error[index].count}</p>}
</div>
)}
</div>
)
}
10 changes: 6 additions & 4 deletions components/create-a-project/form/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import StepFour from './step-four'
import StepFive from './step-five'
import StepSix from './step-six'
import StepSeven from './step-seven'
import TierForm from './tier-form'

export default function CreateAProjectForm({ instruction, onSuccess }) {
return (
Expand Down Expand Up @@ -35,10 +36,11 @@ function Form() {
{step === 1 && <StepOne />}
{step === 2 && <StepTwo />}
{step === 3 && <StepThree />}
{step === 4 && <StepFour />}
{step === 5 && <StepFive />}
{step === 6 && <StepSix />}
{step === 7 && <StepSeven />}
{step === 4 && <TierForm />}
{step === 5 && <StepFour />}
{step === 6 && <StepFive />}
{step === 7 && <StepSix />}
{step === 8 && <StepSeven />}
</div>
</div>
</div>
Expand Down
8 changes: 7 additions & 1 deletion components/create-a-project/form/progress-bar.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import classNames from 'classnames'

export default function ProgressBar({ step }) {
return (
<div className='grid w-full grid-cols-7 gap-x-2'>
<div className='grid w-full grid-cols-8 gap-x-2'>
<div className={classNames('h-1 w-full bg-blue-600 ')} />
<div
className={classNames(
Expand Down Expand Up @@ -40,6 +40,12 @@ export default function ProgressBar({ step }) {
step > 6 ? 'bg-blue-600' : 'bg-neutral-300',
)}
/>
<div
className={classNames(
'h-1 w-full w-full',
step > 7 ? 'bg-blue-600' : 'bg-neutral-300',
)}
/>
</div>
)
}
2 changes: 1 addition & 1 deletion components/create-a-project/form/step-five.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ export default function StepFive() {

setProject((project) => ({ ...project, ...form }))

setStep(6)
setStep(7)
} catch (error) {
console.error(error)
// toto: set form error
Expand Down
14 changes: 11 additions & 3 deletions components/create-a-project/form/step-four.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,13 +53,18 @@ export default function StepFour() {
const [isLoading, setLoading] = useState(false)
const router = useRouter()

const goBack = () => {
if (project.useTiers) setStep(4)
else setStep(3)
}

const handleSubmit = async (form) => {
try {
setLoading(true)

setProject((project) => ({ ...project, ...form }))

setStep(5)
setStep(6)
} catch (error) {
console.error(error)
// toto: set form error
Expand Down Expand Up @@ -112,7 +117,10 @@ export default function StepFour() {
type='file'
/>

<p className='pt-10 pb-2 text-2xl font-semibold text-neutral-900'>
<p
onClick={() => console.log(project)}
className='pt-10 pb-2 text-2xl font-semibold text-neutral-900'
>
Select your NFT Art
</p>
<p className='font-regular mb-4 text-neutral-500'>
Expand Down Expand Up @@ -204,7 +212,7 @@ export default function StepFour() {

<button
className='w-full appearance-none py-4 px-4 text-center text-xs text-gray-500 focus:outline-none'
onClick={previousStep}
onClick={goBack}
type='button'
>
&larr; Go back
Expand Down
2 changes: 1 addition & 1 deletion components/create-a-project/form/step-seven.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -94,7 +94,7 @@ export default function StepSix() {
firstName: profile.firstName,
})

setStep(7)
setStep(8)
} catch (error) {
console.error(error)
// todo: set form error
Expand Down
2 changes: 1 addition & 1 deletion components/create-a-project/form/step-six.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -136,7 +136,7 @@ export default function StepSix() {
firstName: profile.firstName,
})

setStep(7)
setStep(8)
} catch (error) {
console.error(error)
// todo: set form error
Expand Down
145 changes: 83 additions & 62 deletions components/create-a-project/form/step-three.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,10 +14,14 @@ const stepThreeSchema = Yup.object().shape({
.positive('Target raise must be greater than zero')
.integer('Target raise must be a whole number')
.required('Enter a raise amount'),
nftVolume: Yup.number()
.positive('Number of NFTs must be greater than zero')
.integer('Number of NFTs must be a whole number')
.required('Enter a number of NFTs'),
useTiers: Yup.boolean(),
nftVolume: Yup.number().when('useTiers', {
is: (useTiers) => useTiers === false,
then: Yup.number()
.positive('Number of NFTs must be greater than zero')
.integer('Number of NFTs must be a whole number')
.required('Enter a number of NFTs'),
}),
walletId: Yup.string(),
})

Expand All @@ -26,6 +30,7 @@ const initialValues = {
targetAmount: '',
nftVolume: '',
walletId: '',
useTiers: true,
}

const fundingTypes = [
Expand All @@ -45,7 +50,11 @@ export default function StepThree() {

setProject((project) => ({ ...project, ...form }))

setStep(4)
if (form.useTiers) {
setStep(4)
} else {
setStep(5)
}
} catch (error) {
console.error(error)
// todo: set form error
Expand Down Expand Up @@ -107,11 +116,7 @@ export default function StepThree() {
>
<div className='flex'>
<img
src={
type.value === 'btc'
? 'assets/bitcoin.svg'
: `assets/${type.value}.svg`
}
src={`assets/${type.value}.svg`}
className='mr-4 h-12'
/>
<span className='my-auto text-xl font-bold'>
Expand Down Expand Up @@ -158,28 +163,18 @@ export default function StepThree() {
type='number'
/>
</div>
{values.fundingType === 'btc' ? (
<div className='my-auto ml-2 flex'>
<img
src='assets/bitcoin.svg'
className='my-auto mr-2 h-7'
/>
<p className='text-lg font-bold text-neutral-900'>BTC</p>
</div>
) : (
<div className='my-auto ml-2 flex'>
<img
src={`assets/${values.fundingType}.svg`}
className={classNames(
'my-auto mr-2',
values.fundingType === 'eth' ? 'h-7' : 'h-5',
)}
/>
<p className='text-lg font-bold text-neutral-900'>
{values.fundingType.toUpperCase()}
</p>
</div>
)}
<div className='my-auto ml-2 flex'>
<img
src={`assets/${values.fundingType}.svg`}
className={classNames(
'my-auto mr-2',
values.fundingType === 'eth' ? 'h-7' : 'h-5',
)}
/>
<p className='text-lg font-bold text-neutral-900'>
{values.fundingType.toUpperCase()}
</p>
</div>
</div>

<p className='my-4 flex items-center rounded-2xl bg-gray-50 p-4 text-sm'>
Expand All @@ -192,18 +187,58 @@ export default function StepThree() {
</p>

<div className='flex w-full flex-col space-y-1'>
<p className=''>
How many NFTs would you like to include in your collection?
<p className='my-5 text-2xl font-bold text-neutral-900'>
Would you like to include tiers in your round?
</p>
<Input
name='nftVolume'
value={values.nftVolume}
onChange={handleChange}
onBlur={handleBlur}
placeholder='Enter target amount'
type='number'
endItem={() => <p className='font-bold text-black'>NFTs</p>}
/>

<div className='my-auto space-y-4 lg:flex lg:space-y-0 lg:space-x-4'>
<button
type='button'
onClick={() => setFieldValue('useTiers', true)}
className={classNames(
'flex w-full flex-row justify-center rounded-xl py-3 px-4 text-base font-medium tracking-wider text-white shadow-xl hover:bg-blue-700 lg:w-1/2',
values.useTiers
? 'bg-blue-600'
: 'bg-white text-blue-600 hover:text-white',
)}
>
<span className='my-auto'>Yes, I would like tiers</span>
</button>
<button
type='button'
onClick={() => setFieldValue('useTiers', false)}
className={classNames(
'flex w-full flex-row justify-center rounded-xl py-3 px-4 text-base font-medium tracking-wider text-white shadow-xl hover:bg-blue-700 lg:w-1/2',
!values.useTiers
? 'bg-blue-600'
: 'bg-white text-blue-600 hover:text-white',
)}
>
<span className='my-auto'>
No, I would like 1 donation amount
</span>
</button>
</div>

{!values.useTiers && (
<div>
<p className='mt-4'>
How many NFTs would you like to include in your
collection?
</p>
<Input
name='nftVolume'
value={values.nftVolume}
onChange={handleChange}
onBlur={handleBlur}
placeholder='Enter target amount'
type='number'
endItem={() => (
<p className='font-bold text-black'>NFTs</p>
)}
/>
</div>
)}
</div>
<p className='my-4 flex items-center rounded-2xl bg-gray-50 p-4 text-sm'>
<InformationCircleIcon className='h-12 rounded-full text-blue-500' />
Expand All @@ -223,10 +258,10 @@ export default function StepThree() {
disabled={isLoading === true}
type='submit'
className={`
flex w-full flex-row justify-center rounded-xl bg-blue-600 py-3
px-4 text-base font-medium tracking-wider text-white
shadow-xl hover:bg-blue-700
`}
flex w-full flex-row justify-center rounded-xl bg-blue-600 py-3
px-4 text-base font-medium tracking-wider text-white
shadow-xl hover:bg-blue-700
`}
>
{!isLoading && <span>Next</span>}

Expand All @@ -245,23 +280,9 @@ export default function StepThree() {
&larr; Go back
</button>
</div>

{/* <div className="bg-gray-50 rounded-2xl text-sm p-4">
To receive the money raised, make sure you have a Plug Wallet.
<br /><br />
If you want to connect your wallet, or dont have a wallet yet,
click below:

<div className="bg-gray-200 rounded-xl p-8 my-5" />
</div> */}
</div>

<p
className={`
w-full py-4 px-4 text-center text-xs text-gray-500

`}
>
<p className={` w-full py-4 px-4 text-center text-xs text-gray-500`}>
By continuing, you agree to CrowdFund NFTs Terms and acknowledge
receipt of our Privacy Policy.
</p>
Expand Down
Loading