From 91af43f48eb0cf654344f72ec158f1a84daac8bc Mon Sep 17 00:00:00 2001 From: Florent Date: Fri, 6 Sep 2024 16:17:39 +0200 Subject: [PATCH] feat: translate web-components from Document to forms --- .eslintrc.js | 4 +- bun.lockb | Bin 2017778 -> 2017778 bytes .../src/components/cards/StepCard.tsx | 14 ++- .../src/components/cards/card.stories.tsx | 3 + .../components/document/document.stories.tsx | 2 +- .../src/components/document/index.tsx | 6 +- .../src/components/faq/Category.tsx | 6 ++ .../src/components/faq/Question.tsx | 12 ++- .../src/components/faq/StepFAQs.tsx | 10 +- .../src/components/faq/faq.stories.tsx | 12 ++- web-components/src/components/faq/index.tsx | 14 ++- .../src/components/fixed-footer/BuyFooter.tsx | 10 +- .../fixed-footer/SaveFooter.constants.ts | 1 - .../components/fixed-footer/SaveFooter.tsx | 15 +-- .../fixed-footer/footer.stories.tsx | 11 +++ .../src/components/footer/SocialLinks.tsx | 4 +- .../src/components/footer/footer-new.tsx | 29 +++--- .../src/components/footer/index.tsx | 28 ++++-- .../form/BasketPutForm/BasketPutForm.tsx | 38 +++---- .../src/components/form/BasketTakeForm.tsx | 49 ++++++--- .../src/components/form/CreditRetireForm.tsx | 93 +++++++++++++----- .../src/components/form/MoreInfoForm.tsx | 2 + .../form/OrganizationProfileForm.tsx | 3 +- .../src/components/form/RecipientsForm.tsx | 23 ++++- web-components/src/components/form/Submit.tsx | 8 +- .../src/components/form/form.stories.tsx | 44 +++++++++ .../header/Header.stories.ExtraComponent.tsx | 1 - .../new/RadioGroup/RadioGroup.stories.tsx | 2 +- .../src/components/modal/BasketPutModal.tsx | 21 +++- .../src/components/modal/BasketTakeModal.tsx | 18 ++++ .../src/components/modal/modal.stories.tsx | 27 +++++ .../EcologicalCreditCard.mock.ts | 2 +- .../src/components/atoms/WrappedStepCard.tsx | 7 ++ .../molecules/ProjectPageFooter.tsx | 3 + .../BasketOverview/BasketOverview.modals.tsx | 37 +++++++ .../organisms/BridgeForm/BridgeForm.tsx | 3 + .../BuyCreditsModal/BuyCreditsModal.tsx | 2 + .../CertificationForm/CertificationForm.tsx | 2 + .../CreateSellOrderForm.tsx | 2 + .../CreateCreditClassForm.tsx | 6 ++ .../CreditRetireForm.stories.tsx | 1 + .../CreditRetireForm/CreditRetireForm.tsx | 10 +- .../CreditSendForm/CreditSendForm.tsx | 3 + .../CreditRetireModal.stories.tsx | 1 + .../CreditRetireModal/CreditRetireModal.tsx | 3 + .../RegistryLayout/RegistryLayout.Footer.tsx | 19 ++++ .../MultiStepTemplate/MultiStep.stories.tsx | 2 + .../CreateBatchMultiStepForm.tsx | 25 ++++- .../CreateBatchMultiStepForm/Recipients.tsx | 11 ++- .../src/lib/constants/shared.constants.ts | 3 - .../src/lib/constants/shared.constants.tsx | 50 ++++++++++ .../Dashboard/MyEcocredits/MyEcocredits.tsx | 38 ++++++- .../components/templates/Layout/Layout.tsx | 5 + .../templates/faq/FaqSection/FaqSection.tsx | 3 + 54 files changed, 623 insertions(+), 125 deletions(-) delete mode 100644 web-components/src/components/fixed-footer/SaveFooter.constants.ts delete mode 100644 web-marketplace/src/lib/constants/shared.constants.ts create mode 100644 web-marketplace/src/lib/constants/shared.constants.tsx diff --git a/.eslintrc.js b/.eslintrc.js index b59b85f015..02a9e17804 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -15,13 +15,14 @@ module.exports = { 'lingui/no-unlocalized-strings': [ 1, { - ignoreFunction: ['test'], + ignoreFunction: ['test', 'makeStyles', 'withStyles'], ignoreAttribute: [ 'sx', 'linearGradient', 'rel', 'labelClassName', 'classes', + 'classNames', ], ignoreProperty: [ 'margin', @@ -31,6 +32,7 @@ module.exports = { 'borderTop', 'borderLeft', 'borderBottom', + 'borderRadius', 'flexFlow', 'transition', 'transform', diff --git a/bun.lockb b/bun.lockb index 780b016f4b8eaa2aeb17da6ba5bd53a46ea40955..577a121a6c7759bdfa994124a100e19e1be17d96 100755 GIT binary patch delta 127 zcmew~x%$)O>V_7^7N!>F7M2#)7Pc1l7LFFq7OocV7M>Q~7QPn#7J(MQ7NHj57LhHY z?H-DZaVC0(dd3V4+a;M8I2jlkIy|^)?nvecD?w%2S9pj5u^14G1F-}UO9HVJ5K9BG O3=qq1U*RF=)d&C(pD5`7 delta 127 zcmew~x%$)O>V_7^7N!>F7M2#)7Pc1l7LFFq7OocV7M>Q~7QPn#7J(MQ7NHj57LhHY z?H-Cu3{bFLl8J$nfuW(pgRAC_WR9>BRHl7}hbRz>0kJp`O8~JX5K95EG!V-GvF!F0 I9&%od0ClV;M*si- diff --git a/web-components/src/components/cards/StepCard.tsx b/web-components/src/components/cards/StepCard.tsx index 2db3b7a03a..e9adf1c514 100644 --- a/web-components/src/components/cards/StepCard.tsx +++ b/web-components/src/components/cards/StepCard.tsx @@ -19,6 +19,9 @@ export interface StepCardProps { step?: Step; apiServerUrl?: string; imageStorageBaseUrl?: string; + stepFaqsTitle: string; + copyText: string; + copySuccessText: string; } export interface Step { @@ -123,6 +126,9 @@ function StepCard({ step = fallbackStep, imageStorageBaseUrl, apiServerUrl, + stepFaqsTitle, + copyText, + copySuccessText, }: StepCardProps): JSX.Element { const { classes: styles, cx } = useStyles(); const theme = useTheme(); @@ -215,7 +221,13 @@ function StepCard({ )} {step.faqs && step.faqs.length > 0 && ( - + )} diff --git a/web-components/src/components/cards/card.stories.tsx b/web-components/src/components/cards/card.stories.tsx index f7e0cdd36b..60e9c50298 100644 --- a/web-components/src/components/cards/card.stories.tsx +++ b/web-components/src/components/cards/card.stories.tsx @@ -204,6 +204,9 @@ export const stepCard: React.FC> = () => { description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.', }} + stepFaqsTitle="top faqs" + copyText="Copy" + copySuccessText="Successfully copied!" /> ); }; diff --git a/web-components/src/components/document/document.stories.tsx b/web-components/src/components/document/document.stories.tsx index ac9c4d90b0..6f1fefc802 100644 --- a/web-components/src/components/document/document.stories.tsx +++ b/web-components/src/components/document/document.stories.tsx @@ -6,5 +6,5 @@ export default { }; export const document = (): JSX.Element => ( - + ); diff --git a/web-components/src/components/document/index.tsx b/web-components/src/components/document/index.tsx index 7b4aa83072..f0b9848f5a 100644 --- a/web-components/src/components/document/index.tsx +++ b/web-components/src/components/document/index.tsx @@ -4,8 +4,8 @@ import { makeStyles } from 'tss-react/mui'; export interface DocumentInfo { name: string; - info: string; link: string; + linkText: string; } const useStyles = makeStyles()((theme: Theme) => ({ @@ -34,8 +34,8 @@ const useStyles = makeStyles()((theme: Theme) => ({ export default function Document({ name, - info, link, + linkText, }: DocumentInfo): JSX.Element { const { classes } = useStyles(); return ( @@ -47,7 +47,7 @@ export default function Document({ target="_blank" rel="noopener noreferrer" > - View {info} » + {linkText} ); diff --git a/web-components/src/components/faq/Category.tsx b/web-components/src/components/faq/Category.tsx index 4584534018..ac7fb3b1d1 100644 --- a/web-components/src/components/faq/Category.tsx +++ b/web-components/src/components/faq/Category.tsx @@ -10,6 +10,8 @@ interface CategoryProps { name: string; questionId?: string; questions: QuestionItem[]; + copyText: string; + copySuccessText: string; } const useStyles = makeStyles()((theme: Theme) => ({ @@ -28,6 +30,8 @@ const Category = ({ questions, name, questionId, + copyText, + copySuccessText, }: CategoryProps): JSX.Element => { const { classes } = useStyles(); @@ -43,6 +47,8 @@ const Category = ({ question={q.question} answer={q.answer} isShareable + copyText={copyText} + copySuccessText={copySuccessText} /> ))} diff --git a/web-components/src/components/faq/Question.tsx b/web-components/src/components/faq/Question.tsx index e324a492f6..952a5b92cf 100644 --- a/web-components/src/components/faq/Question.tsx +++ b/web-components/src/components/faq/Question.tsx @@ -20,6 +20,8 @@ export interface QuestionProps extends QuestionItem { last?: boolean; questionId?: string; isShareable?: boolean; + copyText: string; + copySuccessText: string; } interface StyleProps { @@ -92,6 +94,8 @@ const Question = ({ question, answer, questionId, + copyText, + copySuccessText, first = false, last = false, isShareable = false, @@ -137,7 +141,9 @@ const Question = ({ direction="up" /> ) : ( - + )} ) @@ -195,7 +201,7 @@ const Question = ({ )} - {copied && } + {copied && } ); }; diff --git a/web-components/src/components/faq/StepFAQs.tsx b/web-components/src/components/faq/StepFAQs.tsx index b99d65cb25..a5852a3331 100644 --- a/web-components/src/components/faq/StepFAQs.tsx +++ b/web-components/src/components/faq/StepFAQs.tsx @@ -11,6 +11,9 @@ import Question, { QuestionItem } from './Question'; interface StepFAQProps { questionItems: QuestionItem[]; isActive?: boolean; + title: string; + copyText: string; + copySuccessText: string; } const useStyles = makeStyles()((theme: Theme) => ({ @@ -86,6 +89,9 @@ const useStyles = makeStyles()((theme: Theme) => ({ const StepFAQs: React.FC> = ({ questionItems, isActive, + title, + copyText, + copySuccessText, }) => { const { classes, cx } = useStyles(); const theme = useTheme(); @@ -95,7 +101,7 @@ const StepFAQs: React.FC> = ({
- top faqs + {title}
@@ -101,12 +109,14 @@ const FAQ = ({ className={cn(classes.icon, 'text-brand-400')} direction="prev" /> - back + {backText}
) : ( diff --git a/web-components/src/components/fixed-footer/BuyFooter.tsx b/web-components/src/components/fixed-footer/BuyFooter.tsx index 40d5a4cfae..3ed8c7277c 100644 --- a/web-components/src/components/fixed-footer/BuyFooter.tsx +++ b/web-components/src/components/fixed-footer/BuyFooter.tsx @@ -14,14 +14,16 @@ export interface CreditPrice { } interface BuyFooterProps { + creditText: string; + buyText: string; creditPrice?: CreditPrice; - href?: string; onClick?: () => void; } export default function BuyFooter({ creditPrice, - href, + creditText, + buyText, onClick, }: BuyFooterProps): JSX.Element { const theme = useTheme(); @@ -37,7 +39,7 @@ export default function BuyFooter({ {' '} - / credit {creditPrice.currency} + / {creditText} {creditPrice.currency} @@ -50,7 +52,7 @@ export default function BuyFooter({ color={theme.palette.primary.main} /> - buy credits + {buyText} diff --git a/web-components/src/components/fixed-footer/SaveFooter.constants.ts b/web-components/src/components/fixed-footer/SaveFooter.constants.ts deleted file mode 100644 index fc18b4d5f1..0000000000 --- a/web-components/src/components/fixed-footer/SaveFooter.constants.ts +++ /dev/null @@ -1 +0,0 @@ -export const SAVE_EXIT = 'Save draft & exit'; diff --git a/web-components/src/components/fixed-footer/SaveFooter.tsx b/web-components/src/components/fixed-footer/SaveFooter.tsx index b3b1f9ecd7..2bb16a46fa 100644 --- a/web-components/src/components/fixed-footer/SaveFooter.tsx +++ b/web-components/src/components/fixed-footer/SaveFooter.tsx @@ -5,13 +5,12 @@ import LinearProgress from '@mui/material/LinearProgress'; import { Theme } from '@mui/material/styles'; import { makeStyles, withStyles } from 'tss-react/mui'; +import { cn } from '../../utils/styles/cn'; import ContainedButton from '../buttons/ContainedButton'; import OutlinedButton from '../buttons/OutlinedButton'; +import { TextButton } from '../buttons/TextButton'; import ArrowDownIcon from '../icons/ArrowDownIcon'; import FixedFooter from './'; -import { TextButton } from '../buttons/TextButton'; -import { SAVE_EXIT } from './SaveFooter.constants'; -import { cn } from '../../utils/styles/cn'; const StyledLinearProgress = withStyles(LinearProgress, theme => ({ root: { @@ -40,7 +39,8 @@ interface Props { onPrev?: () => void; onSave?: () => void; saveDisabled: boolean; - saveText?: string; + saveText: string; + saveExitText: string; hideProgress?: boolean; // TODO: we should probably use a helper function to calculate this, or it would // be hard to manage. One idea is to have an array with all routes which contain @@ -75,12 +75,13 @@ const useStyles = makeStyles()((theme, { hideProgress }) => ({ })); const SaveFooter: React.FC> = ({ - saveText = 'Next', + saveText, + saveExitText, hideProgress = false, saveAndExit, ...props }) => { - const { classes, cx } = useStyles({ hideProgress }); + const { classes } = useStyles({ hideProgress }); const theme: Theme = useTheme(); return ( @@ -99,7 +100,7 @@ const SaveFooter: React.FC> = ({ textSize="sm" onClick={saveAndExit} > - {SAVE_EXIT} + {saveExitText} )} diff --git a/web-components/src/components/fixed-footer/footer.stories.tsx b/web-components/src/components/fixed-footer/footer.stories.tsx index 7bbed07803..412f8ad50a 100644 --- a/web-components/src/components/fixed-footer/footer.stories.tsx +++ b/web-components/src/components/fixed-footer/footer.stories.tsx @@ -1,6 +1,7 @@ import * as React from 'react'; import FixedFooter from './'; +import BuyFooter from './BuyFooter'; import SaveFooter from './SaveFooter'; import { SwitchFooter } from './SwitchFooter'; @@ -21,10 +22,20 @@ export const fixedFooter = (): JSX.Element => ( ); +export const buyFooter = (): JSX.Element => ( + +); + export const saveFooter = (): JSX.Element => ( null} hideProgress={false} saveDisabled={false} diff --git a/web-components/src/components/footer/SocialLinks.tsx b/web-components/src/components/footer/SocialLinks.tsx index 3aef7b6187..063b3cdf54 100644 --- a/web-components/src/components/footer/SocialLinks.tsx +++ b/web-components/src/components/footer/SocialLinks.tsx @@ -14,6 +14,7 @@ import YoutubeIcon from '../icons/social/YoutubeIcon'; import { Label } from '../typography'; interface Props { + joinText: string; className?: string; } @@ -45,6 +46,7 @@ const useStyles = makeStyles()(theme => ({ })); const SocialLinks: React.FC> = ({ + joinText, className, }) => { const { classes: styles, cx } = useStyles(); @@ -56,7 +58,7 @@ const SocialLinks: React.FC> = ({ mobileSize="sm" sx={{ textAlign: { sm: 'center' }, mb: { xs: 4.5, sm: 3.75 } }} > - join the community + {joinText} >; linkComponent?: React.FC>; + regenText: ReactNode; + dataProviderText: string; + termsText: string; + privacyText: string; + joinText: string; }> > = ({ footerItems, @@ -88,6 +93,11 @@ const Footer: React.FC< privacyUrl, linkComponent: LinkComponent = Link, iconLink: IconLink = HeaderLogoLink, + regenText, + dataProviderText, + termsText, + privacyText, + joinText, }) => { const theme = useTheme(); @@ -119,14 +129,7 @@ const Footer: React.FC< - A project of{' '} - - Regen Network -
Development, PBC - + {regenText} @@ -162,7 +165,7 @@ const Footer: React.FC< - + - Terms + {termsText} {'|'} - Privacy + {privacyText} @@ -201,7 +204,7 @@ const Footer: React.FC< mt: 0.5, }} > - data provided by + {dataProviderText} diff --git a/web-components/src/components/footer/index.tsx b/web-components/src/components/footer/index.tsx index fd7dd4c68c..9ba3a843e6 100644 --- a/web-components/src/components/footer/index.tsx +++ b/web-components/src/components/footer/index.tsx @@ -27,6 +27,11 @@ interface FooterProps { termsUrl: string; privacyUrl: string; apiUri?: string; + subscribeText: string; + newsletterText: string; + termsText: string; + privacyText: string; + joinText: string; } const useStyles = makeStyles()((theme: Theme) => ({ @@ -100,6 +105,11 @@ export default function Footer({ footerItems, termsUrl, privacyUrl, + subscribeText, + newsletterText, + termsText, + privacyText, + joinText, apiUri = 'http://localhost:5000', }: FooterProps): JSX.Element { const { classes } = useStyles(); @@ -146,10 +156,10 @@ export default function Footer({ - Stay up to date! Sign up for our monthly newsletter. + {newsletterText} - + - Terms + {termsText} {' '} |{' '} - Privacy + {privacyText} - {`© ${new Date().getUTCFullYear()} Regen Network Development, PBC`} + + {/* eslint-disable-next-line lingui/no-unlocalized-strings */} + {`© ${new Date().getUTCFullYear()} Regen Network Development, PBC`} + diff --git a/web-components/src/components/form/BasketPutForm/BasketPutForm.tsx b/web-components/src/components/form/BasketPutForm/BasketPutForm.tsx index c4d3ca01ab..34d5d820ec 100644 --- a/web-components/src/components/form/BasketPutForm/BasketPutForm.tsx +++ b/web-components/src/components/form/BasketPutForm/BasketPutForm.tsx @@ -1,5 +1,4 @@ -import React from 'react'; -import { Link } from '@mui/material'; +import React, { ReactNode } from 'react'; import { Field, Form, Formik, FormikErrors } from 'formik'; import { Body } from '../../../components/typography'; @@ -14,6 +13,12 @@ export interface BasketPutProps { basketOptions: Option[]; batchDenoms: string[]; availableTradableAmount: number; + batchLabel: string; + batchDescription: ReactNode; + basketLabel: string; + amountLabel: string; + submitLabel: string; + submitErrorText: string; onSubmit: (values: FormValues) => Promise; onBatchDenomChange?: (batchDenom: string | undefined) => void; } @@ -32,6 +37,12 @@ const BasketPutForm: React.FC> = ({ batchDenoms, basketOptions, availableTradableAmount, + amountLabel, + batchLabel, + batchDescription, + basketLabel, + submitLabel, + submitErrorText, onClose, onSubmit, onBatchDenomChange, @@ -51,7 +62,7 @@ const BasketPutForm: React.FC> = ({ const finalBasketOptions = hasOneBasketDenom ? basketOptions - : [{ value: '', label: 'choose basket' }, ...basketOptions]; + : [{ value: '', label: basketLabel }, ...basketOptions]; const validateHandler = (values: FormValues): FormikErrors => { let errors: FormikErrors = {}; @@ -76,18 +87,8 @@ const BasketPutForm: React.FC> = ({ {hasManyBatchDenoms && ( - {'Choose any ecocredits that are eligible for this basket. '} - - Learn more» - - - } + label={batchLabel} + description={{batchDescription}} component={SelectTextField} options={batchDenomsOptions} native={false} @@ -95,7 +96,7 @@ const BasketPutForm: React.FC> = ({ )} > = ({ /> @@ -115,7 +116,8 @@ const BasketPutForm: React.FC> = ({ isValid={isValid} submitCount={submitCount} submitForm={submitForm} - label="Put in basket" + label={submitLabel} + errorText={submitErrorText} /> diff --git a/web-components/src/components/form/BasketTakeForm.tsx b/web-components/src/components/form/BasketTakeForm.tsx index 7695fb54ce..a726e40da2 100644 --- a/web-components/src/components/form/BasketTakeForm.tsx +++ b/web-components/src/components/form/BasketTakeForm.tsx @@ -63,6 +63,14 @@ export interface BasketTakeProps extends BottomCreditRetireFieldsProps { basketDisplayDenom: string; accountAddress: string; balance: number; + amountErrorText: string; + stateProvinceErrorText: string; + amountLabel: string; + retireOnTakeLabel: string; + retireOnTakeTooltip: string; + retirementInfoText: string; + submitLabel: string; + submitErrorText: string; onSubmit: (values: MsgTakeValues) => void; } @@ -77,6 +85,15 @@ const BasketTakeForm: React.FC> = ({ basket, basketDisplayDenom, balance, + amountErrorText, + amountLabel, + retireOnTakeLabel, + retireOnTakeTooltip, + stateProvinceErrorText, + submitLabel, + submitErrorText, + retirementInfoText, + bottomTextMapping, onClose, onSubmit, }) => { @@ -96,11 +113,7 @@ const BasketTakeForm: React.FC> = ({ ): FormikErrors => { let errors: FormikErrors = {}; - const errAmount = validateAmount( - balance, - values.amount, - `You don't have enough basket tokens`, - ); + const errAmount = validateAmount(balance, values.amount, amountErrorText); if (errAmount) errors.amount = errAmount; // Retire form validation (optional subform) @@ -112,7 +125,12 @@ const BasketTakeForm: React.FC> = ({ stateProvince: values.stateProvince, postalCode: values.postalCode, }; - errors = validateCreditRetire(balance, retirementValues, errors); + errors = validateCreditRetire( + balance, + retirementValues, + errors, + stateProvinceErrorText, + ); } return errors; }; @@ -141,7 +159,7 @@ const BasketTakeForm: React.FC> = ({ <> @@ -153,10 +171,10 @@ const BasketTakeForm: React.FC> = ({ className={styles.checkboxLabel} label={ - Retire credits upon transfer + {retireOnTakeLabel} {values.retireOnTake && !basket?.disableAutoRetire && ( @@ -175,8 +193,14 @@ const BasketTakeForm: React.FC> = ({ {values.retireOnTake && ( <> - - + + )} @@ -188,7 +212,8 @@ const BasketTakeForm: React.FC> = ({ isValid={isValid} submitCount={submitCount} submitForm={submitForm} - label="take from basket" + label={submitLabel} + errorText={submitErrorText} /> )} diff --git a/web-components/src/components/form/CreditRetireForm.tsx b/web-components/src/components/form/CreditRetireForm.tsx index 85656516f1..bc1832481e 100644 --- a/web-components/src/components/form/CreditRetireForm.tsx +++ b/web-components/src/components/form/CreditRetireForm.tsx @@ -69,12 +69,15 @@ const useStyles = makeStyles()((theme: Theme) => ({ }, })); -export interface CreditRetireProps extends CreditRetireFieldsProps { - onSubmit: (values: RetireFormValues) => void; -} +export interface CreditRetireProps extends CreditRetireFieldsProps {} // Input (args) interface FormProps extends CreditRetireProps { + submitLabel: string; + submitErrorText: string; + retirementInfoText: string; + stateProvinceError: string; + onSubmit: (values: RetireFormValues) => void; onClose: RegenModalProps['onClose']; } @@ -97,6 +100,7 @@ interface RetireFormValuesArray { interface CreditRetireFieldsProps extends BottomCreditRetireFieldsProps { batchDenom: string; availableTradableAmount: number; + amountRetiredLabel: string; } const sxs = { @@ -110,11 +114,22 @@ export interface BottomCreditRetireFieldsProps { mapboxToken: string; arrayPrefix?: string; arrayIndex?: number; + bottomTextMapping: { + title: string; + tooltip: string; + reasonLabel: string; + locationTitle: string; + locationTooltip: string; + locationDescription: string; + countryLabel: string; + stateLabel: string; + postalCodeLabel: string; + }; } export const BottomCreditRetireFields: React.FC< React.PropsWithChildren -> = ({ mapboxToken, arrayPrefix = '', arrayIndex }) => { +> = ({ mapboxToken, arrayPrefix = '', arrayIndex, bottomTextMapping }) => { const { classes: styles } = useStyles(); const { values, setFieldValue } = useFormikContext< RetireFormValues | RetireFormValuesArray @@ -126,6 +141,18 @@ export const BottomCreditRetireFields: React.FC< const { country, stateProvince, postalCode } = item; + const { + countryLabel, + stateLabel, + postalCodeLabel, + locationDescription, + locationTitle, + locationTooltip, + reasonLabel, + title, + tooltip, + } = bottomTextMapping; + useEffect(() => { const retirementJurisdictionName = `${arrayPrefix}retirementJurisdiction`; @@ -164,14 +191,14 @@ export const BottomCreditRetireFields: React.FC< <> - Retirement reason + {title} - + - Location of retirement + {locationTitle} - + - - Please enter a location for the retirement of these credits. This - prevents double counting of credits in different locations. - + {locationDescription} } @@ -207,7 +231,7 @@ export const BottomCreditRetireFields: React.FC< @@ -224,7 +248,7 @@ export const BottomCreditRetireFields: React.FC< @@ -238,12 +262,14 @@ export const CreditRetireFields = ({ mapboxToken, arrayPrefix = '', arrayIndex, -}: CreditRetireFieldsProps): JSX.Element => { + amountRetiredLabel, + bottomTextMapping, +}: CreditRetireProps): JSX.Element => { return ( <> @@ -251,6 +277,7 @@ export const CreditRetireFields = ({ mapboxToken={mapboxToken} arrayPrefix={arrayPrefix} arrayIndex={arrayIndex} + bottomTextMapping={bottomTextMapping} /> ); @@ -258,12 +285,14 @@ export const CreditRetireFields = ({ export const RetirementReminder = ({ sx, + retirementInfoText, }: { + retirementInfoText: string; sx?: SxProps; }): JSX.Element => { return ( - Retirement is permanent and non-reversible. + {retirementInfoText} ); }; @@ -272,12 +301,13 @@ export const validateCreditRetire = ( availableTradableAmount: number, values: RetireFormValues, errors: FormikErrors, + stateProvinceError: string, ): FormikErrors => { if (!values.country) { errors.country = requiredMessage; } if (values.postalCode && !values.stateProvince) { - errors.stateProvince = 'Required with postal code'; + errors.stateProvince = stateProvinceError; } const errAmount = validateAmount( availableTradableAmount, @@ -301,8 +331,14 @@ export const initialValues = { const CreditRetireForm: React.FC = ({ batchDenom, + amountRetiredLabel, availableTradableAmount, mapboxToken, + submitLabel, + submitErrorText, + bottomTextMapping, + retirementInfoText, + stateProvinceError, onClose, onSubmit, }) => { @@ -310,7 +346,12 @@ const CreditRetireForm: React.FC = ({ values: RetireFormValues, ): FormikErrors => { let errors: FormikErrors = {}; - errors = validateCreditRetire(availableTradableAmount, values, errors); + errors = validateCreditRetire( + availableTradableAmount, + values, + errors, + stateProvinceError, + ); return errors; }; @@ -322,11 +363,16 @@ const CreditRetireForm: React.FC = ({ > {({ submitForm, isSubmitting, isValid, submitCount, status }) => (
- + = ({ isValid={isValid} submitCount={submitCount} submitForm={submitForm} - label={'Retire'} + label={submitLabel} + errorText={submitErrorText} /> )} diff --git a/web-components/src/components/form/MoreInfoForm.tsx b/web-components/src/components/form/MoreInfoForm.tsx index 7eaa298436..ca298c25c5 100644 --- a/web-components/src/components/form/MoreInfoForm.tsx +++ b/web-components/src/components/form/MoreInfoForm.tsx @@ -250,6 +250,8 @@ export default function MoreInfoForm({ isValid={isValid} submitCount={submitCount} submitForm={submitForm} + label="Submit" + errorText="Please correct the errors above" /> ); diff --git a/web-components/src/components/form/OrganizationProfileForm.tsx b/web-components/src/components/form/OrganizationProfileForm.tsx index 892f17916a..8414129851 100644 --- a/web-components/src/components/form/OrganizationProfileForm.tsx +++ b/web-components/src/components/form/OrganizationProfileForm.tsx @@ -5,8 +5,8 @@ import { Field, Form, Formik } from 'formik'; import OnBoardingCard from '../cards/OnBoardingCard'; import SaveFooter from '../fixed-footer/SaveFooter'; import ControlledTextField from '../inputs/ControlledTextField'; -import ImageField from '../inputs/ImageField'; import LocationField from '../inputs/LocationField'; +import { ImageField } from '../inputs/new/ImageField/ImageField'; import { requiredMessage } from '../inputs/validation'; interface FormProps { @@ -115,6 +115,7 @@ const OrganizationProfileForm: React.FC> = hideProgress={false} // TODO saveDisabled={(submitCount > 0 && !isValid) || isSubmitting} // TODO percentComplete={0} // TODO + saveExitText="Save and exit" /> ); diff --git a/web-components/src/components/form/RecipientsForm.tsx b/web-components/src/components/form/RecipientsForm.tsx index fb23f90d37..9792bd6933 100644 --- a/web-components/src/components/form/RecipientsForm.tsx +++ b/web-components/src/components/form/RecipientsForm.tsx @@ -32,6 +32,7 @@ const useStyles = makeStyles()((theme: Theme) => ({ })); export interface FormProps extends BottomCreditRetireFieldsProps { + retirementInfoText: string; addressPrefix: string; onSubmit: (values: FormValues) => void; } @@ -112,6 +113,8 @@ export const initialValues = { export const RecipientsForm: React.FC> = ({ addressPrefix, mapboxToken, + bottomTextMapping, + retirementInfoText, onSubmit, }) => { return ( @@ -122,7 +125,11 @@ export const RecipientsForm: React.FC> = ({ > {() => (
- + Next @@ -189,9 +196,15 @@ const AddRecipientButton: React.FC> = ({ ); +export type RecipientsFieldArrayProps = BottomCreditRetireFieldsProps & { + retirementInfoText: string; +}; + export function RecipientsFieldArray({ mapboxToken, -}: BottomCreditRetireFieldsProps): React.ReactElement { + bottomTextMapping, + retirementInfoText, +}: RecipientsFieldArrayProps): React.ReactElement { const { classes: styles } = useStyles(); const { values } = useFormikContext(); @@ -229,7 +242,10 @@ export function RecipientsFieldArray({ {values.recipients[index].withRetire && ( <> - + ({ @@ -44,7 +45,8 @@ export default function Submit({ isValid, submitCount, submitForm = () => void 0, - label = 'submit', + label, + errorText, }: SubmitProps): JSX.Element { const { classes } = useStyles(); return ( @@ -62,7 +64,7 @@ export default function Submit({ type="submit" > {submitCount > 0 && !isValid && ( - Please correct the errors above + {errorText} )} {status && status.serverError && ( {status.serverError} diff --git a/web-components/src/components/form/form.stories.tsx b/web-components/src/components/form/form.stories.tsx index c18518ebac..14b68930a8 100644 --- a/web-components/src/components/form/form.stories.tsx +++ b/web-components/src/components/form/form.stories.tsx @@ -1,3 +1,5 @@ +import { Link } from '@mui/material'; + import { BasketPutForm } from './BasketPutForm/BasketPutForm'; import { BasketTakeForm } from './BasketTakeForm'; // import OrganizationProfileForm from './OrganizationProfileForm'; @@ -11,6 +13,21 @@ export default { const MAPBOX_TOKEN = import.meta.env.STORYBOOK_MAPBOX_TOKEN || ''; +export const bottomTextMapping = { + title: 'Retirement reason', + tooltip: + 'You can add the name of the organization or person you are retiring the credits on behalf of here (i.e. "Retired on behalf of ABC Organization")', + reasonLabel: 'Explain the reason you are retiring these credits', + locationTitle: 'Location of retirement', + locationTooltip: + 'The retirement location can be where you live or your business operates.', + locationDescription: + 'Please enter a location for the retirement of these credits. This prevents double counting of credits in different locations.', + countryLabel: 'Country', + stateLabel: 'State / Region', + postalCodeLabel: 'Postal Code', +}; + const submit = async (): Promise => { return new Promise((resolve, reject) => { setTimeout(resolve, 1000); @@ -43,6 +60,22 @@ export const basketPutForm = (): JSX.Element => ( onClose={() => null} onSubmit={async () => alert('submit')} onBatchDenomChange={batchDenom => console.log(batchDenom)} + batchLabel="Choose ecocredits batch" + batchDescription={ + <> + {'Choose any ecocredits that are eligible for this basket. '} + + Learn more» + + + } + basketLabel="Choose basket" + amountLabel="Amount" + submitLabel="Put in basket" + submitErrorText="Please correct the errors above" /> ); @@ -63,6 +96,15 @@ export const basketTakeForm = (): JSX.Element => ( mapboxToken={MAPBOX_TOKEN} onClose={() => null} onSubmit={async () => alert('submit')} + amountErrorText="You don't have enough basket tokens" + stateProvinceErrorText="Required with postal code" + amountLabel="Amount" + retireOnTakeLabel="Retire credits upon transfer" + retireOnTakeTooltip="The creator of this basket has chosen that all credits must be retired upon take." + submitLabel="take from basket" + submitErrorText="Please correct the errors above" + retirementInfoText="Retirement is permanent and non-reversible." + bottomTextMapping={bottomTextMapping} /> ); @@ -73,5 +115,7 @@ export const creditBatchRecipientsForm = (): JSX.Element => ( onSubmit={async (values: FormValues) => alert('submit' + JSON.stringify(values, null, 2)) } + bottomTextMapping={bottomTextMapping} + retirementInfoText="Retirement is permanent and non-reversible." /> ); diff --git a/web-components/src/components/header/Header.stories.ExtraComponent.tsx b/web-components/src/components/header/Header.stories.ExtraComponent.tsx index 9ff5919d1e..74527fcb0c 100644 --- a/web-components/src/components/header/Header.stories.ExtraComponent.tsx +++ b/web-components/src/components/header/Header.stories.ExtraComponent.tsx @@ -18,7 +18,6 @@ export const ExtraComponent = (): JSX.Element => { {address && ( setAddress('')} pathname={''} diff --git a/web-components/src/components/inputs/new/RadioGroup/RadioGroup.stories.tsx b/web-components/src/components/inputs/new/RadioGroup/RadioGroup.stories.tsx index 95a151d409..572f5d702a 100644 --- a/web-components/src/components/inputs/new/RadioGroup/RadioGroup.stories.tsx +++ b/web-components/src/components/inputs/new/RadioGroup/RadioGroup.stories.tsx @@ -25,7 +25,7 @@ const Template: ComponentStory = args => { selectedValue={selectedValue} sx={{ mt: 5.25 }} > - + {}} /> > = ({ + title, basketOptions, batchDenoms, availableTradableAmount, open, + batchLabel, + batchDescription, + basketLabel, + amountLabel, + submitLabel, + submitErrorText, onClose, onSubmit, onBatchDenomChange, }) => ( - + > = onClose={onClose} onSubmit={onSubmit} onBatchDenomChange={onBatchDenomChange} + batchLabel={batchLabel} + batchDescription={batchDescription} + basketLabel={basketLabel} + amountLabel={amountLabel} + submitLabel={submitLabel} + submitErrorText={submitErrorText} /> ); diff --git a/web-components/src/components/modal/BasketTakeModal.tsx b/web-components/src/components/modal/BasketTakeModal.tsx index 4735f04e6f..a0a68fd099 100644 --- a/web-components/src/components/modal/BasketTakeModal.tsx +++ b/web-components/src/components/modal/BasketTakeModal.tsx @@ -18,6 +18,15 @@ const BasketTakeModal: React.FC> = ({ accountAddress, open, mapboxToken, + amountErrorText, + amountLabel, + retireOnTakeLabel, + retireOnTakeTooltip, + submitLabel, + submitErrorText, + bottomTextMapping, + retirementInfoText, + stateProvinceErrorText, onClose, onSubmit, }) => { @@ -36,6 +45,15 @@ const BasketTakeModal: React.FC> = ({ basketDisplayDenom={basketDisplayDenom} onClose={onClose} onSubmit={onSubmit} + amountErrorText={amountErrorText} + amountLabel={amountLabel} + retireOnTakeLabel={retireOnTakeLabel} + retireOnTakeTooltip={retireOnTakeTooltip} + submitLabel={submitLabel} + submitErrorText={submitErrorText} + bottomTextMapping={bottomTextMapping} + retirementInfoText={retirementInfoText} + stateProvinceErrorText={stateProvinceErrorText} /> ); diff --git a/web-components/src/components/modal/modal.stories.tsx b/web-components/src/components/modal/modal.stories.tsx index fd31aab20b..6093c1a995 100644 --- a/web-components/src/components/modal/modal.stories.tsx +++ b/web-components/src/components/modal/modal.stories.tsx @@ -1,6 +1,7 @@ import React, { useState } from 'react'; import { Avatar, Button, Card, CardMedia, Link } from '@mui/material'; +import { bottomTextMapping } from '../form/form.stories'; import { SocialItemsMock } from '../share-section/ShareSection.mock'; import Modal from '.'; import { BasketPutModal } from './BasketPutModal'; @@ -176,12 +177,29 @@ export const txErrorModal = (): JSX.Element => ( export const basketPutModal = (): JSX.Element => ( null} onSubmit={async () => alert('submit')} + batchLabel="Choose ecocredits batch" + batchDescription={ + <> + {'Choose any ecocredits that are eligible for this basket. '} + + Learn more» + + + } + basketLabel="Choose basket" + amountLabel="Amount" + submitLabel="Put in basket" + submitErrorText="Please correct the errors above" /> ); @@ -207,6 +225,15 @@ export const basketTakeModal = (): JSX.Element => ( mapboxToken={MAPBOX_TOKEN} onClose={() => null} onSubmit={() => alert('submit')} + amountErrorText="You don't have enough basket tokens" + stateProvinceErrorText="Required with postal code" + amountLabel="Amount" + retireOnTakeLabel="Retire credits upon transfer" + retireOnTakeTooltip="The creator of this basket has chosen that all credits must be retired upon take." + submitLabel="take from basket" + submitErrorText="Please correct the errors above" + retirementInfoText="Retirement is permanent and non-reversible." + bottomTextMapping={bottomTextMapping} /> ); diff --git a/web-components/src/components/molecules/EcologicalCreditCard/EcologicalCreditCard.mock.ts b/web-components/src/components/molecules/EcologicalCreditCard/EcologicalCreditCard.mock.ts index 4b135b7322..41f532aa12 100644 --- a/web-components/src/components/molecules/EcologicalCreditCard/EcologicalCreditCard.mock.ts +++ b/web-components/src/components/molecules/EcologicalCreditCard/EcologicalCreditCard.mock.ts @@ -4,7 +4,7 @@ export const EcologicalCreditCardMock: EcologicalCreditCardProps = { image: { src: 'https://cdn.sanity.io/images/jm12rn9t/staging/16afff120712a3e148efa306ff362c409403209b-720x635.jpg?w=2000&fit=max&auto=format', }, - type: { + creditCategory: { icon: { src: 'https://cdn.sanity.io/images/jm12rn9t/staging/c6de355349dec9f4914fea0705e293596d40f068-66x106.svg', alt: 'co2', diff --git a/web-marketplace/src/components/atoms/WrappedStepCard.tsx b/web-marketplace/src/components/atoms/WrappedStepCard.tsx index b08f253959..a120fc0194 100644 --- a/web-marketplace/src/components/atoms/WrappedStepCard.tsx +++ b/web-marketplace/src/components/atoms/WrappedStepCard.tsx @@ -1,4 +1,6 @@ import React from 'react'; +import { msg } from '@lingui/macro'; +import { useLingui } from '@lingui/react'; import { BlockContent } from 'web-components/src/components/block-content'; import { StepCard } from 'web-components/src/components/cards/StepCard'; @@ -16,6 +18,8 @@ const WrappedStepCard: React.FC< stepCard: Maybe; }> > = ({ openModal, stepNumber, stepCard }) => { + const { _ } = useLingui(); + if (!stepCard) { return null; } @@ -53,6 +57,9 @@ const WrappedStepCard: React.FC< btnText: button?.buttonText, onBtnClick: () => onBtnClick(openModal, button), }} + stepFaqsTitle={_(msg`top faqs`)} + copyText={_(msg`Copy`)} + copySuccessText={_(msg`Successfully copied!`)} /> ); }; diff --git a/web-marketplace/src/components/molecules/ProjectPageFooter.tsx b/web-marketplace/src/components/molecules/ProjectPageFooter.tsx index 85041a0530..6e9f6f2e81 100644 --- a/web-marketplace/src/components/molecules/ProjectPageFooter.tsx +++ b/web-marketplace/src/components/molecules/ProjectPageFooter.tsx @@ -5,6 +5,8 @@ import { useLingui } from '@lingui/react'; import SaveFooter from 'web-components/src/components/fixed-footer/SaveFooter'; +import { SAVE_EXIT_TEXT, SAVE_TEXT } from 'lib/constants/shared.constants'; + import { getProjectCreationPercentage } from 'pages/ProjectCreate/ProjectCreate.utils'; import { useProjectEditContext } from '../../pages/ProjectEdit'; @@ -51,6 +53,7 @@ const ProjectPageFooter: React.FC> = ({ saveDisabled={saveDisabled} percentComplete={percentage} saveAndExit={saveAndExit} + saveExitText={_(SAVE_EXIT_TEXT)} /> ); }; diff --git a/web-marketplace/src/components/organisms/BasketOverview/BasketOverview.modals.tsx b/web-marketplace/src/components/organisms/BasketOverview/BasketOverview.modals.tsx index 9287e99c15..4402b9e925 100644 --- a/web-marketplace/src/components/organisms/BasketOverview/BasketOverview.modals.tsx +++ b/web-marketplace/src/components/organisms/BasketOverview/BasketOverview.modals.tsx @@ -1,4 +1,6 @@ +import { useMemo } from 'react'; import { useLingui } from '@lingui/react'; +import { Link } from '@mui/material'; import { ERRORS } from 'config/errors'; import { useAtom, useSetAtom } from 'jotai'; @@ -11,6 +13,21 @@ import { processingModalAtom, txSuccessfulModalAtom, } from 'lib/atoms/modals.atoms'; +import { + AMOUNT_LABEL, + BASKET_LABEL, + BASKET_PUT_SUBMIT_LABEL, + BASKET_TAKE_AMOUNT_ERROR_TEXT, + BASKET_TAKE_SUBMIT_LABEL, + BATCH_DESCRIPTION, + BATCH_LABEL, + getBottomFieldsTextMapping, + RETIRE_ON_TAKE_LABEL, + RETIRE_ON_TAKE_TOOLTIP, + RETIREMENT_INFO_TEXT, + STATE_PROVINCE_ERROR_TEXT, + SUBMIT_ERROR_TEXT, +} from 'lib/constants/shared.constants'; import { useWallet } from 'lib/wallet/wallet'; import { basketDetailAtom } from 'pages/BasketDetails/BasketDetails.store'; @@ -50,6 +67,10 @@ export const BasketOverviewModals = ({ const { wallet } = useWallet(); const accountAddress = wallet?.address ?? ''; const mapboxToken = import.meta.env.VITE_MAPBOX_TOKEN || ''; + const bottomFieldsTextMapping = useMemo( + () => getBottomFieldsTextMapping(_), + [_], + ); // Modals callbacks const onClosePutModal = (): void => @@ -129,6 +150,13 @@ export const BasketOverviewModals = ({ atom => void (atom.creditBatchDenom = batchDenom ?? ''), ) } + batchLabel={_(BATCH_LABEL)} + batchDescription={BATCH_DESCRIPTION} + basketLabel={_(BASKET_LABEL)} + amountLabel={_(AMOUNT_LABEL)} + submitLabel={_(BASKET_PUT_SUBMIT_LABEL)} + submitErrorText={_(SUBMIT_ERROR_TEXT)} + title={_(BASKET_PUT_SUBMIT_LABEL)} /> diff --git a/web-marketplace/src/components/organisms/BridgeForm/BridgeForm.tsx b/web-marketplace/src/components/organisms/BridgeForm/BridgeForm.tsx index 109f80aed8..9185979b2d 100644 --- a/web-marketplace/src/components/organisms/BridgeForm/BridgeForm.tsx +++ b/web-marketplace/src/components/organisms/BridgeForm/BridgeForm.tsx @@ -14,6 +14,8 @@ import { } from 'web-components/src/components/inputs/validation'; import { RegenModalProps } from 'web-components/src/components/modal'; +import { SUBMIT_ERRORS } from 'lib/constants/shared.constants'; + import AgreeErpaCheckbox from 'components/atoms/AgreeErpaCheckbox'; // eslint-disable-next-line lingui/no-unlocalized-strings @@ -111,6 +113,7 @@ const BridgeForm = ({ submitCount={submitCount} submitForm={submitForm} label="bridge" + errorText={_(SUBMIT_ERRORS)} /> )} diff --git a/web-marketplace/src/components/organisms/BuyCreditsModal/BuyCreditsModal.tsx b/web-marketplace/src/components/organisms/BuyCreditsModal/BuyCreditsModal.tsx index dfa56e3201..b208f82333 100644 --- a/web-marketplace/src/components/organisms/BuyCreditsModal/BuyCreditsModal.tsx +++ b/web-marketplace/src/components/organisms/BuyCreditsModal/BuyCreditsModal.tsx @@ -36,6 +36,7 @@ import { import { useLedger } from 'ledger'; import { client } from 'lib/clients/sanity'; +import { SUBMIT_ERRORS } from 'lib/constants/shared.constants'; import { microToDenom } from 'lib/denom.utils'; import { getAllowedDenomQuery } from 'lib/queries/react-query/ecocredit/marketplace/getAllowedDenomQuery/getAllowedDenomQuery'; import { getBuyModalQuery } from 'lib/queries/react-query/sanity/getBuyModalQuery/getBuyModalQuery'; @@ -584,6 +585,7 @@ const BuyCreditsModal: React.FC> = submitCount={submitCount} submitForm={submitForm} label="purchase" + errorText={_(SUBMIT_ERRORS)} /> ); diff --git a/web-marketplace/src/components/organisms/CertificationForm/CertificationForm.tsx b/web-marketplace/src/components/organisms/CertificationForm/CertificationForm.tsx index a19ac07ffe..7f6c50fa6d 100644 --- a/web-marketplace/src/components/organisms/CertificationForm/CertificationForm.tsx +++ b/web-marketplace/src/components/organisms/CertificationForm/CertificationForm.tsx @@ -13,6 +13,7 @@ import { } from 'web-components/src/components/inputs/validation'; import { RegenModalProps } from 'web-components/src/components/modal'; +import { SUBMIT_ERRORS } from 'lib/constants/shared.constants'; import { NameUrl } from 'lib/rdf/types'; export interface CertificationProps { @@ -76,6 +77,7 @@ const CertificationForm: React.FC> = ({ submitCount={submitCount} submitForm={submitForm} label="save" + errorText={_(SUBMIT_ERRORS)} /> diff --git a/web-marketplace/src/components/organisms/CreateSellOrderForm/CreateSellOrderForm.tsx b/web-marketplace/src/components/organisms/CreateSellOrderForm/CreateSellOrderForm.tsx index 9338b6070e..620abeb92c 100644 --- a/web-marketplace/src/components/organisms/CreateSellOrderForm/CreateSellOrderForm.tsx +++ b/web-marketplace/src/components/organisms/CreateSellOrderForm/CreateSellOrderForm.tsx @@ -19,6 +19,7 @@ import InfoTooltip from 'web-components/src/components/tooltip/InfoTooltip'; import { Subtitle } from 'web-components/src/components/typography'; import { errorBannerTextAtom } from 'lib/atoms/error.atoms'; +import { SUBMIT_ERRORS } from 'lib/constants/shared.constants'; import { Sell2Event } from 'lib/tracker/types'; import { useTracker } from 'lib/tracker/useTracker'; @@ -190,6 +191,7 @@ const CreateSellOrderForm: React.FC = ({ isValid={isValid} submitCount={submitCount} label={_(msg`Create Sell Order`)} + errorText={_(SUBMIT_ERRORS)} /> ); diff --git a/web-marketplace/src/components/organisms/CreditClassForms/CreateCreditClassForm.tsx b/web-marketplace/src/components/organisms/CreditClassForms/CreateCreditClassForm.tsx index 93967810d4..9440c20bef 100644 --- a/web-marketplace/src/components/organisms/CreditClassForms/CreateCreditClassForm.tsx +++ b/web-marketplace/src/components/organisms/CreditClassForms/CreateCreditClassForm.tsx @@ -1,9 +1,11 @@ import { msg } from '@lingui/macro'; +import { useLingui } from '@lingui/react'; import { Formik } from 'formik'; import SaveFooter from 'web-components/src/components/fixed-footer/SaveFooter'; import NotFound from 'web-components/src/components/views/NotFoundView'; +import { SAVE_EXIT_TEXT, SAVE_TEXT } from 'lib/constants/shared.constants'; import { TranslatorType } from 'lib/i18n/i18n.types'; import { useMultiStep } from 'components/templates/MultiStepTemplate'; @@ -61,6 +63,8 @@ const CurrentStep = (props: { export const CreateCreditClassForm = (props: { onSubmit: (values: CreditClassValues) => void; }): JSX.Element => { + const { _ } = useLingui(); + const { data, percentComplete, @@ -93,6 +97,8 @@ export const CreateCreditClassForm = (props: { onSave={handleNext} // TODO this should handle submission saveDisabled={!isValid || isSubmitting} percentComplete={percentComplete} + saveExitText={_(SAVE_EXIT_TEXT)} + saveText={_(SAVE_TEXT)} /> )} diff --git a/web-marketplace/src/components/organisms/CreditRetireForm/CreditRetireForm.stories.tsx b/web-marketplace/src/components/organisms/CreditRetireForm/CreditRetireForm.stories.tsx index 88f7504d46..7e31284fe3 100644 --- a/web-marketplace/src/components/organisms/CreditRetireForm/CreditRetireForm.stories.tsx +++ b/web-marketplace/src/components/organisms/CreditRetireForm/CreditRetireForm.stories.tsx @@ -9,6 +9,7 @@ export const creditRetireForm = (): JSX.Element => ( mapboxToken={MAPBOX_TOKEN} onClose={() => null} onSubmit={async () => alert('submit')} + retirementInfoText="Retirement is permanent and non-reversible." /> ); diff --git a/web-marketplace/src/components/organisms/CreditRetireForm/CreditRetireForm.tsx b/web-marketplace/src/components/organisms/CreditRetireForm/CreditRetireForm.tsx index c8636e981e..1f7a33591a 100644 --- a/web-marketplace/src/components/organisms/CreditRetireForm/CreditRetireForm.tsx +++ b/web-marketplace/src/components/organisms/CreditRetireForm/CreditRetireForm.tsx @@ -9,6 +9,8 @@ import Submit from 'web-components/src/components/form/Submit'; import AmountField from 'web-components/src/components/inputs/new/AmountField/AmountField'; import { RegenModalProps } from 'web-components/src/components/modal'; +import { SUBMIT_ERRORS } from 'lib/constants/shared.constants'; + import { BottomCreditRetireFields } from 'components/molecules/BottomCreditRetireFields/BottomCreditRetireFields'; import Form from 'components/molecules/Form/Form'; import { useZodForm } from 'components/molecules/Form/hook/useZodForm'; @@ -29,6 +31,7 @@ export interface CreditRetireFormProps { onSubmit: (values: CreditRetireFormSchemaType) => Promise; onClose: RegenModalProps['onClose']; mapboxToken: string; + retirementInfoText: string; } const CreditRetireForm: React.FC< @@ -36,6 +39,7 @@ const CreditRetireForm: React.FC< > = ({ batchDenom, availableTradableAmount, + retirementInfoText, mapboxToken, onClose, onSubmit, @@ -81,7 +85,10 @@ const CreditRetireForm: React.FC< } }} > - + @@ -112,6 +119,7 @@ const CreditRetireForm: React.FC< isValid={isValid} submitCount={submitCount} label={_(msg`Retire`)} + errorText={_(SUBMIT_ERRORS)} /> diff --git a/web-marketplace/src/components/organisms/CreditSendForm/CreditSendForm.tsx b/web-marketplace/src/components/organisms/CreditSendForm/CreditSendForm.tsx index fc43ccd935..15dbdcb0b5 100644 --- a/web-marketplace/src/components/organisms/CreditSendForm/CreditSendForm.tsx +++ b/web-marketplace/src/components/organisms/CreditSendForm/CreditSendForm.tsx @@ -16,6 +16,8 @@ import InfoTooltip from 'web-components/src/components/tooltip/InfoTooltip'; import { Subtitle } from 'web-components/src/components/typography'; import { Theme } from 'web-components/src/theme/muiTheme'; +import { SUBMIT_ERRORS } from 'lib/constants/shared.constants'; + import AgreeErpaCheckbox from 'components/atoms/AgreeErpaCheckboxNew'; import { BottomCreditRetireFields } from 'components/molecules/BottomCreditRetireFields/BottomCreditRetireFields'; import Form from 'components/molecules/Form/Form'; @@ -194,6 +196,7 @@ const CreditSendForm: React.FC> = isValid={isValid} submitCount={submitCount} label={_(msg`Send`)} + errorText={_(SUBMIT_ERRORS)} /> diff --git a/web-marketplace/src/components/organisms/Modals/CreditRetireModal/CreditRetireModal.stories.tsx b/web-marketplace/src/components/organisms/Modals/CreditRetireModal/CreditRetireModal.stories.tsx index 2c418f0ea1..2d4bfbadd9 100644 --- a/web-marketplace/src/components/organisms/Modals/CreditRetireModal/CreditRetireModal.stories.tsx +++ b/web-marketplace/src/components/organisms/Modals/CreditRetireModal/CreditRetireModal.stories.tsx @@ -10,6 +10,7 @@ export const creditSendModal = (): JSX.Element => ( open={true} onClose={() => null} onSubmit={async () => alert('submit')} + retirementInfoText="Retirement is permanent and non-reversible." /> ); diff --git a/web-marketplace/src/components/organisms/Modals/CreditRetireModal/CreditRetireModal.tsx b/web-marketplace/src/components/organisms/Modals/CreditRetireModal/CreditRetireModal.tsx index 4348330c18..c7809f2069 100644 --- a/web-marketplace/src/components/organisms/Modals/CreditRetireModal/CreditRetireModal.tsx +++ b/web-marketplace/src/components/organisms/Modals/CreditRetireModal/CreditRetireModal.tsx @@ -4,6 +4,8 @@ import { useLingui } from '@lingui/react'; import { RegenModalProps } from 'web-components/src/components/modal'; import { FormModalTemplate } from 'web-components/src/components/modal/FormModalTemplate'; +import { RETIREMENT_INFO_TEXT } from 'lib/constants/shared.constants'; + import { CreditRetireForm, CreditRetireFormProps, @@ -32,6 +34,7 @@ const CreditRetireModal: React.FC = ({ onClose={onClose} > > = () => { + const { _ } = useLingui(); const { pathname } = useLocation(); const isHidden = ['/project-pages'].some(route => pathname.startsWith(route)); @@ -80,6 +83,22 @@ const RegistryLayoutFooter: React.FC> = () => { linkComponent={Link} privacyUrl={URL_WEB_PRIVACY} termsUrl={URL_REGISTRY_TERMS_SERVICE} + regenText={ + + A project of{' '} + + Regen Network +
Development, PBC + + + } + dataProviderText={_(msg`Regen Data Provider`)} + termsText={_(msg`Terms`)} + privacyText={_(msg`Privacy`)} + joinText={_(msg`join the community`)} /> ); diff --git a/web-marketplace/src/components/templates/MultiStepTemplate/MultiStep.stories.tsx b/web-marketplace/src/components/templates/MultiStepTemplate/MultiStep.stories.tsx index 7fdaf5db97..646b17239f 100644 --- a/web-marketplace/src/components/templates/MultiStepTemplate/MultiStep.stories.tsx +++ b/web-marketplace/src/components/templates/MultiStepTemplate/MultiStep.stories.tsx @@ -43,6 +43,8 @@ const MultiStepContent = (): JSX.Element => { onSave={() => null} saveDisabled={false} percentComplete={percentComplete} + saveExitText="Save and exit" + saveText="Save" /> ); diff --git a/web-marketplace/src/features/ecocredit/CreateBatchBySteps/CreateBatchMultiStepForm/CreateBatchMultiStepForm.tsx b/web-marketplace/src/features/ecocredit/CreateBatchBySteps/CreateBatchMultiStepForm/CreateBatchMultiStepForm.tsx index d82d6a99e2..933908fae5 100644 --- a/web-marketplace/src/features/ecocredit/CreateBatchBySteps/CreateBatchMultiStepForm/CreateBatchMultiStepForm.tsx +++ b/web-marketplace/src/features/ecocredit/CreateBatchBySteps/CreateBatchMultiStepForm/CreateBatchMultiStepForm.tsx @@ -1,4 +1,4 @@ -import React, { useEffect, useState } from 'react'; +import React, { useEffect, useMemo, useState } from 'react'; import { useLingui } from '@lingui/react'; import { Form, Formik, FormikHelpers } from 'formik'; import * as Yup from 'yup'; @@ -8,6 +8,13 @@ import { Option } from 'web-components/src/components/inputs/SelectTextField'; import { ProcessingModal } from 'web-components/src/components/modal/ProcessingModal'; import NotFound from 'web-components/src/components/views/NotFoundView'; +import { + getBottomFieldsTextMapping, + RETIREMENT_INFO_TEXT, + SAVE_EXIT_TEXT, + SUBMIT_TEXT, +} from 'lib/constants/shared.constants'; + import { useMultiStep } from 'components/templates/MultiStepTemplate'; import getFormModel from '../form-model'; @@ -67,6 +74,11 @@ export default function CreateBatchMultiStepForm(): React.ReactElement { const [projectOptionSelected, setProjectOptionSelected] = useState