Skip to content

Commit 2e81e4c

Browse files
alexanmtzalexanmtz
committed
fixing translation dynamic id issues and missing image on private use case
1 parent afd85b7 commit 2e81e4c

5 files changed

Lines changed: 167 additions & 57 deletions

File tree

‎frontend/src/components/design-library/molecules/heroes/cards-hero/cards-hero.tsx‎

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import React from 'react'
22
import { Typography } from '@mui/material'
33
import { Grid } from '@mui/system'
4-
import { FormattedMessage } from 'react-intl'
54
import {
65
Section,
76
Header,
@@ -15,8 +14,7 @@ import {
1514
} from './cards-hero.styles'
1615

1716
type CardDescriptionItem = {
18-
id: string
19-
defaultMessage: string
17+
text: React.ReactNode
2018
icon?: React.ReactNode
2119
}
2220

@@ -62,15 +60,15 @@ const CardsHero = ({ title, description, cards, withContrast = false }: CardsHer
6260
</Typography>
6361
{card.descriptionList?.length ? (
6462
<DescriptionList>
65-
{card.descriptionList.map((item) => (
66-
<DescriptionListItem key={item.id}>
63+
{card.descriptionList.map((item, index) => (
64+
<DescriptionListItem key={index}>
6765
{(item.icon || card.descriptionListIcon) && (
6866
<DescriptionListIcon>
6967
{item.icon || card.descriptionListIcon}
7068
</DescriptionListIcon>
7169
)}
7270
<Typography variant="body2" color="textSecondary">
73-
<FormattedMessage id={item.id} defaultMessage={item.defaultMessage} />
71+
{item.text}
7472
</Typography>
7573
</DescriptionListItem>
7674
))}

‎frontend/src/components/design-library/pages/public-pages/home-public-page/home-public-page.tsx‎

Lines changed: 126 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -75,9 +75,12 @@ const Home = () => {
7575
),
7676
descriptionList: [
7777
{
78-
id: 'welcome.roles.hero.maintainer.description',
79-
defaultMessage:
80-
'Import issues from your repository, organize work, and pay bounties when tasks are completed.',
78+
text: (
79+
<FormattedMessage
80+
id="welcome.roles.hero.maintainer.description"
81+
defaultMessage="Import issues from your repository, organize work, and pay bounties when tasks are completed."
82+
/>
83+
),
8184
icon: <TaskAlt fontSize="small" />
8285
}
8386
],
@@ -100,9 +103,12 @@ const Home = () => {
100103
),
101104
descriptionList: [
102105
{
103-
id: 'welcome.roles.hero.contributor.description',
104-
defaultMessage:
105-
'Find tasks, submit pull requests, and get rewarded for solving issues.',
106+
text: (
107+
<FormattedMessage
108+
id="welcome.roles.hero.contributor.description"
109+
defaultMessage="Find tasks, submit pull requests, and get rewarded for solving issues."
110+
/>
111+
),
106112
icon: <Work fontSize="small" />
107113
}
108114
],
@@ -122,9 +128,12 @@ const Home = () => {
122128
),
123129
descriptionList: [
124130
{
125-
id: 'welcome.roles.hero.sponsor.description',
126-
defaultMessage:
127-
'Fund bounties for open-source issues and support the work you want to see shipped.',
131+
text: (
132+
<FormattedMessage
133+
id="welcome.roles.hero.sponsor.description"
134+
defaultMessage="Fund bounties for open-source issues and support the work you want to see shipped."
135+
/>
136+
),
128137
icon: <AttachMoney fontSize="small" />
129138
}
130139
],
@@ -147,9 +156,12 @@ const Home = () => {
147156
),
148157
descriptionList: [
149158
{
150-
id: 'welcome.roles.hero.serviceProvider.description',
151-
defaultMessage:
152-
'Deliver specialized services and use payment requests to receive funds through Gitpay.',
159+
text: (
160+
<FormattedMessage
161+
id="welcome.roles.hero.serviceProvider.description"
162+
defaultMessage="Deliver specialized services and use payment requests to receive funds through Gitpay."
163+
/>
164+
),
153165
icon: <CardMembership fontSize="small" />
154166
}
155167
],
@@ -174,24 +186,44 @@ const Home = () => {
174186
descriptionListIcon: <TaskAlt fontSize="small" />,
175187
descriptionList: [
176188
{
177-
id: 'welcome.usecases.opensource.item1',
178-
defaultMessage: 'Fund and solve issues in public repositories.'
189+
text: (
190+
<FormattedMessage
191+
id="welcome.usecases.opensource.item1"
192+
defaultMessage="Fund and solve issues in public repositories."
193+
/>
194+
)
179195
},
180196
{
181-
id: 'welcome.usecases.opensource.item2',
182-
defaultMessage: 'Sponsors fund issues'
197+
text: (
198+
<FormattedMessage
199+
id="welcome.usecases.opensource.item2"
200+
defaultMessage="Sponsors fund issues"
201+
/>
202+
)
183203
},
184204
{
185-
id: 'welcome.usecases.opensource.item3',
186-
defaultMessage: 'Contributors pick issues to solve'
205+
text: (
206+
<FormattedMessage
207+
id="welcome.usecases.opensource.item3"
208+
defaultMessage="Contributors pick issues to solve"
209+
/>
210+
)
187211
},
188212
{
189-
id: 'welcome.usecases.opensource.item4',
190-
defaultMessage: 'Work is delivered through pull requests'
213+
text: (
214+
<FormattedMessage
215+
id="welcome.usecases.opensource.item4"
216+
defaultMessage="Work is delivered through pull requests"
217+
/>
218+
)
191219
},
192220
{
193-
id: 'welcome.usecases.opensource.item5',
194-
defaultMessage: 'Gitpay handles payouts once the PR is merged'
221+
text: (
222+
<FormattedMessage
223+
id="welcome.usecases.opensource.item5"
224+
defaultMessage="Gitpay handles payouts once the PR is merged"
225+
/>
226+
)
195227
}
196228
],
197229
image: notificationsImage,
@@ -204,29 +236,52 @@ const Home = () => {
204236
descriptionListIcon: <TaskAlt fontSize="small" />,
205237
descriptionList: [
206238
{
207-
id: 'welcome.usecases.private.item1',
208-
defaultMessage: 'Fund work inside private repositories or internal projects.'
239+
text: (
240+
<FormattedMessage
241+
id="welcome.usecases.private.item1"
242+
defaultMessage="Fund work inside private repositories or internal projects."
243+
/>
244+
)
209245
},
210246
{
211-
id: 'welcome.usecases.private.item2',
212-
defaultMessage: 'Companies fund tasks or features'
247+
text: (
248+
<FormattedMessage
249+
id="welcome.usecases.private.item2"
250+
defaultMessage="Companies fund tasks or features"
251+
/>
252+
)
213253
},
214254
{
215-
id: 'welcome.usecases.private.item3',
216-
defaultMessage: 'Developers submit work through pull requests'
255+
text: (
256+
<FormattedMessage
257+
id="welcome.usecases.private.item3"
258+
defaultMessage="Developers submit work through pull requests"
259+
/>
260+
)
217261
},
218262
{
219-
id: 'welcome.usecases.private.item4',
220-
defaultMessage: 'Maintainers verify delivery by merging the PR'
263+
text: (
264+
<FormattedMessage
265+
id="welcome.usecases.private.item4"
266+
defaultMessage="Maintainers verify delivery by merging the PR"
267+
/>
268+
)
221269
},
222270
{
223-
id: 'welcome.usecases.private.item5',
224-
defaultMessage: 'Gitpay releases the payment automatically'
271+
text: (
272+
<FormattedMessage
273+
id="welcome.usecases.private.item5"
274+
defaultMessage="Gitpay releases the payment automatically"
275+
/>
276+
)
225277
},
226278
{
227-
id: 'welcome.usecases.private.item6',
228-
defaultMessage:
229-
'This works well for contract work, agencies, and on-demand development services.'
279+
text: (
280+
<FormattedMessage
281+
id="welcome.usecases.private.item6"
282+
defaultMessage="This works well for contract work, agencies, and on-demand development services."
283+
/>
284+
)
230285
}
231286
],
232287
image: sharingImage,
@@ -239,29 +294,52 @@ const Home = () => {
239294
descriptionListIcon: <TaskAlt fontSize="small" />,
240295
descriptionList: [
241296
{
242-
id: 'welcome.usecases.service.item1',
243-
defaultMessage: 'Receive payments for delivered work.'
297+
text: (
298+
<FormattedMessage
299+
id="welcome.usecases.service.item1"
300+
defaultMessage="Receive payments for delivered work."
301+
/>
302+
)
244303
},
245304
{
246-
id: 'welcome.usecases.service.item2',
247-
defaultMessage: 'Create a payment request'
305+
text: (
306+
<FormattedMessage
307+
id="welcome.usecases.service.item2"
308+
defaultMessage="Create a payment request"
309+
/>
310+
)
248311
},
249312
{
250-
id: 'welcome.usecases.service.item3',
251-
defaultMessage: 'Share a payment link with your client'
313+
text: (
314+
<FormattedMessage
315+
id="welcome.usecases.service.item3"
316+
defaultMessage="Share a payment link with your client"
317+
/>
318+
)
252319
},
253320
{
254-
id: 'welcome.usecases.service.item4',
255-
defaultMessage: 'Deliver the work'
321+
text: (
322+
<FormattedMessage
323+
id="welcome.usecases.service.item4"
324+
defaultMessage="Deliver the work"
325+
/>
326+
)
256327
},
257328
{
258-
id: 'welcome.usecases.service.item5',
259-
defaultMessage: 'Receive payouts directly to your bank account'
329+
text: (
330+
<FormattedMessage
331+
id="welcome.usecases.service.item5"
332+
defaultMessage="Receive payouts directly to your bank account"
333+
/>
334+
)
260335
},
261336
{
262-
id: 'welcome.usecases.service.item6',
263-
defaultMessage:
264-
'This works for developers, consultants, freelancers, and service providers who want a simple way to request payment.'
337+
text: (
338+
<FormattedMessage
339+
id="welcome.usecases.service.item6"
340+
defaultMessage="This works for developers, consultants, freelancers, and service providers who want a simple way to request payment."
341+
/>
342+
)
265343
}
266344
],
267345
image: paymentCycleImage,

‎frontend/src/components/design-library/pages/public-pages/private-projects-public-page/private-projects-public-page.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ const PrivateProjectsPublicPage = () => {
1616
<SectionHero
1717
contrast
1818
title="How it works"
19-
animation="/lottie/project-development.lottie"
19+
animation="/lottie/how-it-works.lottie"
2020
items={[
2121
{
2222
icon: <Paid />,

‎frontend/src/translations/generated/br.json‎

Lines changed: 18 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1006,5 +1006,22 @@
10061006
"welcome.secondary.hero.item2.primary": "",
10071007
"welcome.secondary.hero.item2.secondary": "",
10081008
"welcome.secondary.hero.item3.primary": "",
1009-
"welcome.secondary.hero.item3.secondary": ""
1009+
"welcome.secondary.hero.item3.secondary": "",
1010+
"welcome.usecases.opensource.item1": "",
1011+
"welcome.usecases.opensource.item2": "",
1012+
"welcome.usecases.opensource.item3": "",
1013+
"welcome.usecases.opensource.item4": "",
1014+
"welcome.usecases.opensource.item5": "",
1015+
"welcome.usecases.private.item1": "",
1016+
"welcome.usecases.private.item2": "",
1017+
"welcome.usecases.private.item3": "",
1018+
"welcome.usecases.private.item4": "",
1019+
"welcome.usecases.private.item5": "",
1020+
"welcome.usecases.private.item6": "",
1021+
"welcome.usecases.service.item1": "",
1022+
"welcome.usecases.service.item2": "",
1023+
"welcome.usecases.service.item3": "",
1024+
"welcome.usecases.service.item4": "",
1025+
"welcome.usecases.service.item5": "",
1026+
"welcome.usecases.service.item6": ""
10101027
}

‎frontend/src/translations/generated/en.json‎

Lines changed: 18 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1006,5 +1006,22 @@
10061006
"welcome.secondary.hero.item2.primary": "Review, approve, and pay",
10071007
"welcome.secondary.hero.item2.secondary": "Once delivery is verified, Gitpay helps release payouts to contributors or service providers, so payment follows approved work with clear accountability.",
10081008
"welcome.secondary.hero.item3.primary": "Manage ongoing collaboration",
1009-
"welcome.secondary.hero.item3.secondary": "From open source tasks to private contracts, Gitpay gives maintainers, contributors, sponsors, and service providers a transparent flow to track work and payments end to end."
1009+
"welcome.secondary.hero.item3.secondary": "From open source tasks to private contracts, Gitpay gives maintainers, contributors, sponsors, and service providers a transparent flow to track work and payments end to end.",
1010+
"welcome.usecases.opensource.item1": "Fund and solve issues in public repositories.",
1011+
"welcome.usecases.opensource.item2": "Sponsors fund issues",
1012+
"welcome.usecases.opensource.item3": "Contributors pick issues to solve",
1013+
"welcome.usecases.opensource.item4": "Work is delivered through pull requests",
1014+
"welcome.usecases.opensource.item5": "Gitpay handles payouts once the PR is merged",
1015+
"welcome.usecases.private.item1": "Fund work inside private repositories or internal projects.",
1016+
"welcome.usecases.private.item2": "Companies fund tasks or features",
1017+
"welcome.usecases.private.item3": "Developers submit work through pull requests",
1018+
"welcome.usecases.private.item4": "Maintainers verify delivery by merging the PR",
1019+
"welcome.usecases.private.item5": "Gitpay releases the payment automatically",
1020+
"welcome.usecases.private.item6": "This works well for contract work, agencies, and on-demand development services.",
1021+
"welcome.usecases.service.item1": "Receive payments for delivered work.",
1022+
"welcome.usecases.service.item2": "Create a payment request",
1023+
"welcome.usecases.service.item3": "Share a payment link with your client",
1024+
"welcome.usecases.service.item4": "Deliver the work",
1025+
"welcome.usecases.service.item5": "Receive payouts directly to your bank account",
1026+
"welcome.usecases.service.item6": "This works for developers, consultants, freelancers, and service providers who want a simple way to request payment."
10101027
}

0 commit comments

Comments
 (0)