Translations

Plant-for-the-Planet-org · May 10, 2021 · 3f25f33 · 3f25f33
1 parent 3beaf6b
commit 3f25f33
Show file tree

Hide file tree

Showing 17 changed files with 183 additions and 109 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -21,6 +21,7 @@ module.exports = {
   plugins: [
     'react',
     '@typescript-eslint',
+    'i18next'
   ],
   rules: {
     'react/react-in-jsx-scope': 'off',
@@ -36,7 +37,8 @@ module.exports = {
     '@typescript-eslint/no-empty-function': 'off',
     'no-empty-pattern': 'off',
     'react/display-name': 'off',
-    'react/no-find-dom-node': 'off'
+    'react/no-find-dom-node': 'off',
+    'i18next/no-literal-string': 'off'
   },
   globals: {
     React: 'writable',

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -46,6 +46,7 @@
     "eslint": "^7.23.0",
     "eslint-config-airbnb": "^18.2.1",
     "eslint-config-prettier": "^8.1.0",
+    "eslint-plugin-i18next": "^5.1.1",
     "eslint-plugin-import": "^2.22.1",
     "eslint-plugin-jsx-a11y": "^6.4.1",
     "eslint-plugin-prettier": "^3.3.1",

diff --git a/public/assets/icons/donation/CreditCard.tsx b/public/assets/icons/donation/CreditCard.tsx
@@ -4,40 +4,16 @@ function CreditCard() {
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"
-      width="33.106"
-      height="19.841"
-      viewBox="0 0 33.106 19.841"
+      width="25"
+      height="20"
+      viewBox="0 0 20 16"
     >
-      <g
-        id="Group_3366"
-        data-name="Group 3366"
-        transform="translate(-8.644 -7.208)"
-      >
-        <path
-          id="Path_9886"
-          data-name="Path 9886"
-          d="M22.553,22.5A10.066,10.066,0,0,1,6,14.951,10.066,10.066,0,0,1,22.553,7.4a10.066,10.066,0,0,1,16.553,7.551A10.066,10.066,0,0,1,22.553,22.5Z"
-          transform="translate(2.644 2.178)"
-          fill="#ed0006"
-          fillRule="evenodd"
-        />
-        <path
-          id="Path_9887"
-          data-name="Path 9887"
-          d="M17.179,22.5a9.845,9.845,0,0,0,0-15.1,10.066,10.066,0,0,1,16.553,7.551A10.066,10.066,0,0,1,17.179,22.5Z"
-          transform="translate(8.018 2.178)"
-          fill="#f9a000"
-          fillRule="evenodd"
-        />
-        <path
-          id="Path_9888"
-          data-name="Path 9888"
-          d="M18.324,21.732a9.845,9.845,0,0,0,0-15.1,9.845,9.845,0,0,0,0,15.1Z"
-          transform="translate(6.872 2.947)"
-          fill="#ff5e00"
-          fillRule="evenodd"
-        />
-      </g>
+      <path
+        fill="#4d5153"
+        d="M20 4H4a1.985 1.985 0 00-1.99 2L2 18a1.993 1.993 0 002 2h16a1.993 1.993 0 002-2V6a1.993 1.993 0 00-2-2zm-1 14H5a1 1 0 01-1-1v-5h16v5a1 1 0 01-1 1zm1-10H4V6h16z"
+        data-name="Path 3011"
+        transform="translate(-2 -4)"
+      ></path>
     </svg>
   );
 }

diff --git a/public/locales/en/common.json b/public/locales/en/common.json
@@ -70,5 +70,23 @@
   "verifyEmailHeader": "Please confirm your email",
   "verifyEmailText": "To secure your account, we need to verify your email. Please check your inbox or spam/junk folder for a confirmation email and then continue to login.",
   "verifyEmailInfo": "If you didn’t receive an email please try logging in again and we’ll send you another email.",
-  "skipLogout":"Continue as guest"
+  "skipLogout":"Continue as guest",
+  "donationProcessedBy":"This donation is processed by Plant-for-the-Planet",
+  "cancelReturn":"Cancel and return to the organisation",
+  "aboutUs":"About Us",
+  "imprint":"Imprint",
+  "privacyTerms":"Privacy & Terms",
+  "contact":"Contact",
+  "faqs":"FAQS",
+  "selectLanguage":"Select Language",
+  "trees":"trees",
+  "logout":"Logout",
+  "directGiftRecipient": "This donation supports {{name}}",
+  "saveGiftDetails": "Save Gift Details",
+  "giftSomeone":"My donation is a gift to someone",
+  "payPalCard":"Use PayPal or Card",
+  "donateNow":"Donate Now",
+  "or":"OR",
+  "donateWith":"Donate with",
+  "donating":"Donating"
 }
diff --git a/src/Donations/Components/DonationsForm.tsx b/src/Donations/Components/DonationsForm.tsx
@@ -1,4 +1,4 @@
-import React, { ReactElement } from "react";
+import React from "react";
 import CustomIcon from "../../../public/assets/icons/CustomIcon";
 import { QueryParamContext } from "../../Layout/QueryParamContext";
 import GiftForm from "../Micros/GiftForm";
@@ -22,8 +22,6 @@ import TreeCostLoader from "../../Common/ContentLoaders/TreeCostLoader";
 import Authentication from "./../Micros/Authentication";
 import { useAuth0 } from "@auth0/auth0-react";
 
-interface Props {}
-
 function DonationsForm() {
   const {
     isGift,
@@ -176,7 +174,9 @@ function DonationsForm() {
                     {option.iconFile}
                     <div className="tree-selection-option-text">
                       <p>{option.treeCount}</p>
-                      <span>trees</span>
+                      <span>
+                        {t('trees')}
+                      </span>
                     </div>
                   </div>
                 );
@@ -213,7 +213,7 @@ function DonationsForm() {
                     }}
                     ref={customInputRef}
                   />
-                  <span>trees</span>
+                  <span>{t('trees')}</span>
                 </div>
               </div>
             </div>

diff --git a/src/Donations/Components/ThankYouComponent.tsx b/src/Donations/Components/ThankYouComponent.tsx
@@ -1,7 +1,6 @@
 import Snackbar from "@material-ui/core/Snackbar";
 import MuiAlert, { AlertProps } from "@material-ui/lab/Alert";
 import React from "react";
-// import tenantConfig from '../../../../tenant.config';
 import { useTranslation } from "react-i18next";
 import { getPaymentType } from "../PaymentMethods/PaymentFunctions";
 import PaymentFailedIllustration from "../../../public/assets/icons/donation/PaymentFailed";

diff --git a/src/Donations/Micros/Authentication.tsx b/src/Donations/Micros/Authentication.tsx
@@ -72,6 +72,7 @@ function Authentication({}: Props): ReactElement {
     }
   }, [isAuthenticated, isLoading]);
 
+  const { t, ready } = useTranslation("common");
   return (
     <div>
       {!isLoading && !isAuthenticated && (
@@ -84,7 +85,7 @@ function Authentication({}: Props): ReactElement {
             })
           }
         >
-          Login & Continue
+          {t('loginContinue')}
         </button>
       )}
 
@@ -93,7 +94,7 @@ function Authentication({}: Props): ReactElement {
           className="login-continue"
           onClick={() => logout({ returnTo: `${process.env.NEXTAUTH_URL}/` })}
         >
-          Logout
+          {t('logout')}
         </button>
       )}
       <VerifyEmailModal
@@ -107,7 +108,17 @@ function Authentication({}: Props): ReactElement {
 
 export default Authentication;
 
-function VerifyEmailModal({ openModal, handleModalClose, logout }) {
+interface VerifyEmailProps {
+  openModal: boolean;
+  handleModalClose: Function;
+  logout: Function;
+}
+
+function VerifyEmailModal({
+  openModal,
+  handleModalClose,
+  logout,
+}: VerifyEmailProps) {
   const { t, ready } = useTranslation("common");
 
   const { theme } = React.useContext(ThemeContext);
@@ -135,14 +146,30 @@ function VerifyEmailModal({ openModal, handleModalClose, logout }) {
           <p className="text-center mt-30">{t("verifyEmailText")}</p>
           <p className="text-center mt-20">{t("verifyEmailInfo")}</p>
           <div className={"mt-30 d-flex column"}>
-            <div className={"d-flex row w-100 justify-content-center align-items-center mailing-buttons"}>
-              <a href="https://mail.google.com/" target="_blank" rel="noopener">
+            <div
+              className={
+                "d-flex row w-100 justify-content-center align-items-center mailing-buttons"
+              }
+            >
+              <a
+                href="https://mail.google.com/"
+                rel="noreferrer"
+                target="_blank"
+              >
                 <GmailIcon />
               </a>
-              <a href="https://www.icloud.com/mail" target="_blank" rel="noopener">
+              <a
+                href="https://www.icloud.com/mail"
+                target="_blank"
+                rel="noreferrer"
+              >
                 <AppleMailIcon />
               </a>
-              <a href="https://outlook.office.com/mail/" target="_blank" rel="noopener">
+              <a
+                href="https://outlook.office.com/mail/"
+                target="_blank"
+                rel="noreferrer"
+              >
                 <OutlookIcon />
               </a>
             </div>

diff --git a/src/Donations/Micros/GiftForm.tsx b/src/Donations/Micros/GiftForm.tsx
@@ -5,9 +5,7 @@ import { useTranslation } from "next-i18next";
 import { QueryParamContext } from "../../Layout/QueryParamContext";
 import ToggleSwitch from "../../Common/InputTypes/ToggleSwitch";
 import CloseIcon from "../../../public/assets/icons/CloseIcon";
-interface Props {
-
-}
+interface Props {}
 
 export default function GiftForm({}: Props): ReactElement {
   const { t } = useTranslation("common");
@@ -22,7 +20,7 @@ export default function GiftForm({}: Props): ReactElement {
     giftMessage: giftDetails.giftMessage,
   };
 
-  const { register, errors, handleSubmit,reset } = useForm({
+  const { register, errors, handleSubmit, reset } = useForm({
     mode: "all",
     defaultValues: defaultDeails,
   });
@@ -39,23 +37,23 @@ export default function GiftForm({}: Props): ReactElement {
     setgiftDetails({ ...giftDetails, ...data });
   };
 
-  const resetGiftForm = () =>{ 
+  const resetGiftForm = () => {
     const defaultDeails = {
-      recipientName: '',
-      email: '',
-      giftMessage: '',
+      recipientName: "",
+      email: "",
+      giftMessage: "",
     };
-    setgiftDetails(defaultDeails)
+    setgiftDetails(defaultDeails);
     reset(defaultDeails);
-  }
+  };
 
   return (
     <div>
       {giftDetails && giftDetails.recipientName === "" ? (
         <div>
           <div className="donations-gift-toggle">
             <label htmlFor="show-gift-form-toggle">
-              My donation is a gift to someone
+              {t('giftSomeone')}
             </label>
             <ToggleSwitch
               name="show-gift-form-toggle"
@@ -110,14 +108,18 @@ export default function GiftForm({}: Props): ReactElement {
               onClick={handleSubmit(onSubmit)}
               className="primary-button w-100 mt-30"
             >
-              Save Gift Details
+              {t('saveGiftDetails')}
             </button>
           </div>
         </div>
       ) : (
         <div className="donation-supports-info mt-10">
-          <p>This donation supports {giftDetails.recipientName}</p>
-          <button onClick={()=>resetGiftForm()}>
+          <p>
+            {t("directGiftRecipient", {
+              name: giftDetails.recipientName,
+            })}
+          </p>
+          <button onClick={() => resetGiftForm()}>
             <CloseIcon />
           </button>
         </div>

diff --git a/src/Donations/Micros/SelectCurrencyModal.tsx b/src/Donations/Micros/SelectCurrencyModal.tsx
@@ -1,12 +1,10 @@
 import Backdrop from "@material-ui/core/Backdrop";
 import Fade from "@material-ui/core/Fade";
 import FormControl from "@material-ui/core/FormControl";
-import FormControlLabel from "@material-ui/core/FormControlLabel";
 import Modal from "@material-ui/core/Modal";
-import RadioGroup from "@material-ui/core/RadioGroup";
 import { withStyles } from "@material-ui/core/styles";
 import Autocomplete from "@material-ui/lab/Autocomplete";
-import React, { useEffect, useState } from "react";
+import React from "react";
 import { useTranslation } from "react-i18next";
 import { ThemeContext } from "../../../styles/themeContext";
 import MaterialTextField from "../../Common/InputTypes/MaterialTextField";
@@ -19,7 +17,7 @@ import { useStylesAutoComplete } from "./../../Common/InputTypes/AutoCompleteCou
 export default function TransitionsModal(props: any) {
   const { openModal, handleModalClose } = props;
 
-  const { setcountry, country, setcurrency, currency } = React.useContext(
+  const { setcountry, country, currency } = React.useContext(
     QueryParamContext
   );
 
@@ -40,7 +38,6 @@ export default function TransitionsModal(props: any) {
     setImportantList(impCountryList);
   }, [currency]);
 
-
   return ready ? (
     <div>
       <Modal
@@ -65,12 +62,10 @@ export default function TransitionsModal(props: any) {
                 value={country}
                 handleChange={(value) => {
                   setcountry(value.countryCode);
-    handleModalClose();
+                  handleModalClose();
                 }}
               />
             </div>
-
-
           </div>
         </Fade>
       </Modal>

diff --git a/src/Donations/Micros/ShareOptions.tsx b/src/Donations/Micros/ShareOptions.tsx
@@ -1,4 +1,4 @@
-import React, { useRef } from 'react';
+import React from 'react';
 import EmailIcon from '../../../public/assets/icons/share/Email';
 import EmailSolid from '../../../public/assets/icons/share/EmailSolid';
 import FacebookIcon from '../../../public/assets/icons/share/Facebook';

diff --git a/src/Donations/PaymentMethods/GiroPayPayments.tsx b/src/Donations/PaymentMethods/GiroPayPayments.tsx
@@ -6,7 +6,7 @@ interface Props {
 }
 
 function GiroPayPayments({ onSubmitPayment }: Props): ReactElement {
-  const { t, i18n, ready } = useTranslation("common");
+  const { t } = useTranslation("common");
 
   return (
     <button

diff --git a/src/Donations/PaymentMethods/PaymentFunctions.ts b/src/Donations/PaymentMethods/PaymentFunctions.ts
@@ -214,7 +214,7 @@ export async function payDonationFunction({
     setPaymentError(t("donate:noPaymentMethodError"));
     return;
   }
-  let payDonationData = getPaymentProviderRequest(
+  const payDonationData = getPaymentProviderRequest(
     gateway,
     paymentSetup,
     paymentMethod