Skip to content

Commit acb90e0

Browse files
LautaroPetaccioLautaroPetaccio
authored
feat: Standarize and add third party dialogs to review content policy step (#3181)
1 parent 457ba2b commit acb90e0

File tree

10 files changed

+270
-343
lines changed

10 files changed

+270
-343
lines changed

‎src/components/Modals/PublishWizardCollectionModal/ConfirmCollectionNameStep/ConfirmCollectionNameStep.tsx

+4-5
Original file line numberDiff line numberDiff line change
@@ -6,18 +6,17 @@ import './ConfirmCollectionNameStep.css'
66

77
export const ConfirmCollectionNameStep: React.FC<{
88
collection: Collection
9-
confirmedCollectionName: string
10-
onChangeCollectionName: (value: string) => void
119
onNextStep: () => void
1210
}> = props => {
13-
const { collection, confirmedCollectionName, onChangeCollectionName, onNextStep } = props
11+
const { collection, onNextStep } = props
1412
const [collectionNameFocus, setCollectionNameFocus] = useState<boolean>(false)
13+
const [confirmedCollectionName, setConfirmedCollectionName] = useState<string>('')
1514

1615
const handleCollectionNameChange = useCallback(
1716
(_: React.ChangeEvent<HTMLInputElement>, { value }: InputOnChangeData) => {
18-
onChangeCollectionName(value)
17+
setConfirmedCollectionName(value)
1918
},
20-
[onChangeCollectionName]
19+
[setConfirmedCollectionName]
2120
)
2221

2322
const handleCollectionNameFocus = useCallback(() => {

‎src/components/Modals/PublishWizardCollectionModal/PublishWizardCollectionModal.css

+4
Original file line numberDiff line numberDiff line change
@@ -53,6 +53,10 @@
5353
visibility: visible;
5454
}
5555

56+
.PublishWizardCollectionModal .steps-indicator.list .item.step.beforeActiveStep::after {
57+
background-color: var(--primary);
58+
}
59+
5660
.PublishWizardCollectionModal .steps-indicator.list .item.step:last-child {
5761
flex: 0;
5862
}

‎src/components/Modals/PublishWizardCollectionModal/PublishWizardCollectionModal.tsx

+62-88
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React, { useEffect, useState } from 'react'
1+
import React, { useCallback, useEffect, useMemo, useState } from 'react'
22
import { ethers } from 'ethers'
33
import classNames from 'classnames'
44
import { List, ModalNavigation } from 'decentraland-ui'
@@ -23,12 +23,7 @@ import './PublishWizardCollectionModal.css'
2323
export const PublishWizardCollectionModal: React.FC<Props> = props => {
2424
const { collection, items, wallet, rarities, onClose, onFetchRarities, onPublish, onAuthorizedAction, onCloseAuthorization } = props
2525
const [currentStep, setCurrentStep] = useState<number>(PublishWizardCollectionSteps.CONFIRM_COLLECTION_NAME)
26-
const [collectionName, setCollectionName] = useState<string>('')
2726
const [emailAddress, setEmailAddress] = useState<string>('')
28-
const [contentPolicyFirstConditionChecked, setContentPolicyFirstConditionChecked] = useState<boolean>(false)
29-
const [acceptTermsOfUseChecked, setAcceptTermsOfUseChecked] = useState<boolean>(false)
30-
const [acknowledgeImmutability, setAcknowledgeImmutability] = useState<boolean>(false)
31-
const [acknowledgeDaoTermsChecked, setAcknowledgeDaoTermsChecked] = useState<boolean>(false)
3227
const [subscribeToNewsletter, setSubscribeToNewsletter] = useState<boolean>(false)
3328

3429
useEffect(() => {
@@ -40,97 +35,71 @@ export const PublishWizardCollectionModal: React.FC<Props> = props => {
4035
setCurrentStep(PublishWizardCollectionSteps.COLLECTION_PUBLISHED)
4136
onCloseAuthorization()
4237
}
43-
}, [collection.forumLink, onCloseAuthorization])
38+
}, [collection.forumLink, onCloseAuthorization, setCurrentStep])
4439

45-
const handleOnNextStep = () => {
40+
const handleOnNextStep = useCallback(() => {
4641
setCurrentStep(step => step + 1)
47-
}
42+
}, [setCurrentStep])
4843

49-
const handleOnPrevStep = () => {
44+
const handleOnPrevStep = useCallback(() => {
5045
setCurrentStep(step => step - 1)
51-
}
52-
53-
const handleOnConfirmCollectionName = (confirmedCollectionName: string) => {
54-
setCollectionName(confirmedCollectionName)
55-
}
56-
57-
const handleOnChangeEmailAddress = (email: string) => {
58-
setEmailAddress(email)
59-
}
60-
61-
const handleOnContentPolicyFirstConditionChange = (value: boolean) => {
62-
setContentPolicyFirstConditionChecked(value)
63-
}
46+
}, [setCurrentStep])
6447

65-
const handleOnAcceptTermsOfUseChange = (value: boolean) => {
66-
setAcceptTermsOfUseChecked(value)
67-
}
68-
69-
const handleOnAcknowledgeImmutability = (value: boolean) => {
70-
setAcknowledgeImmutability(value)
71-
}
72-
73-
const handleOnAcknowledgeDaoTermsChange = (value: boolean) => {
74-
setAcknowledgeDaoTermsChecked(value)
75-
}
76-
77-
const handleOnSubscribeToNewsletter = (value: boolean) => {
78-
setSubscribeToNewsletter(value)
79-
}
48+
const handleOnChangeEmailAddress = useCallback(
49+
(email: string) => {
50+
setEmailAddress(email)
51+
},
52+
[setEmailAddress]
53+
)
8054

81-
const handleOnPublish = (paymentMethod: PaymentMethod) => {
82-
if (paymentMethod === PaymentMethod.FIAT) {
83-
onPublish(collection, items, emailAddress, subscribeToNewsletter, paymentMethod)
84-
return
85-
}
55+
const handleOnSubscribeToNewsletter = useCallback(
56+
(value: boolean) => {
57+
setSubscribeToNewsletter(value)
58+
},
59+
[setSubscribeToNewsletter]
60+
)
8661

87-
const authorization = buildManaAuthorization(wallet.address, wallet.networks.MATIC.chainId, ContractName.CollectionManager)
88-
89-
onAuthorizedAction({
90-
authorizedAddress: authorization.authorizedAddress,
91-
authorizedContractLabel: ContractName.CollectionManager,
92-
targetContract: {
93-
name: authorization.contractName,
94-
address: authorization.contractAddress,
95-
chainId: authorization.chainId,
96-
network: Network.MATIC,
97-
category: NFTCategory.ENS
98-
},
99-
targetContractName: ContractName.MANAToken,
100-
requiredAllowanceInWei: ethers.BigNumber.from(rarities[0].prices!.MANA).mul(items.length).toString(),
101-
authorizationType: AuthorizationType.ALLOWANCE,
102-
onAuthorized: () => onPublish(collection, items, emailAddress, subscribeToNewsletter, paymentMethod)
103-
})
104-
}
62+
const handleOnPublish = useCallback(
63+
(paymentMethod: PaymentMethod) => {
64+
if (paymentMethod === PaymentMethod.FIAT) {
65+
onPublish(collection, items, emailAddress, subscribeToNewsletter, paymentMethod)
66+
return
67+
}
68+
69+
const authorization = buildManaAuthorization(wallet.address, wallet.networks.MATIC.chainId, ContractName.CollectionManager)
70+
71+
onAuthorizedAction({
72+
authorizedAddress: authorization.authorizedAddress,
73+
authorizedContractLabel: ContractName.CollectionManager,
74+
targetContract: {
75+
name: authorization.contractName,
76+
address: authorization.contractAddress,
77+
chainId: authorization.chainId,
78+
network: Network.MATIC,
79+
category: NFTCategory.ENS
80+
},
81+
targetContractName: ContractName.MANAToken,
82+
requiredAllowanceInWei: ethers.BigNumber.from(rarities[0].prices!.MANA).mul(items.length).toString(),
83+
authorizationType: AuthorizationType.ALLOWANCE,
84+
onAuthorized: () => onPublish(collection, items, emailAddress, subscribeToNewsletter, paymentMethod)
85+
})
86+
},
87+
[onPublish, collection, items, emailAddress, subscribeToNewsletter, wallet, rarities, onAuthorizedAction]
88+
)
10589

10690
const renderStepView = () => {
10791
switch (currentStep) {
10892
case PublishWizardCollectionSteps.CONFIRM_COLLECTION_NAME:
109-
return (
110-
<ConfirmCollectionNameStep
111-
collection={collection}
112-
confirmedCollectionName={collectionName}
113-
onChangeCollectionName={handleOnConfirmCollectionName}
114-
onNextStep={handleOnNextStep}
115-
/>
116-
)
93+
return <ConfirmCollectionNameStep collection={collection} onNextStep={handleOnNextStep} />
11794
case PublishWizardCollectionSteps.CONFIRM_COLLECTION_ITEMS:
11895
return <ConfirmCollectionItemsStep items={items} onNextStep={handleOnNextStep} onPrevStep={handleOnPrevStep} />
11996
case PublishWizardCollectionSteps.REVIEW_CONTENT_POLICY:
12097
return (
12198
<ReviewContentPolicyStep
12299
collection={collection}
123100
confirmedEmailAddress={emailAddress}
124-
contentPolicyFirstConditionChecked={contentPolicyFirstConditionChecked}
125-
acceptTermsOfUseChecked={acceptTermsOfUseChecked}
126-
acknowledgeImmutability={acknowledgeImmutability}
127-
acknowledgeDaoTermsChecked={acknowledgeDaoTermsChecked}
128101
subscribeToNewsletter={subscribeToNewsletter}
129102
onChangeEmailAddress={handleOnChangeEmailAddress}
130-
onContentPolicyFirstConditionChange={handleOnContentPolicyFirstConditionChange}
131-
onAcceptTermsOfUseChange={handleOnAcceptTermsOfUseChange}
132-
onAcknowledgeImmutability={handleOnAcknowledgeImmutability}
133-
onAcknowledgeDaoTermsChange={handleOnAcknowledgeDaoTermsChange}
134103
onSubscribeToNewsletter={handleOnSubscribeToNewsletter}
135104
onNextStep={handleOnNextStep}
136105
onPrevStep={handleOnPrevStep}
@@ -145,7 +114,7 @@ export const PublishWizardCollectionModal: React.FC<Props> = props => {
145114
}
146115
}
147116

148-
const renderStepTitle = () => {
117+
const stepTitle = useMemo(() => {
149118
switch (currentStep) {
150119
case PublishWizardCollectionSteps.CONFIRM_COLLECTION_NAME:
151120
case PublishWizardCollectionSteps.CONFIRM_COLLECTION_ITEMS:
@@ -159,28 +128,33 @@ export const PublishWizardCollectionModal: React.FC<Props> = props => {
159128
default:
160129
return null
161130
}
162-
}
131+
}, [t, currentStep])
163132

164-
const renderStepsInicator = () => {
133+
const stepIndicator = useMemo(() => {
165134
if (currentStep === PublishWizardCollectionSteps.COLLECTION_PUBLISHED) {
166135
return null
167136
}
137+
const steps = Object.values(PublishWizardCollectionSteps).filter(
138+
step => !isNaN(Number(step)) && step !== PublishWizardCollectionSteps.COLLECTION_PUBLISHED
139+
)
140+
const activeStepPosition = steps.findIndex(step => step === currentStep)
168141

169142
return (
170143
<List horizontal className="steps-indicator content">
171-
{Object.values(PublishWizardCollectionSteps)
172-
.filter(step => !isNaN(Number(step)) && step !== PublishWizardCollectionSteps.COLLECTION_PUBLISHED)
173-
.map(step => (
174-
<List.Item key={step} className={classNames('step', { active: currentStep === step })} />
175-
))}
144+
{steps.map((step, index) => (
145+
<List.Item
146+
key={step}
147+
className={classNames('step', { active: currentStep === step, beforeActiveStep: index < activeStepPosition })}
148+
/>
149+
))}
176150
</List>
177151
)
178-
}
152+
}, [currentStep])
179153

180154
return (
181155
<Modal className="PublishWizardCollectionModal" size="small" onClose={onClose} closeOnDimmerClick={false}>
182-
<ModalNavigation title={renderStepTitle()} onClose={onClose} />
183-
{renderStepsInicator()}
156+
<ModalNavigation title={stepTitle} onClose={onClose} />
157+
{stepIndicator}
184158
{renderStepView()}
185159
</Modal>
186160
)

‎src/components/Modals/PublishWizardCollectionModal/ReviewContentPolicyStep/ReviewContentPolicyStep.css

-86
This file was deleted.

‎src/components/Modals/PublishWizardCollectionModal/ReviewContentPolicyStep/ReviewContentPolicyStep.module.css

+58
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
.content {
2+
background-color: rgba(var(--dark-raw), 0.48);
3+
border-radius: 8px;
4+
width: 100%;
5+
padding: 20px 24px 48px;
6+
font-size: 15px;
7+
font-weight: 400;
8+
line-height: 24px;
9+
}
10+
11+
.checkboxContainer {
12+
display: flex;
13+
margin-top: 32px;
14+
margin-bottom: 32px;
15+
}
16+
17+
.checkboxContainer > :global(.ui.checkbox) {
18+
margin-top: 3px;
19+
margin-right: 14px;
20+
}
21+
22+
.checkboxContainer > span {
23+
text-align: justify;
24+
color: var(--clear-divider);
25+
}
26+
27+
.checkboxContainer > span > a {
28+
color: var(--clear-divider);
29+
text-decoration: underline;
30+
font-weight: 400;
31+
}
32+
33+
.subscriptionText {
34+
color: var(--clear-divider);
35+
}
36+
37+
.title {
38+
font-size: 18px;
39+
font-weight: 700;
40+
line-height: 24px;
41+
margin-bottom: 0px;
42+
}
43+
44+
.subtitle {
45+
font-size: 15px;
46+
font-weight: 400;
47+
line-height: 24px;
48+
}
49+
50+
.actions {
51+
margin-top: 24px;
52+
width: 100%;
53+
justify-content: space-between !important;
54+
}
55+
56+
.actions :global(.button) {
57+
width: 180px;
58+
}

0 commit comments

Comments
 (0)