support for bangladesh and fixing issues with checkboxes component

Author: alexanmtz

frontend/.storybook/main.js

@@ -5,10 +5,7 @@ module.exports = {
   ],
   "addons": [
     "@storybook/addon-links",
-    {
-      name: "@storybook/addon-essentials",
-      options: { docs: false, controls: false } // disable Controls to avoid @storybook/icons
-    },
+    "@storybook/addon-essentials",
     "@storybook/addon-interactions"
   ],
   "framework": "@storybook/react",

frontend/src/components/areas/private/features/payment-requests/payment-requests-table.tsx

@@ -98,7 +98,7 @@ export const PaymentRequestsTable = ({ paymentRequests, updatePaymentRequest })
       <PaymentRequestDrawer
         open={!!selectedPaymentRequest}
         onClose={handleCloseDrawer}
-        completed={true}
+        completed={!processingUpdatePaymentRequest}
         onSuccess={handleUpdatePaymentRequest}
         paymentRequest={{
           completed: !processingUpdatePaymentRequest,

frontend/src/components/areas/private/shared/country-codes.js

@@ -3,7 +3,8 @@ export const countryCodes = [
   { country: 'Australia', code: 'AU', image: 'australia' },
   { country: 'Austria', code: 'AT', image: 'austria' },
   { country: 'Belgium', code: 'BE', image: 'belgium' },
-  { country: 'Brazil ', code: 'BR', image: 'brazil' },
+  { country: 'Brazil', code: 'BR', image: 'brazil' },
+  { country: 'Bangladesh', code: 'BD', image: 'bangladesh' },
   { country: 'Bulgaria', code: 'BG', image: 'bulgaria' },
   { country: 'Canada', code: 'CA', image: 'canada' },
   { country: 'Colombia', code: 'CO', image: 'colombia' },
@@ -61,6 +62,7 @@ export const countryCurrencies = [
   { currency: 'Australian Dollar', symbol: 'A$', code: 'AUD', countries: ['AU'] },
   { currency: 'Albanian Lek', symbol: 'Lek', code: 'ALL', countries: ['AL'] },
   { currency: 'Euro', symbol: '€', code: 'EUR', countries: ['AT', 'BE', 'CY', 'EE', 'FI', 'FR', 'DE', 'GR', 'IE', 'IT', 'LV', 'LT', 'LU', 'MT', 'NL', 'PT', 'SK', 'SI', 'ES'] },
+  { currency: 'Bangladeshi Taka', symbol: '৳', code: 'BDT', countries: ['BD'] },
   { currency: 'Brazilian Real', symbol: 'R$', code: 'BRL', countries: ['BR'] },
   { currency: 'Bulgarian Lev', symbol: 'лв', code: 'BGN', countries: ['BG'] },
   { currency: 'Canadian Dollar', symbol: 'C$', code: 'CAD', countries: ['CA'] },

frontend/src/components/design-library/atoms/inputs/checkboxes/checkboxes.stories.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import Checkboxes from './checkboxes';
+import { action } from '@storybook/addon-actions';
 
 export default {
   title: 'Design Library/Atoms/Inputs/Checkboxes',
@@ -28,6 +29,19 @@ WithSelectAll.args = {
   includeSelectAll: true
 };
 
+export const WithOnChange = Template.bind({});
+WithOnChange.args = {
+  completed: true,
+  checkboxes: [
+    { label: 'Option 1', name: 'option1', value: 'option1' },
+    { label: 'Option 2', name: 'option2', value: 'option2' },
+    { label: 'Option 3', name: 'option3', value: 'option3' }
+  ],
+  onChange: (selected) => {
+    action('Selected Checkboxes')(selected);
+  }
+};
+
 export const Loading = Template.bind({});
 Loading.args = {
   checkboxes: [],

frontend/src/components/design-library/atoms/inputs/fields/user-role-field/user-role-field.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import { Grid, Tooltip, Typography } from '@mui/material';
 import { Help } from '@mui/icons-material';
 import Checkboxes from '../../checkboxes/checkboxes';
@@ -7,11 +7,11 @@ import { FormattedMessage } from 'react-intl';
 const UserRoleField = ({ roles, onChange }) => {
   const { data, completed } = roles;
 
-  const checkBoxes = data.map((role) => ({
+  const checkBoxes = useMemo(() => data.map((role) => ({
     label: role.label,
     name: role.name,
     value: role.id
-  }));
+  })), [data]);
 
   return (
     <Grid container spacing={2} alignContent="center" alignItems="center">
@@ -28,6 +28,7 @@ const UserRoleField = ({ roles, onChange }) => {
           checkboxes={checkBoxes}
           includeSelectAll={true}
           onChange={onChange}
+          completed={completed}
         />
       </Grid>
     </Grid>

frontend/src/components/design-library/molecules/form-section/login-form/login-form-signup/login-form-signup.stories.tsx

@@ -1,21 +1,24 @@
 import React from 'react';
+import { action } from '@storybook/addon-actions';
 import LoginFormSignup from './login-form-signup';
 
 export default {
   title: 'Design Library/Molecules/FormSection/LoginForm/LoginFormSignup',
-  component: LoginFormSignup
+  component: LoginFormSignup,
+  controls: { expanded: true }
 };
 
 const Template = (args) => <LoginFormSignup {...args} />;
 
 export const Default = Template.bind({});
 Default.args = {
+  onSubmit: action('onSubmit'),
   roles: {
     completed: true,
     data: [
-      { id: '1', name: 'contributor' },
-      { id: '2', name: 'sponsor' },
-      { id: '3', name: 'maintainer' }
+      { id: 1, name: 'contributor', label: 'Contributor' },
+      { id: 2, name: 'sponsor', label: 'Sponsor' },
+      { id: 3, name: 'maintainer', label: 'Maintainer' }
     ]
   },
   fetchRoles: () => {}

frontend/src/components/design-library/molecules/form-section/login-form/login-form-signup/login-form-signup.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react'
+import React, { useCallback, useEffect, useState } from 'react'
 import { FormattedMessage } from 'react-intl'
 import {
   Button,
@@ -42,7 +42,7 @@ const LoginFormSignup = ({
   roles,
   fetchRoles
 }: LoginFormSignupProps) => {
-  
+
   const [openTermsDialog, setOpenTermsDialog] = useState(false)
   const [openPrivacyDialog, setOpenPrivacyDialog] = useState(false)
   const [validating, setValidating] = useState(false)
@@ -68,9 +68,9 @@ const LoginFormSignup = ({
     setState({ ...state, [name]: value })
   }
 
-  const handleTypesChange = (name) => (checked) => {
-    setState({ ...state, [name]: checked })
-  }
+  const handleTypesChange = useCallback((checked) => {
+    setState(prev => ({ ...prev, Types: checked }))
+  }, [])
 
   const handleBlur = () => {
     setValidating(true)
@@ -351,12 +351,12 @@ const LoginFormSignup = ({
           defaultValue={state.confirmPassword}
         />
       </Margins>
-  <Margins>
+      <Margins>
         <UserRoleField
           roles={roles}
-          onChange={handleTypesChange('Types')}
+          onChange={handleTypesChange}
         />
-  </Margins>
+      </Margins>
       <div style={{ display: 'flex', justifyContent: 'flex-start' }}>
         <div style={{ display: 'flex', alignItems: 'center' }}>
           {state.agreeTermsCheck
@@ -408,16 +408,16 @@ const LoginFormSignup = ({
           </Typography>
         </div>
       }
-  <Center style={{ marginTop: 20 }}>
+      <Center style={{ marginTop: 20 }}>
         <div>
           {noCancelButton ? null : (
-    <SpacedButton onClick={onClose} size="large" variant="text" color="primary">
+            <SpacedButton onClick={onClose} size="large" variant="text" color="primary">
               <FormattedMessage id="account.login.label.cancel" defaultMessage="Cancel" />
-    </SpacedButton>
+            </SpacedButton>
           )}
-      <SpacedButton data-testid="signup-button" type="submit" size="large" variant="contained" color="primary">
+          <SpacedButton data-testid="signup-button" type="submit" size="large" variant="contained" color="primary">
             <FormattedMessage id="account.login.label.signup" defaultMessage="Sign up" />
-      </SpacedButton>
+          </SpacedButton>
           <div style={{ marginTop: 20, display: 'flex', alignItems: 'baseline' }}>
             <Typography variant="body1" component="span">
               <FormattedMessage id="account.login.label.or.signup" defaultMessage="Have an account?" />
@@ -427,7 +427,7 @@ const LoginFormSignup = ({
             </Button>
           </div>
         </div>
-  </Center>
+      </Center>
       <TermsDialog open={openTermsDialog} onClose={closeTermsDialog} />
       <PrivacyDialog open={openPrivacyDialog} onClose={closePrivacyDialog} />
     </form>

frontend/src/components/design-library/organisms/forms/payment-request-forms/payment-request-form/payment-request-form.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useRef, forwardRef, useImperativeHandle } from 'react';
+import React, { useState, useRef, forwardRef, useImperativeHandle, useCallback, useMemo } from 'react';
 import { Grid, Typography, TextField, Skeleton } from '@mui/material';
 import { FormattedMessage } from 'react-intl';
 import Field from '../../../../atoms/inputs/fields/field/field';
@@ -70,36 +70,46 @@ const PaymentRequestForm = forwardRef<PaymentRequestFormHandle, PaymentRequestFo
     onSubmit?.(event, data);
   };
 
-  const handleCustomAmountChange = (selected: boolean) => {
+  const handleCustomAmountChange = useCallback((selected: boolean) => {
     setCustomAmount(selected);
-  };
+  }, []);
+
+  const checkboxes = useMemo(() => {
+    const items = [
+      {
+        label: <FormattedMessage id="paymentRequest.form.customAmount" defaultMessage="Custom Amount" />,
+        name: 'custom_amount',
+        value: true,
+        disabled: editMode,
+        defaultChecked: data?.custom_amount,
+        onChange: handleCustomAmountChange
+      },
+      {
+        label: <FormattedMessage id="paymentRequest.form.deactivateAfterPayment" defaultMessage="Deactivate after payment" />,
+        name: 'deactivate_after_payment',
+        value: true,
+        defaultChecked: data?.deactivate_after_payment,
+        disabled: editMode
+      }
+    ];
 
-  const checkboxes = [
-    {
-      label: <FormattedMessage id="paymentRequest.form.customAmount" defaultMessage="Custom Amount" />,
-      name: 'custom_amount',
-      value: true,
-      disabled: editMode,
-      defaultChecked: data?.custom_amount,
-      onChange: handleCustomAmountChange
-    },
-    {
-      label: <FormattedMessage id="paymentRequest.form.deactivateAfterPayment" defaultMessage="Deactivate after payment" />,
-      name: 'deactivate_after_payment',
-      value: true,
-      defaultChecked: data?.deactivate_after_payment,
-      disabled: editMode
+    if (data?.active !== undefined) {
+      items.unshift({
+        label: <FormattedMessage id="paymentRequest.form.active" defaultMessage="Active" />,
+        name: 'active',
+        value: true,
+        defaultChecked: data?.active
+      } as any);
     }
-  ]
 
-  if(data?.active !== undefined) {
-   checkboxes.unshift({
-      label: <FormattedMessage id="paymentRequest.form.active" defaultMessage="Active" />,
-      name: 'active',
-      value: true,
-      defaultChecked: data?.active
-    } as any);
-  }
+    return items;
+  }, [
+    editMode,
+    data?.custom_amount,
+    data?.deactivate_after_payment,
+    data?.active,
+    handleCustomAmountChange
+  ]);
 
   return (
     <form onSubmit={handleSubmit} ref={internalFormRef}>

frontend/src/images/countries/bangladesh.png

@@ -94,6 +94,7 @@ module.exports = {
   sll: { symbol: 'Le', decimalPlaces: 2 }, // Sierra Leonean Leone
   gmd: { symbol: 'D', decimalPlaces: 2 }, // Gambian Dalasi
   lrd: { symbol: 'L$', decimalPlaces: 2 }, // Liberian Dollar
+  bdt: { symbol: '৳', decimalPlaces: 2 }, // Bangladeshi Taka
   xag: { symbol: 'XAG', decimalPlaces: 2 }, // Silver (troy ounce)
   xau: { symbol: 'XAU', decimalPlaces: 2 }, // Gold (troy ounce)
   btc: { symbol: '₿', decimalPlaces: 8 }, // Bitcoin