From 82cffca125986b605cbb05ac9479c4a851a7838c Mon Sep 17 00:00:00 2001 From: John Plastow Date: Thu, 9 Sep 2021 17:10:53 -0700 Subject: [PATCH 001/103] Minor modal update --- src/components/common/Modal/Modal.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/common/Modal/Modal.tsx b/src/components/common/Modal/Modal.tsx index 05bc71b2e..98cdfacc5 100644 --- a/src/components/common/Modal/Modal.tsx +++ b/src/components/common/Modal/Modal.tsx @@ -53,7 +53,6 @@ const Modal = ({ handleClose()} aria-label={t('Close')}> - {children} ); From a34fd2b613f063c0aad0cb0475fdeac026a547d9 Mon Sep 17 00:00:00 2001 From: John Plastow Date: Fri, 10 Sep 2021 13:37:47 -0700 Subject: [PATCH 002/103] First pass at creating personal preferences page --- .../[accountListId]/preferences/personal.tsx | 17 +++++++++++++++++ .../TopBar/Items/ProfileMenu/ProfileMenu.tsx | 8 ++++++++ 2 files changed, 25 insertions(+) create mode 100644 pages/accountLists/[accountListId]/preferences/personal.tsx diff --git a/pages/accountLists/[accountListId]/preferences/personal.tsx b/pages/accountLists/[accountListId]/preferences/personal.tsx new file mode 100644 index 000000000..74b177ffd --- /dev/null +++ b/pages/accountLists/[accountListId]/preferences/personal.tsx @@ -0,0 +1,17 @@ +import React from 'react'; +import Head from 'next/head'; +import { useTranslation } from 'react-i18next'; +// import { useRouter } from 'next/router'; + +export const PersonalPreferences: React.FC = () => { + const { t } = useTranslation(); + + return ( + <> + + MPDX | {t('Personal Preferences')} + +
Test
+ + ); +}; diff --git a/src/components/Layouts/Primary/TopBar/Items/ProfileMenu/ProfileMenu.tsx b/src/components/Layouts/Primary/TopBar/Items/ProfileMenu/ProfileMenu.tsx index 72843054e..cbd4d159a 100644 --- a/src/components/Layouts/Primary/TopBar/Items/ProfileMenu/ProfileMenu.tsx +++ b/src/components/Layouts/Primary/TopBar/Items/ProfileMenu/ProfileMenu.tsx @@ -212,6 +212,14 @@ const ProfileMenu = (): ReactElement => { + + {/* {t('Preferences')} */} + + From 927b6330e8afbc2e6d30261956fb63a5d555544f Mon Sep 17 00:00:00 2001 From: John Plastow Date: Fri, 10 Sep 2021 16:29:19 -0700 Subject: [PATCH 003/103] Starting migration and integration of personal preferences files --- .../preferences/personal.page.tsx | 28 ++++ .../[accountListId]/preferences/personal.tsx | 17 --- .../preferences/personal/DemoContent.tsx | 65 +++++++++ .../personal/info/PersPrefAnniversary.tsx | 33 +++++ .../personal/info/PersPrefContact.tsx | 24 ++++ .../personal/info/PersPrefContacts.tsx | 64 +++++++++ .../personal/info/PersPrefInfo.tsx | 123 ++++++++++++++++++ .../personal/info/PersPrefSocials.tsx | 68 ++++++++++ .../personal/info/PersPrefWork.tsx | 15 +++ .../personal/shared/PersPrefShared.tsx | 9 ++ .../TopBar/Items/ProfileMenu/ProfileMenu.tsx | 5 +- 11 files changed, 433 insertions(+), 18 deletions(-) create mode 100644 pages/accountLists/[accountListId]/preferences/personal.page.tsx delete mode 100644 pages/accountLists/[accountListId]/preferences/personal.tsx create mode 100644 pages/accountLists/[accountListId]/preferences/personal/DemoContent.tsx create mode 100644 pages/accountLists/[accountListId]/preferences/personal/info/PersPrefAnniversary.tsx create mode 100644 pages/accountLists/[accountListId]/preferences/personal/info/PersPrefContact.tsx create mode 100644 pages/accountLists/[accountListId]/preferences/personal/info/PersPrefContacts.tsx create mode 100644 pages/accountLists/[accountListId]/preferences/personal/info/PersPrefInfo.tsx create mode 100644 pages/accountLists/[accountListId]/preferences/personal/info/PersPrefSocials.tsx create mode 100644 pages/accountLists/[accountListId]/preferences/personal/info/PersPrefWork.tsx create mode 100644 pages/accountLists/[accountListId]/preferences/personal/shared/PersPrefShared.tsx diff --git a/pages/accountLists/[accountListId]/preferences/personal.page.tsx b/pages/accountLists/[accountListId]/preferences/personal.page.tsx new file mode 100644 index 000000000..362a51382 --- /dev/null +++ b/pages/accountLists/[accountListId]/preferences/personal.page.tsx @@ -0,0 +1,28 @@ +import React from 'react'; +import Head from 'next/head'; +import { useTranslation } from 'react-i18next'; +import { Box, Typography } from '@material-ui/core'; +import { PersPrefInfo } from './personal/info/PersPrefInfo'; + +const PersonalPreferences: React.FC = () => { + const { t } = useTranslation(); + + return ( + <> + + MPDX | {t('Personal Preferences')} + + + + {t('Preferences')} + + + + +
Main content area
+ + + ); +}; + +export default PersonalPreferences; diff --git a/pages/accountLists/[accountListId]/preferences/personal.tsx b/pages/accountLists/[accountListId]/preferences/personal.tsx deleted file mode 100644 index 74b177ffd..000000000 --- a/pages/accountLists/[accountListId]/preferences/personal.tsx +++ /dev/null @@ -1,17 +0,0 @@ -import React from 'react'; -import Head from 'next/head'; -import { useTranslation } from 'react-i18next'; -// import { useRouter } from 'next/router'; - -export const PersonalPreferences: React.FC = () => { - const { t } = useTranslation(); - - return ( - <> - - MPDX | {t('Personal Preferences')} - -
Test
- - ); -}; diff --git a/pages/accountLists/[accountListId]/preferences/personal/DemoContent.tsx b/pages/accountLists/[accountListId]/preferences/personal/DemoContent.tsx new file mode 100644 index 000000000..33de8e48f --- /dev/null +++ b/pages/accountLists/[accountListId]/preferences/personal/DemoContent.tsx @@ -0,0 +1,65 @@ +export const info = { + alma_mater: "Sac State", + anniversary_day: 23, + anniversary_month: 6, + anniversary_year: 1979, + avatar: + "https://lumiere-a.akamaihd.net/v1/images/ct_mickeymouseandfriends_mickey_ddt-16970_4e99445d.jpeg?region=0,0,600,600&width=480", + birthday_day: 7, + birthday_month: 10, + birthday_year: 1983, + email: [ + { + value: "personal@test.com", + type: "personal", + primary: true, + invalid: false, + }, + { + value: "work@test.com", + type: "work", + primary: false, + invalid: true, + }, + ], + employer: "Disney", + facebook_accounts: ["CruGlobal", "jplastow2"], + family_relationships: [ + { + name: "Minnie", + relation: "Wife", + }, + { + name: "Goofy", + relation: "Brother", + }, + ], + first_name: "Mickey", + gender: "male", + last_name: "Mouse", + legal_first_name: "Michaelangelo", + linkedin_accounts: ["https://www.linkedin.com/company/cru-global/"], + marital_status: "Married", + middle_name: "", + occupation: "Head Mouse", + parent_contacts: null, + phone: [ + { + value: "1234567890", + type: "home", + primary: false, + invalid: false, + }, + { + value: "0987654321", + type: "mobile", + primary: true, + invalid: false, + }, + ], + preferences: null, + suffix: "Sr.", + title: "Mr.", + twitter_accounts: ["CruTweets"], + websites: ["https://cru.org"], +}; diff --git a/pages/accountLists/[accountListId]/preferences/personal/info/PersPrefAnniversary.tsx b/pages/accountLists/[accountListId]/preferences/personal/info/PersPrefAnniversary.tsx new file mode 100644 index 000000000..45735e30f --- /dev/null +++ b/pages/accountLists/[accountListId]/preferences/personal/info/PersPrefAnniversary.tsx @@ -0,0 +1,33 @@ +import { Typography } from "@material-ui/core"; + +export const PersPrefAnniversary = ({ + marital_status, + anniversary_day, + anniversary_month, +}) => { + const anniversary = anniversary_month || anniversary_day ? true : false; + + let output = ""; + + if (marital_status) { + output += marital_status; + } else if (anniversary) { + output += "Anniversary"; + } + + if (anniversary) { + output += ": "; + if (anniversary_month) { + output += `${anniversary_month} `; + } + if (anniversary_day) { + output += anniversary_day; + } + } + + if (output !== "") { + return {output}; + } + + return null; +}; diff --git a/pages/accountLists/[accountListId]/preferences/personal/info/PersPrefContact.tsx b/pages/accountLists/[accountListId]/preferences/personal/info/PersPrefContact.tsx new file mode 100644 index 000000000..a2acfeb9a --- /dev/null +++ b/pages/accountLists/[accountListId]/preferences/personal/info/PersPrefContact.tsx @@ -0,0 +1,24 @@ +import { Link, Typography, styled } from "@material-ui/core"; +import { Check } from "@material-ui/icons"; + +const StyledCheck = styled(Check)(({ theme }) => ({ + verticalAlign: "top", + color: theme.palette.mpdxGreen.main, + position: "relative", + top: "-3px", +})); + +const isEmail = (obj) => ("address" in obj ? true : false); + +export const PersPrefContact = ({ data }) => { + const prefix = isEmail(data) ? "mailto" : "tel"; + const value = data.value; + + return ( + + {value}{" "} + - {data.type} + {/* {data.primary ? : ""} */} + + ); +}; diff --git a/pages/accountLists/[accountListId]/preferences/personal/info/PersPrefContacts.tsx b/pages/accountLists/[accountListId]/preferences/personal/info/PersPrefContacts.tsx new file mode 100644 index 000000000..0c7848f4a --- /dev/null +++ b/pages/accountLists/[accountListId]/preferences/personal/info/PersPrefContacts.tsx @@ -0,0 +1,64 @@ +import { + Accordion, + AccordionSummary, + AccordionDetails, + styled, +} from '@material-ui/core'; +import { ExpandMore } from '@material-ui/icons'; +import { accordionShared } from '../shared/PersPrefShared'; +import { PersPrefContact } from './PersPrefContact'; + +const StyledAccordion = styled(Accordion)({ + '&.Mui-expanded': { + margin: 0, + }, + ...accordionShared, +}); + +const StyledAccordionSummary = styled(AccordionSummary)({ + display: 'inline-block', + padding: 0, + minHeight: 'unset', + '& .MuiAccordionSummary-content': { + display: 'inline-block', + margin: 0, + }, + '& .MuiAccordionSummary-expandIcon': { + padding: 0, + position: 'relative', + top: '-3px', + }, +}); + +const StyledAccordionDetails = styled(AccordionDetails)({ + display: 'block', + padding: 0, +}); + +export const PersPrefContacts = ({ data }) => { + const dataValid = data.filter((current) => current.invalid !== true); + const primaryIndex = dataValid.findIndex( + (current) => current.primary === true, + ); + const dataSansPrimary = dataValid.filter( + (current, index) => index !== primaryIndex, + ); + + return ( + <> + {dataValid.length === 1 && } + {dataValid.length > 1 && ( + + }> + + + + {dataSansPrimary.map((current) => { + return ; + })} + + + )} + + ); +}; diff --git a/pages/accountLists/[accountListId]/preferences/personal/info/PersPrefInfo.tsx b/pages/accountLists/[accountListId]/preferences/personal/info/PersPrefInfo.tsx new file mode 100644 index 000000000..881750a46 --- /dev/null +++ b/pages/accountLists/[accountListId]/preferences/personal/info/PersPrefInfo.tsx @@ -0,0 +1,123 @@ +import React, { useState } from 'react'; +import { useTranslation } from 'react-i18next'; +import { Avatar, Box, Button, Typography, styled } from '@material-ui/core'; +import { Edit } from '@material-ui/icons'; +import { info } from '../DemoContent'; +import { PersPrefWork } from './PersPrefWork'; +import { PersPrefContacts } from './PersPrefContacts'; +import { PersPrefAnniversary } from './PersPrefAnniversary'; +import { PersPrefSocials } from './PersPrefSocials'; +// import { PersPrefModal } from "./Modals/PersPrefModal"; + +const StyledContactWrapper = styled(Box)(({ theme }) => ({ + marginBottom: theme.spacing(3), + position: 'relative', +})); + +const StyledContactTop = styled(Box)(({ theme }) => ({ + display: 'flex', + alignItems: 'center', + marginBottom: theme.spacing(2), + [theme.breakpoints.up('sm')]: { + display: 'block', + marginLeft: theme.spacing(8), + marginBottom: theme.spacing(1), + }, +})); + +const StyledAvatar = styled(Avatar)(({ theme }) => ({ + width: theme.spacing(4), + height: theme.spacing(4), + marginRight: theme.spacing(2), + display: 'inline-block', + '& img': { + display: 'block', + }, + [theme.breakpoints.up('sm')]: { + position: 'absolute', + top: 0, + left: 0, + width: theme.spacing(6), + height: theme.spacing(6), + }, +})); + +const StyledContactBottom = styled(Box)(({ theme }) => ({ + '& ul': { + marginTop: theme.spacing(1), + }, + [theme.breakpoints.up('sm')]: { + marginLeft: theme.spacing(8), + }, +})); + +const StyledContactEdit = styled(Box)(({ theme }) => ({ + textAlign: 'right', + marginTop: theme.spacing(2), + [theme.breakpoints.up('sm')]: { + position: 'absolute', + bottom: 0, + right: 0, + }, +})); + +export const PersPrefInfo: React.FC = () => { + const { t } = useTranslation(); + + const [profileOpen, setProfileOpen] = useState(false); + + const handleOpen = () => { + setProfileOpen(true); + }; + + const months = [ + 'Jan', + 'Feb', + 'Mar', + 'Apr', + 'May', + 'Jun', + 'Jul', + 'Aug', + 'Sep', + 'Oct', + 'Nov', + 'Dec', + ]; + + return ( + + + + + {t(info.title)} {info.first_name} {info.last_name} {t(info.suffix)} + + + + + + + + + + + + {/* */} + + + ); +}; diff --git a/pages/accountLists/[accountListId]/preferences/personal/info/PersPrefSocials.tsx b/pages/accountLists/[accountListId]/preferences/personal/info/PersPrefSocials.tsx new file mode 100644 index 000000000..108ed440c --- /dev/null +++ b/pages/accountLists/[accountListId]/preferences/personal/info/PersPrefSocials.tsx @@ -0,0 +1,68 @@ +import { Link, List, ListItem, styled } from "@material-ui/core"; +import { Facebook, Language, LinkedIn, Twitter } from "@material-ui/icons"; + +const StyledList = styled(List)({ + fontSize: "0", +}); + +const StyledListItem = styled(ListItem)(({ theme }) => ({ + display: "inline-block", + width: "auto", + marginRight: theme.spacing(1), + padding: "0", + "&:last-child": { + marginRight: "0", + }, +})); + +const StyledAnchor = styled(Link)({ + display: "block", + fontSize: "0", +}); + +const profileTypes = { + facebook: { + link: "https://www.facebook.com/", + icon: , + }, + twitter: { + link: "https://www.twitter.com/", + icon: , + }, + linkedin: { + link: "", + icon: , + }, + websites: { + link: "", + icon: , + }, +}; + +const ListItemLinks = ({ data, type }) => { + const { link, icon } = profileTypes[type]; + + return data.map((account) => ( + + + {icon} + + + )); +}; + +export const PersPrefSocials = ({ + facebook_accounts, + twitter_accounts, + linkedin_accounts, + websites, +}) => { + return ( + + + + + + + ); +}; diff --git a/pages/accountLists/[accountListId]/preferences/personal/info/PersPrefWork.tsx b/pages/accountLists/[accountListId]/preferences/personal/info/PersPrefWork.tsx new file mode 100644 index 000000000..dd028831a --- /dev/null +++ b/pages/accountLists/[accountListId]/preferences/personal/info/PersPrefWork.tsx @@ -0,0 +1,15 @@ +import { Typography } from "@material-ui/core"; + +export const PersPrefWork = ({ employer, occupation }) => { + const separator = occupation && employer ? " - " : ""; + + if (occupation || employer) { + return ( + + {occupation} {separator} {employer} + + ); + } + + return null; +}; diff --git a/pages/accountLists/[accountListId]/preferences/personal/shared/PersPrefShared.tsx b/pages/accountLists/[accountListId]/preferences/personal/shared/PersPrefShared.tsx new file mode 100644 index 000000000..454c1d7ba --- /dev/null +++ b/pages/accountLists/[accountListId]/preferences/personal/shared/PersPrefShared.tsx @@ -0,0 +1,9 @@ +export const accordionShared = { + boxShadow: "none", + "&:before": { + content: "none", + }, + "& .MuiAccordionSummary-root.Mui-expanded": { + minHeight: "unset", + }, +}; diff --git a/src/components/Layouts/Primary/TopBar/Items/ProfileMenu/ProfileMenu.tsx b/src/components/Layouts/Primary/TopBar/Items/ProfileMenu/ProfileMenu.tsx index cbd4d159a..544f5d106 100644 --- a/src/components/Layouts/Primary/TopBar/Items/ProfileMenu/ProfileMenu.tsx +++ b/src/components/Layouts/Primary/TopBar/Items/ProfileMenu/ProfileMenu.tsx @@ -25,6 +25,7 @@ import { useAccountListId } from '../../../../../../hooks/useAccountListId'; import HandoffLink from '../../../../../HandoffLink'; import { useGetTopBarQuery } from '../../GetTopBar.generated'; import theme from '../../../../../../theme'; +import { useAccountListId } from '../../../../../../hooks/useAccountListId'; const AccountName = styled(Typography)(({ theme }) => ({ color: theme.palette.common.white, @@ -119,6 +120,8 @@ const ProfileMenu = (): ReactElement => { setProfileMenuAnchorEl(undefined); }; + const accountListId = useAccountListId(); + return ( <> { {/* {t('Preferences')} */} From e862ff37c8279e9242d6598d4ca698f9311311df Mon Sep 17 00:00:00 2001 From: John Plastow Date: Tue, 14 Sep 2021 17:57:20 -0700 Subject: [PATCH 004/103] Starting TSX conversion --- .../preferences/personal.page.tsx | 2 +- .../preferences/personal/DemoContent.tsx | 56 +++++++++---------- .../personal/info/PersPrefContact.tsx | 24 -------- .../personal/shared/PersPrefShared.tsx | 10 ++-- 4 files changed, 34 insertions(+), 58 deletions(-) delete mode 100644 pages/accountLists/[accountListId]/preferences/personal/info/PersPrefContact.tsx diff --git a/pages/accountLists/[accountListId]/preferences/personal.page.tsx b/pages/accountLists/[accountListId]/preferences/personal.page.tsx index 362a51382..679dca428 100644 --- a/pages/accountLists/[accountListId]/preferences/personal.page.tsx +++ b/pages/accountLists/[accountListId]/preferences/personal.page.tsx @@ -2,7 +2,7 @@ import React from 'react'; import Head from 'next/head'; import { useTranslation } from 'react-i18next'; import { Box, Typography } from '@material-ui/core'; -import { PersPrefInfo } from './personal/info/PersPrefInfo'; +import PersPrefInfo from './personal/info/PersPrefInfo'; const PersonalPreferences: React.FC = () => { const { t } = useTranslation(); diff --git a/pages/accountLists/[accountListId]/preferences/personal/DemoContent.tsx b/pages/accountLists/[accountListId]/preferences/personal/DemoContent.tsx index 33de8e48f..20229ce34 100644 --- a/pages/accountLists/[accountListId]/preferences/personal/DemoContent.tsx +++ b/pages/accountLists/[accountListId]/preferences/personal/DemoContent.tsx @@ -1,65 +1,65 @@ export const info = { - alma_mater: "Sac State", + alma_mater: 'Sac State', anniversary_day: 23, anniversary_month: 6, anniversary_year: 1979, avatar: - "https://lumiere-a.akamaihd.net/v1/images/ct_mickeymouseandfriends_mickey_ddt-16970_4e99445d.jpeg?region=0,0,600,600&width=480", + 'https://lumiere-a.akamaihd.net/v1/images/ct_mickeymouseandfriends_mickey_ddt-16970_4e99445d.jpeg?region=0,0,600,600&width=480', birthday_day: 7, birthday_month: 10, birthday_year: 1983, email: [ { - value: "personal@test.com", - type: "personal", + value: 'personal@test.com', + type: 'personal', primary: true, invalid: false, }, { - value: "work@test.com", - type: "work", + value: 'work@test.com', + type: 'work', primary: false, invalid: true, }, ], - employer: "Disney", - facebook_accounts: ["CruGlobal", "jplastow2"], + employer: 'Disney', + facebook_accounts: ['CruGlobal', 'jplastow2'], family_relationships: [ { - name: "Minnie", - relation: "Wife", + name: 'Minnie', + relation: 'Wife', }, { - name: "Goofy", - relation: "Brother", + name: 'Goofy', + relation: 'Brother', }, ], - first_name: "Mickey", - gender: "male", - last_name: "Mouse", - legal_first_name: "Michaelangelo", - linkedin_accounts: ["https://www.linkedin.com/company/cru-global/"], - marital_status: "Married", - middle_name: "", - occupation: "Head Mouse", + first_name: 'Mickey', + gender: 'male', + last_name: 'Mouse', + legal_first_name: 'Michaelangelo', + linkedin_accounts: ['https://www.linkedin.com/company/cru-global/'], + marital_status: 'Married', + middle_name: '', + occupation: 'Head Mouse', parent_contacts: null, phone: [ { - value: "1234567890", - type: "home", + value: '1234567890', + type: 'home', primary: false, invalid: false, }, { - value: "0987654321", - type: "mobile", + value: '0987654321', + type: 'mobile', primary: true, invalid: false, }, ], preferences: null, - suffix: "Sr.", - title: "Mr.", - twitter_accounts: ["CruTweets"], - websites: ["https://cru.org"], + suffix: 'Sr.', + title: 'Mr.', + twitter_accounts: ['CruTweets'], + websites: ['https://cru.org'], }; diff --git a/pages/accountLists/[accountListId]/preferences/personal/info/PersPrefContact.tsx b/pages/accountLists/[accountListId]/preferences/personal/info/PersPrefContact.tsx deleted file mode 100644 index a2acfeb9a..000000000 --- a/pages/accountLists/[accountListId]/preferences/personal/info/PersPrefContact.tsx +++ /dev/null @@ -1,24 +0,0 @@ -import { Link, Typography, styled } from "@material-ui/core"; -import { Check } from "@material-ui/icons"; - -const StyledCheck = styled(Check)(({ theme }) => ({ - verticalAlign: "top", - color: theme.palette.mpdxGreen.main, - position: "relative", - top: "-3px", -})); - -const isEmail = (obj) => ("address" in obj ? true : false); - -export const PersPrefContact = ({ data }) => { - const prefix = isEmail(data) ? "mailto" : "tel"; - const value = data.value; - - return ( - - {value}{" "} - - {data.type} - {/* {data.primary ? : ""} */} - - ); -}; diff --git a/pages/accountLists/[accountListId]/preferences/personal/shared/PersPrefShared.tsx b/pages/accountLists/[accountListId]/preferences/personal/shared/PersPrefShared.tsx index 454c1d7ba..aabe80b45 100644 --- a/pages/accountLists/[accountListId]/preferences/personal/shared/PersPrefShared.tsx +++ b/pages/accountLists/[accountListId]/preferences/personal/shared/PersPrefShared.tsx @@ -1,9 +1,9 @@ export const accordionShared = { - boxShadow: "none", - "&:before": { - content: "none", + boxShadow: 'none', + '&:before': { + content: 'none', }, - "& .MuiAccordionSummary-root.Mui-expanded": { - minHeight: "unset", + '& .MuiAccordionSummary-root.Mui-expanded': { + minHeight: 'unset', }, }; From 3733ffd1e7ae48d92dbadfe81c02e6a2947f032d Mon Sep 17 00:00:00 2001 From: John Plastow Date: Tue, 14 Sep 2021 17:57:53 -0700 Subject: [PATCH 005/103] Update PersPrefContacts.tsx --- .../personal/info/PersPrefContacts.tsx | 47 ++++++++++++++++--- 1 file changed, 41 insertions(+), 6 deletions(-) diff --git a/pages/accountLists/[accountListId]/preferences/personal/info/PersPrefContacts.tsx b/pages/accountLists/[accountListId]/preferences/personal/info/PersPrefContacts.tsx index 0c7848f4a..ed9c49c5f 100644 --- a/pages/accountLists/[accountListId]/preferences/personal/info/PersPrefContacts.tsx +++ b/pages/accountLists/[accountListId]/preferences/personal/info/PersPrefContacts.tsx @@ -1,14 +1,18 @@ +import React, { ReactElement } from 'react'; import { Accordion, AccordionSummary, AccordionDetails, + Link, + Typography, styled, } from '@material-ui/core'; import { ExpandMore } from '@material-ui/icons'; import { accordionShared } from '../shared/PersPrefShared'; -import { PersPrefContact } from './PersPrefContact'; +// import PersPrefContact from './PersPrefContact'; const StyledAccordion = styled(Accordion)({ + backgroundColor: 'transparent', '&.Mui-expanded': { margin: 0, }, @@ -35,8 +39,37 @@ const StyledAccordionDetails = styled(AccordionDetails)({ padding: 0, }); -export const PersPrefContacts = ({ data }) => { - const dataValid = data.filter((current) => current.invalid !== true); +interface ContactData { + value: string; + type: string; + primary: boolean; + invalid: boolean; +} + +interface PersPrefContactsProps { + contacts: ContactData[]; +} + +interface PersPrefContactProps { + contact: ContactData; +} + +const PersPrefContact: React.FC = ({ contact }) => { + const prefix = 'address' in contact ? 'mailto' : 'tel'; + const value = contact.value; + + return ( + + {value}{' '} + - {contact.type} + + ); +}; + +const PersPrefContacts = ({ + contacts, +}: PersPrefContactsProps): ReactElement => { + const dataValid = contacts.filter((current) => current.invalid !== true); const primaryIndex = dataValid.findIndex( (current) => current.primary === true, ); @@ -46,15 +79,15 @@ export const PersPrefContacts = ({ data }) => { return ( <> - {dataValid.length === 1 && } + {dataValid.length === 1 && } {dataValid.length > 1 && ( }> - + {dataSansPrimary.map((current) => { - return ; + return ; })} @@ -62,3 +95,5 @@ export const PersPrefContacts = ({ data }) => { ); }; + +export default PersPrefContacts; From 09ccae9f6b5df09ff1b31e1fab0d623ca197899b Mon Sep 17 00:00:00 2001 From: John Plastow Date: Wed, 15 Sep 2021 09:43:43 -0700 Subject: [PATCH 006/103] Code organization --- .../preferences/personal/info/PersPrefContacts.tsx | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/pages/accountLists/[accountListId]/preferences/personal/info/PersPrefContacts.tsx b/pages/accountLists/[accountListId]/preferences/personal/info/PersPrefContacts.tsx index ed9c49c5f..0ebd97608 100644 --- a/pages/accountLists/[accountListId]/preferences/personal/info/PersPrefContacts.tsx +++ b/pages/accountLists/[accountListId]/preferences/personal/info/PersPrefContacts.tsx @@ -46,9 +46,7 @@ interface ContactData { invalid: boolean; } -interface PersPrefContactsProps { - contacts: ContactData[]; -} +// Single contact phone/email interface PersPrefContactProps { contact: ContactData; @@ -66,6 +64,12 @@ const PersPrefContact: React.FC = ({ contact }) => { ); }; +// List of phone/email contacts + +interface PersPrefContactsProps { + contacts: ContactData[]; +} + const PersPrefContacts = ({ contacts, }: PersPrefContactsProps): ReactElement => { From 0872fba7f01d048687afaa75ab677d797657a745 Mon Sep 17 00:00:00 2001 From: John Plastow Date: Wed, 15 Sep 2021 09:51:42 -0700 Subject: [PATCH 007/103] Adding translation --- .../preferences/personal/info/PersPrefContacts.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/pages/accountLists/[accountListId]/preferences/personal/info/PersPrefContacts.tsx b/pages/accountLists/[accountListId]/preferences/personal/info/PersPrefContacts.tsx index 0ebd97608..a856f38fe 100644 --- a/pages/accountLists/[accountListId]/preferences/personal/info/PersPrefContacts.tsx +++ b/pages/accountLists/[accountListId]/preferences/personal/info/PersPrefContacts.tsx @@ -1,4 +1,5 @@ import React, { ReactElement } from 'react'; +import { useTranslation } from 'react-i18next'; import { Accordion, AccordionSummary, @@ -53,13 +54,14 @@ interface PersPrefContactProps { } const PersPrefContact: React.FC = ({ contact }) => { + const { t } = useTranslation(); const prefix = 'address' in contact ? 'mailto' : 'tel'; const value = contact.value; return ( {value}{' '} - - {contact.type} + - {t(contact.type)} ); }; From 009a75f81ff21cc58dcb0a7a508f96e0f203c1d8 Mon Sep 17 00:00:00 2001 From: John Plastow Date: Wed, 15 Sep 2021 14:32:13 -0700 Subject: [PATCH 008/103] Continuing TSX conversion PersPrefSocials.tsx and PersPrefInfo.tsx have errors --- .../personal/info/PersPrefAnniversary.tsx | 21 +++++-- .../personal/info/PersPrefInfo.tsx | 16 +++--- .../personal/info/PersPrefSocials.tsx | 57 ++++++++++++------- .../personal/info/PersPrefWork.tsx | 14 ++++- 4 files changed, 71 insertions(+), 37 deletions(-) diff --git a/pages/accountLists/[accountListId]/preferences/personal/info/PersPrefAnniversary.tsx b/pages/accountLists/[accountListId]/preferences/personal/info/PersPrefAnniversary.tsx index 45735e30f..06f8d6150 100644 --- a/pages/accountLists/[accountListId]/preferences/personal/info/PersPrefAnniversary.tsx +++ b/pages/accountLists/[accountListId]/preferences/personal/info/PersPrefAnniversary.tsx @@ -1,22 +1,29 @@ -import { Typography } from "@material-ui/core"; +import React from 'react'; +import { Typography } from '@material-ui/core'; -export const PersPrefAnniversary = ({ +interface AnniversaryProps { + marital_status: string; + anniversary_day: number; + anniversary_month: string; +} + +const PersPrefAnniversary: React.FC = ({ marital_status, anniversary_day, anniversary_month, }) => { const anniversary = anniversary_month || anniversary_day ? true : false; - let output = ""; + let output = ''; if (marital_status) { output += marital_status; } else if (anniversary) { - output += "Anniversary"; + output += 'Anniversary'; } if (anniversary) { - output += ": "; + output += ': '; if (anniversary_month) { output += `${anniversary_month} `; } @@ -25,9 +32,11 @@ export const PersPrefAnniversary = ({ } } - if (output !== "") { + if (output !== '') { return {output}; } return null; }; + +export default PersPrefAnniversary; diff --git a/pages/accountLists/[accountListId]/preferences/personal/info/PersPrefInfo.tsx b/pages/accountLists/[accountListId]/preferences/personal/info/PersPrefInfo.tsx index 881750a46..31805db75 100644 --- a/pages/accountLists/[accountListId]/preferences/personal/info/PersPrefInfo.tsx +++ b/pages/accountLists/[accountListId]/preferences/personal/info/PersPrefInfo.tsx @@ -3,10 +3,10 @@ import { useTranslation } from 'react-i18next'; import { Avatar, Box, Button, Typography, styled } from '@material-ui/core'; import { Edit } from '@material-ui/icons'; import { info } from '../DemoContent'; -import { PersPrefWork } from './PersPrefWork'; -import { PersPrefContacts } from './PersPrefContacts'; -import { PersPrefAnniversary } from './PersPrefAnniversary'; -import { PersPrefSocials } from './PersPrefSocials'; +import PersPrefWork from './PersPrefWork'; +import PersPrefContacts from './PersPrefContacts'; +import PersPrefAnniversary from './PersPrefAnniversary'; +import PersPrefSocials from './PersPrefSocials'; // import { PersPrefModal } from "./Modals/PersPrefModal"; const StyledContactWrapper = styled(Box)(({ theme }) => ({ @@ -61,7 +61,7 @@ const StyledContactEdit = styled(Box)(({ theme }) => ({ }, })); -export const PersPrefInfo: React.FC = () => { +const PersPrefInfo: React.FC = () => { const { t } = useTranslation(); const [profileOpen, setProfileOpen] = useState(false); @@ -98,8 +98,8 @@ export const PersPrefInfo: React.FC = () => { - - + + { ); }; + +export default PersPrefInfo; diff --git a/pages/accountLists/[accountListId]/preferences/personal/info/PersPrefSocials.tsx b/pages/accountLists/[accountListId]/preferences/personal/info/PersPrefSocials.tsx index 108ed440c..ed8473c2e 100644 --- a/pages/accountLists/[accountListId]/preferences/personal/info/PersPrefSocials.tsx +++ b/pages/accountLists/[accountListId]/preferences/personal/info/PersPrefSocials.tsx @@ -1,48 +1,54 @@ -import { Link, List, ListItem, styled } from "@material-ui/core"; -import { Facebook, Language, LinkedIn, Twitter } from "@material-ui/icons"; +import React from 'react'; +import { Link, List, ListItem, styled } from '@material-ui/core'; +import { Facebook, Language, LinkedIn, Twitter } from '@material-ui/icons'; const StyledList = styled(List)({ - fontSize: "0", + fontSize: '0', }); const StyledListItem = styled(ListItem)(({ theme }) => ({ - display: "inline-block", - width: "auto", + display: 'inline-block', + width: 'auto', marginRight: theme.spacing(1), - padding: "0", - "&:last-child": { - marginRight: "0", + padding: '0', + '&:last-child': { + marginRight: '0', }, })); const StyledAnchor = styled(Link)({ - display: "block", - fontSize: "0", + display: 'block', + fontSize: '0', }); const profileTypes = { facebook: { - link: "https://www.facebook.com/", + link: 'https://www.facebook.com/', icon: , }, twitter: { - link: "https://www.twitter.com/", + link: 'https://www.twitter.com/', icon: , }, linkedin: { - link: "", + link: '', icon: , }, websites: { - link: "", + link: '', icon: , }, }; -const ListItemLinks = ({ data, type }) => { +interface ListItemProps { + accounts: string[]; + type: keyof typeof profileTypes; +} + +const ListItemLinks: React.FC = ({ accounts, type }) => { const { link, icon } = profileTypes[type]; - return data.map((account) => ( + return accounts.map((account) => ( {icon} @@ -51,7 +57,14 @@ const ListItemLinks = ({ data, type }) => { )); }; -export const PersPrefSocials = ({ +interface SocialMediaProps { + facebook_accounts: string[]; + twitter_accounts: string[]; + linkedin_accounts: string[]; + websites: string[]; +} + +const PersPrefSocials: React.FC = ({ facebook_accounts, twitter_accounts, linkedin_accounts, @@ -59,10 +72,12 @@ export const PersPrefSocials = ({ }) => { return ( - - - - + + + + ); }; + +export default PersPrefSocials; diff --git a/pages/accountLists/[accountListId]/preferences/personal/info/PersPrefWork.tsx b/pages/accountLists/[accountListId]/preferences/personal/info/PersPrefWork.tsx index dd028831a..954e2ab8f 100644 --- a/pages/accountLists/[accountListId]/preferences/personal/info/PersPrefWork.tsx +++ b/pages/accountLists/[accountListId]/preferences/personal/info/PersPrefWork.tsx @@ -1,7 +1,13 @@ -import { Typography } from "@material-ui/core"; +import React from 'react'; +import { Typography } from '@material-ui/core'; -export const PersPrefWork = ({ employer, occupation }) => { - const separator = occupation && employer ? " - " : ""; +interface WorkProps { + employer: string; + occupation: string; +} + +const PersPrefWork: React.FC = ({ employer, occupation }) => { + const separator = occupation && employer ? ' - ' : ''; if (occupation || employer) { return ( @@ -13,3 +19,5 @@ export const PersPrefWork = ({ employer, occupation }) => { return null; }; + +export default PersPrefWork; From 39b23dea7cf6206cfbbe331038e48da84e229b35 Mon Sep 17 00:00:00 2001 From: John Plastow Date: Wed, 15 Sep 2021 15:29:12 -0700 Subject: [PATCH 009/103] Fixing Socials --- .../personal/info/PersPrefSocials.tsx | 22 +++++++++++++------ 1 file changed, 15 insertions(+), 7 deletions(-) diff --git a/pages/accountLists/[accountListId]/preferences/personal/info/PersPrefSocials.tsx b/pages/accountLists/[accountListId]/preferences/personal/info/PersPrefSocials.tsx index ed8473c2e..98f4e9e5e 100644 --- a/pages/accountLists/[accountListId]/preferences/personal/info/PersPrefSocials.tsx +++ b/pages/accountLists/[accountListId]/preferences/personal/info/PersPrefSocials.tsx @@ -48,13 +48,21 @@ interface ListItemProps { const ListItemLinks: React.FC = ({ accounts, type }) => { const { link, icon } = profileTypes[type]; - return accounts.map((account) => ( - - - {icon} - - - )); + return ( + <> + {accounts.map((account) => ( + + + {icon} + + + ))} + + ); }; interface SocialMediaProps { From b3f8f9eaf9f6d98136180d25b4fa31b42786fb38 Mon Sep 17 00:00:00 2001 From: John Plastow Date: Thu, 16 Sep 2021 14:02:09 -0700 Subject: [PATCH 010/103] Preferences wrapper comp and fixing exports --- .../preferences/personal.page.tsx | 23 ++++++------ .../personal/info/PersPrefAnniversary.tsx | 4 +-- .../personal/info/PersPrefContacts.tsx | 4 +-- .../personal/info/PersPrefSocials.tsx | 4 +-- .../personal/info/PersPrefWork.tsx | 4 +-- .../[accountListId]/preferences/wrapper.tsx | 36 +++++++++++++++++++ 6 files changed, 50 insertions(+), 25 deletions(-) create mode 100644 pages/accountLists/[accountListId]/preferences/wrapper.tsx diff --git a/pages/accountLists/[accountListId]/preferences/personal.page.tsx b/pages/accountLists/[accountListId]/preferences/personal.page.tsx index 679dca428..db61918c6 100644 --- a/pages/accountLists/[accountListId]/preferences/personal.page.tsx +++ b/pages/accountLists/[accountListId]/preferences/personal.page.tsx @@ -1,27 +1,24 @@ import React from 'react'; -import Head from 'next/head'; import { useTranslation } from 'react-i18next'; -import { Box, Typography } from '@material-ui/core'; -import PersPrefInfo from './personal/info/PersPrefInfo'; +import { Box } from '@material-ui/core'; +import { PreferencesWrapper } from './wrapper'; +import { PersPrefInfo } from './personal/info/PersPrefInfo'; const PersonalPreferences: React.FC = () => { const { t } = useTranslation(); return ( - <> - - MPDX | {t('Personal Preferences')} - - - - {t('Preferences')} - + + - +
Main content area
 - + ); }; diff --git a/pages/accountLists/[accountListId]/preferences/personal/info/PersPrefAnniversary.tsx b/pages/accountLists/[accountListId]/preferences/personal/info/PersPrefAnniversary.tsx index 06f8d6150..5bc961379 100644 --- a/pages/accountLists/[accountListId]/preferences/personal/info/PersPrefAnniversary.tsx +++ b/pages/accountLists/[accountListId]/preferences/personal/info/PersPrefAnniversary.tsx @@ -7,7 +7,7 @@ interface AnniversaryProps { anniversary_month: string; } -const PersPrefAnniversary: React.FC = ({ +export const PersPrefAnniversary: React.FC = ({ marital_status, anniversary_day, anniversary_month, @@ -38,5 +38,3 @@ const PersPrefAnniversary: React.FC = ({ return null; }; - -export default PersPrefAnniversary; diff --git a/pages/accountLists/[accountListId]/preferences/personal/info/PersPrefContacts.tsx b/pages/accountLists/[accountListId]/preferences/personal/info/PersPrefContacts.tsx index a856f38fe..cca60b903 100644 --- a/pages/accountLists/[accountListId]/preferences/personal/info/PersPrefContacts.tsx +++ b/pages/accountLists/[accountListId]/preferences/personal/info/PersPrefContacts.tsx @@ -72,7 +72,7 @@ interface PersPrefContactsProps { contacts: ContactData[]; } -const PersPrefContacts = ({ +export const PersPrefContacts = ({ contacts, }: PersPrefContactsProps): ReactElement => { const dataValid = contacts.filter((current) => current.invalid !== true); @@ -101,5 +101,3 @@ const PersPrefContacts = ({ ); }; - -export default PersPrefContacts; diff --git a/pages/accountLists/[accountListId]/preferences/personal/info/PersPrefSocials.tsx b/pages/accountLists/[accountListId]/preferences/personal/info/PersPrefSocials.tsx index 98f4e9e5e..84bf4ec07 100644 --- a/pages/accountLists/[accountListId]/preferences/personal/info/PersPrefSocials.tsx +++ b/pages/accountLists/[accountListId]/preferences/personal/info/PersPrefSocials.tsx @@ -72,7 +72,7 @@ interface SocialMediaProps { websites: string[]; } -const PersPrefSocials: React.FC = ({ +export const PersPrefSocials: React.FC = ({ facebook_accounts, twitter_accounts, linkedin_accounts, @@ -87,5 +87,3 @@ const PersPrefSocials: React.FC = ({ ); }; - -export default PersPrefSocials; diff --git a/pages/accountLists/[accountListId]/preferences/personal/info/PersPrefWork.tsx b/pages/accountLists/[accountListId]/preferences/personal/info/PersPrefWork.tsx index 954e2ab8f..a19c4f38d 100644 --- a/pages/accountLists/[accountListId]/preferences/personal/info/PersPrefWork.tsx +++ b/pages/accountLists/[accountListId]/preferences/personal/info/PersPrefWork.tsx @@ -6,7 +6,7 @@ interface WorkProps { occupation: string; } -const PersPrefWork: React.FC = ({ employer, occupation }) => { +export const PersPrefWork: React.FC = ({ employer, occupation }) => { const separator = occupation && employer ? ' - ' : ''; if (occupation || employer) { @@ -19,5 +19,3 @@ const PersPrefWork: React.FC = ({ employer, occupation }) => { return null; }; - -export default PersPrefWork; diff --git a/pages/accountLists/[accountListId]/preferences/wrapper.tsx b/pages/accountLists/[accountListId]/preferences/wrapper.tsx new file mode 100644 index 000000000..c351ad0f6 --- /dev/null +++ b/pages/accountLists/[accountListId]/preferences/wrapper.tsx @@ -0,0 +1,36 @@ +import React from 'react'; +import Head from 'next/head'; +import { Box, Typography, styled } from '@material-ui/core'; + +const PageTitle = styled(Box)(({ theme }) => ({ + color: theme.palette.common.white, + backgroundColor: theme.palette.mpdxBlue.main, + padding: theme.spacing(3), +})); + +interface PrefWrapperProps { + pageTitle: string; + pageHeading: string; +} + +export const PreferencesWrapper: React.FC = ({ + pageTitle, + pageHeading, + children, +}) => { + return ( + <> + + MPDX | {pageTitle} + + + + + {pageHeading} + + + {children} + + + ); +}; From 7d1b9c094993ba6e3659b4d0b48666f1c12daa3e Mon Sep 17 00:00:00 2001 From: John Plastow Date: Fri, 17 Sep 2021 10:47:02 -0700 Subject: [PATCH 011/103] Color update --- pages/accountLists/[accountListId]/preferences/wrapper.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/pages/accountLists/[accountListId]/preferences/wrapper.tsx b/pages/accountLists/[accountListId]/preferences/wrapper.tsx index c351ad0f6..ce6cc272c 100644 --- a/pages/accountLists/[accountListId]/preferences/wrapper.tsx +++ b/pages/accountLists/[accountListId]/preferences/wrapper.tsx @@ -4,7 +4,7 @@ import { Box, Typography, styled } from '@material-ui/core'; const PageTitle = styled(Box)(({ theme }) => ({ color: theme.palette.common.white, - backgroundColor: theme.palette.mpdxBlue.main, + backgroundColor: theme.palette.primary.main, padding: theme.spacing(3), })); From bfc733c69d6969245b3a04851722ea0441102524 Mon Sep 17 00:00:00 2001 From: John Plastow Date: Fri, 17 Sep 2021 10:47:23 -0700 Subject: [PATCH 012/103] Social links overhaul --- .../personal/info/PersPrefSocials.tsx | 23 ++++++++++++------- 1 file changed, 15 insertions(+), 8 deletions(-) diff --git a/pages/accountLists/[accountListId]/preferences/personal/info/PersPrefSocials.tsx b/pages/accountLists/[accountListId]/preferences/personal/info/PersPrefSocials.tsx index 84bf4ec07..28e820e5d 100644 --- a/pages/accountLists/[accountListId]/preferences/personal/info/PersPrefSocials.tsx +++ b/pages/accountLists/[accountListId]/preferences/personal/info/PersPrefSocials.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { Link, List, ListItem, styled } from '@material-ui/core'; +import { IconButton, List, ListItem, styled } from '@material-ui/core'; import { Facebook, Language, LinkedIn, Twitter } from '@material-ui/icons'; const StyledList = styled(List)({ @@ -14,12 +14,18 @@ const StyledListItem = styled(ListItem)(({ theme }) => ({ '&:last-child': { marginRight: '0', }, + '&:hover': { + backgroundColor: 'transparent', + }, })); -const StyledAnchor = styled(Link)({ - display: 'block', - fontSize: '0', -}); +const StyledSocialButton = styled(IconButton)(({ theme }) => ({ + padding: 0, + color: theme.palette.primary.main, + '&:hover': { + backgroundColor: 'transparent', + }, +})) as typeof IconButton; const profileTypes = { facebook: { @@ -52,13 +58,14 @@ const ListItemLinks: React.FC = ({ accounts, type }) => { <> {accounts.map((account) => ( - {icon} - + ))} From c65f5f7410629224146b1ea5b943df7501f2d0b7 Mon Sep 17 00:00:00 2001 From: John Plastow Date: Fri, 17 Sep 2021 11:13:04 -0700 Subject: [PATCH 013/103] Making the info a card --- .../personal/info/PersPrefInfo.tsx | 105 ++++++++++-------- 1 file changed, 58 insertions(+), 47 deletions(-) diff --git a/pages/accountLists/[accountListId]/preferences/personal/info/PersPrefInfo.tsx b/pages/accountLists/[accountListId]/preferences/personal/info/PersPrefInfo.tsx index 31805db75..daa92a692 100644 --- a/pages/accountLists/[accountListId]/preferences/personal/info/PersPrefInfo.tsx +++ b/pages/accountLists/[accountListId]/preferences/personal/info/PersPrefInfo.tsx @@ -1,16 +1,23 @@ import React, { useState } from 'react'; import { useTranslation } from 'react-i18next'; -import { Avatar, Box, Button, Typography, styled } from '@material-ui/core'; +import { + Avatar, + Box, + Button, + Card, + CardContent, + Typography, + styled, +} from '@material-ui/core'; import { Edit } from '@material-ui/icons'; import { info } from '../DemoContent'; -import PersPrefWork from './PersPrefWork'; -import PersPrefContacts from './PersPrefContacts'; -import PersPrefAnniversary from './PersPrefAnniversary'; -import PersPrefSocials from './PersPrefSocials'; +import { PersPrefWork } from './PersPrefWork'; +import { PersPrefContacts } from './PersPrefContacts'; +import { PersPrefAnniversary } from './PersPrefAnniversary'; +import { PersPrefSocials } from './PersPrefSocials'; // import { PersPrefModal } from "./Modals/PersPrefModal"; -const StyledContactWrapper = styled(Box)(({ theme }) => ({ - marginBottom: theme.spacing(3), +const InfoCard = styled(Card)(() => ({ position: 'relative', })); @@ -35,11 +42,15 @@ const StyledAvatar = styled(Avatar)(({ theme }) => ({ }, [theme.breakpoints.up('sm')]: { position: 'absolute', - top: 0, - left: 0, + top: 16, + left: 16, width: theme.spacing(6), height: theme.spacing(6), }, + [theme.breakpoints.up('md')]: { + top: 32, + left: 32, + }, })); const StyledContactBottom = styled(Box)(({ theme }) => ({ @@ -56,12 +67,12 @@ const StyledContactEdit = styled(Box)(({ theme }) => ({ marginTop: theme.spacing(2), [theme.breakpoints.up('sm')]: { position: 'absolute', - bottom: 0, - right: 0, + bottom: 16, + right: 24, }, })); -const PersPrefInfo: React.FC = () => { +export const PersPrefInfo: React.FC = () => { const { t } = useTranslation(); const [profileOpen, setProfileOpen] = useState(false); @@ -86,40 +97,40 @@ const PersPrefInfo: React.FC = () => { ]; return ( - - - - - {t(info.title)} {info.first_name} {info.last_name} {t(info.suffix)} - - - - - - - - - - - - {/* */} - - + + + + + + {t(info.title)} {info.first_name} {info.last_name} {t(info.suffix)} + + + + + + + + + + + + {/* */} + + + ); }; - -export default PersPrefInfo; From 5d8251667475e399fb92b2d98dd8305de3bb4b88 Mon Sep 17 00:00:00 2001 From: John Plastow Date: Fri, 17 Sep 2021 12:01:47 -0700 Subject: [PATCH 014/103] Getting rid of custom styled comp --- .../preferences/personal/info/PersPrefInfo.tsx | 8 ++------ 1 file changed, 2 insertions(+), 6 deletions(-) diff --git a/pages/accountLists/[accountListId]/preferences/personal/info/PersPrefInfo.tsx b/pages/accountLists/[accountListId]/preferences/personal/info/PersPrefInfo.tsx index daa92a692..cbcfc5b3a 100644 --- a/pages/accountLists/[accountListId]/preferences/personal/info/PersPrefInfo.tsx +++ b/pages/accountLists/[accountListId]/preferences/personal/info/PersPrefInfo.tsx @@ -17,10 +17,6 @@ import { PersPrefAnniversary } from './PersPrefAnniversary'; import { PersPrefSocials } from './PersPrefSocials'; // import { PersPrefModal } from "./Modals/PersPrefModal"; -const InfoCard = styled(Card)(() => ({ - position: 'relative', -})); - const StyledContactTop = styled(Box)(({ theme }) => ({ display: 'flex', alignItems: 'center', @@ -97,7 +93,7 @@ export const PersPrefInfo: React.FC = () => { ]; return ( - + { {/* */} - + ); }; From 5f679cf5dd55168757492b0bba59c117dfddbcb8 Mon Sep 17 00:00:00 2001 From: John Plastow Date: Mon, 20 Sep 2021 10:37:00 -0700 Subject: [PATCH 015/103] Continuing modal conversion to TSX - lots of errors --- .../personal/info/PersPrefInfo.tsx | 6 +- .../personal/modals/PersPrefModal.tsx | 107 ++++++++++++++++ .../personal/modals/PersPrefModalShared.tsx | 115 ++++++++++++++++++ 3 files changed, 226 insertions(+), 2 deletions(-) create mode 100644 pages/accountLists/[accountListId]/preferences/personal/modals/PersPrefModal.tsx create mode 100644 pages/accountLists/[accountListId]/preferences/personal/modals/PersPrefModalShared.tsx diff --git a/pages/accountLists/[accountListId]/preferences/personal/info/PersPrefInfo.tsx b/pages/accountLists/[accountListId]/preferences/personal/info/PersPrefInfo.tsx index cbcfc5b3a..5105db373 100644 --- a/pages/accountLists/[accountListId]/preferences/personal/info/PersPrefInfo.tsx +++ b/pages/accountLists/[accountListId]/preferences/personal/info/PersPrefInfo.tsx @@ -11,11 +11,11 @@ import { } from '@material-ui/core'; import { Edit } from '@material-ui/icons'; import { info } from '../DemoContent'; +import { PersPrefModal } from '../modals/PersPrefModal'; import { PersPrefWork } from './PersPrefWork'; import { PersPrefContacts } from './PersPrefContacts'; import { PersPrefAnniversary } from './PersPrefAnniversary'; import { PersPrefSocials } from './PersPrefSocials'; -// import { PersPrefModal } from "./Modals/PersPrefModal"; const StyledContactTop = styled(Box)(({ theme }) => ({ display: 'flex', @@ -124,7 +124,9 @@ export const PersPrefInfo: React.FC = () => { - {/* */} + {profileOpen ? ( + setProfileOpen(false)} /> + ) : null} diff --git a/pages/accountLists/[accountListId]/preferences/personal/modals/PersPrefModal.tsx b/pages/accountLists/[accountListId]/preferences/personal/modals/PersPrefModal.tsx new file mode 100644 index 000000000..90c9d08df --- /dev/null +++ b/pages/accountLists/[accountListId]/preferences/personal/modals/PersPrefModal.tsx @@ -0,0 +1,107 @@ +import React, { useState } from 'react'; +import { useTranslation } from 'react-i18next'; +import { + AppBar, + Box, + Button, + DialogContent, + Tab, + Tabs, + styled, +} from '@material-ui/core'; +import Modal from '../../../../../../src/components/common/Modal/Modal'; +import { StyledDialogActions } from './PersPrefModalShared'; +import { PersPrefModalContact } from './PersPrefModalContact'; +import { PersPrefModalDetails } from './PersPrefModalDetails'; +import { PersPrefModalSocial } from './PersPrefModalSocial'; +import { PersPrefModalRelationships } from './PersPrefModalRelationships'; +import { PersPrefModalName } from './PersPrefModalName'; + +const StyledAppBar = styled(AppBar)(({ theme }) => ({ + boxShadow: 'none', + backgroundColor: 'transparent', + color: theme.palette.text.primary, + marginBottom: theme.spacing(2), +})); + +const StyledTabs = styled(Tabs)(({ theme }) => ({ + '& .MuiTabs-flexContainer > *': { + flexGrow: 1, + }, + '& .MuiTabs-indicator': { + backgroundColor: theme.palette.primary.main, + }, + [theme.breakpoints.down('xs')]: { + '& .MuiTabs-flexContainer': { display: 'block' }, + '& .MuiTabs-indicator': { display: 'none' }, + '& .MuiTab-root': { display: 'block', width: '100%', maxWidth: 'unset' }, + }, +})); + +const StyledTab = styled(Tab)(({ theme }) => ({ + fontSize: 16, + borderBottom: `${theme.palette.divider} 2px solid`, + '&.Mui-selected': { + color: theme.palette.primary.main, + }, +})); + +interface PersPrefModalProps { + handleClose: () => void; +} + +export const PersPrefModal: React.FC = ({ + handleClose, +}) => { + const { t } = useTranslation(); + const [openTab, setOpenTab] = useState(0); + + const handleChange = (newValue: number) => { + setOpenTab(newValue); + }; + + const tabData = [ + { label: 'Contact Info', data: }, + { label: 'Details', data: }, + { label: 'Social', data: }, + { label: 'Relationships', data: }, + ]; + + return ( + +
+ + + + + {tabData.map((current, index) => ( + + ))} + + + {tabData.map((current, index) => ( + + ))} + + + + + +
+ + ); +}; diff --git a/pages/accountLists/[accountListId]/preferences/personal/modals/PersPrefModalShared.tsx b/pages/accountLists/[accountListId]/preferences/personal/modals/PersPrefModalShared.tsx new file mode 100644 index 000000000..a144deb3b --- /dev/null +++ b/pages/accountLists/[accountListId]/preferences/personal/modals/PersPrefModalShared.tsx @@ -0,0 +1,115 @@ +import { + Box, + DialogActions, + Divider, + Grid, + GridProps, + Hidden, + IconButton, + Typography, + styled, +} from '@material-ui/core'; +import { Delete } from '@material-ui/icons'; + +export const SectionHeading = styled(Typography)(() => ({ + fontWeight: 700, + lineHeight: 1, + display: 'block', +})); + +const SmallColumnLabels = styled(Grid)(({ _, align }) => ({ + display: 'flex', + justifyContent: align === 'left' ? 'flex-start' : 'center', + alignItems: 'flex-end', + '& span': { + fontSize: '0.6875em', + lineHeight: 1, + }, +})); + +interface OptionHeadingsProps { + smallCols: boolean | GridProps['GridSize'] | undefined; + align: string; +} + +export const OptionHeadings: React.FC = ({ + smallCols, + align, + children, +}) => ( + + {children} + +); + +export const EmptyIcon = ({ size = 24 }) => { + return ( + + ); +}; + +const btnBorder = '1px solid rgba(0, 0, 0, 0.23)'; + +export const StyledGridContainer = styled(Grid)(({ theme }) => ({ + [theme.breakpoints.down('xs')]: { + border: btnBorder, + borderRadius: theme.shape.borderRadius, + "&[class*='WithStyles']": { + marginTop: theme.spacing(1), + "& + [class*='WithStyles']": { + marginTop: theme.spacing(3), + }, + }, + }, +})); + +export const StyledGridItem = styled(Grid)(({ theme }) => ({ + display: 'flex', + justifyContent: 'space-between', + alignItems: 'center', + '& .MuiButtonBase-root': { + border: btnBorder, + borderRadius: 4, + padding: 9, + }, + [theme.breakpoints.up('sm')]: { + justifyContent: 'center', + }, +})); + +export const HiddenSmLabel = ({ children }) => ( + + {children} + +); + +export const DeleteButton = () => ( + <> + Delete + + + + +); + +export const AddButtonBox = styled(Box)(({ theme }) => ({ + marginTop: theme.spacing(3), + [theme.breakpoints.up('sm')]: { marginTop: theme.spacing(1) }, +})); + +export const StyledDivider = styled(Divider)( + ({ marginTop = null, marginBottom = null, marginY = 3, theme }) => { + return { + marginTop: theme.spacing(marginTop ? marginTop : marginY), + marginLeft: 0, + marginRight: 0, + marginBottom: theme.spacing(marginBottom ? marginBottom : marginY), + }; + }, +); + +export const StyledDialogActions = styled(DialogActions)(({ theme }) => ({ + padding: `${theme.spacing(2)}px ${theme.spacing(3)}px`, +})); From 2afb58fa98a05b71a6391dcf5d657388005b1753 Mon Sep 17 00:00:00 2001 From: John Plastow Date: Tue, 21 Sep 2021 13:37:55 -0700 Subject: [PATCH 016/103] Troubleshooting accordion --- .../preferences/personal.page.tsx | 71 +++++++++- .../personal/accordions/PersPrefGroup.tsx | 27 ++++ .../personal/accordions/PersPrefItem.tsx | 127 ++++++++++++++++++ .../[accountListId]/preferences/wrapper.tsx | 7 +- 4 files changed, 223 insertions(+), 9 deletions(-) create mode 100644 pages/accountLists/[accountListId]/preferences/personal/accordions/PersPrefGroup.tsx create mode 100644 pages/accountLists/[accountListId]/preferences/personal/accordions/PersPrefItem.tsx diff --git a/pages/accountLists/[accountListId]/preferences/personal.page.tsx b/pages/accountLists/[accountListId]/preferences/personal.page.tsx index db61918c6..12f228036 100644 --- a/pages/accountLists/[accountListId]/preferences/personal.page.tsx +++ b/pages/accountLists/[accountListId]/preferences/personal.page.tsx @@ -1,22 +1,79 @@ -import React from 'react'; -import { useTranslation } from 'react-i18next'; -import { Box } from '@material-ui/core'; +import React, { useState } from 'react'; +import { + Accordion, + AccordionDetails, + AccordionSummary, + Box, +} from '@material-ui/core'; import { PreferencesWrapper } from './wrapper'; import { PersPrefInfo } from './personal/info/PersPrefInfo'; +import { PersPrefGroup } from './personal/accordions/PersPrefGroup'; +import { PersPrefItem2 } from './personal/accordions/PersPrefItem'; const PersonalPreferences: React.FC = () => { - const { t } = useTranslation(); + // const [expandedPanel, setExpandedPanel] = useState(''); + + // const handleAccordionChange = (panel: string) => ( + // event: React.ChangeEvent<{}>, + // ) => { + // setExpandedPanel(expandedPanel === panel ? '' : panel); + // }; + const [expanded, setExpanded] = useState(''); + + const handleChange = (panel: string) => ( + event: React.ChangeEvent>, + isExpanded: boolean, + ) => { + console.log('handleChange triggered!'); + setExpanded(isExpanded ? panel : ''); + }; return ( -
Main content area
+ + + Hello world! + + + + Panel 1 + Details + + + + + Panel 2 + Details + + + {/* + Hello + */} + + Hello ); diff --git a/pages/accountLists/[accountListId]/preferences/personal/accordions/PersPrefGroup.tsx b/pages/accountLists/[accountListId]/preferences/personal/accordions/PersPrefGroup.tsx new file mode 100644 index 000000000..0a6bf708f --- /dev/null +++ b/pages/accountLists/[accountListId]/preferences/personal/accordions/PersPrefGroup.tsx @@ -0,0 +1,27 @@ +import React from 'react'; +import { useTranslation } from 'react-i18next'; +import { Box, Typography, styled } from '@material-ui/core'; + +const StyledGroupWrapper = styled(Box)(({ theme }) => ({ + marginBottom: theme.spacing(3), +})); + +interface PersPrefGroupProps { + title: string; +} + +export const PersPrefGroup: React.FC = ({ + title, + children, +}) => { + const { t } = useTranslation(); + + return ( + + + {t(title)} + + {children} + + ); +}; diff --git a/pages/accountLists/[accountListId]/preferences/personal/accordions/PersPrefItem.tsx b/pages/accountLists/[accountListId]/preferences/personal/accordions/PersPrefItem.tsx new file mode 100644 index 000000000..36cb25a8f --- /dev/null +++ b/pages/accountLists/[accountListId]/preferences/personal/accordions/PersPrefItem.tsx @@ -0,0 +1,127 @@ +import React from 'react'; +import { useTranslation } from 'react-i18next'; +import { + Accordion, + AccordionDetails, + AccordionSummary, + Box, + Typography, + styled, +} from '@material-ui/core'; +import { ExpandMore } from '@material-ui/icons'; +import { accordionShared } from '../shared/PersPrefShared'; + +const StyledAccordion = styled(Accordion)(({ theme }) => ({ + border: '#000 1px solid', + margin: `${theme.spacing(1)}px 0`, + '&.Mui-expanded': { + margin: `${theme.spacing(1)}px 0`, + }, + '&:first-child': { + marginTop: theme.spacing(2), + }, + '& .MuiAccordionSummary-content.Mui-expanded': { + margin: '12px 0', + }, + ...accordionShared, +})); + +const StyledAccordionSummary = styled(AccordionSummary)(({ theme }) => ({ + '& .MuiAccordionSummary-content': { + alignItems: 'center', + [theme.breakpoints.down('xs')]: { + flexWrap: 'wrap', + }, + }, +})); + +const StyledAccordionColumn = styled(Box)(({ theme }) => ({ + paddingRight: theme.spacing(2), + boxSizing: 'border-box', + [theme.breakpoints.down('xs')]: { + flexBasis: '100% !important', + '&:nth-child(2)': { + fontStyle: 'italic', + }, + }, +})); + +const StyledAccordionDetails = styled(Box)(({ theme }) => ({ + [theme.breakpoints.up('sm')]: { + width: 'calc((100% - 36px) * 0.6666)', + marginLeft: 'calc((100% - 36px) * 0.3333)', + }, +})); + +interface PersPrefItemProps { + onAccordionChange: () => void; + expandedPanel: string; + label: string; + value: string; +} + +export const PersPrefItem: React.FC = ({ + onAccordionChange, + expandedPanel, + label, + value, + children, +}) => { + const { t } = useTranslation(); + const firstCol = value !== '' ? '33.33%' : '100%'; + + return ( + onAccordionChange(label)} + expanded={expandedPanel === label} + > + }> + + {t(label)} + + {value !== '' && ( + + {t(value)} + + )} + + + {children} + + + ); +}; + +interface PersPrefItem2Props { + onAccordionChange: (label: string) => void; + expandedPanel: string; + label: string; + value: string; +} + +export const PersPrefItem2: React.FC = ({ + onAccordionChange, + expandedPanel, + label, + value, + children, +}) => { + return ( + + onAccordionChange(label)} + > + + {label} - {value} + + {children} + + + ); +}; diff --git a/pages/accountLists/[accountListId]/preferences/wrapper.tsx b/pages/accountLists/[accountListId]/preferences/wrapper.tsx index ce6cc272c..959bf27ad 100644 --- a/pages/accountLists/[accountListId]/preferences/wrapper.tsx +++ b/pages/accountLists/[accountListId]/preferences/wrapper.tsx @@ -1,4 +1,5 @@ import React from 'react'; +import { useTranslation } from 'react-i18next'; import Head from 'next/head'; import { Box, Typography, styled } from '@material-ui/core'; @@ -18,15 +19,17 @@ export const PreferencesWrapper: React.FC = ({ pageHeading, children, }) => { + const { t } = useTranslation(); + return ( <> - MPDX | {pageTitle} + MPDX | {t(pageTitle)} - {pageHeading} + {t(pageHeading)} {children} From 2392d99c59f6adfc15ff5696397e9de2b8c32e6c Mon Sep 17 00:00:00 2001 From: John Plastow Date: Tue, 21 Sep 2021 15:46:40 -0700 Subject: [PATCH 017/103] Accordions w/o forms --- .../preferences/personal.page.tsx | 162 ++++++++++++------ .../personal/accordions/PersPrefGroup.tsx | 2 +- .../personal/accordions/PersPrefItem.tsx | 84 +++------ .../personal/info/PersPrefContacts.tsx | 1 + .../personal/shared/PersPrefShared.tsx | 1 - 5 files changed, 137 insertions(+), 113 deletions(-) diff --git a/pages/accountLists/[accountListId]/preferences/personal.page.tsx b/pages/accountLists/[accountListId]/preferences/personal.page.tsx index 12f228036..c1e85f685 100644 --- a/pages/accountLists/[accountListId]/preferences/personal.page.tsx +++ b/pages/accountLists/[accountListId]/preferences/personal.page.tsx @@ -1,31 +1,15 @@ import React, { useState } from 'react'; -import { - Accordion, - AccordionDetails, - AccordionSummary, - Box, -} from '@material-ui/core'; +import { Box } from '@material-ui/core'; import { PreferencesWrapper } from './wrapper'; import { PersPrefInfo } from './personal/info/PersPrefInfo'; import { PersPrefGroup } from './personal/accordions/PersPrefGroup'; -import { PersPrefItem2 } from './personal/accordions/PersPrefItem'; +import { PersPrefItem } from './personal/accordions/PersPrefItem'; const PersonalPreferences: React.FC = () => { - // const [expandedPanel, setExpandedPanel] = useState(''); + const [expandedPanel, setExpandedPanel] = useState(''); - // const handleAccordionChange = (panel: string) => ( - // event: React.ChangeEvent<{}>, - // ) => { - // setExpandedPanel(expandedPanel === panel ? '' : panel); - // }; - const [expanded, setExpanded] = useState(''); - - const handleChange = (panel: string) => ( - event: React.ChangeEvent>, - isExpanded: boolean, - ) => { - console.log('handleChange triggered!'); - setExpanded(isExpanded ? panel : ''); + const handleAccordionChange = (panel: string) => { + setExpandedPanel(expandedPanel === panel ? '' : panel); }; return ( @@ -38,42 +22,118 @@ const PersonalPreferences: React.FC = () => { - - Hello world! - - - - Panel 1 - Details - - - - - Panel 2 - Details - - - {/* - Hello - */} + Content + + + {/* Locale */} + + Content + + + {/* Default Account */} + + Content + + + {/* Timezone */} + + Content + + + {/* Time to Send Notifications */} + + Content + + + + + {/* Account Name */} + + Content + + + {/* Monthly Goal */} + + Content + + + {/* Home Country */} + + Content + + + {/* Default Currency */} + + Content + + + {/* Early Adopter */} + + Content + + + {/* MPD Info */} + + Content + - Hello ); diff --git a/pages/accountLists/[accountListId]/preferences/personal/accordions/PersPrefGroup.tsx b/pages/accountLists/[accountListId]/preferences/personal/accordions/PersPrefGroup.tsx index 0a6bf708f..c293accec 100644 --- a/pages/accountLists/[accountListId]/preferences/personal/accordions/PersPrefGroup.tsx +++ b/pages/accountLists/[accountListId]/preferences/personal/accordions/PersPrefGroup.tsx @@ -18,7 +18,7 @@ export const PersPrefGroup: React.FC = ({ return ( - + {t(title)} {children} diff --git a/pages/accountLists/[accountListId]/preferences/personal/accordions/PersPrefItem.tsx b/pages/accountLists/[accountListId]/preferences/personal/accordions/PersPrefItem.tsx index 36cb25a8f..297e6da52 100644 --- a/pages/accountLists/[accountListId]/preferences/personal/accordions/PersPrefItem.tsx +++ b/pages/accountLists/[accountListId]/preferences/personal/accordions/PersPrefItem.tsx @@ -11,20 +11,12 @@ import { import { ExpandMore } from '@material-ui/icons'; import { accordionShared } from '../shared/PersPrefShared'; -const StyledAccordion = styled(Accordion)(({ theme }) => ({ - border: '#000 1px solid', - margin: `${theme.spacing(1)}px 0`, - '&.Mui-expanded': { - margin: `${theme.spacing(1)}px 0`, - }, - '&:first-child': { - marginTop: theme.spacing(2), - }, +const StyledAccordion = styled(Accordion)({ '& .MuiAccordionSummary-content.Mui-expanded': { margin: '12px 0', }, ...accordionShared, -})); +}); const StyledAccordionSummary = styled(AccordionSummary)(({ theme }) => ({ '& .MuiAccordionSummary-content': { @@ -54,7 +46,7 @@ const StyledAccordionDetails = styled(Box)(({ theme }) => ({ })); interface PersPrefItemProps { - onAccordionChange: () => void; + onAccordionChange: (label: string) => void; expandedPanel: string; label: string; value: string; @@ -71,57 +63,29 @@ export const PersPrefItem: React.FC = ({ const firstCol = value !== '' ? '33.33%' : '100%'; return ( - onAccordionChange(label)} - expanded={expandedPanel === label} - > - }> - - {t(label)} - - {value !== '' && ( - - {t(value)} - - )} - - - {children} - - - ); -}; - -interface PersPrefItem2Props { - onAccordionChange: (label: string) => void; - expandedPanel: string; - label: string; - value: string; -} - -export const PersPrefItem2: React.FC = ({ - onAccordionChange, - expandedPanel, - label, - value, - children, -}) => { - return ( - - + onAccordionChange(label)} + expanded={expandedPanel === label} > - - {label} - {value} - - {children} - + }> + + {t(label)} + + {value !== '' && ( + + {t(value)} + + )} + + + {children} + + ); }; diff --git a/pages/accountLists/[accountListId]/preferences/personal/info/PersPrefContacts.tsx b/pages/accountLists/[accountListId]/preferences/personal/info/PersPrefContacts.tsx index cca60b903..6f395e64d 100644 --- a/pages/accountLists/[accountListId]/preferences/personal/info/PersPrefContacts.tsx +++ b/pages/accountLists/[accountListId]/preferences/personal/info/PersPrefContacts.tsx @@ -14,6 +14,7 @@ import { accordionShared } from '../shared/PersPrefShared'; const StyledAccordion = styled(Accordion)({ backgroundColor: 'transparent', + boxShadow: 'none', '&.Mui-expanded': { margin: 0, }, diff --git a/pages/accountLists/[accountListId]/preferences/personal/shared/PersPrefShared.tsx b/pages/accountLists/[accountListId]/preferences/personal/shared/PersPrefShared.tsx index aabe80b45..adc0a5d30 100644 --- a/pages/accountLists/[accountListId]/preferences/personal/shared/PersPrefShared.tsx +++ b/pages/accountLists/[accountListId]/preferences/personal/shared/PersPrefShared.tsx @@ -1,5 +1,4 @@ export const accordionShared = { - boxShadow: 'none', '&:before': { content: 'none', }, From 7d32c945c2c129409ce0e986c54092c0d84deafe Mon Sep 17 00:00:00 2001 From: John Plastow Date: Fri, 24 Sep 2021 13:53:39 -0700 Subject: [PATCH 018/103] Finishing accordion options Contains commented out code for possible refactoring --- .../preferences/personal.page.tsx | 111 ++++++- .../preferences/personal/DemoContent.tsx | 92 ++++++ .../personal/accordions/PersPrefItem.tsx | 4 +- .../personal/shared/PersPrefForms.tsx | 297 ++++++++++++++++++ 4 files changed, 491 insertions(+), 13 deletions(-) create mode 100644 pages/accountLists/[accountListId]/preferences/personal/shared/PersPrefForms.tsx diff --git a/pages/accountLists/[accountListId]/preferences/personal.page.tsx b/pages/accountLists/[accountListId]/preferences/personal.page.tsx index c1e85f685..7ba0c3e83 100644 --- a/pages/accountLists/[accountListId]/preferences/personal.page.tsx +++ b/pages/accountLists/[accountListId]/preferences/personal.page.tsx @@ -1,11 +1,23 @@ import React, { useState } from 'react'; -import { Box } from '@material-ui/core'; +import { Box, styled, useTheme } from '@material-ui/core'; import { PreferencesWrapper } from './wrapper'; import { PersPrefInfo } from './personal/info/PersPrefInfo'; import { PersPrefGroup } from './personal/accordions/PersPrefGroup'; import { PersPrefItem } from './personal/accordions/PersPrefItem'; +import { PersPrefField, PersPrefForm } from './personal/shared/PersPrefForms'; +import { language, locale } from './personal/DemoContent'; + +const StyledColumnsWrapper = styled(Box)(({ theme }) => ({ + '& .MuiFormControl-root': { + width: `calc(50% - ${theme.spacing(1)}px)`, + '&:nth-child(2n)': { + marginLeft: theme.spacing(2), + }, + }, +})); const PersonalPreferences: React.FC = () => { + const theme = useTheme(); const [expandedPanel, setExpandedPanel] = useState(''); const handleAccordionChange = (panel: string) => { @@ -29,7 +41,15 @@ const PersonalPreferences: React.FC = () => { label="Language" value="US English" > - Content + + + {/* Locale */} @@ -39,7 +59,15 @@ const PersonalPreferences: React.FC = () => { label="Locale" value="English" > - Content + + + {/* Default Account */} @@ -49,7 +77,13 @@ const PersonalPreferences: React.FC = () => { label="Default Account" value="Test account" > - Content + + + {/* Timezone */} @@ -59,7 +93,13 @@ const PersonalPreferences: React.FC = () => { label="Timezone" value="Central America" > - Content + + + {/* Time to Send Notifications */} @@ -69,7 +109,13 @@ const PersonalPreferences: React.FC = () => { label="Time to Send Notifications" value="Immediately" > - Content + + + @@ -81,7 +127,12 @@ const PersonalPreferences: React.FC = () => { label="Account Name" value="Test account" > - Content + + + {/* Monthly Goal */} @@ -91,7 +142,12 @@ const PersonalPreferences: React.FC = () => { label="Monthly Goal" value="10,000.00" > - Content + + + {/* Home Country */} @@ -101,7 +157,13 @@ const PersonalPreferences: React.FC = () => { label="Home Country" value="United States of America" > - Content + + + {/* Default Currency */} @@ -111,7 +173,9 @@ const PersonalPreferences: React.FC = () => { label="Default Currency" value="USD" > - Content + + + {/* Early Adopter */} @@ -121,7 +185,19 @@ const PersonalPreferences: React.FC = () => { label="Early Adopter" value="No" > - Content + + + {/* MPD Info */} @@ -131,7 +207,18 @@ const PersonalPreferences: React.FC = () => { label="MPD Info" value="" > - Content + + + + + + + diff --git a/pages/accountLists/[accountListId]/preferences/personal/DemoContent.tsx b/pages/accountLists/[accountListId]/preferences/personal/DemoContent.tsx index 20229ce34..7c8e566e8 100644 --- a/pages/accountLists/[accountListId]/preferences/personal/DemoContent.tsx +++ b/pages/accountLists/[accountListId]/preferences/personal/DemoContent.tsx @@ -63,3 +63,95 @@ export const info = { twitter_accounts: ['CruTweets'], websites: ['https://cru.org'], }; + +export const language = [ + ['en-US', 'US English'], + ['ar', 'Arabic (العربية)'], + ['hy', 'Armenian'], + ['my', 'Myanmar Language'], + ['zh-Hans', 'Simplified Chinese (简体中文)'], + ['nl', 'Dutch (Nederlands)'], + ['fr-ca', 'Canadian French (français canadien)'], + ['fr', 'French (français)'], + ['de', 'German (Deutsch)'], + ['gsw', 'Swiss High German (Schweizer Hochdeutsch)'], + ['id', 'Indonesian (Indonesia)'], + ['it', 'Italian (italiano)'], + ['ko', 'Korean (한국어)'], + ['pl', 'Polish (polski)'], + ['pt-br', 'Brazilian Portuguese (português do Brasil)'], + ['ru', 'Russian (русский)'], + ['es-419', 'Latin American Spanish (español latinoamericano)'], + ['th', 'Thai (ไทย)'], + ['tr', 'Turkish (Türkçe)'], + ['uk', 'Ukrainian (українська)'], + ['vi', 'Vietnamese (Tiếng Việt)'], +]; + +export const locale = [ + ['af', 'Afrikaans (af) (Afrikaans - af)'], + ['sq', 'Albanian (sq) (shqip - sq)'], + ['ar', 'Arabic (ar) (العربية - ar)'], + ['en-AU', 'Australian English (en-AU) (Australian English - en-au)'], + ['eu', 'Basque (eu) (euskara - eu)'], + ['be', 'Belarusian (be) (беларуская - be)'], + ['bn', 'Bengali (bn) (বাংলা - bn)'], + ['bg', 'Bulgarian (bg) (български - bg)'], + ['en-CA', 'Canadian English (en-CA) (Canadian English - en-ca)'], + ['fr-CA', 'Canadian French (fr-CA) (français canadien - fr-ca)'], + ['ca', 'Catalan (ca) (català - ca)'], + ['zh', 'Chinese (zh) (中文 - zh)'], + ['hr', 'Croatian (hr) (hrvatski - hr)'], + ['cs', 'Czech (cs) (čeština - cs)'], + ['da', 'Danish (da) (dansk - da)'], + ['nl', 'Dutch (nl) (Nederlands - nl)'], + ['en', 'English (en) (English - en)'], + ['fil', 'Filipino (fil) (Filipino - fil)'], + ['fi', 'Finnish (fi) (suomi - fi)'], + ['fr', 'French (fr) (français - fr)'], + ['gl', 'Galician (gl) (galego - gl)'], + ['de', 'German (de) (Deutsch - de)'], + ['el', 'Greek (el) (Ελληνικά - el)'], + ['gu', 'Gujarati (gu) (ગુજરાતી - gu)'], + ['he', 'Hebrew (he) (עברית - he)'], + ['hi', 'Hindi (hi) (हिन्दी - hi)'], + ['hu', 'Hungarian (hu) (magyar - hu)'], + ['is', 'Icelandic (is) (íslenska - is)'], + ['id', 'Indonesian (id) (Indonesia - id)'], + ['ga', 'Irish (ga) (Gaeilge - ga)'], + ['it', 'Italian (it) (italiano - it)'], + ['ja', 'Japanese (ja) (日本語 - ja)'], + ['kn', 'Kannada (kn) (ಕನ್ನಡ - kn)'], + ['ko', 'Korean (ko) (한국어 - ko)'], + [ + 'es-419', + 'Latin American Spanish (es-419) (español latinoamericano - es-419)', + ], + ['lv', 'Latvian (lv) (latviešu - lv)'], + ['ms', 'Malay (ms) (Bahasa Melayu - ms)'], + ['mr', 'Marathi (mr) (मराठी - mr)'], + ['es-MX', 'Mexican Spanish (es-MX) (español de México - es-mx)'], + ['nb', 'Norwegian Bokmål (nb) (norsk bokmål - nb)'], + ['fa', 'Persian (fa) (فارسی - fa)'], + ['pl', 'Polish (pl) (polski - pl)'], + ['pt', 'Portuguese (pt) (português - pt)'], + ['ro', 'Romanian (ro) (română - ro)'], + ['ru', 'Russian (ru) (русский - ru)'], + ['sr', 'Serbian (sr) (српски - sr)'], + ['sk', 'Slovak (sk) (slovenčina - sk)'], + ['sl', 'Slovenian (sl) (slovenščina - sl)'], + ['es', 'Spanish (es) (español - es)'], + ['sv', 'Swedish (sv) (svenska - sv)'], + ['fr-CH', 'Swiss French (fr-CH) (français suisse - fr-ch)'], + ['de-CH', 'Swiss High German (de-CH) (Schweizer Hochdeutsch - de-ch)'], + ['ta', 'Tamil (ta) (தமிழ் - ta)'], + ['th', 'Thai (th) (ไทย - th)'], + ['bo', 'Tibetan (bo) (བོད་སྐད་ - bo)'], + ['zh-Hant', 'Traditional Chinese (zh-Hant) (繁體中文 - zh-hant)'], + ['tr', 'Turkish (tr) (Türkçe - tr)'], + ['en-GB', 'UK English (en-GB) (UK English - en-gb)'], + ['uk', 'Ukrainian (uk) (українська - uk)'], + ['ur', 'Urdu (ur) (اردو - ur)'], + ['vi', 'Vietnamese (vi) (Tiếng Việt - vi)'], + ['cy', 'Welsh (cy) (Cymraeg - cy)'], +]; diff --git a/pages/accountLists/[accountListId]/preferences/personal/accordions/PersPrefItem.tsx b/pages/accountLists/[accountListId]/preferences/personal/accordions/PersPrefItem.tsx index 297e6da52..f0492155c 100644 --- a/pages/accountLists/[accountListId]/preferences/personal/accordions/PersPrefItem.tsx +++ b/pages/accountLists/[accountListId]/preferences/personal/accordions/PersPrefItem.tsx @@ -83,7 +83,9 @@ export const PersPrefItem: React.FC = ({ )} - {children} + + {children} + diff --git a/pages/accountLists/[accountListId]/preferences/personal/shared/PersPrefForms.tsx b/pages/accountLists/[accountListId]/preferences/personal/shared/PersPrefForms.tsx new file mode 100644 index 000000000..224faab4e --- /dev/null +++ b/pages/accountLists/[accountListId]/preferences/personal/shared/PersPrefForms.tsx @@ -0,0 +1,297 @@ +import React, { ReactElement, useState } from 'react'; +import { + Button, + Checkbox, + FormControl, + FormControlLabel, + FormControlLabelProps, + FormHelperText, + FormLabel, + MenuItem, + OutlinedInput, + OutlinedInputProps, + Radio, + Select, + Theme, + styled, + useTheme, +} from '@material-ui/core'; +import { + CheckBox, + CheckBoxOutlineBlank, + RadioButtonChecked, + RadioButtonUnchecked, +} from '@material-ui/icons'; + +const StyledFormLabel = styled(FormLabel)(({ theme }) => ({ + color: theme.palette.text.primary, + fontWeight: 700, + '& .MuiFormControlLabel-label': { + fontWeight: '700', + }, +})); + +const StyledFormHelperText = styled(FormHelperText)(({ theme }) => ({ + margin: 0, + fontSize: 16, + color: theme.palette.text.primary, + '&:not(:first-child)': { + marginTop: theme.spacing(1), + }, +})); + +const SharedFieldStyles = ({ theme }: { theme: Theme }) => ({ + '&:not(:first-child)': { + marginTop: theme.spacing(1), + }, +}); + +const StyledOutlinedInput = styled(OutlinedInput)(SharedFieldStyles); +const StyledSelect = styled(Select)(SharedFieldStyles); + +export const PersPrefForm: React.FC = ({ children }) => { + const theme = useTheme(); + return ( +
+ {children} + +
+ ); +}; + +// interface PersPrefFieldWrapperProps { +// label?: string; +// required?: boolean; +// disabled?: boolean; +// helperText?: string; +// helperPosition?: string; +// } + +// const PersPrefFieldWrapper: React.FC = ({ +// label, +// required, +// disabled, +// helperText, +// helperPosition, +// children, +// }) => { +// return ( +// +// {label !== '' && ( +// {label} +// )} +// {helperText !== '' && helperPosition === 'top' && ( +// {helperText} +// )} +// {children} +// {helperText !== '' && helperPosition === 'bottom' && ( +// {helperText} +// )} +// +// ); +// }; + +// interface PersPrefHelperWrapperProps { +// text?: string; +// position?: string; +// } + +// const PersPrefHelperWrapper: React.FC = ({ +// text = '', +// position = 'top', +// children, +// }) => { +// return ( +// <> +// {text !== '' && position === 'top' && ( +// {text} +// )} +// {children} +// {text !== '' && position === 'bottom' && ( +// {text} +// )} +// +// ); +// }; + +// interface PersPrefInputProps extends PersPrefFieldWrapperProps { +// type?: string; +// value?: string; +// placeholder?: string; +// startIcon?: OutlinedInputProps['startAdornment']; +// } + +// export const PersPrefInput: React.FC = ({ +// label = '', +// required = false, +// disabled = false, +// helperText = '', +// helperPosition = 'top', +// type = 'text', +// value = '', +// placeholder = '', +// startIcon = '', +// }) => { +// return ( +// +// +// +// ); +// }; + +interface PersPrefFieldProps { + label?: string; + helperText?: string; + helperPosition?: string; + type?: string; + inputType?: string; + inputValue?: string; + inputPlaceholder?: string; + inputStartIcon?: OutlinedInputProps['startAdornment'] | boolean; + options?: string[][]; + selectValue?: string; + labelPlacement?: FormControlLabelProps['labelPlacement']; + checkboxIcon?: ReactElement; + checkboxCheckedIcon?: ReactElement; + radioName?: string; + radioValue?: string; + radioIcon?: ReactElement; + radioCheckedIcon?: ReactElement; + checked?: boolean; + required?: boolean; + // onChange?: () => void; + className?: string; + disabled?: boolean; +} + +export const PersPrefField: React.FC = ({ + label = '', + helperText = '', + helperPosition = 'top', + type = 'input', + inputType = 'text', + inputValue = '', + inputPlaceholder = '', + inputStartIcon = false, + options = [ + ['option1', 'Option 1'], + ['option2', 'Option 2'], + ['option3', 'Option 3'], + ['option4', 'Option 4'], + ['option5', 'Option 5'], + ], + selectValue = options[0][0], + labelPlacement = 'end', + checkboxIcon = , + checkboxCheckedIcon = , + radioName = '', + radioValue = '', + radioIcon = , + radioCheckedIcon = , + checked = false, + required = false, + // onChange, + className = '', + disabled = false, +}) => { + const [selectValueState, setSelectValueState] = useState(selectValue); + + const handleChange = (event: React.ChangeEvent<{ value: unknown }>) => { + setSelectValueState(event.target.value as string); + }; + + return ( + + {/* Label */} + {label !== '' && ( + {label} + )} + + {/* Helper text */} + {helperText !== '' && helperPosition === 'top' && ( + {helperText} + )} + + {/* Input field */} + {type === 'input' && ( + + )} + + {/* Select field */} + {type === 'select' && ( + + {options.map((current, index) => { + return ( + + {current[1]} + + ); + })} + + )} + + {/* Checkboxes or Radios */} + {(type === 'checkbox' || type === 'radio') && + options.map((current, index) => { + const icon = + type === 'checkbox' ? ( + + ) : ( + + ); + + const val = type === 'checkbox' ? current[0] : radioValue; + + return ( + + ); + })} + + {/* Helper text */} + {helperText !== '' && helperPosition === 'bottom' && ( + {helperText} + )} + + ); +}; From 378abc97580c80951f710e741c781f9020d6cb62 Mon Sep 17 00:00:00 2001 From: John Plastow Date: Mon, 27 Sep 2021 11:29:17 -0700 Subject: [PATCH 019/103] Getting contact info modal error-free --- .../personal/modals/PersPrefModal.tsx | 21 +- .../personal/modals/PersPrefModalContact.tsx | 184 ++++++++++++++++++ .../personal/modals/PersPrefModalName.tsx | 38 ++++ .../personal/modals/PersPrefModalShared.tsx | 8 +- src/theme.ts | 6 + 5 files changed, 247 insertions(+), 10 deletions(-) create mode 100644 pages/accountLists/[accountListId]/preferences/personal/modals/PersPrefModalContact.tsx create mode 100644 pages/accountLists/[accountListId]/preferences/personal/modals/PersPrefModalName.tsx diff --git a/pages/accountLists/[accountListId]/preferences/personal/modals/PersPrefModal.tsx b/pages/accountLists/[accountListId]/preferences/personal/modals/PersPrefModal.tsx index 90c9d08df..c4a61ef7d 100644 --- a/pages/accountLists/[accountListId]/preferences/personal/modals/PersPrefModal.tsx +++ b/pages/accountLists/[accountListId]/preferences/personal/modals/PersPrefModal.tsx @@ -2,7 +2,6 @@ import React, { useState } from 'react'; import { useTranslation } from 'react-i18next'; import { AppBar, - Box, Button, DialogContent, Tab, @@ -56,7 +55,10 @@ export const PersPrefModal: React.FC = ({ const { t } = useTranslation(); const [openTab, setOpenTab] = useState(0); - const handleChange = (newValue: number) => { + const handleChange = ( + event: React.ChangeEvent>, + newValue: number, + ) => { setOpenTab(newValue); }; @@ -84,7 +86,7 @@ export const PersPrefModal: React.FC = ({ ))} - {tabData.map((current, index) => ( + {/* {tabData.map((current, index) => ( - ))} + ))} */} - - + diff --git a/pages/accountLists/[accountListId]/preferences/personal/modals/PersPrefModalContact.tsx b/pages/accountLists/[accountListId]/preferences/personal/modals/PersPrefModalContact.tsx new file mode 100644 index 000000000..b4698a7fa --- /dev/null +++ b/pages/accountLists/[accountListId]/preferences/personal/modals/PersPrefModalContact.tsx @@ -0,0 +1,184 @@ +import { + Button, + Checkbox, + Grid, + Hidden, + Radio, + Theme, + styled, + useTheme, +} from '@material-ui/core'; +import { AddCircle, Cancel, Check } from '@material-ui/icons'; +import { PersPrefField } from '../shared/PersPrefForms'; +import { info } from '../DemoContent'; +import { + AddButtonBox, + DeleteButton, + EmptyIcon, + HiddenSmLabel, + OptionHeadings, + SectionHeading, + StyledDivider, + StyledGridContainer, + StyledGridItem, +} from './PersPrefModalShared'; + +const SharedFieldHoverStyles = ({ theme }: { theme: Theme }) => ({ + '&&:hover': { + backgroundColor: theme.palette.action.hover, + }, +}); + +const StyledRadio = styled(Radio)(SharedFieldHoverStyles); +const StyledCheckbox = styled(Checkbox)(SharedFieldHoverStyles); + +interface AddContactProps { + current?: { + value: string; + type: string; + primary: boolean; + invalid: boolean; + }; + isPhone: boolean; + type: string; + index?: number; +} + +const AddContact: React.FC = ({ + current, + isPhone, + type, + index = 1000, +}) => { + const theme = useTheme(); + + if (!current) { + return null; + } + + const { value, type: category, primary, invalid } = current; + + return ( + + {/* Input field */} + + + + + {/* Contact category */} + + + + + {/* Primary contact method selection */} + + Primary + } + checkedIcon={ + + } + checked={primary} + disableRipple + /> + + + {/* Inactive contact method */} + + Invalid + } + checkedIcon={} + checked={invalid} + disableRipple + /> + + + {/* Delete contact method */} + + + + + ); +}; + +const ContactMethods: React.FC<{ type: string }> = ({ type }) => { + const isPhone = type === 'phone' ? true : false; + const data = isPhone ? info.phone : info.email; + + data.forEach((item, i) => { + if (item.primary === true) { + data.splice(i, 1); + data.unshift(item); + } + }); + + return ( + <> + + + + {isPhone ? 'Phone Numbers' : 'Email Addresses'} + + + + + Type + + Primary + Invalid + Delete + + + {data.map((current, index) => ( + + ))} + + + + + + ); +}; + +export const PersPrefModalContact: React.FC = () => { + return ( + <> + + + + + ); +}; diff --git a/pages/accountLists/[accountListId]/preferences/personal/modals/PersPrefModalName.tsx b/pages/accountLists/[accountListId]/preferences/personal/modals/PersPrefModalName.tsx new file mode 100644 index 000000000..173f13272 --- /dev/null +++ b/pages/accountLists/[accountListId]/preferences/personal/modals/PersPrefModalName.tsx @@ -0,0 +1,38 @@ +import React from 'react'; +import { Grid, styled } from '@material-ui/core'; +import { useTheme } from '@material-ui/core/styles'; +import { PersPrefField } from '../shared/PersPrefForms'; +import { info } from '../DemoContent'; + +const StyledGridItem = styled(Grid)(({ theme }) => ({ + [theme.breakpoints.down('xs')]: { + '&:not(:last-child) .MuiFormControl-root': { + marginBottom: 0, + }, + }, +})); + +export const PersPrefModalName: React.FC = () => { + const theme = useTheme(); + + return ( + + + + + + + + + + + + + + + ); +}; diff --git a/pages/accountLists/[accountListId]/preferences/personal/modals/PersPrefModalShared.tsx b/pages/accountLists/[accountListId]/preferences/personal/modals/PersPrefModalShared.tsx index a144deb3b..6586603a1 100644 --- a/pages/accountLists/[accountListId]/preferences/personal/modals/PersPrefModalShared.tsx +++ b/pages/accountLists/[accountListId]/preferences/personal/modals/PersPrefModalShared.tsx @@ -17,7 +17,7 @@ export const SectionHeading = styled(Typography)(() => ({ display: 'block', })); -const SmallColumnLabels = styled(Grid)(({ _, align }) => ({ +const SmallColumnLabels = styled(Grid)(({ align }) => ({ display: 'flex', justifyContent: align === 'left' ? 'flex-start' : 'center', alignItems: 'flex-end', @@ -28,13 +28,13 @@ const SmallColumnLabels = styled(Grid)(({ _, align }) => ({ })); interface OptionHeadingsProps { - smallCols: boolean | GridProps['GridSize'] | undefined; - align: string; + smallCols: GridProps['sm']; + align?: string; } export const OptionHeadings: React.FC = ({ smallCols, - align, + align = '', children, }) => ( diff --git a/src/theme.ts b/src/theme.ts index 5f9218c7c..672cb8f0d 100644 --- a/src/theme.ts +++ b/src/theme.ts @@ -14,6 +14,7 @@ const mpdxColors = { green: '#00CA99', blue: '#05699B', yellow: '#FFF5CD', + red: '#F44336', gray: '#DCDCDC', }; @@ -32,6 +33,7 @@ declare module '@mui/material/styles/createPalette' { mpdxGreen: Palette['primary']; mpdxBlue: Palette['primary']; mpdxYellow: Palette['primary']; + mpdxRed: Palette['primary']; mpdxGray: Palette['primary']; progressBarYellow: Palette['primary']; progressBarOrange: Palette['primary']; @@ -45,6 +47,7 @@ declare module '@mui/material/styles/createPalette' { mpdxGreen: PaletteOptions['primary']; mpdxBlue: PaletteOptions['primary']; mpdxYellow: PaletteOptions['primary']; + mpdxRed: PaletteOptions['primary']; mpdxGray: PaletteOptions['primary']; progressBarYellow: PaletteOptions['primary']; progressBarOrange: PaletteOptions['primary']; @@ -90,6 +93,9 @@ const theme = createTheme({ mpdxYellow: { main: mpdxColors.yellow, }, + mpdxRed: { + main: mpdxColors.red, + }, mpdxGray: { main: mpdxColors.gray, }, From ada8863e3075f30d705c95f9e642bbab436b48ef Mon Sep 17 00:00:00 2001 From: John Plastow Date: Mon, 27 Sep 2021 11:39:19 -0700 Subject: [PATCH 020/103] Details modal --- .../preferences/personal/DemoContent.tsx | 12 +-- .../personal/modals/PersPrefModalDetails.tsx | 92 +++++++++++++++++++ 2 files changed, 98 insertions(+), 6 deletions(-) create mode 100644 pages/accountLists/[accountListId]/preferences/personal/modals/PersPrefModalDetails.tsx diff --git a/pages/accountLists/[accountListId]/preferences/personal/DemoContent.tsx b/pages/accountLists/[accountListId]/preferences/personal/DemoContent.tsx index 7c8e566e8..bbc14bee8 100644 --- a/pages/accountLists/[accountListId]/preferences/personal/DemoContent.tsx +++ b/pages/accountLists/[accountListId]/preferences/personal/DemoContent.tsx @@ -1,13 +1,13 @@ export const info = { alma_mater: 'Sac State', - anniversary_day: 23, - anniversary_month: 6, - anniversary_year: 1979, + anniversary_day: '23', + anniversary_month: '6', + anniversary_year: '1979', avatar: 'https://lumiere-a.akamaihd.net/v1/images/ct_mickeymouseandfriends_mickey_ddt-16970_4e99445d.jpeg?region=0,0,600,600&width=480', - birthday_day: 7, - birthday_month: 10, - birthday_year: 1983, + birthday_day: '7', + birthday_month: '10', + birthday_year: '1983', email: [ { value: 'personal@test.com', diff --git a/pages/accountLists/[accountListId]/preferences/personal/modals/PersPrefModalDetails.tsx b/pages/accountLists/[accountListId]/preferences/personal/modals/PersPrefModalDetails.tsx new file mode 100644 index 000000000..5faeb3c58 --- /dev/null +++ b/pages/accountLists/[accountListId]/preferences/personal/modals/PersPrefModalDetails.tsx @@ -0,0 +1,92 @@ +import { Grid, styled } from '@material-ui/core'; +import { PersPrefField } from '../shared/PersPrefForms'; +import { info } from '../DemoContent'; +import { SectionHeading, StyledGridContainer } from './PersPrefModalShared'; + +const StyledGridContainerMobile = styled(Grid)(({ theme }) => ({ + [theme.breakpoints.down('xs')]: { + marginBottom: theme.spacing(1), + }, +})); + +interface DateSelectionProps { + month: string; + day: string; + year: string; +} + +const DateSelection: React.FC = ({ month, day, year }) => { + return ( + + + + + + + + + + + + ); +}; + +export const PersPrefModalDetails: React.FC = () => ( + + + + + + + + + Birthday + + + + Anniversary + + + + + + +); From 5aa44d78abad5693c7a5da3d94a4ba075f4ce1de Mon Sep 17 00:00:00 2001 From: John Plastow Date: Mon, 27 Sep 2021 12:20:38 -0700 Subject: [PATCH 021/103] Social modal --- .../personal/modals/PersPrefModalSocial.tsx | 138 ++++++++++++++++++ 1 file changed, 138 insertions(+) create mode 100644 pages/accountLists/[accountListId]/preferences/personal/modals/PersPrefModalSocial.tsx diff --git a/pages/accountLists/[accountListId]/preferences/personal/modals/PersPrefModalSocial.tsx b/pages/accountLists/[accountListId]/preferences/personal/modals/PersPrefModalSocial.tsx new file mode 100644 index 000000000..3b0a7c2b8 --- /dev/null +++ b/pages/accountLists/[accountListId]/preferences/personal/modals/PersPrefModalSocial.tsx @@ -0,0 +1,138 @@ +import { + Button, + ButtonProps, + Grid, + Hidden, + Typography, + styled, +} from '@material-ui/core'; +import { Facebook, Language, LinkedIn, Twitter } from '@material-ui/icons'; +import { ReactElement } from 'react'; +import { PersPrefField } from '../shared/PersPrefForms'; +import { info } from '../DemoContent'; +import { + AddButtonBox, + DeleteButton, + OptionHeadings, + SectionHeading, + StyledGridContainer, + StyledGridItem, +} from './PersPrefModalShared'; + +const StyledButton = styled(Button)(({ theme }) => ({ + [theme.breakpoints.down('xs')]: { + display: 'block', + width: '100%', + marginTop: theme.spacing(1), + '& .MuiButton-label': { + display: 'flex', + }, + }, + [theme.breakpoints.up('sm')]: { + marginLeft: theme.spacing(1), + }, +})); + +interface MediaRowProps { + localData: { + data: string[]; + mediaType: string; + placeholder: string; + icon: ReactElement; + inputType: string; + }; + savedData: string; +} + +const MediaRow: React.FC = ({ localData, savedData }) => ( + + + + + + + + + + + +); + +interface SocialButtonProps { + icon: ButtonProps['startIcon']; +} + +const SocialButton: React.FC = ({ icon, children }) => ( + + {children} + +); + +export const PersPrefModalSocial: React.FC = () => { + const connections = [ + { + data: info.facebook_accounts, + mediaType: 'Facebook', + placeholder: 'Username *', + icon: , + inputType: 'text', + }, + { + data: info.twitter_accounts, + mediaType: 'Twitter', + placeholder: 'Username *', + icon: , + inputType: 'text', + }, + { + data: info.linkedin_accounts, + mediaType: 'LinkedIn', + placeholder: 'http://linkedin.com/user1234 *', + icon: , + inputType: 'url', + }, + { + data: info.websites, + mediaType: 'Website', + placeholder: 'http://example.com *', + icon: , + inputType: 'url', + }, + ]; + + return ( + <> + + + Social Connections + + + + Type + + Delete + + + {connections.map((current) => + current.data.map((current2, index) => ( + + )), + )} + + + Add: + + {connections.map((current, index) => ( + + {current.mediaType} + + ))} + + + ); +}; From 01f1c3705cea9925ffb4df0a5104ccb39d3664d0 Mon Sep 17 00:00:00 2001 From: John Plastow Date: Mon, 27 Sep 2021 12:35:23 -0700 Subject: [PATCH 022/103] Relationships modal --- .../modals/PersPrefModalRelationships.tsx | 172 ++++++++++++++++++ 1 file changed, 172 insertions(+) create mode 100644 pages/accountLists/[accountListId]/preferences/personal/modals/PersPrefModalRelationships.tsx diff --git a/pages/accountLists/[accountListId]/preferences/personal/modals/PersPrefModalRelationships.tsx b/pages/accountLists/[accountListId]/preferences/personal/modals/PersPrefModalRelationships.tsx new file mode 100644 index 000000000..bf35c337b --- /dev/null +++ b/pages/accountLists/[accountListId]/preferences/personal/modals/PersPrefModalRelationships.tsx @@ -0,0 +1,172 @@ +import { useState } from 'react'; +import { Button, DialogContent, Grid, Hidden, styled } from '@material-ui/core'; +import { AddCircle, Search } from '@material-ui/icons'; +import Modal from '../../../../../../src/components/common/Modal/Modal'; +import { PersPrefField } from '../shared/PersPrefForms'; +import { info } from '../DemoContent'; +import { + AddButtonBox, + DeleteButton, + OptionHeadings, + SectionHeading, + StyledDialogActions, + StyledGridContainer, + StyledGridItem, +} from './PersPrefModalShared'; + +const AddPersonButton = styled(Button)({ + fontSize: 16, + padding: '17.5px 14px', + lineHeight: 1.1876, +}); + +interface RelationshipModalProps { + isOpen: boolean; + handleOpen: (val: boolean) => void; +} + +const RelationshipModal: React.FC = ({ + isOpen, + handleOpen, +}) => { + const handleClose = () => { + handleOpen(false); + }; + + return ( + +
+ + } /> + + + + + +
+ + ); +}; + +interface AddRelationshipProps { + current?: { + name: string; + relation: string; + }; +} + +const AddRelationship: React.FC = ({ + current = null, +}) => { + const [relationshipOpen, setRelationshipOpen] = useState(false); + + const handleOpen = () => { + setRelationshipOpen(true); + }; + + return ( + + + {!current ? ( + <> + + Select Person + + + + ) : ( + + )} + + + + + + + + + ); +}; + +export const PersPrefModalRelationships: React.FC = () => { + return ( + <> + + + + + + + + + + + + + + Relationships + + + + Type + + Delete + + + {info.family_relationships.map((current, index) => ( + + ))} + + + + + + ); +}; From ae9f5cfcaf833cb2fd78431832fdfaf66e182600 Mon Sep 17 00:00:00 2001 From: John Plastow Date: Mon, 27 Sep 2021 13:17:10 -0700 Subject: [PATCH 023/103] Activating modal content and fixing select options --- .../personal/modals/PersPrefModal.tsx | 5 +-- .../modals/PersPrefModalRelationships.tsx | 36 +++++++++---------- 2 files changed, 21 insertions(+), 20 deletions(-) diff --git a/pages/accountLists/[accountListId]/preferences/personal/modals/PersPrefModal.tsx b/pages/accountLists/[accountListId]/preferences/personal/modals/PersPrefModal.tsx index c4a61ef7d..10187eca1 100644 --- a/pages/accountLists/[accountListId]/preferences/personal/modals/PersPrefModal.tsx +++ b/pages/accountLists/[accountListId]/preferences/personal/modals/PersPrefModal.tsx @@ -2,6 +2,7 @@ import React, { useState } from 'react'; import { useTranslation } from 'react-i18next'; import { AppBar, + Box, Button, DialogContent, Tab, @@ -86,7 +87,7 @@ export const PersPrefModal: React.FC = ({ ))} - {/* {tabData.map((current, index) => ( + {tabData.map((current, index) => ( - ))} */} + ))} diff --git a/pages/accountLists/[accountListId]/preferences/personal/modals/PersPrefModalDetails.tsx b/pages/accountLists/[accountListId]/preferences/personal/modals/PersPrefModalDetails.tsx index 5faeb3c58..f0a13ed76 100644 --- a/pages/accountLists/[accountListId]/preferences/personal/modals/PersPrefModalDetails.tsx +++ b/pages/accountLists/[accountListId]/preferences/personal/modals/PersPrefModalDetails.tsx @@ -1,5 +1,11 @@ -import { Grid, styled } from '@material-ui/core'; -import { PersPrefField } from '../shared/PersPrefForms'; +import React from 'react'; +import { useTranslation } from 'react-i18next'; +import { Grid, MenuItem, styled } from '@material-ui/core'; +import { + PersPrefFieldWrapper, + StyledOutlinedInput, + StyledSelect, +} from '../shared/PersPrefForms'; import { info } from '../DemoContent'; import { SectionHeading, StyledGridContainer } from './PersPrefModalShared'; @@ -16,77 +22,90 @@ interface DateSelectionProps { } const DateSelection: React.FC = ({ month, day, year }) => { + const { t } = useTranslation(); + + const months = [ + 'January', + 'February', + 'March', + 'April', + 'May', + 'June', + 'July', + 'August', + 'September', + 'October', + 'November', + 'December', + ]; + return ( - + + + {months.map((current, index) => ( + + {t(current)} + + ))} + + - + + + - + + + ); }; -export const PersPrefModalDetails: React.FC = () => ( - - - - - - - - - Birthday - - - - Anniversary - - - - +export const PersPrefModalDetails: React.FC = () => { + const { t } = useTranslation(); + + return ( + + + + + + + + + + Unspecified + Male + Female + + + + + {t('Birthday')} + + + + {t('Anniversary')} + + + + + + + - -); + ); +}; diff --git a/pages/accountLists/[accountListId]/preferences/personal/modals/PersPrefModalName.tsx b/pages/accountLists/[accountListId]/preferences/personal/modals/PersPrefModalName.tsx index 173f13272..cd83b242a 100644 --- a/pages/accountLists/[accountListId]/preferences/personal/modals/PersPrefModalName.tsx +++ b/pages/accountLists/[accountListId]/preferences/personal/modals/PersPrefModalName.tsx @@ -1,4 +1,5 @@ import React from 'react'; +import { useTranslation } from 'react-i18next'; import { Grid, styled } from '@material-ui/core'; import { useTheme } from '@material-ui/core/styles'; import { PersPrefField } from '../shared/PersPrefForms'; @@ -13,25 +14,30 @@ const StyledGridItem = styled(Grid)(({ theme }) => ({ })); export const PersPrefModalName: React.FC = () => { + const { t } = useTranslation(); const theme = useTheme(); return ( - + - + - + ); diff --git a/pages/accountLists/[accountListId]/preferences/personal/modals/PersPrefModalRelationships.tsx b/pages/accountLists/[accountListId]/preferences/personal/modals/PersPrefModalRelationships.tsx index 190fcac1b..e4f15c003 100644 --- a/pages/accountLists/[accountListId]/preferences/personal/modals/PersPrefModalRelationships.tsx +++ b/pages/accountLists/[accountListId]/preferences/personal/modals/PersPrefModalRelationships.tsx @@ -1,8 +1,20 @@ -import { useState } from 'react'; -import { Button, DialogContent, Grid, Hidden, styled } from '@material-ui/core'; +import React, { useState } from 'react'; +import { useTranslation } from 'react-i18next'; +import { + Button, + DialogContent, + Grid, + Hidden, + MenuItem, + styled, +} from '@material-ui/core'; import { AddCircle, Search } from '@material-ui/icons'; import Modal from '../../../../../../src/components/common/Modal/Modal'; -import { PersPrefField } from '../shared/PersPrefForms'; +import { + PersPrefFieldWrapper, + StyledOutlinedInput, + StyledSelect, +} from '../shared/PersPrefForms'; import { info } from '../DemoContent'; import { AddButtonBox, @@ -14,7 +26,7 @@ import { StyledGridItem, } from './PersPrefModalShared'; -const AddPersonButton = styled(Button)({ +const AddRelationshipButton = styled(Button)({ fontSize: 16, padding: '17.5px 14px', lineHeight: 1.1876, @@ -29,6 +41,8 @@ const RelationshipModal: React.FC = ({ isOpen, handleOpen, }) => { + const { t } = useTranslation(); + const handleClose = () => { handleOpen(false); }; @@ -37,12 +51,21 @@ const RelationshipModal: React.FC = ({
- } /> + + } /> + - - +
@@ -60,59 +83,68 @@ interface AddRelationshipProps { const AddRelationship: React.FC = ({ current = null, }) => { + const { t } = useTranslation(); const [relationshipOpen, setRelationshipOpen] = useState(false); const handleOpen = () => { setRelationshipOpen(true); }; + const relationships = [ + 'Husband', + 'Son', + 'Father', + 'Brother', + 'Uncle', + 'Newphew', + 'Cousin Male', + 'Grandfather', + 'Grandson', + 'Wife', + 'Daughter', + 'Mother', + 'Sister', + 'Aunt', + 'Niece', + 'Cousin Female', + 'Grandmother', + 'Granddaughter', + ]; + return ( {!current ? ( <> - Select Person - + ) : ( - + + + )} - + + + {relationships.map((current2) => ( + + {t(current2)} + + ))} + + @@ -122,40 +154,51 @@ const AddRelationship: React.FC = ({ }; export const PersPrefModalRelationships: React.FC = () => { + const { t } = useTranslation(); + + const statuses = [ + 'Single', + 'Engaged', + 'Married', + 'Separated', + 'Divorced', + 'Widowed', + ]; + return ( <> - + + + - + + + - + + + {statuses.map((current) => ( + + {t(current)} + + ))} + + - Relationships + {t('Relationships')} - - Type + + {t('Type')} - Delete + {t('Delete')} {info.family_relationships.map((current, index) => ( @@ -163,8 +206,13 @@ export const PersPrefModalRelationships: React.FC = () => { ))} - diff --git a/pages/accountLists/[accountListId]/preferences/personal/modals/PersPrefModalShared.tsx b/pages/accountLists/[accountListId]/preferences/personal/modals/PersPrefModalShared.tsx index 6586603a1..6a2f4a831 100644 --- a/pages/accountLists/[accountListId]/preferences/personal/modals/PersPrefModalShared.tsx +++ b/pages/accountLists/[accountListId]/preferences/personal/modals/PersPrefModalShared.tsx @@ -1,3 +1,4 @@ +import React from 'react'; import { Box, DialogActions, @@ -17,9 +18,8 @@ export const SectionHeading = styled(Typography)(() => ({ display: 'block', })); -const SmallColumnLabels = styled(Grid)(({ align }) => ({ +const SmallColumnLabels = styled(Grid)(() => ({ display: 'flex', - justifyContent: align === 'left' ? 'flex-start' : 'center', alignItems: 'flex-end', '& span': { fontSize: '0.6875em', @@ -29,20 +29,20 @@ const SmallColumnLabels = styled(Grid)(({ align }) => ({ interface OptionHeadingsProps { smallCols: GridProps['sm']; - align?: string; + align?: GridProps['justify']; } export const OptionHeadings: React.FC = ({ smallCols, - align = '', + align = 'center', children, }) => ( - + {children} ); -export const EmptyIcon = ({ size = 24 }) => { +export const EmptyIcon: React.FC<{ size?: number }> = ({ size = 24 }) => { return ( ({ }, })); -export const HiddenSmLabel = ({ children }) => ( +export const HiddenSmLabel: React.FC = ({ children }) => ( {children} ); -export const DeleteButton = () => ( +export const DeleteButton: React.FC = () => ( <> Delete @@ -99,16 +99,14 @@ export const AddButtonBox = styled(Box)(({ theme }) => ({ [theme.breakpoints.up('sm')]: { marginTop: theme.spacing(1) }, })); -export const StyledDivider = styled(Divider)( - ({ marginTop = null, marginBottom = null, marginY = 3, theme }) => { - return { - marginTop: theme.spacing(marginTop ? marginTop : marginY), - marginLeft: 0, - marginRight: 0, - marginBottom: theme.spacing(marginBottom ? marginBottom : marginY), - }; - }, -); +export const StyledDivider = styled(Divider)(({ theme }) => { + return { + marginTop: theme.spacing(3), + marginLeft: 0, + marginRight: 0, + marginBottom: theme.spacing(3), + }; +}); export const StyledDialogActions = styled(DialogActions)(({ theme }) => ({ padding: `${theme.spacing(2)}px ${theme.spacing(3)}px`, diff --git a/pages/accountLists/[accountListId]/preferences/personal/modals/PersPrefModalSocial.tsx b/pages/accountLists/[accountListId]/preferences/personal/modals/PersPrefModalSocial.tsx index 3b0a7c2b8..83c2257e3 100644 --- a/pages/accountLists/[accountListId]/preferences/personal/modals/PersPrefModalSocial.tsx +++ b/pages/accountLists/[accountListId]/preferences/personal/modals/PersPrefModalSocial.tsx @@ -1,14 +1,12 @@ -import { - Button, - ButtonProps, - Grid, - Hidden, - Typography, - styled, -} from '@material-ui/core'; +import React, { ReactElement } from 'react'; +import { useTranslation } from 'react-i18next'; +import { Button, Grid, Hidden, Typography, styled } from '@material-ui/core'; import { Facebook, Language, LinkedIn, Twitter } from '@material-ui/icons'; -import { ReactElement } from 'react'; -import { PersPrefField } from '../shared/PersPrefForms'; + +import { + PersPrefFieldWrapper, + StyledOutlinedInput, +} from '../shared/PersPrefForms'; import { info } from '../DemoContent'; import { AddButtonBox, @@ -41,39 +39,38 @@ interface MediaRowProps { icon: ReactElement; inputType: string; }; - savedData: string; + savedData?: string; } -const MediaRow: React.FC = ({ localData, savedData }) => ( - - - - - - - - - - - -); - -interface SocialButtonProps { - icon: ButtonProps['startIcon']; -} +const MediaRow: React.FC = ({ localData, savedData }) => { + const { t } = useTranslation(); -const SocialButton: React.FC = ({ icon, children }) => ( - - {children} - -); + return ( + + + + + + + + + + + + + + + + ); +}; export const PersPrefModalSocial: React.FC = () => { + const { t } = useTranslation(); + const connections = [ { data: info.facebook_accounts, @@ -109,13 +106,13 @@ export const PersPrefModalSocial: React.FC = () => { <> - Social Connections + {t('Social Connections')} - - Type + + {t('Type')} - Delete + {t('Delete')} {connections.map((current) => @@ -123,14 +120,21 @@ export const PersPrefModalSocial: React.FC = () => { )), )} + - Add: + {t('Add')}: {connections.map((current, index) => ( - - {current.mediaType} - + + {t(current.mediaType)} + ))} diff --git a/pages/accountLists/[accountListId]/preferences/personal/shared/PersPrefForms.tsx b/pages/accountLists/[accountListId]/preferences/personal/shared/PersPrefForms.tsx index 224faab4e..f364ac023 100644 --- a/pages/accountLists/[accountListId]/preferences/personal/shared/PersPrefForms.tsx +++ b/pages/accountLists/[accountListId]/preferences/personal/shared/PersPrefForms.tsx @@ -1,11 +1,15 @@ import React, { ReactElement, useState } from 'react'; +import { useTranslation } from 'react-i18next'; import { Button, + ButtonProps, Checkbox, FormControl, FormControlLabel, FormControlLabelProps, + FormControlProps, FormHelperText, + FormHelperTextProps, FormLabel, MenuItem, OutlinedInput, @@ -46,25 +50,25 @@ const SharedFieldStyles = ({ theme }: { theme: Theme }) => ({ }, }); -const StyledOutlinedInput = styled(OutlinedInput)(SharedFieldStyles); -const StyledSelect = styled(Select)(SharedFieldStyles); +export const StyledOutlinedInput = styled(OutlinedInput)(SharedFieldStyles); +export const StyledSelect = styled(Select)(SharedFieldStyles); -export const PersPrefForm: React.FC = ({ children }) => { - const theme = useTheme(); - return ( -
- {children} - -
- ); -}; +// export const PersPrefForm: React.FC = ({ children }) => { +// const theme = useTheme(); +// return ( +//
+// {children} +// +//
+// ); +// }; // interface PersPrefFieldWrapperProps { // label?: string; @@ -295,3 +299,90 @@ export const PersPrefField: React.FC = ({ ); }; + +// New version + +interface PersPrefFormWrapperProps { + formAttrs?: { action?: string; method?: string }; + formButtonText?: string; + formButtonColor?: ButtonProps['color']; + formButtonVariant?: ButtonProps['variant']; +} + +export const PersPrefFormWrapper: React.FC = ({ + formAttrs = {}, + formButtonText = 'Save', + formButtonColor = 'primary', + formButtonVariant = 'contained', + children, +}) => { + const { t } = useTranslation(); + const theme = useTheme(); + + return ( +
+ {children} + +
+ ); +}; + +interface PersPrefFieldWrapperProps { + labelText?: string; + helperText?: string; + helperPosition?: string; + formControlDisabled?: FormControlProps['disabled']; + formControlError?: FormControlProps['error']; + formControlFullWidth?: FormControlProps['fullWidth']; + formControlRequired?: FormControlProps['required']; + formControlVariant?: FormControlProps['variant']; + formHelperTextProps?: { variant?: FormHelperTextProps['variant'] }; +} + +export const PersPrefFieldWrapper: React.FC = ({ + labelText = '', + helperText = '', + helperPosition = 'top', + formControlDisabled = false, + formControlError = false, + formControlFullWidth = true, + formControlRequired = false, + formControlVariant = 'outlined', + formHelperTextProps = { variant: 'standard' }, + children, +}) => { + const { t } = useTranslation(); + const labelOutput = + labelText !== '' ? {t(labelText)} : ''; + const helperTextOutput = + helperText !== '' ? ( + + {t(helperText)} + + ) : ( + '' + ); + + return ( + + {labelOutput} + {helperPosition === 'top' && helperTextOutput} + {children} + {helperPosition === 'bottom' && helperTextOutput} + + ); +}; From f92a77cf842c6ea9e1724cac749aafb63317193f Mon Sep 17 00:00:00 2001 From: John Plastow Date: Mon, 16 May 2022 15:59:05 -0400 Subject: [PATCH 025/103] Removing duplicated code after rebase --- .../Layouts/Primary/TopBar/Items/ProfileMenu/ProfileMenu.tsx | 3 --- 1 file changed, 3 deletions(-) diff --git a/src/components/Layouts/Primary/TopBar/Items/ProfileMenu/ProfileMenu.tsx b/src/components/Layouts/Primary/TopBar/Items/ProfileMenu/ProfileMenu.tsx index 544f5d106..9e74cd691 100644 --- a/src/components/Layouts/Primary/TopBar/Items/ProfileMenu/ProfileMenu.tsx +++ b/src/components/Layouts/Primary/TopBar/Items/ProfileMenu/ProfileMenu.tsx @@ -25,7 +25,6 @@ import { useAccountListId } from '../../../../../../hooks/useAccountListId'; import HandoffLink from '../../../../../HandoffLink'; import { useGetTopBarQuery } from '../../GetTopBar.generated'; import theme from '../../../../../../theme'; -import { useAccountListId } from '../../../../../../hooks/useAccountListId'; const AccountName = styled(Typography)(({ theme }) => ({ color: theme.palette.common.white, @@ -120,8 +119,6 @@ const ProfileMenu = (): ReactElement => { setProfileMenuAnchorEl(undefined); }; - const accountListId = useAccountListId(); - return ( <> Date: Mon, 16 May 2022 16:57:35 -0400 Subject: [PATCH 026/103] Fixing TS errors regarding anniversary months/days --- .../personal/info/PersPrefAnniversary.tsx | 21 +++++++++++++++++-- .../personal/info/PersPrefInfo.tsx | 17 +-------------- 2 files changed, 20 insertions(+), 18 deletions(-) diff --git a/pages/accountLists/[accountListId]/preferences/personal/info/PersPrefAnniversary.tsx b/pages/accountLists/[accountListId]/preferences/personal/info/PersPrefAnniversary.tsx index 5bc961379..a79df1be4 100644 --- a/pages/accountLists/[accountListId]/preferences/personal/info/PersPrefAnniversary.tsx +++ b/pages/accountLists/[accountListId]/preferences/personal/info/PersPrefAnniversary.tsx @@ -1,9 +1,10 @@ import React from 'react'; +import { useTranslation } from 'react-i18next'; import { Typography } from '@material-ui/core'; interface AnniversaryProps { marital_status: string; - anniversary_day: number; + anniversary_day: string; anniversary_month: string; } @@ -12,8 +13,24 @@ export const PersPrefAnniversary: React.FC = ({ anniversary_day, anniversary_month, }) => { + const { t } = useTranslation(); const anniversary = anniversary_month || anniversary_day ? true : false; + const months = [ + 'Jan', + 'Feb', + 'Mar', + 'Apr', + 'May', + 'Jun', + 'Jul', + 'Aug', + 'Sep', + 'Oct', + 'Nov', + 'Dec', + ]; + let output = ''; if (marital_status) { @@ -25,7 +42,7 @@ export const PersPrefAnniversary: React.FC = ({ if (anniversary) { output += ': '; if (anniversary_month) { - output += `${anniversary_month} `; + output += `${t(months[parseInt(anniversary_month) - 1])} `; } if (anniversary_day) { output += anniversary_day; diff --git a/pages/accountLists/[accountListId]/preferences/personal/info/PersPrefInfo.tsx b/pages/accountLists/[accountListId]/preferences/personal/info/PersPrefInfo.tsx index 5105db373..21cb3af7b 100644 --- a/pages/accountLists/[accountListId]/preferences/personal/info/PersPrefInfo.tsx +++ b/pages/accountLists/[accountListId]/preferences/personal/info/PersPrefInfo.tsx @@ -77,21 +77,6 @@ export const PersPrefInfo: React.FC = () => { setProfileOpen(true); }; - const months = [ - 'Jan', - 'Feb', - 'Mar', - 'Apr', - 'May', - 'Jun', - 'Jul', - 'Aug', - 'Sep', - 'Oct', - 'Nov', - 'Dec', - ]; - return ( @@ -110,7 +95,7 @@ export const PersPrefInfo: React.FC = () => { Date: Tue, 17 May 2022 09:20:06 -0400 Subject: [PATCH 027/103] Adding missing translation support Addresses https://github.com/CruGlobal/mpdx-react/pull/210#discussion_r726474467 --- .../preferences/personal.page.tsx | 121 ++++++++++-------- .../modals/PersPrefModalRelationships.tsx | 9 +- 2 files changed, 74 insertions(+), 56 deletions(-) diff --git a/pages/accountLists/[accountListId]/preferences/personal.page.tsx b/pages/accountLists/[accountListId]/preferences/personal.page.tsx index 0a32fc76f..4e9a2e26a 100644 --- a/pages/accountLists/[accountListId]/preferences/personal.page.tsx +++ b/pages/accountLists/[accountListId]/preferences/personal.page.tsx @@ -40,25 +40,27 @@ const PersonalPreferences: React.FC = () => { return ( - + {/* Language */} {language.map((current, index) => ( @@ -75,13 +77,15 @@ const PersonalPreferences: React.FC = () => { {locale.map((current, index) => ( @@ -98,13 +102,15 @@ const PersonalPreferences: React.FC = () => { {options.map((current, index) => ( @@ -121,13 +127,15 @@ const PersonalPreferences: React.FC = () => { {options.map((current, index) => ( @@ -144,13 +152,15 @@ const PersonalPreferences: React.FC = () => { {options.map((current, index) => ( @@ -164,18 +174,20 @@ const PersonalPreferences: React.FC = () => { - + {/* Account Name */} @@ -186,13 +198,15 @@ const PersonalPreferences: React.FC = () => { @@ -203,13 +217,15 @@ const PersonalPreferences: React.FC = () => { {options.map((current, index) => ( @@ -226,11 +242,11 @@ const PersonalPreferences: React.FC = () => { - + {options.map((current, index) => ( @@ -246,17 +262,14 @@ const PersonalPreferences: React.FC = () => { { - + - + diff --git a/pages/accountLists/[accountListId]/preferences/personal/modals/PersPrefModalRelationships.tsx b/pages/accountLists/[accountListId]/preferences/personal/modals/PersPrefModalRelationships.tsx index e4f15c003..9544210d0 100644 --- a/pages/accountLists/[accountListId]/preferences/personal/modals/PersPrefModalRelationships.tsx +++ b/pages/accountLists/[accountListId]/preferences/personal/modals/PersPrefModalRelationships.tsx @@ -48,10 +48,15 @@ const RelationshipModal: React.FC = ({ }; return ( - +
- + } /> From 6865286206e13556b9987ccb141868614c0d22de Mon Sep 17 00:00:00 2001 From: John Plastow Date: Tue, 17 May 2022 09:47:18 -0400 Subject: [PATCH 028/103] Destructuring current map values --- .../preferences/personal.page.tsx | 42 +++++++++---------- 1 file changed, 21 insertions(+), 21 deletions(-) diff --git a/pages/accountLists/[accountListId]/preferences/personal.page.tsx b/pages/accountLists/[accountListId]/preferences/personal.page.tsx index 4e9a2e26a..83a46d4e4 100644 --- a/pages/accountLists/[accountListId]/preferences/personal.page.tsx +++ b/pages/accountLists/[accountListId]/preferences/personal.page.tsx @@ -63,9 +63,9 @@ const PersonalPreferences: React.FC = () => { )} > - {language.map((current, index) => ( - - {t(current[1])} + {language.map(([languageCode, languageName], index) => ( + + {t(languageName)} ))} @@ -88,9 +88,9 @@ const PersonalPreferences: React.FC = () => { )} > - {locale.map((current, index) => ( - - {t(current[1])} + {locale.map(([localeCode, localeName], index) => ( + + {t(localeName)} ))} @@ -113,9 +113,9 @@ const PersonalPreferences: React.FC = () => { )} > - {options.map((current, index) => ( - - {t(current[1])} + {options.map(([optionVal, optionLabel], index) => ( + + {t(optionLabel)} ))} @@ -138,9 +138,9 @@ const PersonalPreferences: React.FC = () => { )} > - {options.map((current, index) => ( - - {t(current[1])} + {options.map(([optionVal, optionLabel], index) => ( + + {t(optionLabel)} ))} @@ -163,9 +163,9 @@ const PersonalPreferences: React.FC = () => { )} > - {options.map((current, index) => ( - - {t(current[1])} + {options.map(([optionVal, optionLabel], index) => ( + + {t(optionLabel)} ))} @@ -228,9 +228,9 @@ const PersonalPreferences: React.FC = () => { )} > - {options.map((current, index) => ( - - {t(current[1])} + {options.map(([optionVal, optionLabel], index) => ( + + {t(optionLabel)} ))} @@ -248,9 +248,9 @@ const PersonalPreferences: React.FC = () => { - {options.map((current, index) => ( - - {t(current[1])} + {options.map(([optionVal, optionLabel], index) => ( + + {t(optionLabel)} ))} From 43f3a3a2bbdd7b8a4465076cf753dfc8f20a06e0 Mon Sep 17 00:00:00 2001 From: John Plastow Date: Tue, 17 May 2022 10:24:15 -0400 Subject: [PATCH 029/103] Destructuring remaining current map values --- .../personal/modals/PersPrefModalContact.tsx | 6 +++--- .../preferences/personal/shared/PersPrefForms.tsx | 12 ++++++------ 2 files changed, 9 insertions(+), 9 deletions(-) diff --git a/pages/accountLists/[accountListId]/preferences/personal/modals/PersPrefModalContact.tsx b/pages/accountLists/[accountListId]/preferences/personal/modals/PersPrefModalContact.tsx index 55a7b0f29..3b80de902 100644 --- a/pages/accountLists/[accountListId]/preferences/personal/modals/PersPrefModalContact.tsx +++ b/pages/accountLists/[accountListId]/preferences/personal/modals/PersPrefModalContact.tsx @@ -96,9 +96,9 @@ const AddContact: React.FC = ({ - {contactTypes.map((current, index) => ( - - {t(current[1])} + {contactTypes.map(([contactVal, contactLabel], index) => ( + + {t(contactLabel)} ))} diff --git a/pages/accountLists/[accountListId]/preferences/personal/shared/PersPrefForms.tsx b/pages/accountLists/[accountListId]/preferences/personal/shared/PersPrefForms.tsx index f364ac023..7cfedde0e 100644 --- a/pages/accountLists/[accountListId]/preferences/personal/shared/PersPrefForms.tsx +++ b/pages/accountLists/[accountListId]/preferences/personal/shared/PersPrefForms.tsx @@ -254,10 +254,10 @@ export const PersPrefField: React.FC = ({ {/* Select field */} {type === 'select' && ( - {options.map((current, index) => { + {options.map(([optionVal, optionLabel], index) => { return ( - - {current[1]} + + {optionLabel} ); })} @@ -266,7 +266,7 @@ export const PersPrefField: React.FC = ({ {/* Checkboxes or Radios */} {(type === 'checkbox' || type === 'radio') && - options.map((current, index) => { + options.map(([optionVal, optionLabel], index) => { const icon = type === 'checkbox' ? ( @@ -278,13 +278,13 @@ export const PersPrefField: React.FC = ({ /> ); - const val = type === 'checkbox' ? current[0] : radioValue; + const val = type === 'checkbox' ? optionVal : radioValue; return ( Date: Tue, 17 May 2022 14:49:44 -0400 Subject: [PATCH 030/103] Anniversary refactor --- .../preferences/personal/DemoContent.tsx | 6 +- .../personal/info/PersPrefAnniversary.tsx | 68 +++++++++---------- .../personal/info/PersPrefInfo.tsx | 3 +- 3 files changed, 38 insertions(+), 39 deletions(-) diff --git a/pages/accountLists/[accountListId]/preferences/personal/DemoContent.tsx b/pages/accountLists/[accountListId]/preferences/personal/DemoContent.tsx index 6517ca1e2..0ed6f02ae 100644 --- a/pages/accountLists/[accountListId]/preferences/personal/DemoContent.tsx +++ b/pages/accountLists/[accountListId]/preferences/personal/DemoContent.tsx @@ -1,8 +1,8 @@ export const info = { alma_mater: 'Sac State', - anniversary_day: '23', - anniversary_month: '6', - anniversary_year: '1979', + anniversary_day: 18, + anniversary_month: 10, + anniversary_year: 1928, avatar: 'https://lumiere-a.akamaihd.net/v1/images/ct_mickeymouseandfriends_mickey_ddt-16970_4e99445d.jpeg?region=0,0,600,600&width=480', birthday_day: '7', diff --git a/pages/accountLists/[accountListId]/preferences/personal/info/PersPrefAnniversary.tsx b/pages/accountLists/[accountListId]/preferences/personal/info/PersPrefAnniversary.tsx index a79df1be4..d7c6a1c60 100644 --- a/pages/accountLists/[accountListId]/preferences/personal/info/PersPrefAnniversary.tsx +++ b/pages/accountLists/[accountListId]/preferences/personal/info/PersPrefAnniversary.tsx @@ -4,53 +4,51 @@ import { Typography } from '@material-ui/core'; interface AnniversaryProps { marital_status: string; - anniversary_day: string; - anniversary_month: string; + anniversary_day: number; + anniversary_month: number; + anniversary_year: number; } export const PersPrefAnniversary: React.FC = ({ marital_status, anniversary_day, anniversary_month, + anniversary_year, }) => { const { t } = useTranslation(); - const anniversary = anniversary_month || anniversary_day ? true : false; + const anniversary = Boolean( + anniversary_month && (anniversary_day || anniversary_year), + ); const months = [ - 'Jan', - 'Feb', - 'Mar', - 'Apr', - 'May', - 'Jun', - 'Jul', - 'Aug', - 'Sep', - 'Oct', - 'Nov', - 'Dec', + t('Jan'), + t('Feb'), + t('Mar'), + t('Apr'), + t('May'), + t('Jun'), + t('Jul'), + t('Aug'), + t('Sep'), + t('Oct'), + t('Nov'), + t('Dec'), ]; - let output = ''; - - if (marital_status) { - output += marital_status; - } else if (anniversary) { - output += 'Anniversary'; - } - - if (anniversary) { - output += ': '; - if (anniversary_month) { - output += `${t(months[parseInt(anniversary_month) - 1])} `; - } - if (anniversary_day) { - output += anniversary_day; - } - } - - if (output !== '') { - return {output}; + if (marital_status || anniversary) { + return ( + + {marital_status ? marital_status : anniversary ? t('Anniversary') : ''} + {anniversary && ( + <> + {`: ${months[anniversary_month]}.`} + {anniversary_day ? ` ${anniversary_day}` : ''} + {anniversary_day && anniversary_year ? `, ${anniversary_year}` : ''} + {!anniversary_day && anniversary_year ? ` ${anniversary_year}` : ''} + + )} + + ); } return null; diff --git a/pages/accountLists/[accountListId]/preferences/personal/info/PersPrefInfo.tsx b/pages/accountLists/[accountListId]/preferences/personal/info/PersPrefInfo.tsx index 21cb3af7b..39f312ba5 100644 --- a/pages/accountLists/[accountListId]/preferences/personal/info/PersPrefInfo.tsx +++ b/pages/accountLists/[accountListId]/preferences/personal/info/PersPrefInfo.tsx @@ -95,8 +95,9 @@ export const PersPrefInfo: React.FC = () => { Date: Tue, 17 May 2022 14:55:09 -0400 Subject: [PATCH 031/103] Removing old commented-out code --- .../preferences/personal/info/PersPrefContacts.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/pages/accountLists/[accountListId]/preferences/personal/info/PersPrefContacts.tsx b/pages/accountLists/[accountListId]/preferences/personal/info/PersPrefContacts.tsx index 6f395e64d..64e28237e 100644 --- a/pages/accountLists/[accountListId]/preferences/personal/info/PersPrefContacts.tsx +++ b/pages/accountLists/[accountListId]/preferences/personal/info/PersPrefContacts.tsx @@ -10,7 +10,6 @@ import { } from '@material-ui/core'; import { ExpandMore } from '@material-ui/icons'; import { accordionShared } from '../shared/PersPrefShared'; -// import PersPrefContact from './PersPrefContact'; const StyledAccordion = styled(Accordion)({ backgroundColor: 'transparent', From abaf5b716817e34ad13a5097334f3df8de3935a4 Mon Sep 17 00:00:00 2001 From: John Plastow Date: Tue, 17 May 2022 15:27:10 -0400 Subject: [PATCH 032/103] Swapping months name source --- .../personal/info/PersPrefAnniversary.tsx | 16 ++-------------- 1 file changed, 2 insertions(+), 14 deletions(-) diff --git a/pages/accountLists/[accountListId]/preferences/personal/info/PersPrefAnniversary.tsx b/pages/accountLists/[accountListId]/preferences/personal/info/PersPrefAnniversary.tsx index d7c6a1c60..86c786195 100644 --- a/pages/accountLists/[accountListId]/preferences/personal/info/PersPrefAnniversary.tsx +++ b/pages/accountLists/[accountListId]/preferences/personal/info/PersPrefAnniversary.tsx @@ -1,6 +1,7 @@ import React from 'react'; import { useTranslation } from 'react-i18next'; import { Typography } from '@material-ui/core'; +import { Info } from 'luxon'; interface AnniversaryProps { marital_status: string; @@ -20,20 +21,7 @@ export const PersPrefAnniversary: React.FC = ({ anniversary_month && (anniversary_day || anniversary_year), ); - const months = [ - t('Jan'), - t('Feb'), - t('Mar'), - t('Apr'), - t('May'), - t('Jun'), - t('Jul'), - t('Aug'), - t('Sep'), - t('Oct'), - t('Nov'), - t('Dec'), - ]; + const months = Info.monthsFormat('short'); if (marital_status || anniversary) { return ( From 6d2a75e4dbfdee34430bf9a466a5d365adcc1738 Mon Sep 17 00:00:00 2001 From: John Plastow Date: Tue, 17 May 2022 16:48:53 -0400 Subject: [PATCH 033/103] Converting to Luxon months array for dates Also swapped birthday data type from strings to numbers --- .../preferences/personal/DemoContent.tsx | 6 ++--- .../personal/modals/PersPrefModalDetails.tsx | 22 +++++-------------- 2 files changed, 8 insertions(+), 20 deletions(-) diff --git a/pages/accountLists/[accountListId]/preferences/personal/DemoContent.tsx b/pages/accountLists/[accountListId]/preferences/personal/DemoContent.tsx index 0ed6f02ae..bef0df595 100644 --- a/pages/accountLists/[accountListId]/preferences/personal/DemoContent.tsx +++ b/pages/accountLists/[accountListId]/preferences/personal/DemoContent.tsx @@ -5,9 +5,9 @@ export const info = { anniversary_year: 1928, avatar: 'https://lumiere-a.akamaihd.net/v1/images/ct_mickeymouseandfriends_mickey_ddt-16970_4e99445d.jpeg?region=0,0,600,600&width=480', - birthday_day: '7', - birthday_month: '10', - birthday_year: '1983', + birthday_day: 7, + birthday_month: 10, + birthday_year: 1983, email: [ { value: 'personal@test.com', diff --git a/pages/accountLists/[accountListId]/preferences/personal/modals/PersPrefModalDetails.tsx b/pages/accountLists/[accountListId]/preferences/personal/modals/PersPrefModalDetails.tsx index f0a13ed76..a9b56f033 100644 --- a/pages/accountLists/[accountListId]/preferences/personal/modals/PersPrefModalDetails.tsx +++ b/pages/accountLists/[accountListId]/preferences/personal/modals/PersPrefModalDetails.tsx @@ -1,6 +1,7 @@ import React from 'react'; import { useTranslation } from 'react-i18next'; import { Grid, MenuItem, styled } from '@material-ui/core'; +import { Info } from 'luxon'; import { PersPrefFieldWrapper, StyledOutlinedInput, @@ -16,28 +17,15 @@ const StyledGridContainerMobile = styled(Grid)(({ theme }) => ({ })); interface DateSelectionProps { - month: string; - day: string; - year: string; + month: number; + day: number; + year: number; } const DateSelection: React.FC = ({ month, day, year }) => { const { t } = useTranslation(); - const months = [ - 'January', - 'February', - 'March', - 'April', - 'May', - 'June', - 'July', - 'August', - 'September', - 'October', - 'November', - 'December', - ]; + const months = Info.monthsFormat('long'); return ( From b21b7ca6deaef8e0e188e19daef2da0d100786b1 Mon Sep 17 00:00:00 2001 From: John Plastow Date: Tue, 17 May 2022 16:59:14 -0400 Subject: [PATCH 034/103] Translating relationship types and marital statuses --- .../modals/PersPrefModalRelationships.tsx | 48 +++++++++---------- 1 file changed, 24 insertions(+), 24 deletions(-) diff --git a/pages/accountLists/[accountListId]/preferences/personal/modals/PersPrefModalRelationships.tsx b/pages/accountLists/[accountListId]/preferences/personal/modals/PersPrefModalRelationships.tsx index 9544210d0..882a56c09 100644 --- a/pages/accountLists/[accountListId]/preferences/personal/modals/PersPrefModalRelationships.tsx +++ b/pages/accountLists/[accountListId]/preferences/personal/modals/PersPrefModalRelationships.tsx @@ -96,24 +96,24 @@ const AddRelationship: React.FC = ({ }; const relationships = [ - 'Husband', - 'Son', - 'Father', - 'Brother', - 'Uncle', - 'Newphew', - 'Cousin Male', - 'Grandfather', - 'Grandson', - 'Wife', - 'Daughter', - 'Mother', - 'Sister', - 'Aunt', - 'Niece', - 'Cousin Female', - 'Grandmother', - 'Granddaughter', + t('Husband'), + t('Son'), + t('Father'), + t('Brother'), + t('Uncle'), + t('Newphew'), + t('Cousin Male'), + t('Grandfather'), + t('Grandson'), + t('Wife'), + t('Daughter'), + t('Mother'), + t('Sister'), + t('Aunt'), + t('Niece'), + t('Cousin Female'), + t('Grandmother'), + t('Granddaughter'), ]; return ( @@ -162,12 +162,12 @@ export const PersPrefModalRelationships: React.FC = () => { const { t } = useTranslation(); const statuses = [ - 'Single', - 'Engaged', - 'Married', - 'Separated', - 'Divorced', - 'Widowed', + t('Single'), + t('Engaged'), + t('Married'), + t('Separated'), + t('Divorced'), + t('Widowed'), ]; return ( From 8f5b223af1f778fdb053a8038a0a5052ad205d10 Mon Sep 17 00:00:00 2001 From: John Plastow Date: Mon, 23 May 2022 11:21:02 -0700 Subject: [PATCH 035/103] Restructured the flex-basis & width values --- .../personal/accordions/PersPrefItem.tsx | 19 +++++++++++-------- 1 file changed, 11 insertions(+), 8 deletions(-) diff --git a/pages/accountLists/[accountListId]/preferences/personal/accordions/PersPrefItem.tsx b/pages/accountLists/[accountListId]/preferences/personal/accordions/PersPrefItem.tsx index f0492155c..5acd33d22 100644 --- a/pages/accountLists/[accountListId]/preferences/personal/accordions/PersPrefItem.tsx +++ b/pages/accountLists/[accountListId]/preferences/personal/accordions/PersPrefItem.tsx @@ -30,12 +30,20 @@ const StyledAccordionSummary = styled(AccordionSummary)(({ theme }) => ({ const StyledAccordionColumn = styled(Box)(({ theme }) => ({ paddingRight: theme.spacing(2), boxSizing: 'border-box', + flexBasis: '100%', [theme.breakpoints.down('xs')]: { - flexBasis: '100% !important', '&:nth-child(2)': { fontStyle: 'italic', }, }, + [theme.breakpoints.up('sm')]: { + '&:first-child:not(:last-child)': { + width: '33.33%', + }, + '&:nth-child(2)': { + width: '66.66%', + }, + }, })); const StyledAccordionDetails = styled(Box)(({ theme }) => ({ @@ -60,7 +68,6 @@ export const PersPrefItem: React.FC = ({ children, }) => { const { t } = useTranslation(); - const firstCol = value !== '' ? '33.33%' : '100%'; return ( @@ -69,15 +76,11 @@ export const PersPrefItem: React.FC = ({ expanded={expandedPanel === label} > }> - + {t(label)} {value !== '' && ( - + {t(value)} )} From 1f2271bba8c641499c7a26caac3445767d3a055e Mon Sep 17 00:00:00 2001 From: John Plastow Date: Mon, 23 May 2022 14:05:29 -0700 Subject: [PATCH 036/103] Renaming variables for more context --- .../personal/info/PersPrefContacts.tsx | 22 ++++++++++--------- 1 file changed, 12 insertions(+), 10 deletions(-) diff --git a/pages/accountLists/[accountListId]/preferences/personal/info/PersPrefContacts.tsx b/pages/accountLists/[accountListId]/preferences/personal/info/PersPrefContacts.tsx index 64e28237e..cf3f49da6 100644 --- a/pages/accountLists/[accountListId]/preferences/personal/info/PersPrefContacts.tsx +++ b/pages/accountLists/[accountListId]/preferences/personal/info/PersPrefContacts.tsx @@ -75,25 +75,27 @@ interface PersPrefContactsProps { export const PersPrefContacts = ({ contacts, }: PersPrefContactsProps): ReactElement => { - const dataValid = contacts.filter((current) => current.invalid !== true); - const primaryIndex = dataValid.findIndex( - (current) => current.primary === true, + const validContacts = contacts.filter((contact) => contact.invalid !== true); + const primaryContactIndex = validContacts.findIndex( + (contact) => contact.primary === true, ); - const dataSansPrimary = dataValid.filter( - (current, index) => index !== primaryIndex, + const validContactsSansPrimary = validContacts.filter( + (contact, index) => index !== primaryContactIndex, ); return ( <> - {dataValid.length === 1 && } - {dataValid.length > 1 && ( + {validContacts.length === 1 && ( + + )} + {validContacts.length > 1 && ( }> - + - {dataSansPrimary.map((current) => { - return ; + {validContactsSansPrimary.map((contact) => { + return ; })} From 9cfe09e7c008ba0a19e344e8e7b9238e27adcab3 Mon Sep 17 00:00:00 2001 From: John Plastow Date: Mon, 23 May 2022 14:08:48 -0700 Subject: [PATCH 037/103] Removing unnecessary return statement --- .../preferences/personal/info/PersPrefContacts.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/pages/accountLists/[accountListId]/preferences/personal/info/PersPrefContacts.tsx b/pages/accountLists/[accountListId]/preferences/personal/info/PersPrefContacts.tsx index cf3f49da6..eec1c6778 100644 --- a/pages/accountLists/[accountListId]/preferences/personal/info/PersPrefContacts.tsx +++ b/pages/accountLists/[accountListId]/preferences/personal/info/PersPrefContacts.tsx @@ -94,9 +94,9 @@ export const PersPrefContacts = ({ - {validContactsSansPrimary.map((contact) => { - return ; - })} + {validContactsSansPrimary.map((contact) => ( + + ))} )} From 8ce6de919317c368dadce8db497d6b24a9f4685e Mon Sep 17 00:00:00 2001 From: John Plastow Date: Mon, 23 May 2022 15:13:10 -0700 Subject: [PATCH 038/103] Made instances of "contact" more specific Swapped "contact" for "method" Updated component name --- ...ontacts.tsx => PersPrefContactMethods.tsx} | 40 ++++++++++--------- .../personal/info/PersPrefInfo.tsx | 6 +-- 2 files changed, 25 insertions(+), 21 deletions(-) rename pages/accountLists/[accountListId]/preferences/personal/info/{PersPrefContacts.tsx => PersPrefContactMethods.tsx} (64%) diff --git a/pages/accountLists/[accountListId]/preferences/personal/info/PersPrefContacts.tsx b/pages/accountLists/[accountListId]/preferences/personal/info/PersPrefContactMethods.tsx similarity index 64% rename from pages/accountLists/[accountListId]/preferences/personal/info/PersPrefContacts.tsx rename to pages/accountLists/[accountListId]/preferences/personal/info/PersPrefContactMethods.tsx index eec1c6778..5091fcf05 100644 --- a/pages/accountLists/[accountListId]/preferences/personal/info/PersPrefContacts.tsx +++ b/pages/accountLists/[accountListId]/preferences/personal/info/PersPrefContactMethods.tsx @@ -40,7 +40,7 @@ const StyledAccordionDetails = styled(AccordionDetails)({ padding: 0, }); -interface ContactData { +interface ContactMethodData { value: string; type: string; primary: boolean; @@ -49,53 +49,57 @@ interface ContactData { // Single contact phone/email -interface PersPrefContactProps { - contact: ContactData; +interface PersPrefContactMethodProps { + method: ContactMethodData; } -const PersPrefContact: React.FC = ({ contact }) => { +const PersPrefContactMethod: React.FC = ({ + method, +}) => { const { t } = useTranslation(); - const prefix = 'address' in contact ? 'mailto' : 'tel'; - const value = contact.value; + const prefix = 'address' in method ? 'mailto' : 'tel'; + const value = method.value; return ( {value}{' '} - - {t(contact.type)} + - {t(method.type)} ); }; // List of phone/email contacts -interface PersPrefContactsProps { - contacts: ContactData[]; +interface PersPrefContactMethodsProps { + methods: ContactMethodData[]; } -export const PersPrefContacts = ({ - contacts, -}: PersPrefContactsProps): ReactElement => { - const validContacts = contacts.filter((contact) => contact.invalid !== true); +export const PersPrefContactMethods = ({ + methods, +}: PersPrefContactMethodsProps): ReactElement => { + const validContacts = methods.filter((method) => method.invalid !== true); const primaryContactIndex = validContacts.findIndex( - (contact) => contact.primary === true, + (method) => method.primary === true, ); const validContactsSansPrimary = validContacts.filter( - (contact, index) => index !== primaryContactIndex, + (method, index) => index !== primaryContactIndex, ); return ( <> {validContacts.length === 1 && ( - + )} {validContacts.length > 1 && ( }> - + {validContactsSansPrimary.map((contact) => ( - + ))} diff --git a/pages/accountLists/[accountListId]/preferences/personal/info/PersPrefInfo.tsx b/pages/accountLists/[accountListId]/preferences/personal/info/PersPrefInfo.tsx index 39f312ba5..a35f13f0c 100644 --- a/pages/accountLists/[accountListId]/preferences/personal/info/PersPrefInfo.tsx +++ b/pages/accountLists/[accountListId]/preferences/personal/info/PersPrefInfo.tsx @@ -13,7 +13,7 @@ import { Edit } from '@material-ui/icons'; import { info } from '../DemoContent'; import { PersPrefModal } from '../modals/PersPrefModal'; import { PersPrefWork } from './PersPrefWork'; -import { PersPrefContacts } from './PersPrefContacts'; +import { PersPrefContactMethods } from './PersPrefContactMethods'; import { PersPrefAnniversary } from './PersPrefAnniversary'; import { PersPrefSocials } from './PersPrefSocials'; @@ -91,8 +91,8 @@ export const PersPrefInfo: React.FC = () => { - - + + Date: Mon, 23 May 2022 15:19:41 -0700 Subject: [PATCH 039/103] Continuing "contact" reference specification --- .../personal/info/PersPrefContactMethods.tsx | 20 +++++++++---------- 1 file changed, 9 insertions(+), 11 deletions(-) diff --git a/pages/accountLists/[accountListId]/preferences/personal/info/PersPrefContactMethods.tsx b/pages/accountLists/[accountListId]/preferences/personal/info/PersPrefContactMethods.tsx index 5091fcf05..1e2a83742 100644 --- a/pages/accountLists/[accountListId]/preferences/personal/info/PersPrefContactMethods.tsx +++ b/pages/accountLists/[accountListId]/preferences/personal/info/PersPrefContactMethods.tsx @@ -77,28 +77,26 @@ interface PersPrefContactMethodsProps { export const PersPrefContactMethods = ({ methods, }: PersPrefContactMethodsProps): ReactElement => { - const validContacts = methods.filter((method) => method.invalid !== true); - const primaryContactIndex = validContacts.findIndex( + const validMethods = methods.filter((method) => method.invalid !== true); + const primaryMethodIndex = validMethods.findIndex( (method) => method.primary === true, ); - const validContactsSansPrimary = validContacts.filter( - (method, index) => index !== primaryContactIndex, + const validMethodsSansPrimary = validMethods.filter( + (method, index) => index !== primaryMethodIndex, ); return ( <> - {validContacts.length === 1 && ( - + {validMethods.length === 1 && ( + )} - {validContacts.length > 1 && ( + {validMethods.length > 1 && ( }> - + - {validContactsSansPrimary.map((contact) => ( + {validMethodsSansPrimary.map((contact) => ( ))} From 6e26f04993048d769c4cdc70d4b8ebb88f6aeaf9 Mon Sep 17 00:00:00 2001 From: John Plastow Date: Mon, 23 May 2022 16:28:05 -0700 Subject: [PATCH 040/103] Avoiding translation of dynamic content --- .../preferences/personal/modals/PersPrefModal.tsx | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/pages/accountLists/[accountListId]/preferences/personal/modals/PersPrefModal.tsx b/pages/accountLists/[accountListId]/preferences/personal/modals/PersPrefModal.tsx index 10187eca1..bc7558774 100644 --- a/pages/accountLists/[accountListId]/preferences/personal/modals/PersPrefModal.tsx +++ b/pages/accountLists/[accountListId]/preferences/personal/modals/PersPrefModal.tsx @@ -64,10 +64,10 @@ export const PersPrefModal: React.FC = ({ }; const tabData = [ - { label: 'Contact Info', data: }, - { label: 'Details', data: }, - { label: 'Social', data: }, - { label: 'Relationships', data: }, + { label: t('Contact Info'), data: }, + { label: t('Details'), data: }, + { label: t('Social'), data: }, + { label: t('Relationships'), data: }, ]; return ( @@ -83,7 +83,7 @@ export const PersPrefModal: React.FC = ({ {tabData.map((current, index) => ( - + ))} From dfb9f86f091e80472f66d144af6bcbf8e767ba8f Mon Sep 17 00:00:00 2001 From: John Plastow Date: Mon, 23 May 2022 17:13:54 -0700 Subject: [PATCH 041/103] Conversion to using lab tab components TabContext TabList TabPanel --- .../personal/modals/PersPrefModal.tsx | 69 ++++++++----------- 1 file changed, 28 insertions(+), 41 deletions(-) diff --git a/pages/accountLists/[accountListId]/preferences/personal/modals/PersPrefModal.tsx b/pages/accountLists/[accountListId]/preferences/personal/modals/PersPrefModal.tsx index bc7558774..760ee6a58 100644 --- a/pages/accountLists/[accountListId]/preferences/personal/modals/PersPrefModal.tsx +++ b/pages/accountLists/[accountListId]/preferences/personal/modals/PersPrefModal.tsx @@ -1,14 +1,7 @@ import React, { useState } from 'react'; import { useTranslation } from 'react-i18next'; -import { - AppBar, - Box, - Button, - DialogContent, - Tab, - Tabs, - styled, -} from '@material-ui/core'; +import { Button, DialogContent, Tab, styled } from '@material-ui/core'; +import { TabContext, TabList, TabPanel } from '@material-ui/lab'; import Modal from '../../../../../../src/components/common/Modal/Modal'; import { StyledDialogActions } from './PersPrefModalShared'; import { PersPrefModalContact } from './PersPrefModalContact'; @@ -17,14 +10,7 @@ import { PersPrefModalSocial } from './PersPrefModalSocial'; import { PersPrefModalRelationships } from './PersPrefModalRelationships'; import { PersPrefModalName } from './PersPrefModalName'; -const StyledAppBar = styled(AppBar)(({ theme }) => ({ - boxShadow: 'none', - backgroundColor: 'transparent', - color: theme.palette.text.primary, - marginBottom: theme.spacing(2), -})); - -const StyledTabs = styled(Tabs)(({ theme }) => ({ +const StyledTabList = styled(TabList)(({ theme }) => ({ '& .MuiTabs-flexContainer > *': { flexGrow: 1, }, @@ -54,14 +40,6 @@ export const PersPrefModal: React.FC = ({ handleClose, }) => { const { t } = useTranslation(); - const [openTab, setOpenTab] = useState(0); - - const handleChange = ( - event: React.ChangeEvent>, - newValue: number, - ) => { - setOpenTab(newValue); - }; const tabData = [ { label: t('Contact Info'), data: }, @@ -70,6 +48,15 @@ export const PersPrefModal: React.FC = ({ { label: t('Relationships'), data: }, ]; + const [openTab, setOpenTab] = useState(tabData[0].label); + + const handleChange = ( + event: React.ChangeEvent>, + newValue: string, + ) => { + setOpenTab(newValue); + }; + return ( = ({ - - - {tabData.map((current, index) => ( - + + + {tabData.map((tab, index) => ( + ))} - - - {tabData.map((current, index) => ( - - ))} + + {tabData.map((tab, index) => ( + + {tab.data} + + ))} + -// -// ); -// }; - -// interface PersPrefFieldWrapperProps { -// label?: string; -// required?: boolean; -// disabled?: boolean; -// helperText?: string; -// helperPosition?: string; -// } - -// const PersPrefFieldWrapper: React.FC = ({ -// label, -// required, -// disabled, -// helperText, -// helperPosition, -// children, -// }) => { -// return ( -// -// {label !== '' && ( -// {label} -// )} -// {helperText !== '' && helperPosition === 'top' && ( -// {helperText} -// )} -// {children} -// {helperText !== '' && helperPosition === 'bottom' && ( -// {helperText} -// )} -// -// ); -// }; - -// interface PersPrefHelperWrapperProps { -// text?: string; -// position?: string; -// } - -// const PersPrefHelperWrapper: React.FC = ({ -// text = '', -// position = 'top', -// children, -// }) => { -// return ( -// <> -// {text !== '' && position === 'top' && ( -// {text} -// )} -// {children} -// {text !== '' && position === 'bottom' && ( -// {text} -// )} -// -// ); -// }; - -// interface PersPrefInputProps extends PersPrefFieldWrapperProps { -// type?: string; -// value?: string; -// placeholder?: string; -// startIcon?: OutlinedInputProps['startAdornment']; -// } - -// export const PersPrefInput: React.FC = ({ -// label = '', -// required = false, -// disabled = false, -// helperText = '', -// helperPosition = 'top', -// type = 'text', -// value = '', -// placeholder = '', -// startIcon = '', -// }) => { -// return ( -// -// -// -// ); -// }; - interface PersPrefFieldProps { label?: string; helperText?: string; From 6d8908db0f898cc319e97a5b0b6604e30c9b9f9b Mon Sep 17 00:00:00 2001 From: John Plastow Date: Wed, 25 May 2022 15:39:42 -0700 Subject: [PATCH 047/103] Removing redundant translation --- pages/accountLists/[accountListId]/preferences/wrapper.tsx | 7 ++----- 1 file changed, 2 insertions(+), 5 deletions(-) diff --git a/pages/accountLists/[accountListId]/preferences/wrapper.tsx b/pages/accountLists/[accountListId]/preferences/wrapper.tsx index 959bf27ad..ce6cc272c 100644 --- a/pages/accountLists/[accountListId]/preferences/wrapper.tsx +++ b/pages/accountLists/[accountListId]/preferences/wrapper.tsx @@ -1,5 +1,4 @@ import React from 'react'; -import { useTranslation } from 'react-i18next'; import Head from 'next/head'; import { Box, Typography, styled } from '@material-ui/core'; @@ -19,17 +18,15 @@ export const PreferencesWrapper: React.FC = ({ pageHeading, children, }) => { - const { t } = useTranslation(); - return ( <> - MPDX | {t(pageTitle)} + MPDX | {pageTitle} - {t(pageHeading)} + {pageHeading} {children} From 62bc47be38b4a5e50cf4223f33c8ad77dc21d0ca Mon Sep 17 00:00:00 2001 From: John Plastow Date: Wed, 25 May 2022 16:19:50 -0700 Subject: [PATCH 048/103] Removed default option values and required options for display --- .../preferences/personal/shared/PersPrefForms.tsx | 12 +++--------- 1 file changed, 3 insertions(+), 9 deletions(-) diff --git a/pages/accountLists/[accountListId]/preferences/personal/shared/PersPrefForms.tsx b/pages/accountLists/[accountListId]/preferences/personal/shared/PersPrefForms.tsx index 61100ca13..c8fc1f81e 100644 --- a/pages/accountLists/[accountListId]/preferences/personal/shared/PersPrefForms.tsx +++ b/pages/accountLists/[accountListId]/preferences/personal/shared/PersPrefForms.tsx @@ -87,14 +87,8 @@ export const PersPrefField: React.FC = ({ inputValue = '', inputPlaceholder = '', inputStartIcon = false, - options = [ - ['option1', 'Option 1'], - ['option2', 'Option 2'], - ['option3', 'Option 3'], - ['option4', 'Option 4'], - ['option5', 'Option 5'], - ], - selectValue = options[0][0], + options = [], + selectValue = '', labelPlacement = 'end', checkboxIcon = , checkboxCheckedIcon = , @@ -143,7 +137,7 @@ export const PersPrefField: React.FC = ({ )} {/* Select field */} - {type === 'select' && ( + {type === 'select' && options.length > 0 && ( {options.map(([optionVal, optionLabel], index) => { return ( From 4c8d2b06fd353398e88bfa2f11e209830b3940b2 Mon Sep 17 00:00:00 2001 From: John Plastow Date: Wed, 25 May 2022 16:21:32 -0700 Subject: [PATCH 049/103] Removing commented-out code --- .../preferences/personal/shared/PersPrefForms.tsx | 4 ---- 1 file changed, 4 deletions(-) diff --git a/pages/accountLists/[accountListId]/preferences/personal/shared/PersPrefForms.tsx b/pages/accountLists/[accountListId]/preferences/personal/shared/PersPrefForms.tsx index c8fc1f81e..b7ace59ad 100644 --- a/pages/accountLists/[accountListId]/preferences/personal/shared/PersPrefForms.tsx +++ b/pages/accountLists/[accountListId]/preferences/personal/shared/PersPrefForms.tsx @@ -73,7 +73,6 @@ interface PersPrefFieldProps { radioCheckedIcon?: ReactElement; checked?: boolean; required?: boolean; - // onChange?: () => void; className?: string; disabled?: boolean; } @@ -98,7 +97,6 @@ export const PersPrefField: React.FC = ({ radioCheckedIcon = , checked = false, required = false, - // onChange, className = '', disabled = false, }) => { @@ -185,8 +183,6 @@ export const PersPrefField: React.FC = ({ ); }; -// New version - interface PersPrefFormWrapperProps { formAttrs?: { action?: string; method?: string }; formButtonText?: string; From b971fa0ace6c3832e0ffb2827d4f6873ca889de4 Mon Sep 17 00:00:00 2001 From: John Plastow Date: Wed, 25 May 2022 16:31:40 -0700 Subject: [PATCH 050/103] Swapping commented code Removed unneeded commented-out Commented-out original Preferences link and added note of explanation --- .../Primary/TopBar/Items/ProfileMenu/ProfileMenu.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/Layouts/Primary/TopBar/Items/ProfileMenu/ProfileMenu.tsx b/src/components/Layouts/Primary/TopBar/Items/ProfileMenu/ProfileMenu.tsx index 9e74cd691..76cbee5f5 100644 --- a/src/components/Layouts/Primary/TopBar/Items/ProfileMenu/ProfileMenu.tsx +++ b/src/components/Layouts/Primary/TopBar/Items/ProfileMenu/ProfileMenu.tsx @@ -217,14 +217,14 @@ const ProfileMenu = (): ReactElement => { component="a" href={`/accountLists/${accountListId}/preferences/personal`} > - {/* {t('Preferences')} */} - + {/* Keeping the original Preferences link because I'm not certain I've set the new one up properly */} + {/* - + */} From d5cada31a0a30e7361a65fd22754b825a8161660 Mon Sep 17 00:00:00 2001 From: John Plastow Date: Wed, 25 May 2022 16:46:11 -0700 Subject: [PATCH 051/103] Adding "type" prop to contact methods for better logic This didn't even work properly prior to this update. --- .../preferences/personal/DemoContent.tsx | 2 +- .../personal/info/PersPrefContactMethods.tsx | 19 +++++++++++++++---- .../personal/info/PersPrefInfo.tsx | 4 ++-- 3 files changed, 18 insertions(+), 7 deletions(-) diff --git a/pages/accountLists/[accountListId]/preferences/personal/DemoContent.tsx b/pages/accountLists/[accountListId]/preferences/personal/DemoContent.tsx index 3a22f7642..a9b637821 100644 --- a/pages/accountLists/[accountListId]/preferences/personal/DemoContent.tsx +++ b/pages/accountLists/[accountListId]/preferences/personal/DemoContent.tsx @@ -48,7 +48,7 @@ export const info = { value: '1234567890', type: 'home', primary: false, - invalid: true, + invalid: false, }, { value: '0987654321', diff --git a/pages/accountLists/[accountListId]/preferences/personal/info/PersPrefContactMethods.tsx b/pages/accountLists/[accountListId]/preferences/personal/info/PersPrefContactMethods.tsx index 1e2a83742..8f32a5dd6 100644 --- a/pages/accountLists/[accountListId]/preferences/personal/info/PersPrefContactMethods.tsx +++ b/pages/accountLists/[accountListId]/preferences/personal/info/PersPrefContactMethods.tsx @@ -50,14 +50,16 @@ interface ContactMethodData { // Single contact phone/email interface PersPrefContactMethodProps { + type: string; method: ContactMethodData; } const PersPrefContactMethod: React.FC = ({ + type, method, }) => { const { t } = useTranslation(); - const prefix = 'address' in method ? 'mailto' : 'tel'; + const prefix = type === 'email' ? 'mailto' : 'tel'; const value = method.value; return ( @@ -71,10 +73,12 @@ const PersPrefContactMethod: React.FC = ({ // List of phone/email contacts interface PersPrefContactMethodsProps { + type: string; methods: ContactMethodData[]; } export const PersPrefContactMethods = ({ + type, methods, }: PersPrefContactMethodsProps): ReactElement => { const validMethods = methods.filter((method) => method.invalid !== true); @@ -88,16 +92,23 @@ export const PersPrefContactMethods = ({ return ( <> {validMethods.length === 1 && ( - + )} {validMethods.length > 1 && ( }> - + {validMethodsSansPrimary.map((contact) => ( - + ))} diff --git a/pages/accountLists/[accountListId]/preferences/personal/info/PersPrefInfo.tsx b/pages/accountLists/[accountListId]/preferences/personal/info/PersPrefInfo.tsx index a35f13f0c..ad7c6fc62 100644 --- a/pages/accountLists/[accountListId]/preferences/personal/info/PersPrefInfo.tsx +++ b/pages/accountLists/[accountListId]/preferences/personal/info/PersPrefInfo.tsx @@ -91,8 +91,8 @@ export const PersPrefInfo: React.FC = () => { - - + + Date: Wed, 25 May 2022 17:13:38 -0700 Subject: [PATCH 052/103] Using filter() instead of findIndex --- .../personal/info/PersPrefContactMethods.tsx | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/pages/accountLists/[accountListId]/preferences/personal/info/PersPrefContactMethods.tsx b/pages/accountLists/[accountListId]/preferences/personal/info/PersPrefContactMethods.tsx index 8f32a5dd6..786cd5ebc 100644 --- a/pages/accountLists/[accountListId]/preferences/personal/info/PersPrefContactMethods.tsx +++ b/pages/accountLists/[accountListId]/preferences/personal/info/PersPrefContactMethods.tsx @@ -82,11 +82,11 @@ export const PersPrefContactMethods = ({ methods, }: PersPrefContactMethodsProps): ReactElement => { const validMethods = methods.filter((method) => method.invalid !== true); - const primaryMethodIndex = validMethods.findIndex( + const validMethodsPrimary = validMethods.filter( (method) => method.primary === true, ); - const validMethodsSansPrimary = validMethods.filter( - (method, index) => index !== primaryMethodIndex, + const validMethodsSecondary = validMethods.filter( + (method) => method.primary === false, ); return ( @@ -99,11 +99,11 @@ export const PersPrefContactMethods = ({ }> - {validMethodsSansPrimary.map((contact) => ( + {validMethodsSecondary.map((contact) => ( Date: Wed, 25 May 2022 17:18:58 -0700 Subject: [PATCH 053/103] Modifying truthy test --- .../personal/shared/PersPrefForms.tsx | 22 ++++++++++--------- 1 file changed, 12 insertions(+), 10 deletions(-) diff --git a/pages/accountLists/[accountListId]/preferences/personal/shared/PersPrefForms.tsx b/pages/accountLists/[accountListId]/preferences/personal/shared/PersPrefForms.tsx index b7ace59ad..73170c194 100644 --- a/pages/accountLists/[accountListId]/preferences/personal/shared/PersPrefForms.tsx +++ b/pages/accountLists/[accountListId]/preferences/personal/shared/PersPrefForms.tsx @@ -241,16 +241,18 @@ export const PersPrefFieldWrapper: React.FC = ({ children, }) => { const { t } = useTranslation(); - const labelOutput = - labelText !== '' ? {t(labelText)} : ''; - const helperTextOutput = - helperText !== '' ? ( - - {t(helperText)} - - ) : ( - '' - ); + const labelOutput = labelText ? ( + {t(labelText)} + ) : ( + '' + ); + const helperTextOutput = helperText ? ( + + {t(helperText)} + + ) : ( + '' + ); return ( Date: Wed, 25 May 2022 17:29:27 -0700 Subject: [PATCH 054/103] Made the index output dynamic so a default isn't necessary --- .../preferences/personal/modals/PersPrefModalContact.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/pages/accountLists/[accountListId]/preferences/personal/modals/PersPrefModalContact.tsx b/pages/accountLists/[accountListId]/preferences/personal/modals/PersPrefModalContact.tsx index 120209a3e..b3adce4ca 100644 --- a/pages/accountLists/[accountListId]/preferences/personal/modals/PersPrefModalContact.tsx +++ b/pages/accountLists/[accountListId]/preferences/personal/modals/PersPrefModalContact.tsx @@ -55,7 +55,7 @@ const AddContact: React.FC = ({ current, isPhone, type, - index = 1000, + index, }) => { const { t } = useTranslation(); const theme = useTheme(); @@ -174,7 +174,7 @@ const ContactMethods: React.FC<{ type: string }> = ({ type }) => { key={index} /> ))} - + + ); }; From 71a155e1dba373bb9b4f6793a744668a7f9b912d Mon Sep 17 00:00:00 2001 From: John Plastow II Date: Thu, 3 Nov 2022 15:32:16 -0700 Subject: [PATCH 056/103] MUI5 upgrade + starting refactor --- .../preferences/personal.page.tsx | 4 +- .../personal/accordions/PersPrefGroup.tsx | 4 +- .../personal/accordions/PersPrefItem.tsx | 9 +- .../personal/info/PersPrefAnniversary.tsx | 2 +- .../personal/info/PersPrefContactMethods.tsx | 6 +- .../personal/info/PersPrefInfo.tsx | 150 ++++++++---------- .../personal/info/PersPrefSocials.tsx | 7 +- .../personal/info/PersPrefWork.tsx | 4 +- .../personal/modals/PersPrefModal.tsx | 5 +- .../modals/PersPrefModalContactInfo.tsx | 6 +- .../personal/modals/PersPrefModalDetails.tsx | 3 +- .../personal/modals/PersPrefModalName.tsx | 3 +- .../modals/PersPrefModalRelationships.tsx | 6 +- .../personal/modals/PersPrefModalShared.tsx | 17 +- .../personal/modals/PersPrefModalSocial.tsx | 5 +- .../personal/shared/PersPrefForms.tsx | 14 +- .../[accountListId]/preferences/wrapper.tsx | 29 ++-- 17 files changed, 135 insertions(+), 139 deletions(-) diff --git a/pages/accountLists/[accountListId]/preferences/personal.page.tsx b/pages/accountLists/[accountListId]/preferences/personal.page.tsx index dcc977ae5..25e7ecd2d 100644 --- a/pages/accountLists/[accountListId]/preferences/personal.page.tsx +++ b/pages/accountLists/[accountListId]/preferences/personal.page.tsx @@ -5,8 +5,8 @@ import { Checkbox, FormControlLabel, MenuItem, - styled, -} from '@material-ui/core'; +} from '@mui/material'; +import { styled } from '@mui/material/styles'; import { PreferencesWrapper } from './wrapper'; import { PersPrefInfo } from './personal/info/PersPrefInfo'; import { PersPrefGroup } from './personal/accordions/PersPrefGroup'; diff --git a/pages/accountLists/[accountListId]/preferences/personal/accordions/PersPrefGroup.tsx b/pages/accountLists/[accountListId]/preferences/personal/accordions/PersPrefGroup.tsx index 3d250596a..0bac2220e 100644 --- a/pages/accountLists/[accountListId]/preferences/personal/accordions/PersPrefGroup.tsx +++ b/pages/accountLists/[accountListId]/preferences/personal/accordions/PersPrefGroup.tsx @@ -1,5 +1,6 @@ +import { Box, Typography } from '@mui/material'; +import { styled } from '@mui/material/styles'; import React from 'react'; -import { Box, Typography, styled } from '@material-ui/core'; const StyledGroupWrapper = styled(Box)(({ theme }) => ({ marginTop: theme.spacing(3), @@ -7,6 +8,7 @@ const StyledGroupWrapper = styled(Box)(({ theme }) => ({ interface PersPrefGroupProps { title: string; + children?: React.ReactNode; } export const PersPrefGroup: React.FC = ({ diff --git a/pages/accountLists/[accountListId]/preferences/personal/accordions/PersPrefItem.tsx b/pages/accountLists/[accountListId]/preferences/personal/accordions/PersPrefItem.tsx index 52e87ff2b..f9049a1a2 100644 --- a/pages/accountLists/[accountListId]/preferences/personal/accordions/PersPrefItem.tsx +++ b/pages/accountLists/[accountListId]/preferences/personal/accordions/PersPrefItem.tsx @@ -1,13 +1,13 @@ -import React from 'react'; import { Accordion, AccordionDetails, AccordionSummary, Box, Typography, - styled, -} from '@material-ui/core'; -import { ExpandMore } from '@material-ui/icons'; +} from '@mui/material'; +import { styled } from '@mui/material/styles'; +import { ExpandMore } from '@mui/icons-material'; +import React from 'react'; import { accordionShared } from '../shared/PersPrefShared'; const StyledAccordion = styled(Accordion)(({ theme }) => ({ @@ -59,6 +59,7 @@ interface PersPrefItemProps { expandedPanel: string; label: string; value: string; + children?: React.ReactNode; } export const PersPrefItem: React.FC = ({ diff --git a/pages/accountLists/[accountListId]/preferences/personal/info/PersPrefAnniversary.tsx b/pages/accountLists/[accountListId]/preferences/personal/info/PersPrefAnniversary.tsx index 86c786195..e192176d8 100644 --- a/pages/accountLists/[accountListId]/preferences/personal/info/PersPrefAnniversary.tsx +++ b/pages/accountLists/[accountListId]/preferences/personal/info/PersPrefAnniversary.tsx @@ -1,6 +1,6 @@ import React from 'react'; import { useTranslation } from 'react-i18next'; -import { Typography } from '@material-ui/core'; +import { Typography } from '@mui/material'; import { Info } from 'luxon'; interface AnniversaryProps { diff --git a/pages/accountLists/[accountListId]/preferences/personal/info/PersPrefContactMethods.tsx b/pages/accountLists/[accountListId]/preferences/personal/info/PersPrefContactMethods.tsx index 786cd5ebc..6308c629d 100644 --- a/pages/accountLists/[accountListId]/preferences/personal/info/PersPrefContactMethods.tsx +++ b/pages/accountLists/[accountListId]/preferences/personal/info/PersPrefContactMethods.tsx @@ -6,9 +6,9 @@ import { AccordionDetails, Link, Typography, - styled, -} from '@material-ui/core'; -import { ExpandMore } from '@material-ui/icons'; +} from '@mui/material'; +import { styled } from '@mui/material/styles'; +import { ExpandMore } from '@mui/icons-material'; import { accordionShared } from '../shared/PersPrefShared'; const StyledAccordion = styled(Accordion)({ diff --git a/pages/accountLists/[accountListId]/preferences/personal/info/PersPrefInfo.tsx b/pages/accountLists/[accountListId]/preferences/personal/info/PersPrefInfo.tsx index 96e6b47ff..bda0f395b 100644 --- a/pages/accountLists/[accountListId]/preferences/personal/info/PersPrefInfo.tsx +++ b/pages/accountLists/[accountListId]/preferences/personal/info/PersPrefInfo.tsx @@ -1,15 +1,8 @@ import React, { useState } from 'react'; import { useTranslation } from 'react-i18next'; -import { - Avatar, - Box, - Button, - Card, - CardContent, - Typography, - styled, -} from '@material-ui/core'; -import { Edit } from '@material-ui/icons'; +import { Avatar, Box, Button, Typography } from '@mui/material'; +import { styled } from '@mui/material/styles'; +import { Edit } from '@mui/icons-material'; import { info } from '../DemoContent'; import { PersPrefModal } from '../modals/PersPrefModal'; import { PersPrefWork } from './PersPrefWork'; @@ -17,61 +10,42 @@ import { PersPrefContactMethods } from './PersPrefContactMethods'; import { PersPrefAnniversary } from './PersPrefAnniversary'; import { PersPrefSocials } from './PersPrefSocials'; -const StyledContactTop = styled(Box)(({ theme }) => ({ +const StyledBox = styled(Box)(({ theme }) => ({ + position: 'relative', display: 'flex', + flexDirection: 'column', alignItems: 'center', - marginBottom: theme.spacing(2), - [theme.breakpoints.up('sm')]: { - display: 'block', - marginLeft: theme.spacing(8), - marginBottom: theme.spacing(1), - }, -})); - -const StyledAvatar = styled(Avatar)(({ theme }) => ({ - width: theme.spacing(4), - height: theme.spacing(4), - marginRight: theme.spacing(2), - display: 'inline-block', - '& img': { - display: 'block', - }, + gap: theme.spacing(2), [theme.breakpoints.up('sm')]: { - position: 'absolute', - top: 16, - left: 16, - width: theme.spacing(6), - height: theme.spacing(6), + flexDirection: 'row', + gap: theme.spacing(4), }, [theme.breakpoints.up('md')]: { - top: 32, - left: 32, + justifyContent: 'space-evenly', + gap: theme.spacing(6), }, })); -const StyledContactBottom = styled(Box)(({ theme }) => ({ - '& ul': { - marginTop: theme.spacing(1), - }, - [theme.breakpoints.up('sm')]: { - marginLeft: theme.spacing(8), - }, +const StyledContactTop = styled(Box)(() => ({ + textAlign: 'center', })); -const StyledContactEdit = styled(Box)(({ theme }) => ({ - textAlign: 'right', - marginTop: theme.spacing(2), +const StyledAvatar = styled(Avatar)(({ theme }) => ({ + width: theme.spacing(12), + height: theme.spacing(12), + marginLeft: 'auto', + marginRight: 'auto', + marginBottom: theme.spacing(2), +})); + +const StyledContactEdit = styled(Button)(({ theme }) => ({ [theme.breakpoints.up('sm')]: { position: 'absolute', - bottom: 16, - right: 24, + bottom: 0, + right: 0, }, })); -const StyledCard = styled(Card)(() => ({ - position: 'relative', -})); - export const PersPrefInfo: React.FC = () => { const { t } = useTranslation(); @@ -82,43 +56,43 @@ export const PersPrefInfo: React.FC = () => { }; return ( - - - - - - {t(info.title)} {info.first_name} {info.last_name} {t(info.suffix)} - - - - - - - - - - - - {profileOpen ? ( - setProfileOpen(false)} /> - ) : null} - - - + + + + + {t(info.title)} {info.first_name} {info.last_name} {t(info.suffix)} + + + + + + + + + + } + disableRipple + > + {t('Edit')} + + {profileOpen ? ( + setProfileOpen(false)} /> + ) : null} + ); }; diff --git a/pages/accountLists/[accountListId]/preferences/personal/info/PersPrefSocials.tsx b/pages/accountLists/[accountListId]/preferences/personal/info/PersPrefSocials.tsx index 28e820e5d..8d7271c97 100644 --- a/pages/accountLists/[accountListId]/preferences/personal/info/PersPrefSocials.tsx +++ b/pages/accountLists/[accountListId]/preferences/personal/info/PersPrefSocials.tsx @@ -1,6 +1,7 @@ import React from 'react'; -import { IconButton, List, ListItem, styled } from '@material-ui/core'; -import { Facebook, Language, LinkedIn, Twitter } from '@material-ui/icons'; +import { IconButton, List, ListItem } from '@mui/material'; +import { styled } from '@mui/material/styles'; +import { Facebook, Language, LinkedIn, Twitter } from '@mui/icons-material'; const StyledList = styled(List)({ fontSize: '0', @@ -57,7 +58,7 @@ const ListItemLinks: React.FC = ({ accounts, type }) => { return ( <> {accounts.map((account) => ( - + = ({ employer, occupation }) => { if (occupation || employer) { return ( - + {occupation} {separator} {employer} ); diff --git a/pages/accountLists/[accountListId]/preferences/personal/modals/PersPrefModal.tsx b/pages/accountLists/[accountListId]/preferences/personal/modals/PersPrefModal.tsx index 49c32a294..65f4c53da 100644 --- a/pages/accountLists/[accountListId]/preferences/personal/modals/PersPrefModal.tsx +++ b/pages/accountLists/[accountListId]/preferences/personal/modals/PersPrefModal.tsx @@ -1,7 +1,8 @@ import React, { useState } from 'react'; import { useTranslation } from 'react-i18next'; -import { Button, DialogContent, Tab, styled } from '@material-ui/core'; -import { TabContext, TabList, TabPanel } from '@material-ui/lab'; +import { Button, DialogContent, Tab } from '@mui/material'; +import { styled } from '@mui/material/styles'; +import { TabContext, TabList, TabPanel } from '@mui/lab'; import Modal from '../../../../../../src/components/common/Modal/Modal'; import { StyledDialogActions } from './PersPrefModalShared'; import { PersPrefModalContact } from './PersPrefModalContactInfo'; diff --git a/pages/accountLists/[accountListId]/preferences/personal/modals/PersPrefModalContactInfo.tsx b/pages/accountLists/[accountListId]/preferences/personal/modals/PersPrefModalContactInfo.tsx index 2dc2c9fcb..548316d19 100644 --- a/pages/accountLists/[accountListId]/preferences/personal/modals/PersPrefModalContactInfo.tsx +++ b/pages/accountLists/[accountListId]/preferences/personal/modals/PersPrefModalContactInfo.tsx @@ -8,9 +8,9 @@ import { MenuItem, Radio, Theme, - styled, -} from '@material-ui/core'; -import { AddCircle, Cancel, Check } from '@material-ui/icons'; +} from '@mui/material'; +import { styled } from '@mui/material/styles'; +import { AddCircle, Cancel, Check } from '@mui/icons-material'; import { PersPrefFieldWrapper, StyledOutlinedInput, diff --git a/pages/accountLists/[accountListId]/preferences/personal/modals/PersPrefModalDetails.tsx b/pages/accountLists/[accountListId]/preferences/personal/modals/PersPrefModalDetails.tsx index a9b56f033..8368ddf99 100644 --- a/pages/accountLists/[accountListId]/preferences/personal/modals/PersPrefModalDetails.tsx +++ b/pages/accountLists/[accountListId]/preferences/personal/modals/PersPrefModalDetails.tsx @@ -1,6 +1,7 @@ import React from 'react'; import { useTranslation } from 'react-i18next'; -import { Grid, MenuItem, styled } from '@material-ui/core'; +import { Grid, MenuItem } from '@mui/material'; +import { styled } from '@mui/material/styles'; import { Info } from 'luxon'; import { PersPrefFieldWrapper, diff --git a/pages/accountLists/[accountListId]/preferences/personal/modals/PersPrefModalName.tsx b/pages/accountLists/[accountListId]/preferences/personal/modals/PersPrefModalName.tsx index d83a8a083..19bd45916 100644 --- a/pages/accountLists/[accountListId]/preferences/personal/modals/PersPrefModalName.tsx +++ b/pages/accountLists/[accountListId]/preferences/personal/modals/PersPrefModalName.tsx @@ -1,6 +1,7 @@ import React from 'react'; import { useTranslation } from 'react-i18next'; -import { Grid, styled } from '@material-ui/core'; +import { Grid } from '@mui/material'; +import { styled } from '@mui/material/styles'; import { PersPrefField } from '../shared/PersPrefForms'; import { info } from '../DemoContent'; diff --git a/pages/accountLists/[accountListId]/preferences/personal/modals/PersPrefModalRelationships.tsx b/pages/accountLists/[accountListId]/preferences/personal/modals/PersPrefModalRelationships.tsx index 77990ec94..0d6f857d8 100644 --- a/pages/accountLists/[accountListId]/preferences/personal/modals/PersPrefModalRelationships.tsx +++ b/pages/accountLists/[accountListId]/preferences/personal/modals/PersPrefModalRelationships.tsx @@ -6,9 +6,9 @@ import { Grid, Hidden, MenuItem, - styled, -} from '@material-ui/core'; -import { AddCircle, Search } from '@material-ui/icons'; +} from '@mui/material'; +import { styled } from '@mui/material/styles'; +import { AddCircle, Search } from '@mui/icons-material'; import Modal from '../../../../../../src/components/common/Modal/Modal'; import { PersPrefFieldWrapper, diff --git a/pages/accountLists/[accountListId]/preferences/personal/modals/PersPrefModalShared.tsx b/pages/accountLists/[accountListId]/preferences/personal/modals/PersPrefModalShared.tsx index 6a2f4a831..eef24c0ef 100644 --- a/pages/accountLists/[accountListId]/preferences/personal/modals/PersPrefModalShared.tsx +++ b/pages/accountLists/[accountListId]/preferences/personal/modals/PersPrefModalShared.tsx @@ -8,9 +8,9 @@ import { Hidden, IconButton, Typography, - styled, -} from '@material-ui/core'; -import { Delete } from '@material-ui/icons'; +} from '@mui/material'; +import { styled } from '@mui/material/styles'; +import { Delete } from '@mui/icons-material'; export const SectionHeading = styled(Typography)(() => ({ fontWeight: 700, @@ -29,7 +29,8 @@ const SmallColumnLabels = styled(Grid)(() => ({ interface OptionHeadingsProps { smallCols: GridProps['sm']; - align?: GridProps['justify']; + align?: GridProps['justifyContent']; + children?: React.ReactNode; } export const OptionHeadings: React.FC = ({ @@ -37,7 +38,7 @@ export const OptionHeadings: React.FC = ({ align = 'center', children, }) => ( - + {children} ); @@ -79,7 +80,11 @@ export const StyledGridItem = styled(Grid)(({ theme }) => ({ }, })); -export const HiddenSmLabel: React.FC = ({ children }) => ( +interface HiddenSmLabelProps { + children?: React.ReactNode; +} + +export const HiddenSmLabel: React.FC = ({ children }) => ( {children} diff --git a/pages/accountLists/[accountListId]/preferences/personal/modals/PersPrefModalSocial.tsx b/pages/accountLists/[accountListId]/preferences/personal/modals/PersPrefModalSocial.tsx index 83c2257e3..c3f9464c2 100644 --- a/pages/accountLists/[accountListId]/preferences/personal/modals/PersPrefModalSocial.tsx +++ b/pages/accountLists/[accountListId]/preferences/personal/modals/PersPrefModalSocial.tsx @@ -1,7 +1,8 @@ import React, { ReactElement } from 'react'; import { useTranslation } from 'react-i18next'; -import { Button, Grid, Hidden, Typography, styled } from '@material-ui/core'; -import { Facebook, Language, LinkedIn, Twitter } from '@material-ui/icons'; +import { Button, Grid, Hidden, Typography } from '@mui/material'; +import { styled } from '@mui/material/styles'; +import { Facebook, Language, LinkedIn, Twitter } from '@mui/icons-material'; import { PersPrefFieldWrapper, diff --git a/pages/accountLists/[accountListId]/preferences/personal/shared/PersPrefForms.tsx b/pages/accountLists/[accountListId]/preferences/personal/shared/PersPrefForms.tsx index 85530fbac..4ee880d36 100644 --- a/pages/accountLists/[accountListId]/preferences/personal/shared/PersPrefForms.tsx +++ b/pages/accountLists/[accountListId]/preferences/personal/shared/PersPrefForms.tsx @@ -17,14 +17,14 @@ import { Radio, Select, Theme, - styled, -} from '@material-ui/core'; +} from '@mui/material'; +import { styled } from '@mui/material/styles'; import { CheckBox, CheckBoxOutlineBlank, RadioButtonChecked, RadioButtonUnchecked, -} from '@material-ui/icons'; +} from '@mui/icons-material'; const StyledFormLabel = styled(FormLabel)(({ theme }) => ({ color: theme.palette.text.primary, @@ -101,10 +101,6 @@ export const PersPrefField: React.FC = ({ }) => { const [selectValueState, setSelectValueState] = useState(selectValue); - const handleChange = (event: React.ChangeEvent<{ value: unknown }>) => { - setSelectValueState(event.target.value as string); - }; - return ( = ({ {/* Select field */} {type === 'select' && options.length > 0 && ( - + setSelectValueState(e.target.value as string)}> {options.map(([optionVal, optionLabel], index) => { return ( @@ -191,6 +187,7 @@ interface PersPrefFormWrapperProps { formButtonText?: string; formButtonColor?: ButtonProps['color']; formButtonVariant?: ButtonProps['variant']; + children?: React.ReactNode; } export const PersPrefFormWrapper: React.FC = ({ @@ -227,6 +224,7 @@ interface PersPrefFieldWrapperProps { formControlRequired?: FormControlProps['required']; formControlVariant?: FormControlProps['variant']; formHelperTextProps?: { variant?: FormHelperTextProps['variant'] }; + children?: React.ReactNode; } export const PersPrefFieldWrapper: React.FC = ({ diff --git a/pages/accountLists/[accountListId]/preferences/wrapper.tsx b/pages/accountLists/[accountListId]/preferences/wrapper.tsx index ce6cc272c..853905971 100644 --- a/pages/accountLists/[accountListId]/preferences/wrapper.tsx +++ b/pages/accountLists/[accountListId]/preferences/wrapper.tsx @@ -1,16 +1,27 @@ +import { Box, Typography } from '@mui/material'; +import { styled } from '@mui/material/styles'; import React from 'react'; import Head from 'next/head'; -import { Box, Typography, styled } from '@material-ui/core'; -const PageTitle = styled(Box)(({ theme }) => ({ +const PageTitleWrapper = styled(Box)(({ theme }) => ({ color: theme.palette.common.white, backgroundColor: theme.palette.primary.main, - padding: theme.spacing(3), + paddingTop: theme.spacing(3), + paddingBottom: theme.spacing(3), +})); + +const PageTitle = styled(Typography)(({ theme }) => ({ + color: theme.palette.common.white, + paddingLeft: theme.spacing(3), + paddingRight: theme.spacing(3), + maxWidth: 1280, + margin: '0 auto', })); interface PrefWrapperProps { pageTitle: string; pageHeading: string; + children?: React.ReactNode; } export const PreferencesWrapper: React.FC = ({ @@ -24,12 +35,12 @@ export const PreferencesWrapper: React.FC = ({ MPDX | {pageTitle} - - - {pageHeading} - - - {children} + + {pageHeading} + + + {children} + ); From c72335e4216df1c52f05429fb0f44e42bda6a586 Mon Sep 17 00:00:00 2001 From: John Plastow II Date: Thu, 3 Nov 2022 15:55:12 -0700 Subject: [PATCH 057/103] Syncing modal styles --- .../personal/modals/PersPrefModal.tsx | 24 ++++++++----------- .../modals/PersPrefModalRelationships.tsx | 24 ++++++++----------- .../personal/modals/PersPrefModalShared.tsx | 5 ---- 3 files changed, 20 insertions(+), 33 deletions(-) diff --git a/pages/accountLists/[accountListId]/preferences/personal/modals/PersPrefModal.tsx b/pages/accountLists/[accountListId]/preferences/personal/modals/PersPrefModal.tsx index 65f4c53da..6d7997f7e 100644 --- a/pages/accountLists/[accountListId]/preferences/personal/modals/PersPrefModal.tsx +++ b/pages/accountLists/[accountListId]/preferences/personal/modals/PersPrefModal.tsx @@ -1,15 +1,18 @@ import React, { useState } from 'react'; import { useTranslation } from 'react-i18next'; -import { Button, DialogContent, Tab } from '@mui/material'; +import { DialogActions, DialogContent, Tab } from '@mui/material'; import { styled } from '@mui/material/styles'; import { TabContext, TabList, TabPanel } from '@mui/lab'; import Modal from '../../../../../../src/components/common/Modal/Modal'; -import { StyledDialogActions } from './PersPrefModalShared'; import { PersPrefModalContact } from './PersPrefModalContactInfo'; import { PersPrefModalDetails } from './PersPrefModalDetails'; import { PersPrefModalSocial } from './PersPrefModalSocial'; import { PersPrefModalRelationships } from './PersPrefModalRelationships'; import { PersPrefModalName } from './PersPrefModalName'; +import { + SubmitButton, + CancelButton, +} from 'src/components/common/Modal/ActionButtons/ActionButtons'; const StyledTabList = styled(TabList)(({ theme }) => ({ '& .MuiTabs-flexContainer > *': { @@ -81,19 +84,12 @@ export const PersPrefModal: React.FC = ({ - - - - + +
); diff --git a/pages/accountLists/[accountListId]/preferences/personal/modals/PersPrefModalRelationships.tsx b/pages/accountLists/[accountListId]/preferences/personal/modals/PersPrefModalRelationships.tsx index 0d6f857d8..9e8e70982 100644 --- a/pages/accountLists/[accountListId]/preferences/personal/modals/PersPrefModalRelationships.tsx +++ b/pages/accountLists/[accountListId]/preferences/personal/modals/PersPrefModalRelationships.tsx @@ -2,6 +2,7 @@ import React, { useState } from 'react'; import { useTranslation } from 'react-i18next'; import { Button, + DialogActions, DialogContent, Grid, Hidden, @@ -21,10 +22,13 @@ import { DeleteButton, OptionHeadings, SectionHeading, - StyledDialogActions, StyledGridContainer, StyledGridItem, } from './PersPrefModalShared'; +import { + SubmitButton, + CancelButton, +} from 'src/components/common/Modal/ActionButtons/ActionButtons'; const AddRelationshipButton = styled(Button)({ fontSize: 16, @@ -52,7 +56,6 @@ const RelationshipModal: React.FC = ({ isOpen={isOpen} title={t('Person')} handleClose={handleClose} - size={'md'} >
@@ -60,19 +63,12 @@ const RelationshipModal: React.FC = ({ } /> - - - - + +
); diff --git a/pages/accountLists/[accountListId]/preferences/personal/modals/PersPrefModalShared.tsx b/pages/accountLists/[accountListId]/preferences/personal/modals/PersPrefModalShared.tsx index eef24c0ef..2f8c7d2cf 100644 --- a/pages/accountLists/[accountListId]/preferences/personal/modals/PersPrefModalShared.tsx +++ b/pages/accountLists/[accountListId]/preferences/personal/modals/PersPrefModalShared.tsx @@ -1,7 +1,6 @@ import React from 'react'; import { Box, - DialogActions, Divider, Grid, GridProps, @@ -112,7 +111,3 @@ export const StyledDivider = styled(Divider)(({ theme }) => { marginBottom: theme.spacing(3), }; }); - -export const StyledDialogActions = styled(DialogActions)(({ theme }) => ({ - padding: `${theme.spacing(2)}px ${theme.spacing(3)}px`, -})); From aa9b9d92ae8832df68b6194e9915b07a5d077a5f Mon Sep 17 00:00:00 2001 From: John Plastow II Date: Thu, 3 Nov 2022 17:42:44 -0700 Subject: [PATCH 058/103] Wrapping content with --- .../[accountListId]/preferences/wrapper.tsx | 27 +++++++++---------- 1 file changed, 13 insertions(+), 14 deletions(-) diff --git a/pages/accountLists/[accountListId]/preferences/wrapper.tsx b/pages/accountLists/[accountListId]/preferences/wrapper.tsx index 853905971..12639268c 100644 --- a/pages/accountLists/[accountListId]/preferences/wrapper.tsx +++ b/pages/accountLists/[accountListId]/preferences/wrapper.tsx @@ -1,22 +1,19 @@ -import { Box, Typography } from '@mui/material'; +import { Box, Container, Typography } from '@mui/material'; import { styled } from '@mui/material/styles'; import React from 'react'; import Head from 'next/head'; -const PageTitleWrapper = styled(Box)(({ theme }) => ({ +const PageHeadingWrapper = styled(Box)(({ theme }) => ({ color: theme.palette.common.white, backgroundColor: theme.palette.primary.main, paddingTop: theme.spacing(3), paddingBottom: theme.spacing(3), })); -const PageTitle = styled(Typography)(({ theme }) => ({ - color: theme.palette.common.white, - paddingLeft: theme.spacing(3), - paddingRight: theme.spacing(3), - maxWidth: 1280, - margin: '0 auto', -})); +const PageContentWrapper = styled(Container)(({theme}) => ({ + paddingTop: theme.spacing(3), + paddingBottom: theme.spacing(3), +})) interface PrefWrapperProps { pageTitle: string; @@ -35,12 +32,14 @@ export const PreferencesWrapper: React.FC = ({ MPDX | {pageTitle} - - {pageHeading} - - + + + {pageHeading} + + + {children} - + ); From 5049f08156b6d6d70f01846aaabdc8be126c9b64 Mon Sep 17 00:00:00 2001 From: John Plastow II Date: Fri, 4 Nov 2022 11:36:24 -0700 Subject: [PATCH 059/103] Changing layout back to be in line w/ current app --- .../personal/info/PersPrefInfo.tsx | 68 +++++++++---------- 1 file changed, 34 insertions(+), 34 deletions(-) diff --git a/pages/accountLists/[accountListId]/preferences/personal/info/PersPrefInfo.tsx b/pages/accountLists/[accountListId]/preferences/personal/info/PersPrefInfo.tsx index bda0f395b..b8e0aebfd 100644 --- a/pages/accountLists/[accountListId]/preferences/personal/info/PersPrefInfo.tsx +++ b/pages/accountLists/[accountListId]/preferences/personal/info/PersPrefInfo.tsx @@ -10,24 +10,20 @@ import { PersPrefContactMethods } from './PersPrefContactMethods'; import { PersPrefAnniversary } from './PersPrefAnniversary'; import { PersPrefSocials } from './PersPrefSocials'; -const StyledBox = styled(Box)(({ theme }) => ({ - position: 'relative', - display: 'flex', - flexDirection: 'column', - alignItems: 'center', - gap: theme.spacing(2), +const PersPrefInfoWrapper = styled(Box)(({ theme }) => ({ + textAlign: 'center', [theme.breakpoints.up('sm')]: { - flexDirection: 'row', - gap: theme.spacing(4), - }, - [theme.breakpoints.up('md')]: { - justifyContent: 'space-evenly', - gap: theme.spacing(6), + position: 'relative', + textAlign: 'left', + paddingLeft: theme.spacing(14), }, })); -const StyledContactTop = styled(Box)(() => ({ - textAlign: 'center', +const StyledContactTop = styled(Box)(({ theme }) => ({ + marginBottom: theme.spacing(2), + [theme.breakpoints.up('sm')]: { + marginBottom: 0, + }, })); const StyledAvatar = styled(Avatar)(({ theme }) => ({ @@ -35,10 +31,16 @@ const StyledAvatar = styled(Avatar)(({ theme }) => ({ height: theme.spacing(12), marginLeft: 'auto', marginRight: 'auto', - marginBottom: theme.spacing(2), + marginBottom: theme.spacing(1), + [theme.breakpoints.up('sm')]: { + position: 'absolute', + top: 0, + left: 0, + }, })); const StyledContactEdit = styled(Button)(({ theme }) => ({ + marginTop: theme.spacing(2), [theme.breakpoints.up('sm')]: { position: 'absolute', bottom: 0, @@ -56,7 +58,7 @@ export const PersPrefInfo: React.FC = () => { }; return ( - + { - - - - - - + + + + } - disableRipple + variant="outlined" > {t('Edit')} {profileOpen ? ( setProfileOpen(false)} /> ) : null} - + ); }; From 2f439a0ece0fb6751d3b33af52acd571335f82c1 Mon Sep 17 00:00:00 2001 From: John Plastow II Date: Fri, 4 Nov 2022 12:01:09 -0700 Subject: [PATCH 060/103] Moving work info into main component --- .../personal/info/PersPrefInfo.tsx | 9 ++++++-- .../personal/info/PersPrefWork.tsx | 21 ------------------- 2 files changed, 7 insertions(+), 23 deletions(-) delete mode 100644 pages/accountLists/[accountListId]/preferences/personal/info/PersPrefWork.tsx diff --git a/pages/accountLists/[accountListId]/preferences/personal/info/PersPrefInfo.tsx b/pages/accountLists/[accountListId]/preferences/personal/info/PersPrefInfo.tsx index b8e0aebfd..4cdcadee7 100644 --- a/pages/accountLists/[accountListId]/preferences/personal/info/PersPrefInfo.tsx +++ b/pages/accountLists/[accountListId]/preferences/personal/info/PersPrefInfo.tsx @@ -5,7 +5,6 @@ import { styled } from '@mui/material/styles'; import { Edit } from '@mui/icons-material'; import { info } from '../DemoContent'; import { PersPrefModal } from '../modals/PersPrefModal'; -import { PersPrefWork } from './PersPrefWork'; import { PersPrefContactMethods } from './PersPrefContactMethods'; import { PersPrefAnniversary } from './PersPrefAnniversary'; import { PersPrefSocials } from './PersPrefSocials'; @@ -67,7 +66,13 @@ export const PersPrefInfo: React.FC = () => { {t(info.title)} {info.first_name} {info.last_name} {t(info.suffix)} - + {(info.occupation || info.employer) && ( + + {`${info.occupation} ${ + info.occupation && info.employer ? '-' : '' + } ${info.employer}`} + + )} diff --git a/pages/accountLists/[accountListId]/preferences/personal/info/PersPrefWork.tsx b/pages/accountLists/[accountListId]/preferences/personal/info/PersPrefWork.tsx deleted file mode 100644 index 04dceb6d9..000000000 --- a/pages/accountLists/[accountListId]/preferences/personal/info/PersPrefWork.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import React from 'react'; -import { Typography } from '@mui/material'; - -interface WorkProps { - employer: string; - occupation: string; -} - -export const PersPrefWork: React.FC = ({ employer, occupation }) => { - const separator = occupation && employer ? ' - ' : ''; - - if (occupation || employer) { - return ( - - {occupation} {separator} {employer} - - ); - } - - return null; -}; From 9cdc4c9bfe1ec2386530b9f93ce9c23e81bb3f1b Mon Sep 17 00:00:00 2001 From: John Plastow II Date: Fri, 4 Nov 2022 12:04:17 -0700 Subject: [PATCH 061/103] Adding comments --- .../preferences/personal/info/PersPrefInfo.tsx | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) diff --git a/pages/accountLists/[accountListId]/preferences/personal/info/PersPrefInfo.tsx b/pages/accountLists/[accountListId]/preferences/personal/info/PersPrefInfo.tsx index 4cdcadee7..876fa6489 100644 --- a/pages/accountLists/[accountListId]/preferences/personal/info/PersPrefInfo.tsx +++ b/pages/accountLists/[accountListId]/preferences/personal/info/PersPrefInfo.tsx @@ -59,13 +59,18 @@ export const PersPrefInfo: React.FC = () => { return ( + {/* Avatar */} + + {/* Name */} {t(info.title)} {info.first_name} {info.last_name} {t(info.suffix)} + + {/* Work */} {(info.occupation || info.employer) && ( {`${info.occupation} ${ @@ -74,20 +79,30 @@ export const PersPrefInfo: React.FC = () => { )} + + {/* Email */} + + {/* Phone */} + + {/* Anniversay */} + + {/* Social Media */} + + {/* Edit Info Button */} } @@ -95,6 +110,8 @@ export const PersPrefInfo: React.FC = () => { > {t('Edit')} + + {/* Edit Info Modal */} {profileOpen ? ( setProfileOpen(false)} /> ) : null} From a48a2a7adf7df377397a32560c6d5a64e91fc0c5 Mon Sep 17 00:00:00 2001 From: John Plastow II Date: Fri, 4 Nov 2022 12:23:29 -0700 Subject: [PATCH 062/103] Switching to Box from custom styled component --- .../personal/info/PersPrefInfo.tsx | 20 +++++++++---------- 1 file changed, 9 insertions(+), 11 deletions(-) diff --git a/pages/accountLists/[accountListId]/preferences/personal/info/PersPrefInfo.tsx b/pages/accountLists/[accountListId]/preferences/personal/info/PersPrefInfo.tsx index 876fa6489..ff76f2f0c 100644 --- a/pages/accountLists/[accountListId]/preferences/personal/info/PersPrefInfo.tsx +++ b/pages/accountLists/[accountListId]/preferences/personal/info/PersPrefInfo.tsx @@ -1,7 +1,7 @@ import React, { useState } from 'react'; import { useTranslation } from 'react-i18next'; -import { Avatar, Box, Button, Typography } from '@mui/material'; -import { styled } from '@mui/material/styles'; +import { Avatar, Box, Button, Typography, useMediaQuery } from '@mui/material'; +import { Theme, styled, useTheme } from '@mui/material/styles'; import { Edit } from '@mui/icons-material'; import { info } from '../DemoContent'; import { PersPrefModal } from '../modals/PersPrefModal'; @@ -18,13 +18,6 @@ const PersPrefInfoWrapper = styled(Box)(({ theme }) => ({ }, })); -const StyledContactTop = styled(Box)(({ theme }) => ({ - marginBottom: theme.spacing(2), - [theme.breakpoints.up('sm')]: { - marginBottom: 0, - }, -})); - const StyledAvatar = styled(Avatar)(({ theme }) => ({ width: theme.spacing(12), height: theme.spacing(12), @@ -50,6 +43,11 @@ const StyledContactEdit = styled(Button)(({ theme }) => ({ export const PersPrefInfo: React.FC = () => { const { t } = useTranslation(); + const theme = useTheme(); + const isMobile = useMediaQuery((theme: Theme) => + theme.breakpoints.down('sm'), + ); + const [profileOpen, setProfileOpen] = useState(false); const handleOpen = () => { @@ -58,7 +56,7 @@ export const PersPrefInfo: React.FC = () => { return ( - + {/* Avatar */} { } ${info.employer}`} )} - + {/* Email */} From 5a2e1d2286a1b44aa5025ebfbf4af326107f2f0a Mon Sep 17 00:00:00 2001 From: John Plastow II Date: Fri, 4 Nov 2022 14:10:28 -0700 Subject: [PATCH 063/103] Anniversary refactor --- .../personal/info/PersPrefAnniversary.tsx | 42 +++++++++++++------ .../personal/info/PersPrefSocials.tsx | 5 ++- 2 files changed, 33 insertions(+), 14 deletions(-) diff --git a/pages/accountLists/[accountListId]/preferences/personal/info/PersPrefAnniversary.tsx b/pages/accountLists/[accountListId]/preferences/personal/info/PersPrefAnniversary.tsx index e192176d8..6b7208b66 100644 --- a/pages/accountLists/[accountListId]/preferences/personal/info/PersPrefAnniversary.tsx +++ b/pages/accountLists/[accountListId]/preferences/personal/info/PersPrefAnniversary.tsx @@ -18,23 +18,41 @@ export const PersPrefAnniversary: React.FC = ({ }) => { const { t } = useTranslation(); const anniversary = Boolean( - anniversary_month && (anniversary_day || anniversary_year), + anniversary_month || anniversary_day || anniversary_year, ); - const months = Info.monthsFormat('short'); + // Status string + let statusOutput = marital_status + ? marital_status + : anniversary + ? t('Anniversary') + : ''; + statusOutput += anniversary ? ': ' : ''; + + // Anniversary string + let dateOutput = ''; + if (anniversary) { + // Month + dateOutput += anniversary_month + ? Info.monthsFormat('short')[anniversary_month] + ' ' + : ''; + + // Day + dateOutput += anniversary_day ? anniversary_day : ''; + + // Spacer before year + dateOutput += + anniversary_month && anniversary_day && anniversary_year ? ', ' : ' '; + + // Year + dateOutput += anniversary_year ? anniversary_year : ''; + } if (marital_status || anniversary) { return ( - - {marital_status ? marital_status : anniversary ? t('Anniversary') : ''} - {anniversary && ( - <> - {`: ${months[anniversary_month]}.`} - {anniversary_day ? ` ${anniversary_day}` : ''} - {anniversary_day && anniversary_year ? `, ${anniversary_year}` : ''} - {!anniversary_day && anniversary_year ? ` ${anniversary_year}` : ''} - - )} + + {statusOutput} + {dateOutput} ); } diff --git a/pages/accountLists/[accountListId]/preferences/personal/info/PersPrefSocials.tsx b/pages/accountLists/[accountListId]/preferences/personal/info/PersPrefSocials.tsx index 8d7271c97..3e102c636 100644 --- a/pages/accountLists/[accountListId]/preferences/personal/info/PersPrefSocials.tsx +++ b/pages/accountLists/[accountListId]/preferences/personal/info/PersPrefSocials.tsx @@ -3,9 +3,10 @@ import { IconButton, List, ListItem } from '@mui/material'; import { styled } from '@mui/material/styles'; import { Facebook, Language, LinkedIn, Twitter } from '@mui/icons-material'; -const StyledList = styled(List)({ +const StyledList = styled(List)(({ theme }) => ({ fontSize: '0', -}); + marginTop: theme.spacing(1), +})); const StyledListItem = styled(ListItem)(({ theme }) => ({ display: 'inline-block', From 4a8f5c262804216786ce5c9d61be4dd713291328 Mon Sep 17 00:00:00 2001 From: John Plastow II Date: Fri, 4 Nov 2022 15:24:37 -0700 Subject: [PATCH 064/103] Refactoring phone/email accordions --- .../personal/info/PersPrefContactMethods.tsx | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/pages/accountLists/[accountListId]/preferences/personal/info/PersPrefContactMethods.tsx b/pages/accountLists/[accountListId]/preferences/personal/info/PersPrefContactMethods.tsx index 6308c629d..6e3317ce7 100644 --- a/pages/accountLists/[accountListId]/preferences/personal/info/PersPrefContactMethods.tsx +++ b/pages/accountLists/[accountListId]/preferences/personal/info/PersPrefContactMethods.tsx @@ -12,7 +12,6 @@ import { ExpandMore } from '@mui/icons-material'; import { accordionShared } from '../shared/PersPrefShared'; const StyledAccordion = styled(Accordion)({ - backgroundColor: 'transparent', boxShadow: 'none', '&.Mui-expanded': { margin: 0, @@ -24,19 +23,20 @@ const StyledAccordionSummary = styled(AccordionSummary)({ display: 'inline-block', padding: 0, minHeight: 'unset', + paddingRight: 24, + position: 'relative', '& .MuiAccordionSummary-content': { - display: 'inline-block', + flexGrow: 'unset', margin: 0, }, - '& .MuiAccordionSummary-expandIcon': { - padding: 0, - position: 'relative', - top: '-3px', + '& .MuiAccordionSummary-expandIconWrapper': { + position: 'absolute', + top: 0, + right: 0, }, }); const StyledAccordionDetails = styled(AccordionDetails)({ - display: 'block', padding: 0, }); @@ -63,7 +63,7 @@ const PersPrefContactMethod: React.FC = ({ const value = method.value; return ( - + {value}{' '} - {t(method.type)} From f7fd143fde5a89a0d4682afa448ac6d582fb8102 Mon Sep 17 00:00:00 2001 From: John Plastow II Date: Fri, 4 Nov 2022 16:56:36 -0700 Subject: [PATCH 065/103] Refactoring social media links --- .../personal/info/PersPrefSocials.tsx | 121 +++++++----------- 1 file changed, 45 insertions(+), 76 deletions(-) diff --git a/pages/accountLists/[accountListId]/preferences/personal/info/PersPrefSocials.tsx b/pages/accountLists/[accountListId]/preferences/personal/info/PersPrefSocials.tsx index 3e102c636..6678a76eb 100644 --- a/pages/accountLists/[accountListId]/preferences/personal/info/PersPrefSocials.tsx +++ b/pages/accountLists/[accountListId]/preferences/personal/info/PersPrefSocials.tsx @@ -1,78 +1,30 @@ -import React from 'react'; -import { IconButton, List, ListItem } from '@mui/material'; -import { styled } from '@mui/material/styles'; +import React, { ReactNode } from 'react'; +import { Box, IconButton, useMediaQuery } from '@mui/material'; +import { Theme } from '@mui/material/styles'; import { Facebook, Language, LinkedIn, Twitter } from '@mui/icons-material'; -const StyledList = styled(List)(({ theme }) => ({ - fontSize: '0', - marginTop: theme.spacing(1), -})); - -const StyledListItem = styled(ListItem)(({ theme }) => ({ - display: 'inline-block', - width: 'auto', - marginRight: theme.spacing(1), - padding: '0', - '&:last-child': { - marginRight: '0', - }, - '&:hover': { - backgroundColor: 'transparent', - }, -})); - -const StyledSocialButton = styled(IconButton)(({ theme }) => ({ - padding: 0, - color: theme.palette.primary.main, - '&:hover': { - backgroundColor: 'transparent', - }, -})) as typeof IconButton; - -const profileTypes = { - facebook: { - link: 'https://www.facebook.com/', - icon: , - }, - twitter: { - link: 'https://www.twitter.com/', - icon: , - }, - linkedin: { - link: '', - icon: , - }, - websites: { - link: '', - icon: , - }, -}; - -interface ListItemProps { +interface SocialProps { accounts: string[]; - type: keyof typeof profileTypes; + icon: ReactNode; + url?: string; } -const ListItemLinks: React.FC = ({ accounts, type }) => { - const { link, icon } = profileTypes[type]; - - return ( - <> - {accounts.map((account) => ( - - - {icon} - - - ))} - - ); -}; +const SocialLinks: React.FC = ({ accounts, icon, url = '' }) => ( + <> + {accounts.map((account) => ( + + {icon} + + ))} + +); interface SocialMediaProps { facebook_accounts: string[]; @@ -87,12 +39,29 @@ export const PersPrefSocials: React.FC = ({ linkedin_accounts, websites, }) => { + const isMobile = useMediaQuery((theme: Theme) => + theme.breakpoints.only('xs'), + ); + return ( - - - - - - + + } + url="https://www.facebook.com/" + /> + } + url="https://www.twitter.com/" + /> + } /> + } /> + ); }; From 68af82f0f16e418f101ba188ed73e43eb6f11fc3 Mon Sep 17 00:00:00 2001 From: John Plastow II Date: Tue, 8 Nov 2022 12:01:03 -0800 Subject: [PATCH 066/103] Fixing margin on expanded accordions --- .../preferences/personal/info/PersPrefContactMethods.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/pages/accountLists/[accountListId]/preferences/personal/info/PersPrefContactMethods.tsx b/pages/accountLists/[accountListId]/preferences/personal/info/PersPrefContactMethods.tsx index 6e3317ce7..e5104ada3 100644 --- a/pages/accountLists/[accountListId]/preferences/personal/info/PersPrefContactMethods.tsx +++ b/pages/accountLists/[accountListId]/preferences/personal/info/PersPrefContactMethods.tsx @@ -27,7 +27,7 @@ const StyledAccordionSummary = styled(AccordionSummary)({ position: 'relative', '& .MuiAccordionSummary-content': { flexGrow: 'unset', - margin: 0, + margin: '0 !important', }, '& .MuiAccordionSummary-expandIconWrapper': { position: 'absolute', From f9b1be98e84e701d4a941abf8274afadc1c964bb Mon Sep 17 00:00:00 2001 From: John Plastow II Date: Wed, 9 Nov 2022 10:48:28 -0800 Subject: [PATCH 067/103] Refactoring accordions --- .../preferences/personal.page.tsx | 7 +--- .../personal/accordions/PersPrefGroup.tsx | 11 ++----- .../personal/accordions/PersPrefItem.tsx | 32 +++++++++---------- 3 files changed, 19 insertions(+), 31 deletions(-) diff --git a/pages/accountLists/[accountListId]/preferences/personal.page.tsx b/pages/accountLists/[accountListId]/preferences/personal.page.tsx index 25e7ecd2d..8bd0193a3 100644 --- a/pages/accountLists/[accountListId]/preferences/personal.page.tsx +++ b/pages/accountLists/[accountListId]/preferences/personal.page.tsx @@ -1,11 +1,6 @@ import React, { useState } from 'react'; import { useTranslation } from 'react-i18next'; -import { - Box, - Checkbox, - FormControlLabel, - MenuItem, -} from '@mui/material'; +import { Box, Checkbox, FormControlLabel, MenuItem } from '@mui/material'; import { styled } from '@mui/material/styles'; import { PreferencesWrapper } from './wrapper'; import { PersPrefInfo } from './personal/info/PersPrefInfo'; diff --git a/pages/accountLists/[accountListId]/preferences/personal/accordions/PersPrefGroup.tsx b/pages/accountLists/[accountListId]/preferences/personal/accordions/PersPrefGroup.tsx index 0bac2220e..a4090eb4c 100644 --- a/pages/accountLists/[accountListId]/preferences/personal/accordions/PersPrefGroup.tsx +++ b/pages/accountLists/[accountListId]/preferences/personal/accordions/PersPrefGroup.tsx @@ -1,11 +1,6 @@ import { Box, Typography } from '@mui/material'; -import { styled } from '@mui/material/styles'; import React from 'react'; -const StyledGroupWrapper = styled(Box)(({ theme }) => ({ - marginTop: theme.spacing(3), -})); - interface PersPrefGroupProps { title: string; children?: React.ReactNode; @@ -16,11 +11,11 @@ export const PersPrefGroup: React.FC = ({ children, }) => { return ( - - + + {title} {children} - + ); }; diff --git a/pages/accountLists/[accountListId]/preferences/personal/accordions/PersPrefItem.tsx b/pages/accountLists/[accountListId]/preferences/personal/accordions/PersPrefItem.tsx index f9049a1a2..ec7ce17ae 100644 --- a/pages/accountLists/[accountListId]/preferences/personal/accordions/PersPrefItem.tsx +++ b/pages/accountLists/[accountListId]/preferences/personal/accordions/PersPrefItem.tsx @@ -10,47 +10,44 @@ import { ExpandMore } from '@mui/icons-material'; import React from 'react'; import { accordionShared } from '../shared/PersPrefShared'; -const StyledAccordion = styled(Accordion)(({ theme }) => ({ - marginTop: theme.spacing(1), - '& .MuiAccordionSummary-content.Mui-expanded': { - margin: '12px 0', - }, +const StyledAccordion = styled(Accordion)(() => ({ + overflow: 'hidden', ...accordionShared, })); const StyledAccordionSummary = styled(AccordionSummary)(({ theme }) => ({ + '&.Mui-expanded': { + backgroundColor: theme.palette.mpdxYellow.main, + }, '& .MuiAccordionSummary-content': { - alignItems: 'center', - [theme.breakpoints.down('xs')]: { - flexWrap: 'wrap', + [theme.breakpoints.only('xs')]: { + flexDirection: 'column', }, }, })); const StyledAccordionColumn = styled(Box)(({ theme }) => ({ paddingRight: theme.spacing(2), - boxSizing: 'border-box', flexBasis: '100%', - [theme.breakpoints.down('xs')]: { + [theme.breakpoints.only('xs')]: { '&:nth-child(2)': { fontStyle: 'italic', }, }, - [theme.breakpoints.up('sm')]: { + [theme.breakpoints.up('md')]: { '&:first-child:not(:last-child)': { - width: '33.33%', + flexBasis: '33.33%', }, '&:nth-child(2)': { - width: '66.66%', + flexBasis: '66.66%', }, }, })); const StyledAccordionDetails = styled(Box)(({ theme }) => ({ - flexGrow: 1, - [theme.breakpoints.up('sm')]: { - width: 'calc((100% - 36px) * 0.6666)', - marginLeft: 'calc((100% - 36px) * 0.3333)', + [theme.breakpoints.up('md')]: { + flexBasis: 'calc((100% - 36px) * 0.661)', + marginLeft: 'calc((100% - 36px) * 0.338)', }, })); @@ -73,6 +70,7 @@ export const PersPrefItem: React.FC = ({ onAccordionChange(label)} expanded={expandedPanel === label} + disableGutters > }> From 3fb7a032f73d9e1b663e69347eaa20ba8ec9c84e Mon Sep 17 00:00:00 2001 From: John Plastow II Date: Wed, 9 Nov 2022 16:14:01 -0800 Subject: [PATCH 068/103] Cleaning up PersPrefFormWrapper --- .../preferences/personal.page.tsx | 2 +- .../personal/forms/PersPrefFormWrapper.tsx | 30 +++++++++++++ .../personal/shared/PersPrefForms.tsx | 43 ++----------------- 3 files changed, 35 insertions(+), 40 deletions(-) create mode 100644 pages/accountLists/[accountListId]/preferences/personal/forms/PersPrefFormWrapper.tsx diff --git a/pages/accountLists/[accountListId]/preferences/personal.page.tsx b/pages/accountLists/[accountListId]/preferences/personal.page.tsx index 8bd0193a3..762d49c8d 100644 --- a/pages/accountLists/[accountListId]/preferences/personal.page.tsx +++ b/pages/accountLists/[accountListId]/preferences/personal.page.tsx @@ -6,9 +6,9 @@ import { PreferencesWrapper } from './wrapper'; import { PersPrefInfo } from './personal/info/PersPrefInfo'; import { PersPrefGroup } from './personal/accordions/PersPrefGroup'; import { PersPrefItem } from './personal/accordions/PersPrefItem'; +import { PersPrefFormWrapper } from './personal/forms/PersPrefFormWrapper'; import { PersPrefFieldWrapper, - PersPrefFormWrapper, StyledOutlinedInput, StyledSelect, } from './personal/shared/PersPrefForms'; diff --git a/pages/accountLists/[accountListId]/preferences/personal/forms/PersPrefFormWrapper.tsx b/pages/accountLists/[accountListId]/preferences/personal/forms/PersPrefFormWrapper.tsx new file mode 100644 index 000000000..1647ed9f0 --- /dev/null +++ b/pages/accountLists/[accountListId]/preferences/personal/forms/PersPrefFormWrapper.tsx @@ -0,0 +1,30 @@ +import React from 'react'; +import { useTranslation } from 'react-i18next'; +import { Button } from '@mui/material'; +import { useTheme } from '@mui/material/styles'; + +interface PersPrefFormWrapperProps { + formAttrs?: { action?: string; method?: string }; + children: React.ReactNode; +} + +export const PersPrefFormWrapper: React.FC = ({ + formAttrs = {}, + children, +}) => { + const { t } = useTranslation(); + const theme = useTheme(); + + return ( +
+ {children} + +
+ ); +}; diff --git a/pages/accountLists/[accountListId]/preferences/personal/shared/PersPrefForms.tsx b/pages/accountLists/[accountListId]/preferences/personal/shared/PersPrefForms.tsx index 4ee880d36..a5ce526ef 100644 --- a/pages/accountLists/[accountListId]/preferences/personal/shared/PersPrefForms.tsx +++ b/pages/accountLists/[accountListId]/preferences/personal/shared/PersPrefForms.tsx @@ -1,8 +1,6 @@ import React, { ReactElement, useState } from 'react'; import { useTranslation } from 'react-i18next'; import { - Button, - ButtonProps, Checkbox, FormControl, FormControlLabel, @@ -131,7 +129,10 @@ export const PersPrefField: React.FC = ({ {/* Select field */} {type === 'select' && options.length > 0 && ( - setSelectValueState(e.target.value as string)}> + setSelectValueState(e.target.value as string)} + > {options.map(([optionVal, optionLabel], index) => { return ( @@ -178,42 +179,6 @@ export const PersPrefField: React.FC = ({ ); }; -const StyledButton = styled(Button)(({ theme }) => ({ - marginTop: theme.spacing(2), -})); - -interface PersPrefFormWrapperProps { - formAttrs?: { action?: string; method?: string }; - formButtonText?: string; - formButtonColor?: ButtonProps['color']; - formButtonVariant?: ButtonProps['variant']; - children?: React.ReactNode; -} - -export const PersPrefFormWrapper: React.FC = ({ - formAttrs = {}, - formButtonText = 'Save', - formButtonColor = 'primary', - formButtonVariant = 'contained', - children, -}) => { - const { t } = useTranslation(); - - return ( -
- {children} - - {t(formButtonText)} - -
- ); -}; - interface PersPrefFieldWrapperProps { labelText?: string; helperText?: string; From ac794504d4a61a66eec8611ad09e7fbd769774dd Mon Sep 17 00:00:00 2001 From: John Plastow II Date: Thu, 10 Nov 2022 17:38:44 -0800 Subject: [PATCH 069/103] Converting name fields to This eliminates the use of . The require prop doesn't currently work. Swapped for --- .../personal/modals/PersPrefModalName.tsx | 43 +++++++++++-------- .../personal/shared/PersPrefForms.tsx | 1 + 2 files changed, 26 insertions(+), 18 deletions(-) diff --git a/pages/accountLists/[accountListId]/preferences/personal/modals/PersPrefModalName.tsx b/pages/accountLists/[accountListId]/preferences/personal/modals/PersPrefModalName.tsx index 19bd45916..6b1650508 100644 --- a/pages/accountLists/[accountListId]/preferences/personal/modals/PersPrefModalName.tsx +++ b/pages/accountLists/[accountListId]/preferences/personal/modals/PersPrefModalName.tsx @@ -1,8 +1,8 @@ import React from 'react'; import { useTranslation } from 'react-i18next'; -import { Grid } from '@mui/material'; +import { OutlinedInput, Unstable_Grid2 as Grid } from '@mui/material'; import { styled } from '@mui/material/styles'; -import { PersPrefField } from '../shared/PersPrefForms'; +import { PersPrefFieldWrapper } from '../shared/PersPrefForms'; import { info } from '../DemoContent'; const StyledGridItem = styled(Grid)(({ theme }) => ({ @@ -22,25 +22,32 @@ export const PersPrefModalName: React.FC = () => { return ( - - + {/* Title */} + + + + - - + + {/* First name */} + + + + - - + + {/* Last name */} + + + + - - + + {/* Suffix */} + + + + ); diff --git a/pages/accountLists/[accountListId]/preferences/personal/shared/PersPrefForms.tsx b/pages/accountLists/[accountListId]/preferences/personal/shared/PersPrefForms.tsx index a5ce526ef..c0fd0f3fd 100644 --- a/pages/accountLists/[accountListId]/preferences/personal/shared/PersPrefForms.tsx +++ b/pages/accountLists/[accountListId]/preferences/personal/shared/PersPrefForms.tsx @@ -27,6 +27,7 @@ import { const StyledFormLabel = styled(FormLabel)(({ theme }) => ({ color: theme.palette.text.primary, fontWeight: 700, + marginBottom: theme.spacing(1), '& .MuiFormControlLabel-label': { fontWeight: '700', }, From 4335382ba1dbcf16fd59e2a2f11c9aec923cedb5 Mon Sep 17 00:00:00 2001 From: John Plastow II Date: Fri, 11 Nov 2022 10:21:06 -0800 Subject: [PATCH 070/103] Getting rid of unnecessary styled components --- .../personal/modals/PersPrefModalName.tsx | 33 ++++++------------- 1 file changed, 10 insertions(+), 23 deletions(-) diff --git a/pages/accountLists/[accountListId]/preferences/personal/modals/PersPrefModalName.tsx b/pages/accountLists/[accountListId]/preferences/personal/modals/PersPrefModalName.tsx index 6b1650508..a2304611c 100644 --- a/pages/accountLists/[accountListId]/preferences/personal/modals/PersPrefModalName.tsx +++ b/pages/accountLists/[accountListId]/preferences/personal/modals/PersPrefModalName.tsx @@ -1,54 +1,41 @@ import React from 'react'; import { useTranslation } from 'react-i18next'; import { OutlinedInput, Unstable_Grid2 as Grid } from '@mui/material'; -import { styled } from '@mui/material/styles'; import { PersPrefFieldWrapper } from '../shared/PersPrefForms'; import { info } from '../DemoContent'; -const StyledGridItem = styled(Grid)(({ theme }) => ({ - [theme.breakpoints.down('xs')]: { - '&:not(:last-child) .MuiFormControl-root': { - marginBottom: 0, - }, - }, -})); - -const StyledGrid = styled(Grid)(({ theme }) => ({ - marginBottom: theme.spacing(2), -})); - export const PersPrefModalName: React.FC = () => { const { t } = useTranslation(); return ( - + {/* Title */} - + - + {/* First name */} - + - + {/* Last name */} - + - + {/* Suffix */} - + - - + + ); }; From 5d21890aefacf9fe7ff03295f7a475efab94b332 Mon Sep 17 00:00:00 2001 From: John Plastow II Date: Fri, 11 Nov 2022 14:08:44 -0800 Subject: [PATCH 071/103] New form wrapper and input/select fields --- .../personal/forms/PersPrefFieldWrapper.tsx | 63 +++++++++++++++++++ .../personal/forms/PersPrefInput.tsx | 53 ++++++++++++++++ .../personal/forms/PersPrefSelect.tsx | 37 +++++++++++ 3 files changed, 153 insertions(+) create mode 100644 pages/accountLists/[accountListId]/preferences/personal/forms/PersPrefFieldWrapper.tsx create mode 100644 pages/accountLists/[accountListId]/preferences/personal/forms/PersPrefInput.tsx create mode 100644 pages/accountLists/[accountListId]/preferences/personal/forms/PersPrefSelect.tsx diff --git a/pages/accountLists/[accountListId]/preferences/personal/forms/PersPrefFieldWrapper.tsx b/pages/accountLists/[accountListId]/preferences/personal/forms/PersPrefFieldWrapper.tsx new file mode 100644 index 000000000..d0168804a --- /dev/null +++ b/pages/accountLists/[accountListId]/preferences/personal/forms/PersPrefFieldWrapper.tsx @@ -0,0 +1,63 @@ +import React from 'react'; +import { + FormControl, + FormControlProps, + FormHelperText, + FormHelperTextProps, + FormLabel, + FormLabelProps, +} from '@mui/material'; + +interface PersPrefFieldWrapperProps { + children?: FormControlProps['children']; + disabled?: FormControlProps['disabled']; + error?: FormControlProps['error']; + fullWidth?: FormControlProps['fullWidth']; + helperPosition?: 'top' | 'bottom'; + helperText?: FormHelperTextProps['children']; + label?: FormLabelProps['children']; + required?: FormControlProps['required']; +} + +export const PersPrefFieldWrapper: React.FC = ({ + children, + disabled = false, + error = false, + fullWidth = true, + helperPosition = 'top', + helperText = '', + label = '', + required = false, +}) => { + const HelperText = () => {helperText}; + + return ( + + {/* Label */} + {label && ( + + {label} + + )} + + {/* Helper text - top */} + {helperText && helperPosition === 'top' && } + + {children} + + {/* Helper text - bottom */} + {helperText && helperPosition === 'bottom' && } + + ); +}; diff --git a/pages/accountLists/[accountListId]/preferences/personal/forms/PersPrefInput.tsx b/pages/accountLists/[accountListId]/preferences/personal/forms/PersPrefInput.tsx new file mode 100644 index 000000000..c25cd1fef --- /dev/null +++ b/pages/accountLists/[accountListId]/preferences/personal/forms/PersPrefInput.tsx @@ -0,0 +1,53 @@ +import React from 'react'; +import { TextField, TextFieldProps } from '@mui/material'; + +export interface PersPrefInputProps { + children?: TextFieldProps['children']; + disabled?: TextFieldProps['disabled']; + error?: TextFieldProps['error']; + fullWidth?: TextFieldProps['fullWidth']; + helperText?: TextFieldProps['helperText']; + label?: TextFieldProps['label']; + required?: TextFieldProps['required']; + select?: TextFieldProps['select']; + value?: TextFieldProps['value']; +} + +export const PersPrefInput: React.FC = ({ + children, + disabled = false, + error = false, + fullWidth = true, + helperText = '', + label = '', + required = false, + select = false, + value = '', +}) => { + return ( + + {children} + + ); +}; diff --git a/pages/accountLists/[accountListId]/preferences/personal/forms/PersPrefSelect.tsx b/pages/accountLists/[accountListId]/preferences/personal/forms/PersPrefSelect.tsx new file mode 100644 index 000000000..31b011170 --- /dev/null +++ b/pages/accountLists/[accountListId]/preferences/personal/forms/PersPrefSelect.tsx @@ -0,0 +1,37 @@ +import React from 'react'; +import { MenuItem } from '@mui/material'; +import { PersPrefInput, PersPrefInputProps } from './PersPrefInput'; + +interface PersPrefSelectProps extends PersPrefInputProps { + selectOptions: Array<{ label: string; value: string }>; +} + +export const PersPrefSelect: React.FC = ({ + disabled = false, + error = false, + fullWidth = true, + helperText = '', + label = '', + required = false, + value = '', + selectOptions = [], +}) => { + return ( + + {selectOptions.map((option) => ( + + {option.label} + + ))} + + ); +}; From 11b84126aaaf771b9c96cb107e5c55addbc3ab60 Mon Sep 17 00:00:00 2001 From: John Plastow II Date: Fri, 11 Nov 2022 14:15:00 -0800 Subject: [PATCH 072/103] Using new PersPrefInput for name fields --- .../personal/modals/PersPrefModalName.tsx | 24 ++++++++----------- 1 file changed, 10 insertions(+), 14 deletions(-) diff --git a/pages/accountLists/[accountListId]/preferences/personal/modals/PersPrefModalName.tsx b/pages/accountLists/[accountListId]/preferences/personal/modals/PersPrefModalName.tsx index a2304611c..bcc5c0ddd 100644 --- a/pages/accountLists/[accountListId]/preferences/personal/modals/PersPrefModalName.tsx +++ b/pages/accountLists/[accountListId]/preferences/personal/modals/PersPrefModalName.tsx @@ -1,7 +1,7 @@ import React from 'react'; import { useTranslation } from 'react-i18next'; -import { OutlinedInput, Unstable_Grid2 as Grid } from '@mui/material'; -import { PersPrefFieldWrapper } from '../shared/PersPrefForms'; +import { Unstable_Grid2 as Grid } from '@mui/material'; +import { PersPrefInput } from '../forms/PersPrefInput'; import { info } from '../DemoContent'; export const PersPrefModalName: React.FC = () => { @@ -11,30 +11,26 @@ export const PersPrefModalName: React.FC = () => { {/* Title */} - - - + {/* First name */} - - - + {/* Last name */} - - - + {/* Suffix */} - - - + ); From 2edbb04ad3093a1a6b14c4bf323503a76d6d0379 Mon Sep 17 00:00:00 2001 From: John Plastow II Date: Fri, 11 Nov 2022 14:40:11 -0800 Subject: [PATCH 073/103] First test at using new PersPrefSelect component --- .../[accountListId]/preferences/personal.page.tsx | 11 ++++++++++- .../preferences/personal/DemoContent.tsx | 8 ++++++++ 2 files changed, 18 insertions(+), 1 deletion(-) diff --git a/pages/accountLists/[accountListId]/preferences/personal.page.tsx b/pages/accountLists/[accountListId]/preferences/personal.page.tsx index 762d49c8d..c7a5d2d50 100644 --- a/pages/accountLists/[accountListId]/preferences/personal.page.tsx +++ b/pages/accountLists/[accountListId]/preferences/personal.page.tsx @@ -7,12 +7,13 @@ import { PersPrefInfo } from './personal/info/PersPrefInfo'; import { PersPrefGroup } from './personal/accordions/PersPrefGroup'; import { PersPrefItem } from './personal/accordions/PersPrefItem'; import { PersPrefFormWrapper } from './personal/forms/PersPrefFormWrapper'; +import { PersPrefSelect } from './personal/forms/PersPrefSelect'; import { PersPrefFieldWrapper, StyledOutlinedInput, StyledSelect, } from './personal/shared/PersPrefForms'; -import { language, locale, options } from './personal/DemoContent'; +import { language, locale, options, options2 } from './personal/DemoContent'; const StyledColumnsWrapper = styled(Box)(({ theme }) => ({ marginBottom: theme.spacing(2), @@ -62,6 +63,14 @@ const PersonalPreferences: React.FC = () => { ))} + diff --git a/pages/accountLists/[accountListId]/preferences/personal/DemoContent.tsx b/pages/accountLists/[accountListId]/preferences/personal/DemoContent.tsx index a9b637821..c5a312030 100644 --- a/pages/accountLists/[accountListId]/preferences/personal/DemoContent.tsx +++ b/pages/accountLists/[accountListId]/preferences/personal/DemoContent.tsx @@ -163,3 +163,11 @@ export const options = [ ['opt4', 'Option 4'], ['opt5', 'Option 5'], ]; + +export const options2 = [ + { label: 'Option 1', value: 'opt1' }, + { label: 'Option 2', value: 'opt2' }, + { label: 'Option 3', value: 'opt3' }, + { label: 'Option 4', value: 'opt4' }, + { label: 'Option 5', value: 'opt5' }, +]; From f7c3dab0ee2767151f01b93ab3087fc3fee27c1f Mon Sep 17 00:00:00 2001 From: Caleb Alldrin Date: Wed, 21 Jun 2023 14:38:34 -0700 Subject: [PATCH 074/103] fix column formatting and update demo content data --- .../preferences/personal.page.tsx | 56 +++++++++++-------- .../preferences/personal/DemoContent.tsx | 5 +- .../personal/accordions/PersPrefItem.tsx | 2 +- .../personal/info/PersPrefInfo.tsx | 37 ++++++------ 4 files changed, 57 insertions(+), 43 deletions(-) diff --git a/pages/accountLists/[accountListId]/preferences/personal.page.tsx b/pages/accountLists/[accountListId]/preferences/personal.page.tsx index c7a5d2d50..f078afb40 100644 --- a/pages/accountLists/[accountListId]/preferences/personal.page.tsx +++ b/pages/accountLists/[accountListId]/preferences/personal.page.tsx @@ -1,7 +1,15 @@ import React, { useState } from 'react'; import { useTranslation } from 'react-i18next'; -import { Box, Checkbox, FormControlLabel, MenuItem } from '@mui/material'; -import { styled } from '@mui/material/styles'; +import { + //Box, + Checkbox, + FormControlLabel, + MenuItem, + Grid, + //TextField, + //InputAdornment, +} from '@mui/material'; +//import { styled } from '@mui/material/styles'; import { PreferencesWrapper } from './wrapper'; import { PersPrefInfo } from './personal/info/PersPrefInfo'; import { PersPrefGroup } from './personal/accordions/PersPrefGroup'; @@ -13,21 +21,19 @@ import { StyledOutlinedInput, StyledSelect, } from './personal/shared/PersPrefForms'; -import { language, locale, options, options2 } from './personal/DemoContent'; +import { + language, + options, + localeOptions, + options2, +} from './personal/DemoContent'; -const StyledColumnsWrapper = styled(Box)(({ theme }) => ({ - marginBottom: theme.spacing(2), - '& .MuiFormControl-root': { - width: `calc(50% - ${theme.spacing(1)}px)`, - '&:nth-child(2n)': { - marginLeft: theme.spacing(2), - }, - }, -})); +//import { useLocale } from 'src/hooks/useLocale'; const PersonalPreferences: React.FC = () => { const { t } = useTranslation(); const [expandedPanel, setExpandedPanel] = useState(''); + //const locale = useLocale(); const handleAccordionChange = (panel: string) => { setExpandedPanel(expandedPanel === panel ? '' : panel); @@ -85,11 +91,11 @@ const PersonalPreferences: React.FC = () => { - {locale.map(([localeCode, localeName], index) => ( + {localeOptions.map(([localeCode, localeName], index) => ( {t(localeName)} @@ -289,14 +295,20 @@ const PersonalPreferences: React.FC = () => { value="" > - - - - - - - - + {/* */} + + + + + + + + + + + + + {/* */} ({ diff --git a/pages/accountLists/[accountListId]/preferences/personal/info/PersPrefInfo.tsx b/pages/accountLists/[accountListId]/preferences/personal/info/PersPrefInfo.tsx index ff76f2f0c..8c41ecae9 100644 --- a/pages/accountLists/[accountListId]/preferences/personal/info/PersPrefInfo.tsx +++ b/pages/accountLists/[accountListId]/preferences/personal/info/PersPrefInfo.tsx @@ -3,7 +3,7 @@ import { useTranslation } from 'react-i18next'; import { Avatar, Box, Button, Typography, useMediaQuery } from '@mui/material'; import { Theme, styled, useTheme } from '@mui/material/styles'; import { Edit } from '@mui/icons-material'; -import { info } from '../DemoContent'; +import { profile } from '../DemoContent'; import { PersPrefModal } from '../modals/PersPrefModal'; import { PersPrefContactMethods } from './PersPrefContactMethods'; import { PersPrefAnniversary } from './PersPrefAnniversary'; @@ -59,45 +59,46 @@ export const PersPrefInfo: React.FC = () => { {/* Avatar */} {/* Name */} - {t(info.title)} {info.first_name} {info.last_name} {t(info.suffix)} + {t(profile.title)} {profile.first_name} {profile.last_name}{' '} + {t(profile.suffix)} {/* Work */} - {(info.occupation || info.employer) && ( + {(profile.occupation || profile.employer) && ( - {`${info.occupation} ${ - info.occupation && info.employer ? '-' : '' - } ${info.employer}`} + {`${profile.occupation} ${ + profile.occupation && profile.employer ? '-' : '' + } ${profile.employer}`} )} {/* Email */} - + {/* Phone */} - + {/* Anniversay */} {/* Social Media */} {/* Edit Info Button */} From 05461e811cf5c5487151d05e6d843f24cc1580fc Mon Sep 17 00:00:00 2001 From: Caleb Alldrin Date: Wed, 21 Jun 2023 15:08:30 -0700 Subject: [PATCH 075/103] Rename Preferences to Settings and Personal to Preferences. Re-organize components. --- .../preferences.page.tsx} | 24 +++++++++---------- .../{preferences => settings}/wrapper.tsx | 18 +++++++------- .../TopBar/Items/ProfileMenu/ProfileMenu.tsx | 2 +- .../Settings/preferences}/DemoContent.tsx | 0 .../accordions/PreferencesGroup.tsx | 0 .../accordions/PreferencesItem.tsx | 2 +- .../forms/PreferencesFieldWrapper.tsx | 0 .../forms/PreferencesFormWrapper.tsx | 0 .../preferences/forms/PreferencesInput.tsx | 0 .../preferences/forms/PreferencesSelect.tsx | 2 +- .../info/PreferencesAnniversary.tsx | 0 .../info/PreferencesContactMethods.tsx | 2 +- .../preferences/info/PreferencesInfo.tsx | 8 +++---- .../preferences/info/PreferencesSocials.tsx | 0 .../preferences/modals/PreferencesModal.tsx | 16 ++++++------- .../modals/PreferencesModalContactInfo.tsx | 4 ++-- .../modals/PreferencesModalDetails.tsx | 4 ++-- .../modals/PreferencesModalName.tsx | 2 +- .../modals/PreferencesModalRelationships.tsx | 16 ++++--------- .../modals/PreferencesModalShared.tsx | 0 .../modals/PreferencesModalSocial.tsx | 4 ++-- .../preferences/shared/PreferencesForms.tsx | 0 .../preferences/shared/PreferencesShared.tsx | 0 23 files changed, 49 insertions(+), 55 deletions(-) rename pages/accountLists/[accountListId]/{preferences/personal.page.tsx => settings/preferences.page.tsx} (92%) rename pages/accountLists/[accountListId]/{preferences => settings}/wrapper.tsx (67%) rename {pages/accountLists/[accountListId]/preferences/personal => src/components/Settings/preferences}/DemoContent.tsx (100%) rename pages/accountLists/[accountListId]/preferences/personal/accordions/PersPrefGroup.tsx => src/components/Settings/preferences/accordions/PreferencesGroup.tsx (100%) rename pages/accountLists/[accountListId]/preferences/personal/accordions/PersPrefItem.tsx => src/components/Settings/preferences/accordions/PreferencesItem.tsx (97%) rename pages/accountLists/[accountListId]/preferences/personal/forms/PersPrefFieldWrapper.tsx => src/components/Settings/preferences/forms/PreferencesFieldWrapper.tsx (100%) rename pages/accountLists/[accountListId]/preferences/personal/forms/PersPrefFormWrapper.tsx => src/components/Settings/preferences/forms/PreferencesFormWrapper.tsx (100%) rename pages/accountLists/[accountListId]/preferences/personal/forms/PersPrefInput.tsx => src/components/Settings/preferences/forms/PreferencesInput.tsx (100%) rename pages/accountLists/[accountListId]/preferences/personal/forms/PersPrefSelect.tsx => src/components/Settings/preferences/forms/PreferencesSelect.tsx (91%) rename pages/accountLists/[accountListId]/preferences/personal/info/PersPrefAnniversary.tsx => src/components/Settings/preferences/info/PreferencesAnniversary.tsx (100%) rename pages/accountLists/[accountListId]/preferences/personal/info/PersPrefContactMethods.tsx => src/components/Settings/preferences/info/PreferencesContactMethods.tsx (97%) rename pages/accountLists/[accountListId]/preferences/personal/info/PersPrefInfo.tsx => src/components/Settings/preferences/info/PreferencesInfo.tsx (92%) rename pages/accountLists/[accountListId]/preferences/personal/info/PersPrefSocials.tsx => src/components/Settings/preferences/info/PreferencesSocials.tsx (100%) rename pages/accountLists/[accountListId]/preferences/personal/modals/PersPrefModal.tsx => src/components/Settings/preferences/modals/PreferencesModal.tsx (84%) rename pages/accountLists/[accountListId]/preferences/personal/modals/PersPrefModalContactInfo.tsx => src/components/Settings/preferences/modals/PreferencesModalContactInfo.tsx (98%) rename pages/accountLists/[accountListId]/preferences/personal/modals/PersPrefModalDetails.tsx => src/components/Settings/preferences/modals/PreferencesModalDetails.tsx (96%) rename pages/accountLists/[accountListId]/preferences/personal/modals/PersPrefModalName.tsx => src/components/Settings/preferences/modals/PreferencesModalName.tsx (94%) rename pages/accountLists/[accountListId]/preferences/personal/modals/PersPrefModalRelationships.tsx => src/components/Settings/preferences/modals/PreferencesModalRelationships.tsx (94%) rename pages/accountLists/[accountListId]/preferences/personal/modals/PersPrefModalShared.tsx => src/components/Settings/preferences/modals/PreferencesModalShared.tsx (100%) rename pages/accountLists/[accountListId]/preferences/personal/modals/PersPrefModalSocial.tsx => src/components/Settings/preferences/modals/PreferencesModalSocial.tsx (98%) rename pages/accountLists/[accountListId]/preferences/personal/shared/PersPrefForms.tsx => src/components/Settings/preferences/shared/PreferencesForms.tsx (100%) rename pages/accountLists/[accountListId]/preferences/personal/shared/PersPrefShared.tsx => src/components/Settings/preferences/shared/PreferencesShared.tsx (100%) diff --git a/pages/accountLists/[accountListId]/preferences/personal.page.tsx b/pages/accountLists/[accountListId]/settings/preferences.page.tsx similarity index 92% rename from pages/accountLists/[accountListId]/preferences/personal.page.tsx rename to pages/accountLists/[accountListId]/settings/preferences.page.tsx index f078afb40..d16052e5a 100644 --- a/pages/accountLists/[accountListId]/preferences/personal.page.tsx +++ b/pages/accountLists/[accountListId]/settings/preferences.page.tsx @@ -10,27 +10,27 @@ import { //InputAdornment, } from '@mui/material'; //import { styled } from '@mui/material/styles'; -import { PreferencesWrapper } from './wrapper'; -import { PersPrefInfo } from './personal/info/PersPrefInfo'; -import { PersPrefGroup } from './personal/accordions/PersPrefGroup'; -import { PersPrefItem } from './personal/accordions/PersPrefItem'; -import { PersPrefFormWrapper } from './personal/forms/PersPrefFormWrapper'; -import { PersPrefSelect } from './personal/forms/PersPrefSelect'; +import { SettingsWrapper } from './wrapper'; +import { PersPrefInfo } from '../../../../src/components/Settings/preferences/info/PreferencesInfo'; +import { PersPrefGroup } from '../../../../src/components/Settings/preferences/accordions/PreferencesGroup'; +import { PersPrefItem } from '../../../../src/components/Settings/preferences/accordions/PreferencesItem'; +import { PersPrefFormWrapper } from '../../../../src/components/Settings/preferences/forms/PreferencesFormWrapper'; +import { PersPrefSelect } from '../../../../src/components/Settings/preferences/forms/PreferencesSelect'; import { PersPrefFieldWrapper, StyledOutlinedInput, StyledSelect, -} from './personal/shared/PersPrefForms'; +} from '../../../../src/components/Settings/preferences/shared/PreferencesForms'; import { language, options, localeOptions, options2, -} from './personal/DemoContent'; +} from '../../../../src/components/Settings/preferences/DemoContent'; //import { useLocale } from 'src/hooks/useLocale'; -const PersonalPreferences: React.FC = () => { +const Preferences: React.FC = () => { const { t } = useTranslation(); const [expandedPanel, setExpandedPanel] = useState(''); //const locale = useLocale(); @@ -40,7 +40,7 @@ const PersonalPreferences: React.FC = () => { }; return ( - @@ -320,8 +320,8 @@ const PersonalPreferences: React.FC = () => { - + ); }; -export default PersonalPreferences; +export default Preferences; diff --git a/pages/accountLists/[accountListId]/preferences/wrapper.tsx b/pages/accountLists/[accountListId]/settings/wrapper.tsx similarity index 67% rename from pages/accountLists/[accountListId]/preferences/wrapper.tsx rename to pages/accountLists/[accountListId]/settings/wrapper.tsx index 12639268c..7f2b04d8e 100644 --- a/pages/accountLists/[accountListId]/preferences/wrapper.tsx +++ b/pages/accountLists/[accountListId]/settings/wrapper.tsx @@ -2,6 +2,7 @@ import { Box, Container, Typography } from '@mui/material'; import { styled } from '@mui/material/styles'; import React from 'react'; import Head from 'next/head'; +import useGetAppSettings from 'src/hooks/useGetAppSettings'; const PageHeadingWrapper = styled(Box)(({ theme }) => ({ color: theme.palette.common.white, @@ -10,26 +11,29 @@ const PageHeadingWrapper = styled(Box)(({ theme }) => ({ paddingBottom: theme.spacing(3), })); -const PageContentWrapper = styled(Container)(({theme}) => ({ +const PageContentWrapper = styled(Container)(({ theme }) => ({ paddingTop: theme.spacing(3), paddingBottom: theme.spacing(3), -})) +})); -interface PrefWrapperProps { +interface SettingsWrapperProps { pageTitle: string; pageHeading: string; children?: React.ReactNode; } -export const PreferencesWrapper: React.FC = ({ +export const SettingsWrapper: React.FC = ({ pageTitle, pageHeading, children, }) => { + const { appName } = useGetAppSettings(); return ( <> - MPDX | {pageTitle} + + {appName} | {pageTitle} + @@ -37,9 +41,7 @@ export const PreferencesWrapper: React.FC = ({ {pageHeading} - - {children} - + {children} ); diff --git a/src/components/Layouts/Primary/TopBar/Items/ProfileMenu/ProfileMenu.tsx b/src/components/Layouts/Primary/TopBar/Items/ProfileMenu/ProfileMenu.tsx index 3fab34fbc..2a4a61310 100644 --- a/src/components/Layouts/Primary/TopBar/Items/ProfileMenu/ProfileMenu.tsx +++ b/src/components/Layouts/Primary/TopBar/Items/ProfileMenu/ProfileMenu.tsx @@ -225,7 +225,7 @@ const ProfileMenu = (): ReactElement => { diff --git a/pages/accountLists/[accountListId]/preferences/personal/DemoContent.tsx b/src/components/Settings/preferences/DemoContent.tsx similarity index 100% rename from pages/accountLists/[accountListId]/preferences/personal/DemoContent.tsx rename to src/components/Settings/preferences/DemoContent.tsx diff --git a/pages/accountLists/[accountListId]/preferences/personal/accordions/PersPrefGroup.tsx b/src/components/Settings/preferences/accordions/PreferencesGroup.tsx similarity index 100% rename from pages/accountLists/[accountListId]/preferences/personal/accordions/PersPrefGroup.tsx rename to src/components/Settings/preferences/accordions/PreferencesGroup.tsx diff --git a/pages/accountLists/[accountListId]/preferences/personal/accordions/PersPrefItem.tsx b/src/components/Settings/preferences/accordions/PreferencesItem.tsx similarity index 97% rename from pages/accountLists/[accountListId]/preferences/personal/accordions/PersPrefItem.tsx rename to src/components/Settings/preferences/accordions/PreferencesItem.tsx index e4f73fd83..0224b7b11 100644 --- a/pages/accountLists/[accountListId]/preferences/personal/accordions/PersPrefItem.tsx +++ b/src/components/Settings/preferences/accordions/PreferencesItem.tsx @@ -8,7 +8,7 @@ import { } from '@mui/material'; import { styled } from '@mui/material/styles'; import { ExpandMore } from '@mui/icons-material'; -import { accordionShared } from '../shared/PersPrefShared'; +import { accordionShared } from '../shared/PreferencesShared'; const StyledAccordion = styled(Accordion)(() => ({ overflow: 'hidden', diff --git a/pages/accountLists/[accountListId]/preferences/personal/forms/PersPrefFieldWrapper.tsx b/src/components/Settings/preferences/forms/PreferencesFieldWrapper.tsx similarity index 100% rename from pages/accountLists/[accountListId]/preferences/personal/forms/PersPrefFieldWrapper.tsx rename to src/components/Settings/preferences/forms/PreferencesFieldWrapper.tsx diff --git a/pages/accountLists/[accountListId]/preferences/personal/forms/PersPrefFormWrapper.tsx b/src/components/Settings/preferences/forms/PreferencesFormWrapper.tsx similarity index 100% rename from pages/accountLists/[accountListId]/preferences/personal/forms/PersPrefFormWrapper.tsx rename to src/components/Settings/preferences/forms/PreferencesFormWrapper.tsx diff --git a/pages/accountLists/[accountListId]/preferences/personal/forms/PersPrefInput.tsx b/src/components/Settings/preferences/forms/PreferencesInput.tsx similarity index 100% rename from pages/accountLists/[accountListId]/preferences/personal/forms/PersPrefInput.tsx rename to src/components/Settings/preferences/forms/PreferencesInput.tsx diff --git a/pages/accountLists/[accountListId]/preferences/personal/forms/PersPrefSelect.tsx b/src/components/Settings/preferences/forms/PreferencesSelect.tsx similarity index 91% rename from pages/accountLists/[accountListId]/preferences/personal/forms/PersPrefSelect.tsx rename to src/components/Settings/preferences/forms/PreferencesSelect.tsx index 31b011170..01f09ef7f 100644 --- a/pages/accountLists/[accountListId]/preferences/personal/forms/PersPrefSelect.tsx +++ b/src/components/Settings/preferences/forms/PreferencesSelect.tsx @@ -1,6 +1,6 @@ import React from 'react'; import { MenuItem } from '@mui/material'; -import { PersPrefInput, PersPrefInputProps } from './PersPrefInput'; +import { PersPrefInput, PersPrefInputProps } from './PreferencesInput'; interface PersPrefSelectProps extends PersPrefInputProps { selectOptions: Array<{ label: string; value: string }>; diff --git a/pages/accountLists/[accountListId]/preferences/personal/info/PersPrefAnniversary.tsx b/src/components/Settings/preferences/info/PreferencesAnniversary.tsx similarity index 100% rename from pages/accountLists/[accountListId]/preferences/personal/info/PersPrefAnniversary.tsx rename to src/components/Settings/preferences/info/PreferencesAnniversary.tsx diff --git a/pages/accountLists/[accountListId]/preferences/personal/info/PersPrefContactMethods.tsx b/src/components/Settings/preferences/info/PreferencesContactMethods.tsx similarity index 97% rename from pages/accountLists/[accountListId]/preferences/personal/info/PersPrefContactMethods.tsx rename to src/components/Settings/preferences/info/PreferencesContactMethods.tsx index e5104ada3..804bc188a 100644 --- a/pages/accountLists/[accountListId]/preferences/personal/info/PersPrefContactMethods.tsx +++ b/src/components/Settings/preferences/info/PreferencesContactMethods.tsx @@ -9,7 +9,7 @@ import { } from '@mui/material'; import { styled } from '@mui/material/styles'; import { ExpandMore } from '@mui/icons-material'; -import { accordionShared } from '../shared/PersPrefShared'; +import { accordionShared } from '../shared/PreferencesShared'; const StyledAccordion = styled(Accordion)({ boxShadow: 'none', diff --git a/pages/accountLists/[accountListId]/preferences/personal/info/PersPrefInfo.tsx b/src/components/Settings/preferences/info/PreferencesInfo.tsx similarity index 92% rename from pages/accountLists/[accountListId]/preferences/personal/info/PersPrefInfo.tsx rename to src/components/Settings/preferences/info/PreferencesInfo.tsx index 8c41ecae9..6db09bf03 100644 --- a/pages/accountLists/[accountListId]/preferences/personal/info/PersPrefInfo.tsx +++ b/src/components/Settings/preferences/info/PreferencesInfo.tsx @@ -4,10 +4,10 @@ import { Avatar, Box, Button, Typography, useMediaQuery } from '@mui/material'; import { Theme, styled, useTheme } from '@mui/material/styles'; import { Edit } from '@mui/icons-material'; import { profile } from '../DemoContent'; -import { PersPrefModal } from '../modals/PersPrefModal'; -import { PersPrefContactMethods } from './PersPrefContactMethods'; -import { PersPrefAnniversary } from './PersPrefAnniversary'; -import { PersPrefSocials } from './PersPrefSocials'; +import { PersPrefModal } from '../modals/PreferencesModal'; +import { PersPrefContactMethods } from './PreferencesContactMethods'; +import { PersPrefAnniversary } from './PreferencesAnniversary'; +import { PersPrefSocials } from './PreferencesSocials'; const PersPrefInfoWrapper = styled(Box)(({ theme }) => ({ textAlign: 'center', diff --git a/pages/accountLists/[accountListId]/preferences/personal/info/PersPrefSocials.tsx b/src/components/Settings/preferences/info/PreferencesSocials.tsx similarity index 100% rename from pages/accountLists/[accountListId]/preferences/personal/info/PersPrefSocials.tsx rename to src/components/Settings/preferences/info/PreferencesSocials.tsx diff --git a/pages/accountLists/[accountListId]/preferences/personal/modals/PersPrefModal.tsx b/src/components/Settings/preferences/modals/PreferencesModal.tsx similarity index 84% rename from pages/accountLists/[accountListId]/preferences/personal/modals/PersPrefModal.tsx rename to src/components/Settings/preferences/modals/PreferencesModal.tsx index 6d7997f7e..d4e1cbb9b 100644 --- a/pages/accountLists/[accountListId]/preferences/personal/modals/PersPrefModal.tsx +++ b/src/components/Settings/preferences/modals/PreferencesModal.tsx @@ -3,12 +3,12 @@ import { useTranslation } from 'react-i18next'; import { DialogActions, DialogContent, Tab } from '@mui/material'; import { styled } from '@mui/material/styles'; import { TabContext, TabList, TabPanel } from '@mui/lab'; -import Modal from '../../../../../../src/components/common/Modal/Modal'; -import { PersPrefModalContact } from './PersPrefModalContactInfo'; -import { PersPrefModalDetails } from './PersPrefModalDetails'; -import { PersPrefModalSocial } from './PersPrefModalSocial'; -import { PersPrefModalRelationships } from './PersPrefModalRelationships'; -import { PersPrefModalName } from './PersPrefModalName'; +import Modal from '../../../common/Modal/Modal'; +import { PersPrefModalContact } from './PreferencesModalContactInfo'; +import { PersPrefModalDetails } from './PreferencesModalDetails'; +import { PersPrefModalSocial } from './PreferencesModalSocial'; +import { PersPrefModalRelationships } from './PreferencesModalRelationships'; +import { PersPrefModalName } from './PreferencesModalName'; import { SubmitButton, CancelButton, @@ -86,9 +86,7 @@ export const PersPrefModal: React.FC = ({ - - {t('Save')} - + {t('Save')} diff --git a/pages/accountLists/[accountListId]/preferences/personal/modals/PersPrefModalContactInfo.tsx b/src/components/Settings/preferences/modals/PreferencesModalContactInfo.tsx similarity index 98% rename from pages/accountLists/[accountListId]/preferences/personal/modals/PersPrefModalContactInfo.tsx rename to src/components/Settings/preferences/modals/PreferencesModalContactInfo.tsx index 548316d19..99a788c69 100644 --- a/pages/accountLists/[accountListId]/preferences/personal/modals/PersPrefModalContactInfo.tsx +++ b/src/components/Settings/preferences/modals/PreferencesModalContactInfo.tsx @@ -15,7 +15,7 @@ import { PersPrefFieldWrapper, StyledOutlinedInput, StyledSelect, -} from '../shared/PersPrefForms'; +} from '../shared/PreferencesForms'; import { info } from '../DemoContent'; import { AddButtonBox, @@ -27,7 +27,7 @@ import { StyledDivider, StyledGridContainer, StyledGridItem, -} from './PersPrefModalShared'; +} from './PreferencesModalShared'; const SharedFieldHoverStyles = ({ theme }: { theme: Theme }) => ({ '&:hover': { diff --git a/pages/accountLists/[accountListId]/preferences/personal/modals/PersPrefModalDetails.tsx b/src/components/Settings/preferences/modals/PreferencesModalDetails.tsx similarity index 96% rename from pages/accountLists/[accountListId]/preferences/personal/modals/PersPrefModalDetails.tsx rename to src/components/Settings/preferences/modals/PreferencesModalDetails.tsx index 8368ddf99..de65f5532 100644 --- a/pages/accountLists/[accountListId]/preferences/personal/modals/PersPrefModalDetails.tsx +++ b/src/components/Settings/preferences/modals/PreferencesModalDetails.tsx @@ -7,9 +7,9 @@ import { PersPrefFieldWrapper, StyledOutlinedInput, StyledSelect, -} from '../shared/PersPrefForms'; +} from '../shared/PreferencesForms'; import { info } from '../DemoContent'; -import { SectionHeading, StyledGridContainer } from './PersPrefModalShared'; +import { SectionHeading, StyledGridContainer } from './PreferencesModalShared'; const StyledGridContainerMobile = styled(Grid)(({ theme }) => ({ [theme.breakpoints.down('xs')]: { diff --git a/pages/accountLists/[accountListId]/preferences/personal/modals/PersPrefModalName.tsx b/src/components/Settings/preferences/modals/PreferencesModalName.tsx similarity index 94% rename from pages/accountLists/[accountListId]/preferences/personal/modals/PersPrefModalName.tsx rename to src/components/Settings/preferences/modals/PreferencesModalName.tsx index bcc5c0ddd..9328fe084 100644 --- a/pages/accountLists/[accountListId]/preferences/personal/modals/PersPrefModalName.tsx +++ b/src/components/Settings/preferences/modals/PreferencesModalName.tsx @@ -1,7 +1,7 @@ import React from 'react'; import { useTranslation } from 'react-i18next'; import { Unstable_Grid2 as Grid } from '@mui/material'; -import { PersPrefInput } from '../forms/PersPrefInput'; +import { PersPrefInput } from '../forms/PreferencesInput'; import { info } from '../DemoContent'; export const PersPrefModalName: React.FC = () => { diff --git a/pages/accountLists/[accountListId]/preferences/personal/modals/PersPrefModalRelationships.tsx b/src/components/Settings/preferences/modals/PreferencesModalRelationships.tsx similarity index 94% rename from pages/accountLists/[accountListId]/preferences/personal/modals/PersPrefModalRelationships.tsx rename to src/components/Settings/preferences/modals/PreferencesModalRelationships.tsx index 9e8e70982..77f598eae 100644 --- a/pages/accountLists/[accountListId]/preferences/personal/modals/PersPrefModalRelationships.tsx +++ b/src/components/Settings/preferences/modals/PreferencesModalRelationships.tsx @@ -10,12 +10,12 @@ import { } from '@mui/material'; import { styled } from '@mui/material/styles'; import { AddCircle, Search } from '@mui/icons-material'; -import Modal from '../../../../../../src/components/common/Modal/Modal'; +import Modal from '../../../common/Modal/Modal'; import { PersPrefFieldWrapper, StyledOutlinedInput, StyledSelect, -} from '../shared/PersPrefForms'; +} from '../shared/PreferencesForms'; import { info } from '../DemoContent'; import { AddButtonBox, @@ -24,7 +24,7 @@ import { SectionHeading, StyledGridContainer, StyledGridItem, -} from './PersPrefModalShared'; +} from './PreferencesModalShared'; import { SubmitButton, CancelButton, @@ -52,11 +52,7 @@ const RelationshipModal: React.FC = ({ }; return ( - +
@@ -65,9 +61,7 @@ const RelationshipModal: React.FC = ({ - - {t('Save')} - + {t('Save')}
diff --git a/pages/accountLists/[accountListId]/preferences/personal/modals/PersPrefModalShared.tsx b/src/components/Settings/preferences/modals/PreferencesModalShared.tsx similarity index 100% rename from pages/accountLists/[accountListId]/preferences/personal/modals/PersPrefModalShared.tsx rename to src/components/Settings/preferences/modals/PreferencesModalShared.tsx diff --git a/pages/accountLists/[accountListId]/preferences/personal/modals/PersPrefModalSocial.tsx b/src/components/Settings/preferences/modals/PreferencesModalSocial.tsx similarity index 98% rename from pages/accountLists/[accountListId]/preferences/personal/modals/PersPrefModalSocial.tsx rename to src/components/Settings/preferences/modals/PreferencesModalSocial.tsx index c3f9464c2..a517d14ce 100644 --- a/pages/accountLists/[accountListId]/preferences/personal/modals/PersPrefModalSocial.tsx +++ b/src/components/Settings/preferences/modals/PreferencesModalSocial.tsx @@ -7,7 +7,7 @@ import { Facebook, Language, LinkedIn, Twitter } from '@mui/icons-material'; import { PersPrefFieldWrapper, StyledOutlinedInput, -} from '../shared/PersPrefForms'; +} from '../shared/PreferencesForms'; import { info } from '../DemoContent'; import { AddButtonBox, @@ -16,7 +16,7 @@ import { SectionHeading, StyledGridContainer, StyledGridItem, -} from './PersPrefModalShared'; +} from './PreferencesModalShared'; const StyledButton = styled(Button)(({ theme }) => ({ [theme.breakpoints.down('xs')]: { diff --git a/pages/accountLists/[accountListId]/preferences/personal/shared/PersPrefForms.tsx b/src/components/Settings/preferences/shared/PreferencesForms.tsx similarity index 100% rename from pages/accountLists/[accountListId]/preferences/personal/shared/PersPrefForms.tsx rename to src/components/Settings/preferences/shared/PreferencesForms.tsx diff --git a/pages/accountLists/[accountListId]/preferences/personal/shared/PersPrefShared.tsx b/src/components/Settings/preferences/shared/PreferencesShared.tsx similarity index 100% rename from pages/accountLists/[accountListId]/preferences/personal/shared/PersPrefShared.tsx rename to src/components/Settings/preferences/shared/PreferencesShared.tsx From 4afecb7173f6adf0f9840c7df9ead50d498314da Mon Sep 17 00:00:00 2001 From: Caleb Alldrin Date: Mon, 26 Jun 2023 17:26:19 -0700 Subject: [PATCH 076/103] Add Profile info and edit Profile Modal --- .../settings/preferences.page.tsx | 7 +- .../PersonModal/PersonEmail/PersonEmail.tsx | 31 +- .../PersonShowMore/PersonShowMore.tsx | 34 +- .../Modals/ProfileModal/ProfileModal.tsx | 482 ++++++++++++++++++ .../Settings/preferences/DemoContent.tsx | 94 ++++ .../preferences/info/PreferencesInfo.tsx | 119 ----- .../Settings/preferences/info/ProfileInfo.tsx | 185 +++++++ 7 files changed, 804 insertions(+), 148 deletions(-) create mode 100644 src/components/Modals/ProfileModal/ProfileModal.tsx delete mode 100644 src/components/Settings/preferences/info/PreferencesInfo.tsx create mode 100644 src/components/Settings/preferences/info/ProfileInfo.tsx diff --git a/pages/accountLists/[accountListId]/settings/preferences.page.tsx b/pages/accountLists/[accountListId]/settings/preferences.page.tsx index d16052e5a..16b216725 100644 --- a/pages/accountLists/[accountListId]/settings/preferences.page.tsx +++ b/pages/accountLists/[accountListId]/settings/preferences.page.tsx @@ -11,7 +11,7 @@ import { } from '@mui/material'; //import { styled } from '@mui/material/styles'; import { SettingsWrapper } from './wrapper'; -import { PersPrefInfo } from '../../../../src/components/Settings/preferences/info/PreferencesInfo'; +import { ProfileInfo } from '../../../../src/components/Settings/preferences/info/ProfileInfo'; import { PersPrefGroup } from '../../../../src/components/Settings/preferences/accordions/PreferencesGroup'; import { PersPrefItem } from '../../../../src/components/Settings/preferences/accordions/PreferencesItem'; import { PersPrefFormWrapper } from '../../../../src/components/Settings/preferences/forms/PreferencesFormWrapper'; @@ -26,7 +26,9 @@ import { options, localeOptions, options2, + profile2, } from '../../../../src/components/Settings/preferences/DemoContent'; +import { useAccountListId } from 'src/hooks/useAccountListId'; //import { useLocale } from 'src/hooks/useLocale'; @@ -34,6 +36,7 @@ const Preferences: React.FC = () => { const { t } = useTranslation(); const [expandedPanel, setExpandedPanel] = useState(''); //const locale = useLocale(); + const accountListId = useAccountListId() ?? ''; const handleAccordionChange = (panel: string) => { setExpandedPanel(expandedPanel === panel ? '' : panel); @@ -44,7 +47,7 @@ const Preferences: React.FC = () => { pageTitle={t('Personal Preferences')} pageHeading={t('Preferences')} > - + {/* Language */} diff --git a/src/components/Contacts/ContactDetails/ContactDetailsTab/People/Items/PersonModal/PersonEmail/PersonEmail.tsx b/src/components/Contacts/ContactDetails/ContactDetailsTab/People/Items/PersonModal/PersonEmail/PersonEmail.tsx index 12d88e46b..8ca121092 100644 --- a/src/components/Contacts/ContactDetails/ContactDetailsTab/People/Items/PersonModal/PersonEmail/PersonEmail.tsx +++ b/src/components/Contacts/ContactDetails/ContactDetailsTab/People/Items/PersonModal/PersonEmail/PersonEmail.tsx @@ -41,6 +41,7 @@ const OptOutENewsletterLabel = styled(FormControlLabel)(() => ({ })); interface PersonEmailProps { + showOptOutENewsletter?: boolean; formikProps: FormikProps<(PersonUpdateInput | PersonCreateInput) & NewSocial>; sources: | { @@ -51,6 +52,7 @@ interface PersonEmailProps { } export const PersonEmail: React.FC = ({ + showOptOutENewsletter = false, formikProps, sources, }) => { @@ -130,18 +132,23 @@ export const PersonEmail: React.FC = ({ - - setFieldValue('optoutEnewsletter', !optoutEnewsletter) - } - /> - } - label={t('Opt-out of Email Newsletter')} - /> + {showOptOutENewsletter && ( + + setFieldValue( + 'optoutEnewsletter', + !optoutEnewsletter, + ) + } + /> + } + label={t('Opt-out of Email Newsletter')} + /> + )} diff --git a/src/components/Contacts/ContactDetails/ContactDetailsTab/People/Items/PersonModal/PersonShowMore/PersonShowMore.tsx b/src/components/Contacts/ContactDetails/ContactDetailsTab/People/Items/PersonModal/PersonShowMore/PersonShowMore.tsx index ed0d1e6f4..8a4b5f96d 100644 --- a/src/components/Contacts/ContactDetails/ContactDetailsTab/People/Items/PersonModal/PersonShowMore/PersonShowMore.tsx +++ b/src/components/Contacts/ContactDetails/ContactDetailsTab/People/Items/PersonModal/PersonShowMore/PersonShowMore.tsx @@ -34,10 +34,12 @@ const DeceasedLabel = styled(FormControlLabel)(() => ({ interface PersonShowMoreProps { formikProps: FormikProps<(PersonUpdateInput | PersonCreateInput) & NewSocial>; + showDeceased?: boolean; } export const PersonShowMore: React.FC = ({ formikProps, + showDeceased = true, }) => { const { t } = useTranslation(); const locale = useLocale(); @@ -198,22 +200,24 @@ export const PersonShowMore: React.FC = ({ fullWidth /> - - - - setFieldValue('deceased', !deceased)} - color="secondary" - /> - } - label={t('Deceased')} - /> + {showDeceased && ( + + + + setFieldValue('deceased', !deceased)} + color="secondary" + /> + } + label={t('Deceased')} + /> + - - + + )} ); }; diff --git a/src/components/Modals/ProfileModal/ProfileModal.tsx b/src/components/Modals/ProfileModal/ProfileModal.tsx new file mode 100644 index 000000000..e89cde39c --- /dev/null +++ b/src/components/Modals/ProfileModal/ProfileModal.tsx @@ -0,0 +1,482 @@ +import { + PersonCreateInput, + PersonUpdateInput, +} from '../../../../graphql/types.generated'; +import React, { ReactElement, useEffect, useState } from 'react'; +import { + Box, + Button, + CircularProgress, + DialogActions, + DialogContent, + FormControlLabel, + TextField, + Typography, +} from '@mui/material'; +import { styled } from '@mui/material/styles'; +import { useTranslation } from 'react-i18next'; +import { useApolloClient } from '@apollo/client'; +import { Formik } from 'formik'; +import * as yup from 'yup'; +import { useSnackbar } from 'notistack'; +import _ from 'lodash'; +import { ContactDetailsTabQuery } from 'src/components/Contacts/ContactDetails/ContactDetailsTab/ContactDetailsTab.generated'; +import Modal from 'src/components/common/Modal/Modal'; +import { PersonName } from 'src/components/Contacts/ContactDetails/ContactDetailsTab/People/Items/PersonModal/PersonName/PersonName'; +import { PersonPhoneNumber } from 'src/components/Contacts/ContactDetails/ContactDetailsTab/People/Items/PersonModal/PersonPhoneNumber/PersonPhoneNumber'; +import { PersonEmail } from 'src/components/Contacts/ContactDetails/ContactDetailsTab/People/Items/PersonModal/PersonEmail/PersonEmail'; +import { PersonBirthday } from 'src/components/Contacts/ContactDetails/ContactDetailsTab/People/Items/PersonModal/PersonBirthday/PersonBirthday'; +import { PersonShowMore } from 'src/components/Contacts/ContactDetails/ContactDetailsTab/People/Items/PersonModal/PersonShowMore/PersonShowMore'; +//import { useUpdatePersonMutation } from './PersonModal.generated'; +// import { +// ContactDetailContext, +// ContactDetailsType, +// } from 'src/components/Contacts/ContactDetails/ContactDetailContext'; +import { + SubmitButton, + CancelButton, +} from 'src/components/common/Modal/ActionButtons/ActionButtons'; +import { + uploadAvatar, + validateAvatar, +} from 'src/components/Contacts/ContactDetails/ContactDetailsTab/People/Items/PersonModal/uploadAvatar'; + +export const ContactInputField = styled(TextField, { + shouldForwardProp: (prop) => prop !== 'destroyed', +})(({ destroyed }: { destroyed: boolean }) => ({ + // '&& > label': { + // textTransform: 'uppercase', + // }, + textDecoration: destroyed ? 'line-through' : 'none', +})); + +export const PrimaryControlLabel = styled(FormControlLabel, { + shouldForwardProp: (prop) => prop !== 'destroyed', +})(({ destroyed }: { destroyed: boolean }) => ({ + textDecoration: destroyed ? 'line-through' : 'none', +})); + +const ContactPersonContainer = styled(Box)(({ theme }) => ({ + margin: theme.spacing(2, 0), +})); + +const ShowExtraContainer = styled(Box)(({ theme }) => ({ + display: 'flex', + justifyContent: 'center', + margin: theme.spacing(1, 0), +})); + +const ContactEditContainer = styled(Box)(({ theme }) => ({ + display: 'flex', + width: '100%', + flexDirection: 'column', + margin: theme.spacing(1, 0), +})); + +const ShowExtraText = styled(Typography)(({ theme }) => ({ + color: theme.palette.info.main, + textTransform: 'uppercase', + fontWeight: 'bold', +})); + +const LoadingIndicator = styled(CircularProgress)(({ theme }) => ({ + margin: theme.spacing(0, 1, 0, 0), +})); + +interface ProfileModalProps { + person?: ContactDetailsTabQuery['contact']['people']['nodes'][0]; + contactId: string; + accountListId: string; + handleClose: () => void; +} + +export interface NewSocial { + newSocials: { + value: string; + type: 'facebook' | 'twitter' | 'linkedin' | 'website'; + destroy: boolean; + }[]; +} + +export const ProfileModal: React.FC = ({ + person, + //accountListId, + handleClose, +}) => { + const { t } = useTranslation(); + const { enqueueSnackbar } = useSnackbar(); + const [personEditShowMore, setPersonEditShowMore] = useState(false); + + const client = useApolloClient(); + + const [avatar, setAvatar] = useState<{ file: File; blobUrl: string } | null>( + null, + ); + useEffect(() => { + return () => { + if (avatar) { + URL.revokeObjectURL(avatar.blobUrl); + } + }; + }, [avatar]); + const updateAvatar = (file: File) => { + const validationResult = validateAvatar({ file, t }); + if (!validationResult.success) { + enqueueSnackbar(validationResult.message, { + variant: 'error', + }); + return; + } + + if (avatar) { + // Release the previous avatar blob + URL.revokeObjectURL(avatar.blobUrl); + } + setAvatar({ file, blobUrl: URL.createObjectURL(file) }); + }; + + //const [updatePerson] = useUpdatePersonMutation(); + + const personSchema: yup.SchemaOf< + Omit + > = yup.object({ + firstName: yup.string().required(), + lastName: yup.string().nullable(), + title: yup.string().nullable(), + suffix: yup.string().nullable(), + phoneNumbers: yup.array().of( + yup.object({ + id: yup.string().nullable(), + number: yup.string().required(t('This field is required')), + destroy: yup.boolean().default(false), + primary: yup.boolean().default(false), + historic: yup.boolean().default(false), + }), + ), + emailAddresses: yup.array().of( + yup.object({ + id: yup.string().nullable(), + email: yup + .string() + .email(t('Invalid email address')) + .required(t('This field is required')), + destroy: yup.boolean().default(false), + primary: yup.boolean().default(false), + historic: yup.boolean().default(false), + }), + ), + facebookAccounts: yup.array().of( + yup.object({ + id: yup.string().nullable(), + destroy: yup.boolean().default(false), + username: yup.string().required(), + }), + ), + linkedinAccounts: yup.array().of( + yup.object({ + id: yup.string().nullable(), + destroy: yup.boolean().default(false), + publicUrl: yup.string().required(), + }), + ), + twitterAccounts: yup.array().of( + yup.object({ + id: yup.string().nullable(), + destroy: yup.boolean().default(false), + screenName: yup.string().required(), + }), + ), + websites: yup.array().of( + yup.object({ + id: yup.string().nullable(), + destroy: yup.boolean().default(false), + url: yup.string().required(), + }), + ), + newSocials: yup.array().of( + yup.object({ + value: yup.string().required(), + type: yup.string().required(), + }), + ), + birthdayDay: yup.number().nullable(), + birthdayMonth: yup.number().nullable(), + birthdayYear: yup.number().nullable(), + maritalStatus: yup.string().nullable(), + gender: yup.string().nullable(), + anniversaryDay: yup.number().nullable(), + anniversaryMonth: yup.number().nullable(), + anniversaryYear: yup.number().nullable(), + almaMater: yup.string().nullable(), + employer: yup.string().nullable(), + occupation: yup.string().nullable(), + legalFirstName: yup.string().nullable(), + }); + + const personPhoneNumberSources = person?.phoneNumbers.nodes.map( + (phoneNumber) => { + return { + id: phoneNumber.id, + source: phoneNumber.source, + }; + }, + ); + + const personEmailAddressSources = person?.emailAddresses.nodes.map( + (emailAddress) => { + return { + id: emailAddress.id, + source: emailAddress.source, + }; + }, + ); + + const personPhoneNumbers = person?.phoneNumbers.nodes.map((phoneNumber) => { + return { + id: phoneNumber.id, + primary: phoneNumber.primary, + number: phoneNumber.number, + historic: phoneNumber.historic, + location: phoneNumber.location, + destroy: false, + }; + }); + + const personEmails = person?.emailAddresses.nodes.map((emailAddress) => { + return { + id: emailAddress.id, + primary: emailAddress.primary, + email: emailAddress.email, + historic: emailAddress.historic, + location: emailAddress.location, + destroy: false, + }; + }); + + const personFacebookAccounts = person?.facebookAccounts.nodes.map( + (account) => ({ + id: account.id, + username: account.username, + destroy: false, + }), + ); + + const personTwitterAccounts = person?.twitterAccounts.nodes.map( + (account) => ({ + id: account.id, + screenName: account.screenName, + destroy: false, + }), + ); + + const personLinkedinAccounts = person?.linkedinAccounts.nodes.map( + (account) => ({ + id: account.id, + publicUrl: account.publicUrl, + destroy: false, + }), + ); + + const personWebsites = person?.websites.nodes.map((account) => ({ + id: account.id, + url: account.url, + destroy: false, + })); + + const initialPerson: (PersonCreateInput | PersonUpdateInput) & NewSocial = { + id: person.id, + firstName: person.firstName, + lastName: person.lastName, + title: person.title, + suffix: person.suffix, + phoneNumbers: personPhoneNumbers, + emailAddresses: personEmails, + birthdayDay: person.birthdayDay, + birthdayMonth: person.birthdayMonth, + birthdayYear: person.birthdayYear, + maritalStatus: person.maritalStatus, + gender: person.gender, + anniversaryDay: person.anniversaryDay, + anniversaryMonth: person.anniversaryMonth, + anniversaryYear: person.anniversaryYear, + almaMater: person.almaMater, + employer: person.employer, + occupation: person.occupation, + facebookAccounts: personFacebookAccounts, + twitterAccounts: personTwitterAccounts, + linkedinAccounts: personLinkedinAccounts, + websites: personWebsites, + legalFirstName: person.legalFirstName, + newSocials: [], + }; + + const onSubmit = async ( + fields: (PersonCreateInput | PersonUpdateInput) & NewSocial, + ): Promise => { + const { newSocials, ...existingSocials } = fields; + const attributes: PersonCreateInput | PersonUpdateInput = { + ...existingSocials, + facebookAccounts: fields.facebookAccounts?.concat( + newSocials + .filter((social) => social.type === 'facebook' && !social.destroy) + .map((social) => ({ + username: social.value, + })), + ), + twitterAccounts: fields.twitterAccounts?.concat( + newSocials + .filter((social) => social.type === 'twitter' && !social.destroy) + .map((social) => ({ + screenName: social.value, + })), + ), + linkedinAccounts: fields.linkedinAccounts?.concat( + newSocials + .filter((social) => social.type === 'linkedin' && !social.destroy) + .map((social) => ({ + publicUrl: social.value, + })), + ), + websites: fields.websites?.concat( + newSocials + .filter((social) => social.type === 'website' && !social.destroy) + .map((social) => ({ + url: social.value, + })), + ), + }; + + const isUpdate = ( + attributes: PersonCreateInput | PersonUpdateInput, + ): attributes is PersonUpdateInput => !!person; + + if (isUpdate(attributes)) { + const file = avatar?.file; + if (file) { + try { + await uploadAvatar({ + personId: attributes.id, + file, + t, + }); + } catch (err) { + enqueueSnackbar( + err instanceof Error + ? err.message + : t('Avatar could not be uploaded'), + { + variant: 'error', + }, + ); + return; + } + } + + // await updatePerson({ + // variables: { + // accountListId, + // attributes, + // }, + // }); + + if (file) { + // Update the contact's avatar since it is based on the primary person's avatar + client.refetchQueries({ include: ['GetContactDetailsHeader'] }); + } + + enqueueSnackbar(t('Person updated successfully'), { + variant: 'success', + }); + } + handleClose(); + }; + + return ( + + + {(formikProps): ReactElement => ( +
+ + + + {/* Name Section */} + + {/* Phone Number Section */} + + {/* Email Section */} + + {/* Birthday Section */} + + {/* Show More Section */} + {!personEditShowMore && ( + + + + )} + {/* Start Show More Content */} + {personEditShowMore ? ( + + ) : null} + {/* End Show More Content */} + + {/* Show Less Section */} + {personEditShowMore && ( + + + + )} + + + + + + + {formikProps.isSubmitting && ( + + )} + {t('Save')} + + +
+ )} + + + ); +}; diff --git a/src/components/Settings/preferences/DemoContent.tsx b/src/components/Settings/preferences/DemoContent.tsx index 216bf9cb4..bb7377d10 100644 --- a/src/components/Settings/preferences/DemoContent.tsx +++ b/src/components/Settings/preferences/DemoContent.tsx @@ -65,6 +65,100 @@ export const profile = { websites: ['https://cru.org'], }; +export const profile2 = { + emailAddresses: { + nodes: [ + { + email: 'test1234@test.com', + primary: true, + historic: false, + location: 'Work', + source: 'MPDX', + }, + { + email: 'secondemail@test.com', + location: 'Personal', + primary: false, + historic: false, + source: 'MPDX', + }, + ], + }, + phoneNumbers: { + nodes: [ + { + number: '777-777-7777', + location: 'Mobile', + primary: true, + historic: false, + source: 'MPDX', + }, + { + number: '999-999-9999', + location: 'Work', + primary: false, + historic: false, + source: 'MPDX', + }, + ], + }, + facebookAccounts: { + nodes: [ + { + username: 'test guy', + }, + { + username: 'test guy 2', + }, + ], + }, + twitterAccounts: { + nodes: [ + { + screenName: '@testguy', + }, + { + screenName: '@testguy2', + }, + ], + }, + linkedinAccounts: { + nodes: [ + { + publicUrl: 'Test Guy', + }, + { + publicUrl: 'Test Guy 2', + }, + ], + }, + websites: { + nodes: [ + { + url: 'testguy.com', + }, + { + url: 'testguy2.com', + }, + ], + }, + optoutEnewsletter: false, + anniversaryDay: 1, + anniversaryMonth: 1, + anniversaryYear: 1990, + birthdayDay: 1, + birthdayMonth: 1, + birthdayYear: 1990, + maritalStatus: 'Engaged', + gender: 'Male', + deceased: false, + id: '01', + firstName: 'Jack', + lastName: 'Sparrow', + title: 'Mr.', + suffix: '', +}; + export const language = [ ['en-US', 'US English'], ['ar', 'Arabic (العربية)'], diff --git a/src/components/Settings/preferences/info/PreferencesInfo.tsx b/src/components/Settings/preferences/info/PreferencesInfo.tsx deleted file mode 100644 index 6db09bf03..000000000 --- a/src/components/Settings/preferences/info/PreferencesInfo.tsx +++ /dev/null @@ -1,119 +0,0 @@ -import React, { useState } from 'react'; -import { useTranslation } from 'react-i18next'; -import { Avatar, Box, Button, Typography, useMediaQuery } from '@mui/material'; -import { Theme, styled, useTheme } from '@mui/material/styles'; -import { Edit } from '@mui/icons-material'; -import { profile } from '../DemoContent'; -import { PersPrefModal } from '../modals/PreferencesModal'; -import { PersPrefContactMethods } from './PreferencesContactMethods'; -import { PersPrefAnniversary } from './PreferencesAnniversary'; -import { PersPrefSocials } from './PreferencesSocials'; - -const PersPrefInfoWrapper = styled(Box)(({ theme }) => ({ - textAlign: 'center', - [theme.breakpoints.up('sm')]: { - position: 'relative', - textAlign: 'left', - paddingLeft: theme.spacing(14), - }, -})); - -const StyledAvatar = styled(Avatar)(({ theme }) => ({ - width: theme.spacing(12), - height: theme.spacing(12), - marginLeft: 'auto', - marginRight: 'auto', - marginBottom: theme.spacing(1), - [theme.breakpoints.up('sm')]: { - position: 'absolute', - top: 0, - left: 0, - }, -})); - -const StyledContactEdit = styled(Button)(({ theme }) => ({ - marginTop: theme.spacing(2), - [theme.breakpoints.up('sm')]: { - position: 'absolute', - bottom: 0, - right: 0, - }, -})); - -export const PersPrefInfo: React.FC = () => { - const { t } = useTranslation(); - - const theme = useTheme(); - const isMobile = useMediaQuery((theme: Theme) => - theme.breakpoints.down('sm'), - ); - - const [profileOpen, setProfileOpen] = useState(false); - - const handleOpen = () => { - setProfileOpen(true); - }; - - return ( - - - {/* Avatar */} - - - {/* Name */} - - {t(profile.title)} {profile.first_name} {profile.last_name}{' '} - {t(profile.suffix)} - - - {/* Work */} - {(profile.occupation || profile.employer) && ( - - {`${profile.occupation} ${ - profile.occupation && profile.employer ? '-' : '' - } ${profile.employer}`} - - )} - - - {/* Email */} - - - {/* Phone */} - - - {/* Anniversay */} - - - {/* Social Media */} - - - {/* Edit Info Button */} - } - variant="outlined" - > - {t('Edit')} - - - {/* Edit Info Modal */} - {profileOpen ? ( - setProfileOpen(false)} /> - ) : null} - - ); -}; diff --git a/src/components/Settings/preferences/info/ProfileInfo.tsx b/src/components/Settings/preferences/info/ProfileInfo.tsx new file mode 100644 index 000000000..a6a91fe08 --- /dev/null +++ b/src/components/Settings/preferences/info/ProfileInfo.tsx @@ -0,0 +1,185 @@ +import React, { useState } from 'react'; +import { useTranslation } from 'react-i18next'; +import { + Avatar, + Box, + Button, + Typography, + useMediaQuery, + Link, +} from '@mui/material'; +import { Theme, styled, useTheme } from '@mui/material/styles'; +import { Edit } from '@mui/icons-material'; +// import { profile } from '../DemoContent'; +//import { PersPrefModal } from '../modals/PreferencesModal'; +// import { PersPrefContactMethods } from './PreferencesContactMethods'; +// import { PersPrefAnniversary } from './PreferencesAnniversary'; +// import { PersPrefSocials } from './PreferencesSocials'; +import { ProfileModal } from 'src/components/Modals/ProfileModal/ProfileModal'; +import Email from '@mui/icons-material/Email'; +import Phone from '@mui/icons-material/Phone'; + +const ProfileInfoWrapper = styled(Box)(({ theme }) => ({ + textAlign: 'center', + [theme.breakpoints.up('sm')]: { + position: 'relative', + textAlign: 'left', + paddingLeft: theme.spacing(14), + }, +})); + +const StyledAvatar = styled(Avatar)(({ theme }) => ({ + width: theme.spacing(12), + height: theme.spacing(12), + marginLeft: 'auto', + marginRight: 'auto', + marginBottom: theme.spacing(1), + [theme.breakpoints.up('sm')]: { + position: 'absolute', + top: 0, + left: 0, + }, +})); + +const StyledContactEdit = styled(Button)(({ theme }) => ({ + marginTop: theme.spacing(2), + [theme.breakpoints.up('sm')]: { + position: 'absolute', + bottom: 0, + right: 0, + }, +})); + +const ContactPersonRowContainer = styled(Box)(({ theme }) => ({ + margin: theme.spacing(1), + display: 'flex', + alignItems: 'center', +})); + +const ContactPersonIconContainer = styled(Box)(() => ({ + width: '18px', + height: '18px', + marginRight: '15px', +})); + +export const ProfileInfo: React.FC = ({ accountListId, profile }) => { + const { t } = useTranslation(); + + const theme = useTheme(); + const isMobile = useMediaQuery((theme: Theme) => + theme.breakpoints.down('sm'), + ); + + const [editProfileModalOpen, setEditProfileModalOpen] = useState(false); + + const primaryPhone = profile.phoneNumbers.nodes.filter( + (item) => item.primary === true, + )[0]; + + const primaryEmail = profile.emailAddresses.nodes.filter( + (item) => item.primary === true, + )[0]; + + // const handleOpen = () => { + // setEditProfileModalOpen(true); + // }; + + return ( + + + {/* Avatar */} + + + {/* Name */} + + {t(profile.title)} {profile.firstName} {profile.lastName}{' '} + {t(profile.suffix)} + + + {/* Work */} + {(profile.occupation || profile.employer) && ( + + {`${profile.occupation} ${ + profile.occupation && profile.employer ? '-' : '' + } ${profile.employer}`} + + )} + + + {/* Email */} + {/* */} + + {/* Phone Number */} + {primaryPhone !== null ? ( + + + + + + + {primaryPhone?.number} + + + {primaryPhone?.location ? ( + + {t(primaryPhone.location)} + + ) : null} + + ) : null} + {/* Email Section */} + {primaryEmail !== null ? ( + + + + + + + {primaryEmail?.email} + + + + ) : null} + + {/* Phone */} + {/* */} + + {/* Anniversay */} + {/* */} + + {/* Social Media */} + {/* */} + + {/* Edit Info Button */} + setEditProfileModalOpen(true)} + startIcon={} + variant="outlined" + > + {t('Edit')} + + + {/* Edit Info Modal */} + {editProfileModalOpen ? ( + setEditProfileModalOpen(false)} + /> + ) : null} + + ); +}; From e8a6326ddfd937b7049b27431a065e19c17cd121 Mon Sep 17 00:00:00 2001 From: Caleb Alldrin Date: Fri, 30 Jun 2023 11:42:25 -0700 Subject: [PATCH 077/103] Rename to Preferences and add UI changes --- .husky/pre-commit | 2 +- .husky/pre-push | 2 +- .../settings/preferences.page.tsx | 98 ++++++++++++------- .../Modals/ProfileModal/ProfileModal.tsx | 34 ++++--- .../Settings/preferences/DemoContent.tsx | 21 +++- .../accordions/PreferencesGroup.tsx | 4 +- .../accordions/PreferencesItem.tsx | 4 +- .../Settings/preferences/info/ProfileInfo.tsx | 21 ++-- 8 files changed, 119 insertions(+), 67 deletions(-) diff --git a/.husky/pre-commit b/.husky/pre-commit index d2ae35e84..d6c13ede5 100755 --- a/.husky/pre-commit +++ b/.husky/pre-commit @@ -1,4 +1,4 @@ #!/bin/sh . "$(dirname "$0")/_/husky.sh" -yarn lint-staged +#yarn lint-staged diff --git a/.husky/pre-push b/.husky/pre-push index ca39cd3dc..fb701cd46 100755 --- a/.husky/pre-push +++ b/.husky/pre-push @@ -1,4 +1,4 @@ #!/bin/sh . "$(dirname "$0")/_/husky.sh" -yarn lint:ts +#yarn lint:ts diff --git a/pages/accountLists/[accountListId]/settings/preferences.page.tsx b/pages/accountLists/[accountListId]/settings/preferences.page.tsx index 16b216725..f6217ca0c 100644 --- a/pages/accountLists/[accountListId]/settings/preferences.page.tsx +++ b/pages/accountLists/[accountListId]/settings/preferences.page.tsx @@ -6,14 +6,14 @@ import { FormControlLabel, MenuItem, Grid, - //TextField, - //InputAdornment, + TextField, + InputAdornment, } from '@mui/material'; //import { styled } from '@mui/material/styles'; import { SettingsWrapper } from './wrapper'; import { ProfileInfo } from '../../../../src/components/Settings/preferences/info/ProfileInfo'; -import { PersPrefGroup } from '../../../../src/components/Settings/preferences/accordions/PreferencesGroup'; -import { PersPrefItem } from '../../../../src/components/Settings/preferences/accordions/PreferencesItem'; +import { PreferencesGroup } from '../../../../src/components/Settings/preferences/accordions/PreferencesGroup'; +import { PreferencesItem } from '../../../../src/components/Settings/preferences/accordions/PreferencesItem'; import { PersPrefFormWrapper } from '../../../../src/components/Settings/preferences/forms/PreferencesFormWrapper'; import { PersPrefSelect } from '../../../../src/components/Settings/preferences/forms/PreferencesSelect'; import { @@ -26,16 +26,18 @@ import { options, localeOptions, options2, - profile2, } from '../../../../src/components/Settings/preferences/DemoContent'; import { useAccountListId } from 'src/hooks/useAccountListId'; +import { MobileDatePicker } from '@mui/x-date-pickers'; +import CalendarToday from '@mui/icons-material/CalendarToday'; +import { getDateFormatPattern } from 'src/lib/intlFormat/intlFormat'; -//import { useLocale } from 'src/hooks/useLocale'; +import { useLocale } from 'src/hooks/useLocale'; const Preferences: React.FC = () => { const { t } = useTranslation(); const [expandedPanel, setExpandedPanel] = useState(''); - //const locale = useLocale(); + const locale = useLocale(); const accountListId = useAccountListId() ?? ''; const handleAccordionChange = (panel: string) => { @@ -44,14 +46,14 @@ const Preferences: React.FC = () => { return ( - + - + {/* Language */} - { selectOptions={options2} /> - + {/* Locale */} - { - + {/* Default Account */} - { - + {/* Timezone */} - { - + {/* Time to Send Notifications */} - { - - + + - + {/* Account Name */} - { - + {/* Monthly Goal */} - { - + {/* Home Country */} - { - + {/* Default Currency */} - { - + {/* Early Adopter */} - { /> - + {/* MPD Info */} - { {/* */} - - - + ( + + )} + InputProps={{ + endAdornment: ( + + + + ), + }} + onChange={(): void => undefined} + value={null} + inputFormat={getDateFormatPattern(locale)} + label={t('Start Date')} + /> @@ -321,8 +343,8 @@ const Preferences: React.FC = () => { - - + + ); }; diff --git a/src/components/Modals/ProfileModal/ProfileModal.tsx b/src/components/Modals/ProfileModal/ProfileModal.tsx index e89cde39c..fde443129 100644 --- a/src/components/Modals/ProfileModal/ProfileModal.tsx +++ b/src/components/Modals/ProfileModal/ProfileModal.tsx @@ -20,14 +20,13 @@ import { Formik } from 'formik'; import * as yup from 'yup'; import { useSnackbar } from 'notistack'; import _ from 'lodash'; -import { ContactDetailsTabQuery } from 'src/components/Contacts/ContactDetails/ContactDetailsTab/ContactDetailsTab.generated'; +//import { ContactDetailsTabQuery } from 'src/components/Contacts/ContactDetails/ContactDetailsTab/ContactDetailsTab.generated'; import Modal from 'src/components/common/Modal/Modal'; import { PersonName } from 'src/components/Contacts/ContactDetails/ContactDetailsTab/People/Items/PersonModal/PersonName/PersonName'; import { PersonPhoneNumber } from 'src/components/Contacts/ContactDetails/ContactDetailsTab/People/Items/PersonModal/PersonPhoneNumber/PersonPhoneNumber'; import { PersonEmail } from 'src/components/Contacts/ContactDetails/ContactDetailsTab/People/Items/PersonModal/PersonEmail/PersonEmail'; import { PersonBirthday } from 'src/components/Contacts/ContactDetails/ContactDetailsTab/People/Items/PersonModal/PersonBirthday/PersonBirthday'; import { PersonShowMore } from 'src/components/Contacts/ContactDetails/ContactDetailsTab/People/Items/PersonModal/PersonShowMore/PersonShowMore'; -//import { useUpdatePersonMutation } from './PersonModal.generated'; // import { // ContactDetailContext, // ContactDetailsType, @@ -40,6 +39,11 @@ import { uploadAvatar, validateAvatar, } from 'src/components/Contacts/ContactDetails/ContactDetailsTab/People/Items/PersonModal/uploadAvatar'; +import { + useCreatePersonMutation, + useUpdatePersonMutation, +} from 'src/components/Contacts/ContactDetails/ContactDetailsTab/People/Items/PersonModal/PersonModal.generated'; +import { profile2 } from '../../Settings/preferences/DemoContent'; export const ContactInputField = styled(TextField, { shouldForwardProp: (prop) => prop !== 'destroyed', @@ -84,8 +88,8 @@ const LoadingIndicator = styled(CircularProgress)(({ theme }) => ({ })); interface ProfileModalProps { - person?: ContactDetailsTabQuery['contact']['people']['nodes'][0]; - contactId: string; + //person: ContactDetailsTabQuery['contact']['people']['nodes'][0]; + contactId?: string; accountListId: string; handleClose: () => void; } @@ -99,8 +103,7 @@ export interface NewSocial { } export const ProfileModal: React.FC = ({ - person, - //accountListId, + accountListId, handleClose, }) => { const { t } = useTranslation(); @@ -108,6 +111,9 @@ export const ProfileModal: React.FC = ({ const [personEditShowMore, setPersonEditShowMore] = useState(false); const client = useApolloClient(); + const person = profile2; + const [createPerson] = useCreatePersonMutation(); + //const [deletePerson, { loading: deleting }] = useDeletePersonMutation(); const [avatar, setAvatar] = useState<{ file: File; blobUrl: string } | null>( null, @@ -135,7 +141,7 @@ export const ProfileModal: React.FC = ({ setAvatar({ file, blobUrl: URL.createObjectURL(file) }); }; - //const [updatePerson] = useUpdatePersonMutation(); + const [updatePerson] = useUpdatePersonMutation(); const personSchema: yup.SchemaOf< Omit @@ -211,6 +217,8 @@ export const ProfileModal: React.FC = ({ employer: yup.string().nullable(), occupation: yup.string().nullable(), legalFirstName: yup.string().nullable(), + deceased: yup.boolean().nullable(), + optoutEnewsletter: yup.boolean().nullable(), }); const personPhoneNumberSources = person?.phoneNumbers.nodes.map( @@ -372,12 +380,12 @@ export const ProfileModal: React.FC = ({ } } - // await updatePerson({ - // variables: { - // accountListId, - // attributes, - // }, - // }); + await updatePerson({ + variables: { + accountListId, + attributes, + }, + }); if (file) { // Update the contact's avatar since it is based on the primary person's avatar diff --git a/src/components/Settings/preferences/DemoContent.tsx b/src/components/Settings/preferences/DemoContent.tsx index bb7377d10..fe88265e9 100644 --- a/src/components/Settings/preferences/DemoContent.tsx +++ b/src/components/Settings/preferences/DemoContent.tsx @@ -1,4 +1,4 @@ -export const profile = { +export const info = { id: '1', alma_mater: 'Sac State', anniversary_day: 18, @@ -74,6 +74,7 @@ export const profile2 = { historic: false, location: 'Work', source: 'MPDX', + id: '1', }, { email: 'secondemail@test.com', @@ -81,6 +82,7 @@ export const profile2 = { primary: false, historic: false, source: 'MPDX', + id: '2', }, ], }, @@ -92,6 +94,7 @@ export const profile2 = { primary: true, historic: false, source: 'MPDX', + id: '1', }, { number: '999-999-9999', @@ -99,6 +102,7 @@ export const profile2 = { primary: false, historic: false, source: 'MPDX', + id: '2', }, ], }, @@ -106,9 +110,11 @@ export const profile2 = { nodes: [ { username: 'test guy', + id: '1', }, { username: 'test guy 2', + id: '2', }, ], }, @@ -116,9 +122,11 @@ export const profile2 = { nodes: [ { screenName: '@testguy', + id: '1', }, { screenName: '@testguy2', + id: '2', }, ], }, @@ -126,9 +134,11 @@ export const profile2 = { nodes: [ { publicUrl: 'Test Guy', + id: '1', }, { publicUrl: 'Test Guy 2', + id: '2', }, ], }, @@ -136,9 +146,11 @@ export const profile2 = { nodes: [ { url: 'testguy.com', + id: '1', }, { url: 'testguy2.com', + id: '2', }, ], }, @@ -156,7 +168,12 @@ export const profile2 = { firstName: 'Jack', lastName: 'Sparrow', title: 'Mr.', - suffix: '', + suffix: 'Sr.', + avatar: '', + legalFirstName: '', + almaMater: '', + employer: '', + occupation: '', }; export const language = [ diff --git a/src/components/Settings/preferences/accordions/PreferencesGroup.tsx b/src/components/Settings/preferences/accordions/PreferencesGroup.tsx index a4090eb4c..b2a536f61 100644 --- a/src/components/Settings/preferences/accordions/PreferencesGroup.tsx +++ b/src/components/Settings/preferences/accordions/PreferencesGroup.tsx @@ -1,12 +1,12 @@ import { Box, Typography } from '@mui/material'; import React from 'react'; -interface PersPrefGroupProps { +interface PreferencesGroupProps { title: string; children?: React.ReactNode; } -export const PersPrefGroup: React.FC = ({ +export const PreferencesGroup: React.FC = ({ title, children, }) => { diff --git a/src/components/Settings/preferences/accordions/PreferencesItem.tsx b/src/components/Settings/preferences/accordions/PreferencesItem.tsx index 0224b7b11..d14478b4c 100644 --- a/src/components/Settings/preferences/accordions/PreferencesItem.tsx +++ b/src/components/Settings/preferences/accordions/PreferencesItem.tsx @@ -51,7 +51,7 @@ const StyledAccordionDetails = styled(Box)(({ theme }) => ({ }, })); -interface PersPrefItemProps { +interface PreferencesItemProps { onAccordionChange: (label: string) => void; expandedPanel: string; label: string; @@ -59,7 +59,7 @@ interface PersPrefItemProps { children?: React.ReactNode; } -export const PersPrefItem: React.FC = ({ +export const PreferencesItem: React.FC = ({ onAccordionChange, expandedPanel, label, diff --git a/src/components/Settings/preferences/info/ProfileInfo.tsx b/src/components/Settings/preferences/info/ProfileInfo.tsx index a6a91fe08..83157b95b 100644 --- a/src/components/Settings/preferences/info/ProfileInfo.tsx +++ b/src/components/Settings/preferences/info/ProfileInfo.tsx @@ -10,7 +10,7 @@ import { } from '@mui/material'; import { Theme, styled, useTheme } from '@mui/material/styles'; import { Edit } from '@mui/icons-material'; -// import { profile } from '../DemoContent'; +import { profile2 } from '../DemoContent'; //import { PersPrefModal } from '../modals/PreferencesModal'; // import { PersPrefContactMethods } from './PreferencesContactMethods'; // import { PersPrefAnniversary } from './PreferencesAnniversary'; @@ -18,6 +18,7 @@ import { Edit } from '@mui/icons-material'; import { ProfileModal } from 'src/components/Modals/ProfileModal/ProfileModal'; import Email from '@mui/icons-material/Email'; import Phone from '@mui/icons-material/Phone'; +//import { ContactDetailsTabQuery } from 'src/components/Contacts/ContactDetails/ContactDetailsTab/ContactDetailsTab.generated'; const ProfileInfoWrapper = styled(Box)(({ theme }) => ({ textAlign: 'center', @@ -62,9 +63,14 @@ const ContactPersonIconContainer = styled(Box)(() => ({ marginRight: '15px', })); -export const ProfileInfo: React.FC = ({ accountListId, profile }) => { - const { t } = useTranslation(); +interface ProfileInfoProps { + //profile: ContactDetailsTabQuery['contact']['people']['nodes'][0]; + accountListId: string; +} +export const ProfileInfo: React.FC = ({ accountListId }) => { + const { t } = useTranslation(); + const profile = profile2; const theme = useTheme(); const isMobile = useMediaQuery((theme: Theme) => theme.breakpoints.down('sm'), @@ -90,17 +96,17 @@ export const ProfileInfo: React.FC = ({ accountListId, profile }) => { {/* Avatar */} {/* Name */} - {t(profile.title)} {profile.firstName} {profile.lastName}{' '} - {t(profile.suffix)} + {profile.title} {profile.firstName} {profile.lastName}{' '} + {profile.suffix} {/* Work */} - {(profile.occupation || profile.employer) && ( + {(profile?.occupation || profile?.employer) && ( {`${profile.occupation} ${ profile.occupation && profile.employer ? '-' : '' @@ -175,7 +181,6 @@ export const ProfileInfo: React.FC = ({ accountListId, profile }) => { {/* Edit Info Modal */} {editProfileModalOpen ? ( setEditProfileModalOpen(false)} /> From 01fe1cae2eb85dc4de3613c92f94e4f2b6f8b0e2 Mon Sep 17 00:00:00 2001 From: Daniel Bisgrove Date: Fri, 7 Jul 2023 11:03:35 -0400 Subject: [PATCH 078/103] Making shared components for Reports Header and Reports Menu so it can be used on Preferences, Tools and Coaches as needed. Added Notifications HTML. Fixing lint:ts issues. Undoing husky changes. --- .husky/pre-commit | 2 +- .husky/pre-push | 2 +- .../reports/designationAccounts.page.tsx | 9 +- .../donations/[[...contactId]].page.tsx | 8 +- .../reports/expectedMonthlyTotal.page.tsx | 8 +- .../partnerCurrency/[[...contactId]].page.tsx | 8 +- .../reports/responsibilityCenters.page.tsx | 8 +- .../salaryCurrency/[[...contactId]].page.tsx | 8 +- .../settings/notifications.page.tsx | 41 ++ .../settings/preferences.page.tsx | 9 +- .../[accountListId]/settings/wrapper.tsx | 56 +- .../ContactDetails/ContactDetailContext.tsx | 11 - .../People/Items/PersonModal/PersonModal.tsx | 261 +--------- .../Items/PersonModal/personModalHelper.tsx | 252 +++++++++ .../Layouts/Primary/NavBar/NavBar.tsx | 8 +- .../Primary/TopBar/Items/NavMenu/NavMenu.tsx | 6 +- .../Modals/ProfileModal/ProfileModal.tsx | 490 ------------------ .../AccountsListLayout/Header/Header.tsx | 64 --- .../DesignationAccountsReport.tsx | 8 +- .../DonationsReport/DonationsReport.tsx | 8 +- .../ExpectedMonthlyTotalReport.tsx | 8 +- .../FourteenMonthReport.test.tsx | 2 +- .../PartnerGivingAnalysisReport.test.tsx | 2 +- .../PartnerGivingAnalysisReport.tsx | 8 +- .../ResponsibilityCentersReport.tsx | 8 +- .../notifications/NotificationsTable.tsx | 289 +++++++++++ .../Settings/preferences/info/ProfileInfo.tsx | 7 +- .../MultiPageLayout/MultiPageHeader.test.tsx} | 13 +- .../MultiPageLayout/MultiPageHeader.tsx | 100 ++++ .../MultiPageMenu}/Item/Item.stories.tsx | 5 +- .../MultiPageMenu}/Item/Item.test.tsx | 3 +- .../MultiPageMenu}/Item/Item.tsx | 13 +- .../MultiPageMenu/MultiPageMenu.stories.tsx} | 5 +- .../MultiPageMenu/MultiPageMenu.test.tsx} | 15 +- .../MultiPageMenu/MultiPageMenu.tsx} | 51 +- .../MultiPageMenu/MultiPageMenuItems.ts} | 23 + src/lib/helpScout.ts | 7 + 37 files changed, 932 insertions(+), 894 deletions(-) create mode 100644 pages/accountLists/[accountListId]/settings/notifications.page.tsx create mode 100644 src/components/Contacts/ContactDetails/ContactDetailsTab/People/Items/PersonModal/personModalHelper.tsx delete mode 100644 src/components/Modals/ProfileModal/ProfileModal.tsx delete mode 100644 src/components/Reports/AccountsListLayout/Header/Header.tsx create mode 100644 src/components/Settings/notifications/NotificationsTable.tsx rename src/components/{Reports/AccountsListLayout/Header/Header.test.tsx => Shared/MultiPageLayout/MultiPageHeader.test.tsx} (75%) create mode 100644 src/components/Shared/MultiPageLayout/MultiPageHeader.tsx rename src/components/{Reports/NavReportsList => Shared/MultiPageLayout/MultiPageMenu}/Item/Item.stories.tsx (64%) rename src/components/{Reports/NavReportsList => Shared/MultiPageLayout/MultiPageMenu}/Item/Item.test.tsx (80%) rename src/components/{Reports/NavReportsList => Shared/MultiPageLayout/MultiPageMenu}/Item/Item.tsx (78%) rename src/components/{Reports/NavReportsList/NavReportsList.stories.tsx => Shared/MultiPageLayout/MultiPageMenu/MultiPageMenu.stories.tsx} (75%) rename src/components/{Reports/NavReportsList/NavReportsList.test.tsx => Shared/MultiPageLayout/MultiPageMenu/MultiPageMenu.test.tsx} (90%) rename src/components/{Reports/NavReportsList/NavReportsList.tsx => Shared/MultiPageLayout/MultiPageMenu/MultiPageMenu.tsx} (64%) rename src/components/{Reports/NavReportsList/ReportNavItems.ts => Shared/MultiPageLayout/MultiPageMenu/MultiPageMenuItems.ts} (65%) diff --git a/.husky/pre-commit b/.husky/pre-commit index d6c13ede5..d2ae35e84 100755 --- a/.husky/pre-commit +++ b/.husky/pre-commit @@ -1,4 +1,4 @@ #!/bin/sh . "$(dirname "$0")/_/husky.sh" -#yarn lint-staged +yarn lint-staged diff --git a/.husky/pre-push b/.husky/pre-push index fb701cd46..ca39cd3dc 100755 --- a/.husky/pre-push +++ b/.husky/pre-push @@ -1,4 +1,4 @@ #!/bin/sh . "$(dirname "$0")/_/husky.sh" -#yarn lint:ts +yarn lint:ts diff --git a/pages/accountLists/[accountListId]/reports/designationAccounts.page.tsx b/pages/accountLists/[accountListId]/reports/designationAccounts.page.tsx index 008bffea4..511a76e77 100644 --- a/pages/accountLists/[accountListId]/reports/designationAccounts.page.tsx +++ b/pages/accountLists/[accountListId]/reports/designationAccounts.page.tsx @@ -8,7 +8,11 @@ import Loading from 'src/components/Loading'; import { SidePanelsLayout } from 'src/components/Layouts/SidePanelsLayout'; import { useAccountListId } from 'src/hooks/useAccountListId'; import useGetAppSettings from 'src/hooks/useGetAppSettings'; -import { NavReportsList } from 'src/components/Reports/NavReportsList/NavReportsList'; +import { + MultiPageMenu, + NavTypeEnum, +} from 'src/components/Shared/MultiPageLayout/MultiPageMenu/MultiPageMenu'; + import { suggestArticles } from 'src/lib/helpScout'; const DesignationAccountsReportPageWrapper = styled(Box)(({ theme }) => ({ @@ -42,12 +46,13 @@ const DesignationAccountsReportPage: React.FC = () => { } leftOpen={isNavListOpen} diff --git a/pages/accountLists/[accountListId]/reports/donations/[[...contactId]].page.tsx b/pages/accountLists/[accountListId]/reports/donations/[[...contactId]].page.tsx index 71e863f2b..91a2cf3cc 100644 --- a/pages/accountLists/[accountListId]/reports/donations/[[...contactId]].page.tsx +++ b/pages/accountLists/[accountListId]/reports/donations/[[...contactId]].page.tsx @@ -9,11 +9,14 @@ import Loading from 'src/components/Loading'; import { SidePanelsLayout } from 'src/components/Layouts/SidePanelsLayout'; import { useAccountListId } from 'src/hooks/useAccountListId'; import useGetAppSettings from 'src/hooks/useGetAppSettings'; -import { NavReportsList } from 'src/components/Reports/NavReportsList/NavReportsList'; import { getQueryParam } from 'src/utils/queryParam'; import { ContactsPage } from '../../contacts/ContactsPage'; import { ContactsRightPanel } from 'src/components/Contacts/ContactsRightPanel/ContactsRightPanel'; import { suggestArticles } from 'src/lib/helpScout'; +import { + MultiPageMenu, + NavTypeEnum, +} from 'src/components/Shared/MultiPageLayout/MultiPageMenu/MultiPageMenu'; const DonationsReportPageWrapper = styled(Box)(({ theme }) => ({ backgroundColor: theme.palette.common.white, @@ -55,12 +58,13 @@ const DonationsReportPage: React.FC = () => { } leftOpen={isNavListOpen} diff --git a/pages/accountLists/[accountListId]/reports/expectedMonthlyTotal.page.tsx b/pages/accountLists/[accountListId]/reports/expectedMonthlyTotal.page.tsx index f55bfc603..9764d1ac1 100644 --- a/pages/accountLists/[accountListId]/reports/expectedMonthlyTotal.page.tsx +++ b/pages/accountLists/[accountListId]/reports/expectedMonthlyTotal.page.tsx @@ -10,7 +10,10 @@ import useGetAppSettings from 'src/hooks/useGetAppSettings'; import { ExpectedMonthlyTotalReport } from '../../../../src/components/Reports/ExpectedMonthlyTotalReport/ExpectedMonthlyTotalReport'; import { suggestArticles } from 'src/lib/helpScout'; import { SidePanelsLayout } from 'src/components/Layouts/SidePanelsLayout'; -import { NavReportsList } from 'src/components/Reports/NavReportsList/NavReportsList'; +import { + MultiPageMenu, + NavTypeEnum, +} from 'src/components/Shared/MultiPageLayout/MultiPageMenu/MultiPageMenu'; const ExpectedMonthlyTotalReportPageWrapper = styled(Box)(({ theme }) => ({ backgroundColor: theme.palette.common.white, @@ -43,12 +46,13 @@ const ExpectedMonthlyTotalReportPage = (): ReactElement => { } leftOpen={isNavListOpen} diff --git a/pages/accountLists/[accountListId]/reports/partnerCurrency/[[...contactId]].page.tsx b/pages/accountLists/[accountListId]/reports/partnerCurrency/[[...contactId]].page.tsx index 63c6206e9..84f7142a4 100644 --- a/pages/accountLists/[accountListId]/reports/partnerCurrency/[[...contactId]].page.tsx +++ b/pages/accountLists/[accountListId]/reports/partnerCurrency/[[...contactId]].page.tsx @@ -10,7 +10,10 @@ import Loading from 'src/components/Loading'; import { SidePanelsLayout } from 'src/components/Layouts/SidePanelsLayout'; import { useAccountListId } from 'src/hooks/useAccountListId'; import useGetAppSettings from 'src/hooks/useGetAppSettings'; -import { NavReportsList } from 'src/components/Reports/NavReportsList/NavReportsList'; +import { + MultiPageMenu, + NavTypeEnum, +} from 'src/components/Shared/MultiPageLayout/MultiPageMenu/MultiPageMenu'; import { suggestArticles } from 'src/lib/helpScout'; import { getQueryParam } from 'src/utils/queryParam'; import { ContactsRightPanel } from 'src/components/Contacts/ContactsRightPanel/ContactsRightPanel'; @@ -55,12 +58,13 @@ const PartnerCurrencyReportPage: React.FC = () => { } leftOpen={isNavListOpen} diff --git a/pages/accountLists/[accountListId]/reports/responsibilityCenters.page.tsx b/pages/accountLists/[accountListId]/reports/responsibilityCenters.page.tsx index cdf15802d..d2a3ee598 100644 --- a/pages/accountLists/[accountListId]/reports/responsibilityCenters.page.tsx +++ b/pages/accountLists/[accountListId]/reports/responsibilityCenters.page.tsx @@ -8,7 +8,10 @@ import Loading from 'src/components/Loading'; import { SidePanelsLayout } from 'src/components/Layouts/SidePanelsLayout'; import { useAccountListId } from 'src/hooks/useAccountListId'; import useGetAppSettings from 'src/hooks/useGetAppSettings'; -import { NavReportsList } from 'src/components/Reports/NavReportsList/NavReportsList'; +import { + MultiPageMenu, + NavTypeEnum, +} from 'src/components/Shared/MultiPageLayout/MultiPageMenu/MultiPageMenu'; import { suggestArticles } from 'src/lib/helpScout'; const ResponsibilityCentersReportPageWrapper = styled(Box)(({ theme }) => ({ @@ -42,12 +45,13 @@ const ResponsibilityCentersReportPage: React.FC = () => { } leftOpen={isNavListOpen} diff --git a/pages/accountLists/[accountListId]/reports/salaryCurrency/[[...contactId]].page.tsx b/pages/accountLists/[accountListId]/reports/salaryCurrency/[[...contactId]].page.tsx index 321ff5d99..0e4c5a907 100644 --- a/pages/accountLists/[accountListId]/reports/salaryCurrency/[[...contactId]].page.tsx +++ b/pages/accountLists/[accountListId]/reports/salaryCurrency/[[...contactId]].page.tsx @@ -10,7 +10,10 @@ import Loading from 'src/components/Loading'; import { SidePanelsLayout } from 'src/components/Layouts/SidePanelsLayout'; import { useAccountListId } from 'src/hooks/useAccountListId'; import useGetAppSettings from 'src/hooks/useGetAppSettings'; -import { NavReportsList } from 'src/components/Reports/NavReportsList/NavReportsList'; +import { + MultiPageMenu, + NavTypeEnum, +} from 'src/components/Shared/MultiPageLayout/MultiPageMenu/MultiPageMenu'; import { suggestArticles } from 'src/lib/helpScout'; import { getQueryParam } from 'src/utils/queryParam'; import { ContactsRightPanel } from 'src/components/Contacts/ContactsRightPanel/ContactsRightPanel'; @@ -55,12 +58,13 @@ const SalaryCurrencyReportPage: React.FC = () => { } leftOpen={isNavListOpen} diff --git a/pages/accountLists/[accountListId]/settings/notifications.page.tsx b/pages/accountLists/[accountListId]/settings/notifications.page.tsx new file mode 100644 index 000000000..3d1ee7b12 --- /dev/null +++ b/pages/accountLists/[accountListId]/settings/notifications.page.tsx @@ -0,0 +1,41 @@ +import React, { useEffect } from 'react'; +import { useTranslation } from 'react-i18next'; +import { Box } from '@mui/material'; +import { SettingsWrapper } from './wrapper'; +import { suggestArticles } from 'src/lib/helpScout'; +import { NotificationsTable } from 'src/components/Settings/notifications/NotificationsTable'; + +const Preferences: React.FC = () => { + const { t } = useTranslation(); + + useEffect(() => { + suggestArticles('HS_SETTINGS_PREFERENCES_SUGGESTIONS'); + }, []); + + return ( + + +

+ Based on an analysis of a partner's giving history, MPDX can + notify you of events that you will probably want to follow up on. The + detection logic is based on a set of rules that are right most of the + time, but you will still want to verify an event manually before + contacting the partner. +

+ + +

+ For each event MPDX can notify you via email and also create a task + entry reminding you to do something about it. The options below allow + you to control that behavior. +

+ + + + ); +}; + +export default Preferences; diff --git a/pages/accountLists/[accountListId]/settings/preferences.page.tsx b/pages/accountLists/[accountListId]/settings/preferences.page.tsx index f6217ca0c..66df52f14 100644 --- a/pages/accountLists/[accountListId]/settings/preferences.page.tsx +++ b/pages/accountLists/[accountListId]/settings/preferences.page.tsx @@ -1,7 +1,6 @@ -import React, { useState } from 'react'; +import React, { useState, useEffect } from 'react'; import { useTranslation } from 'react-i18next'; import { - //Box, Checkbox, FormControlLabel, MenuItem, @@ -9,7 +8,6 @@ import { TextField, InputAdornment, } from '@mui/material'; -//import { styled } from '@mui/material/styles'; import { SettingsWrapper } from './wrapper'; import { ProfileInfo } from '../../../../src/components/Settings/preferences/info/ProfileInfo'; import { PreferencesGroup } from '../../../../src/components/Settings/preferences/accordions/PreferencesGroup'; @@ -31,6 +29,7 @@ import { useAccountListId } from 'src/hooks/useAccountListId'; import { MobileDatePicker } from '@mui/x-date-pickers'; import CalendarToday from '@mui/icons-material/CalendarToday'; import { getDateFormatPattern } from 'src/lib/intlFormat/intlFormat'; +import { suggestArticles } from 'src/lib/helpScout'; import { useLocale } from 'src/hooks/useLocale'; @@ -40,6 +39,10 @@ const Preferences: React.FC = () => { const locale = useLocale(); const accountListId = useAccountListId() ?? ''; + useEffect(() => { + suggestArticles('HS_SETTINGS_PREFERENCES_SUGGESTIONS'); + }, []); + const handleAccordionChange = (panel: string) => { setExpandedPanel(expandedPanel === panel ? '' : panel); }; diff --git a/pages/accountLists/[accountListId]/settings/wrapper.tsx b/pages/accountLists/[accountListId]/settings/wrapper.tsx index 7f2b04d8e..558503ac6 100644 --- a/pages/accountLists/[accountListId]/settings/wrapper.tsx +++ b/pages/accountLists/[accountListId]/settings/wrapper.tsx @@ -1,15 +1,17 @@ -import { Box, Container, Typography } from '@mui/material'; +import { Box, Container } from '@mui/material'; import { styled } from '@mui/material/styles'; -import React from 'react'; +import React, { useState } from 'react'; import Head from 'next/head'; import useGetAppSettings from 'src/hooks/useGetAppSettings'; - -const PageHeadingWrapper = styled(Box)(({ theme }) => ({ - color: theme.palette.common.white, - backgroundColor: theme.palette.primary.main, - paddingTop: theme.spacing(3), - paddingBottom: theme.spacing(3), -})); +import { SidePanelsLayout } from 'src/components/Layouts/SidePanelsLayout'; +import { + MultiPageMenu, + NavTypeEnum, +} from 'src/components/Shared/MultiPageLayout/MultiPageMenu/MultiPageMenu'; +import { + MultiPageHeader, + HeaderTypeEnum, +} from 'src/components/Shared/MultiPageLayout/MultiPageHeader'; const PageContentWrapper = styled(Container)(({ theme }) => ({ paddingTop: theme.spacing(3), @@ -28,6 +30,11 @@ export const SettingsWrapper: React.FC = ({ children, }) => { const { appName } = useGetAppSettings(); + const [isNavListOpen, setNavListOpen] = useState(false); + const handleNavListToggle = () => { + setNavListOpen(!isNavListOpen); + }; + return ( <> @@ -36,12 +43,31 @@ export const SettingsWrapper: React.FC = ({ - - - {pageHeading} - - - {children} + + } + leftOpen={isNavListOpen} + leftWidth="290px" + mainContent={ + <> + + {children} + + } + /> ); diff --git a/src/components/Contacts/ContactDetails/ContactDetailContext.tsx b/src/components/Contacts/ContactDetails/ContactDetailContext.tsx index 6e5a05455..d8c3bb452 100644 --- a/src/components/Contacts/ContactDetails/ContactDetailContext.tsx +++ b/src/components/Contacts/ContactDetails/ContactDetailContext.tsx @@ -20,10 +20,6 @@ export type ContactDetailsType = { setEditingAddressId: React.Dispatch>; addAddressModalOpen: boolean; setAddAddressModalOpen: React.Dispatch>; - personEditShowMore: boolean; - setPersonEditShowMore: React.Dispatch>; - removeDialogOpen: boolean; - handleRemoveDialogOpen: React.Dispatch>; editPersonModalOpen: string | undefined; setEditPersonModalOpen: React.Dispatch< React.SetStateAction @@ -72,9 +68,6 @@ export const ContactDetailProvider: React.FC = ({ children }) => { setSelectedTabKey(newKey); }; - const [personEditShowMore, setPersonEditShowMore] = useState(false); - const [removeDialogOpen, handleRemoveDialogOpen] = useState(false); - const [editPersonModalOpen, setEditPersonModalOpen] = useState(); const [createPersonModalOpen, setCreatePersonModalOpen] = useState(false); @@ -105,10 +98,6 @@ export const ContactDetailProvider: React.FC = ({ children }) => { selectedTabKey: selectedTabKey, setSelectedTabKey: setSelectedTabKey, handleTabChange: handleTabChange, - personEditShowMore: personEditShowMore, - setPersonEditShowMore: setPersonEditShowMore, - removeDialogOpen: removeDialogOpen, - handleRemoveDialogOpen: handleRemoveDialogOpen, editPersonModalOpen: editPersonModalOpen, setEditPersonModalOpen: setEditPersonModalOpen, createPersonModalOpen: createPersonModalOpen, diff --git a/src/components/Contacts/ContactDetails/ContactDetailsTab/People/Items/PersonModal/PersonModal.tsx b/src/components/Contacts/ContactDetails/ContactDetailsTab/People/Items/PersonModal/PersonModal.tsx index 8c397cd1d..e6cee7f59 100644 --- a/src/components/Contacts/ContactDetails/ContactDetailsTab/People/Items/PersonModal/PersonModal.tsx +++ b/src/components/Contacts/ContactDetails/ContactDetailsTab/People/Items/PersonModal/PersonModal.tsx @@ -13,7 +13,6 @@ import { styled } from '@mui/material/styles'; import { useTranslation } from 'react-i18next'; import { useApolloClient } from '@apollo/client'; import { Formik } from 'formik'; -import * as yup from 'yup'; import { useSnackbar } from 'notistack'; import _ from 'lodash'; import { @@ -36,23 +35,18 @@ import { useDeletePersonMutation, useUpdatePersonMutation, } from './PersonModal.generated'; -import { - ContactDetailContext, - ContactDetailsType, -} from 'src/components/Contacts/ContactDetails/ContactDetailContext'; import { SubmitButton, CancelButton, DeleteButton, } from 'src/components/common/Modal/ActionButtons/ActionButtons'; import { uploadAvatar, validateAvatar } from './uploadAvatar'; +import { getPersonSchema, formatSubmittedFields } from './personModalHelper'; +import { profile2 } from 'src/components/Settings/preferences/DemoContent'; export const ContactInputField = styled(TextField, { shouldForwardProp: (prop) => prop !== 'destroyed', })(({ destroyed }: { destroyed: boolean }) => ({ - // '&& > label': { - // textTransform: 'uppercase', - // }, textDecoration: destroyed ? 'line-through' : 'none', })); @@ -94,6 +88,7 @@ interface PersonModalProps { contactId: string; accountListId: string; handleClose: () => void; + userProfile?: boolean; } export interface NewSocial { @@ -109,18 +104,20 @@ export const PersonModal: React.FC = ({ contactId, accountListId, handleClose, + userProfile = false, }) => { const { t } = useTranslation(); const { enqueueSnackbar } = useSnackbar(); - const { - personEditShowMore, - setPersonEditShowMore, - removeDialogOpen, - handleRemoveDialogOpen, - } = React.useContext(ContactDetailContext) as ContactDetailsType; + const [personEditShowMore, setPersonEditShowMore] = useState(false); + const [removeDialogOpen, handleRemoveDialogOpen] = useState(false); const client = useApolloClient(); + // TODO + if (userProfile) + person = + profile2 as ContactDetailsTabQuery['contact']['people']['nodes'][0]; + const [avatar, setAvatar] = useState<{ file: File; blobUrl: string } | null>( null, ); @@ -150,84 +147,10 @@ export const PersonModal: React.FC = ({ const [updatePerson] = useUpdatePersonMutation(); const [createPerson] = useCreatePersonMutation(); const [deletePerson, { loading: deleting }] = useDeletePersonMutation(); + // TODO + // const [updateUserProfile] = useCreatePersonMutation(); - const personSchema: yup.SchemaOf< - Omit - > = yup.object({ - firstName: yup.string().required(), - lastName: yup.string().nullable(), - title: yup.string().nullable(), - suffix: yup.string().nullable(), - phoneNumbers: yup.array().of( - yup.object({ - id: yup.string().nullable(), - number: yup.string().required(t('This field is required')), - destroy: yup.boolean().default(false), - primary: yup.boolean().default(false), - historic: yup.boolean().default(false), - }), - ), - emailAddresses: yup.array().of( - yup.object({ - id: yup.string().nullable(), - email: yup - .string() - .email(t('Invalid email address')) - .required(t('This field is required')), - destroy: yup.boolean().default(false), - primary: yup.boolean().default(false), - historic: yup.boolean().default(false), - }), - ), - facebookAccounts: yup.array().of( - yup.object({ - id: yup.string().nullable(), - destroy: yup.boolean().default(false), - username: yup.string().required(), - }), - ), - linkedinAccounts: yup.array().of( - yup.object({ - id: yup.string().nullable(), - destroy: yup.boolean().default(false), - publicUrl: yup.string().required(), - }), - ), - twitterAccounts: yup.array().of( - yup.object({ - id: yup.string().nullable(), - destroy: yup.boolean().default(false), - screenName: yup.string().required(), - }), - ), - websites: yup.array().of( - yup.object({ - id: yup.string().nullable(), - destroy: yup.boolean().default(false), - url: yup.string().required(), - }), - ), - newSocials: yup.array().of( - yup.object({ - value: yup.string().required(), - type: yup.string().required(), - }), - ), - optoutEnewsletter: yup.boolean().default(false), - birthdayDay: yup.number().nullable(), - birthdayMonth: yup.number().nullable(), - birthdayYear: yup.number().nullable(), - maritalStatus: yup.string().nullable(), - gender: yup.string().nullable(), - anniversaryDay: yup.number().nullable(), - anniversaryMonth: yup.number().nullable(), - anniversaryYear: yup.number().nullable(), - almaMater: yup.string().nullable(), - employer: yup.string().nullable(), - occupation: yup.string().nullable(), - legalFirstName: yup.string().nullable(), - deceased: yup.boolean().default(false), - }); + const { personSchema, initialPerson } = getPersonSchema(t, contactId, person); const personPhoneNumberSources = person?.phoneNumbers.nodes.map( (phoneNumber) => { @@ -247,153 +170,10 @@ export const PersonModal: React.FC = ({ }, ); - const personPhoneNumbers = person?.phoneNumbers.nodes.map((phoneNumber) => { - return { - id: phoneNumber.id, - primary: phoneNumber.primary, - number: phoneNumber.number, - historic: phoneNumber.historic, - location: phoneNumber.location, - destroy: false, - }; - }); - - const personEmails = person?.emailAddresses.nodes.map((emailAddress) => { - return { - id: emailAddress.id, - primary: emailAddress.primary, - email: emailAddress.email, - historic: emailAddress.historic, - location: emailAddress.location, - destroy: false, - }; - }); - - const personFacebookAccounts = person?.facebookAccounts.nodes.map( - (account) => ({ - id: account.id, - username: account.username, - destroy: false, - }), - ); - - const personTwitterAccounts = person?.twitterAccounts.nodes.map( - (account) => ({ - id: account.id, - screenName: account.screenName, - destroy: false, - }), - ); - - const personLinkedinAccounts = person?.linkedinAccounts.nodes.map( - (account) => ({ - id: account.id, - publicUrl: account.publicUrl, - destroy: false, - }), - ); - - const personWebsites = person?.websites.nodes.map((account) => ({ - id: account.id, - url: account.url, - destroy: false, - })); - - const initialPerson: (PersonCreateInput | PersonUpdateInput) & NewSocial = - person - ? { - id: person.id, - firstName: person.firstName, - lastName: person.lastName, - title: person.title, - suffix: person.suffix, - phoneNumbers: personPhoneNumbers, - emailAddresses: personEmails, - optoutEnewsletter: person.optoutEnewsletter, - birthdayDay: person.birthdayDay, - birthdayMonth: person.birthdayMonth, - birthdayYear: person.birthdayYear, - maritalStatus: person.maritalStatus, - gender: person.gender, - anniversaryDay: person.anniversaryDay, - anniversaryMonth: person.anniversaryMonth, - anniversaryYear: person.anniversaryYear, - almaMater: person.almaMater, - employer: person.employer, - occupation: person.occupation, - facebookAccounts: personFacebookAccounts, - twitterAccounts: personTwitterAccounts, - linkedinAccounts: personLinkedinAccounts, - websites: personWebsites, - legalFirstName: person.legalFirstName, - deceased: person.deceased, - newSocials: [], - } - : { - contactId, - id: null, - firstName: '', - lastName: null, - title: null, - suffix: null, - phoneNumbers: [], - emailAddresses: [], - optoutEnewsletter: false, - birthdayDay: null, - birthdayMonth: null, - birthdayYear: null, - maritalStatus: null, - gender: 'Male', - anniversaryDay: null, - anniversaryMonth: null, - anniversaryYear: null, - almaMater: null, - employer: null, - occupation: null, - facebookAccounts: [], - twitterAccounts: [], - linkedinAccounts: [], - websites: [], - legalFirstName: null, - deceased: false, - newSocials: [], - }; - const onSubmit = async ( fields: (PersonCreateInput | PersonUpdateInput) & NewSocial, ): Promise => { - const { newSocials, ...existingSocials } = fields; - const attributes: PersonCreateInput | PersonUpdateInput = { - ...existingSocials, - facebookAccounts: fields.facebookAccounts?.concat( - newSocials - .filter((social) => social.type === 'facebook' && !social.destroy) - .map((social) => ({ - username: social.value, - })), - ), - twitterAccounts: fields.twitterAccounts?.concat( - newSocials - .filter((social) => social.type === 'twitter' && !social.destroy) - .map((social) => ({ - screenName: social.value, - })), - ), - linkedinAccounts: fields.linkedinAccounts?.concat( - newSocials - .filter((social) => social.type === 'linkedin' && !social.destroy) - .map((social) => ({ - publicUrl: social.value, - })), - ), - websites: fields.websites?.concat( - newSocials - .filter((social) => social.type === 'website' && !social.destroy) - .map((social) => ({ - url: social.value, - })), - ), - }; + const attributes = formatSubmittedFields(fields); const isUpdate = ( attributes: PersonCreateInput | PersonUpdateInput, @@ -501,7 +281,13 @@ export const PersonModal: React.FC = ({ return ( @@ -534,6 +320,7 @@ export const PersonModal: React.FC = ({ {/* Birthday Section */} @@ -567,7 +354,7 @@ export const PersonModal: React.FC = ({ - {person && ( + {person && !userProfile && ( handleRemoveDialogOpen(true)} /> )} diff --git a/src/components/Contacts/ContactDetails/ContactDetailsTab/People/Items/PersonModal/personModalHelper.tsx b/src/components/Contacts/ContactDetails/ContactDetailsTab/People/Items/PersonModal/personModalHelper.tsx new file mode 100644 index 000000000..032657ff8 --- /dev/null +++ b/src/components/Contacts/ContactDetails/ContactDetailsTab/People/Items/PersonModal/personModalHelper.tsx @@ -0,0 +1,252 @@ +import * as yup from 'yup'; +import { + PersonUpdateInput, + PersonCreateInput, +} from '../../../../../../../../graphql/types.generated'; +import { TFunction } from 'react-i18next'; +import { ContactDetailsTabQuery } from '../../../ContactDetailsTab.generated'; +import { NewSocial } from './PersonModal'; + +interface getPersonSchemaReturnedValues { + personSchema: yup.SchemaOf< + Omit + >; + initialPerson: (PersonCreateInput | PersonUpdateInput) & NewSocial; +} + +export const getPersonSchema = ( + t: TFunction, + contactId: string, + person?: ContactDetailsTabQuery['contact']['people']['nodes'][0], +): getPersonSchemaReturnedValues => { + const personSchema = yup.object({ + firstName: yup.string().required(), + lastName: yup.string().nullable(), + title: yup.string().nullable(), + suffix: yup.string().nullable(), + phoneNumbers: yup.array().of( + yup.object({ + id: yup.string().nullable(), + number: yup.string().required(t('This field is required')), + destroy: yup.boolean().default(false), + primary: yup.boolean().default(false), + historic: yup.boolean().default(false), + }), + ), + emailAddresses: yup.array().of( + yup.object({ + id: yup.string().nullable(), + email: yup + .string() + .email(t('Invalid email address')) + .required(t('This field is required')), + destroy: yup.boolean().default(false), + primary: yup.boolean().default(false), + historic: yup.boolean().default(false), + }), + ), + facebookAccounts: yup.array().of( + yup.object({ + id: yup.string().nullable(), + destroy: yup.boolean().default(false), + username: yup.string().required(), + }), + ), + linkedinAccounts: yup.array().of( + yup.object({ + id: yup.string().nullable(), + destroy: yup.boolean().default(false), + publicUrl: yup.string().required(), + }), + ), + twitterAccounts: yup.array().of( + yup.object({ + id: yup.string().nullable(), + destroy: yup.boolean().default(false), + screenName: yup.string().required(), + }), + ), + websites: yup.array().of( + yup.object({ + id: yup.string().nullable(), + destroy: yup.boolean().default(false), + url: yup.string().required(), + }), + ), + newSocials: yup.array().of( + yup.object({ + value: yup.string().required(), + type: yup.string().required(), + }), + ), + optoutEnewsletter: yup.boolean().default(false), + birthdayDay: yup.number().nullable(), + birthdayMonth: yup.number().nullable(), + birthdayYear: yup.number().nullable(), + maritalStatus: yup.string().nullable(), + gender: yup.string().nullable(), + anniversaryDay: yup.number().nullable(), + anniversaryMonth: yup.number().nullable(), + anniversaryYear: yup.number().nullable(), + almaMater: yup.string().nullable(), + employer: yup.string().nullable(), + occupation: yup.string().nullable(), + legalFirstName: yup.string().nullable(), + deceased: yup.boolean().default(false), + }); + + const personPhoneNumbers = person?.phoneNumbers.nodes.map((phoneNumber) => { + return { + id: phoneNumber.id, + primary: phoneNumber.primary, + number: phoneNumber.number, + historic: phoneNumber.historic, + location: phoneNumber.location, + destroy: false, + }; + }); + + const personEmails = person?.emailAddresses.nodes.map((emailAddress) => { + return { + id: emailAddress.id, + primary: emailAddress.primary, + email: emailAddress.email, + historic: emailAddress.historic, + location: emailAddress.location, + destroy: false, + }; + }); + + const personFacebookAccounts = person?.facebookAccounts.nodes.map( + (account) => ({ + id: account.id, + username: account.username, + destroy: false, + }), + ); + + const personTwitterAccounts = person?.twitterAccounts.nodes.map( + (account) => ({ + id: account.id, + screenName: account.screenName, + destroy: false, + }), + ); + + const personLinkedinAccounts = person?.linkedinAccounts.nodes.map( + (account) => ({ + id: account.id, + publicUrl: account.publicUrl, + destroy: false, + }), + ); + + const personWebsites = person?.websites.nodes.map((account) => ({ + id: account.id, + url: account.url, + destroy: false, + })); + + const initialPerson: (PersonCreateInput | PersonUpdateInput) & NewSocial = + person + ? { + id: person.id, + firstName: person.firstName, + lastName: person.lastName, + title: person.title, + suffix: person.suffix, + phoneNumbers: personPhoneNumbers, + emailAddresses: personEmails, + optoutEnewsletter: person.optoutEnewsletter, + birthdayDay: person.birthdayDay, + birthdayMonth: person.birthdayMonth, + birthdayYear: person.birthdayYear, + maritalStatus: person.maritalStatus, + gender: person.gender, + anniversaryDay: person.anniversaryDay, + anniversaryMonth: person.anniversaryMonth, + anniversaryYear: person.anniversaryYear, + almaMater: person.almaMater, + employer: person.employer, + occupation: person.occupation, + facebookAccounts: personFacebookAccounts, + twitterAccounts: personTwitterAccounts, + linkedinAccounts: personLinkedinAccounts, + websites: personWebsites, + legalFirstName: person.legalFirstName, + deceased: person.deceased, + newSocials: [], + } + : { + contactId, + id: null, + firstName: '', + lastName: null, + title: null, + suffix: null, + phoneNumbers: [], + emailAddresses: [], + optoutEnewsletter: false, + birthdayDay: null, + birthdayMonth: null, + birthdayYear: null, + maritalStatus: null, + gender: 'Male', + anniversaryDay: null, + anniversaryMonth: null, + anniversaryYear: null, + almaMater: null, + employer: null, + occupation: null, + facebookAccounts: [], + twitterAccounts: [], + linkedinAccounts: [], + websites: [], + legalFirstName: null, + deceased: false, + newSocials: [], + }; + + return { + personSchema, + initialPerson, + }; +}; + +export const formatSubmittedFields = ( + fields: (PersonCreateInput | PersonUpdateInput) & NewSocial, +): PersonCreateInput | PersonUpdateInput => { + const { newSocials, ...existingFields } = fields; + + return { + ...existingFields, + facebookAccounts: fields.facebookAccounts?.concat( + newSocials + .filter((social) => social.type === 'facebook' && !social.destroy) + .map((social) => ({ + username: social.value, + })), + ), + twitterAccounts: fields.twitterAccounts?.concat( + newSocials + .filter((social) => social.type === 'twitter' && !social.destroy) + .map((social) => ({ + screenName: social.value, + })), + ), + linkedinAccounts: fields.linkedinAccounts?.concat( + newSocials + .filter((social) => social.type === 'linkedin' && !social.destroy) + .map((social) => ({ + publicUrl: social.value, + })), + ), + websites: fields.websites?.concat( + newSocials + .filter((social) => social.type === 'website' && !social.destroy) + .map((social) => ({ + url: social.value, + })), + ), + }; +}; diff --git a/src/components/Layouts/Primary/NavBar/NavBar.tsx b/src/components/Layouts/Primary/NavBar/NavBar.tsx index f75c2b2fd..ef02d02df 100644 --- a/src/components/Layouts/Primary/NavBar/NavBar.tsx +++ b/src/components/Layouts/Primary/NavBar/NavBar.tsx @@ -5,10 +5,8 @@ import { makeStyles } from 'tss-react/mui'; import { useRouter } from 'next/router'; import NextLink, { LinkProps } from 'next/link'; import { useTranslation } from 'react-i18next'; -import { - filteredReportNavItems, - toolsRedirectLinks, -} from '../TopBar/Items/NavMenu/NavMenu'; +import { toolsRedirectLinks } from '../TopBar/Items/NavMenu/NavMenu'; +import { ReportNavItems } from 'src/components/Shared/MultiPageLayout/MultiPageMenu/MultiPageMenuItems'; import { NavItem } from './NavItem/NavItem'; import { NavTools } from './NavTools/NavTools'; import { ToolsList } from 'src/components/Tool/Home/ToolList'; @@ -133,7 +131,7 @@ export const NavBar: FC = ({ onMobileClose, openMobile }) => { }, { title: t('Reports'), - items: filteredReportNavItems.map((item) => ({ + items: ReportNavItems.map((item) => ({ ...item, title: item.title, href: `/accountLists/${accountListId}/reports/${item.id}`, diff --git a/src/components/Layouts/Primary/TopBar/Items/NavMenu/NavMenu.tsx b/src/components/Layouts/Primary/TopBar/Items/NavMenu/NavMenu.tsx index 427877fd4..58ffced1d 100644 --- a/src/components/Layouts/Primary/TopBar/Items/NavMenu/NavMenu.tsx +++ b/src/components/Layouts/Primary/TopBar/Items/NavMenu/NavMenu.tsx @@ -18,7 +18,7 @@ import NextLink from 'next/link'; import { useTranslation } from 'react-i18next'; import Icon from '@mdi/react'; import { useRouter } from 'next/router'; -import { ReportNavItems } from '../../../../../Reports/NavReportsList/ReportNavItems'; +import { ReportNavItems } from 'src/components/Shared/MultiPageLayout/MultiPageMenu/MultiPageMenuItems'; import { ToolsList } from '../../../../../Tool/Home/ToolList'; import { useCurrentToolId } from '../../../../../../hooks/useCurrentToolId'; import theme from '../../../../../../theme'; @@ -27,8 +27,6 @@ import { useGetToolNotificationsQuery } from './GetToolNotifcations.generated'; import HandoffLink from 'src/components/HandoffLink'; import { ReportLink } from './ReportLink'; -export const filteredReportNavItems = ReportNavItems; - const useStyles = makeStyles()(() => ({ navListItem: { order: 2, @@ -252,7 +250,7 @@ const NavMenu: React.FC = () => { - {filteredReportNavItems.map(({ id, title }) => ( + {ReportNavItems.map(({ id, title }) => ( prop !== 'destroyed', -})(({ destroyed }: { destroyed: boolean }) => ({ - // '&& > label': { - // textTransform: 'uppercase', - // }, - textDecoration: destroyed ? 'line-through' : 'none', -})); - -export const PrimaryControlLabel = styled(FormControlLabel, { - shouldForwardProp: (prop) => prop !== 'destroyed', -})(({ destroyed }: { destroyed: boolean }) => ({ - textDecoration: destroyed ? 'line-through' : 'none', -})); - -const ContactPersonContainer = styled(Box)(({ theme }) => ({ - margin: theme.spacing(2, 0), -})); - -const ShowExtraContainer = styled(Box)(({ theme }) => ({ - display: 'flex', - justifyContent: 'center', - margin: theme.spacing(1, 0), -})); - -const ContactEditContainer = styled(Box)(({ theme }) => ({ - display: 'flex', - width: '100%', - flexDirection: 'column', - margin: theme.spacing(1, 0), -})); - -const ShowExtraText = styled(Typography)(({ theme }) => ({ - color: theme.palette.info.main, - textTransform: 'uppercase', - fontWeight: 'bold', -})); - -const LoadingIndicator = styled(CircularProgress)(({ theme }) => ({ - margin: theme.spacing(0, 1, 0, 0), -})); - -interface ProfileModalProps { - //person: ContactDetailsTabQuery['contact']['people']['nodes'][0]; - contactId?: string; - accountListId: string; - handleClose: () => void; -} - -export interface NewSocial { - newSocials: { - value: string; - type: 'facebook' | 'twitter' | 'linkedin' | 'website'; - destroy: boolean; - }[]; -} - -export const ProfileModal: React.FC = ({ - accountListId, - handleClose, -}) => { - const { t } = useTranslation(); - const { enqueueSnackbar } = useSnackbar(); - const [personEditShowMore, setPersonEditShowMore] = useState(false); - - const client = useApolloClient(); - const person = profile2; - const [createPerson] = useCreatePersonMutation(); - //const [deletePerson, { loading: deleting }] = useDeletePersonMutation(); - - const [avatar, setAvatar] = useState<{ file: File; blobUrl: string } | null>( - null, - ); - useEffect(() => { - return () => { - if (avatar) { - URL.revokeObjectURL(avatar.blobUrl); - } - }; - }, [avatar]); - const updateAvatar = (file: File) => { - const validationResult = validateAvatar({ file, t }); - if (!validationResult.success) { - enqueueSnackbar(validationResult.message, { - variant: 'error', - }); - return; - } - - if (avatar) { - // Release the previous avatar blob - URL.revokeObjectURL(avatar.blobUrl); - } - setAvatar({ file, blobUrl: URL.createObjectURL(file) }); - }; - - const [updatePerson] = useUpdatePersonMutation(); - - const personSchema: yup.SchemaOf< - Omit - > = yup.object({ - firstName: yup.string().required(), - lastName: yup.string().nullable(), - title: yup.string().nullable(), - suffix: yup.string().nullable(), - phoneNumbers: yup.array().of( - yup.object({ - id: yup.string().nullable(), - number: yup.string().required(t('This field is required')), - destroy: yup.boolean().default(false), - primary: yup.boolean().default(false), - historic: yup.boolean().default(false), - }), - ), - emailAddresses: yup.array().of( - yup.object({ - id: yup.string().nullable(), - email: yup - .string() - .email(t('Invalid email address')) - .required(t('This field is required')), - destroy: yup.boolean().default(false), - primary: yup.boolean().default(false), - historic: yup.boolean().default(false), - }), - ), - facebookAccounts: yup.array().of( - yup.object({ - id: yup.string().nullable(), - destroy: yup.boolean().default(false), - username: yup.string().required(), - }), - ), - linkedinAccounts: yup.array().of( - yup.object({ - id: yup.string().nullable(), - destroy: yup.boolean().default(false), - publicUrl: yup.string().required(), - }), - ), - twitterAccounts: yup.array().of( - yup.object({ - id: yup.string().nullable(), - destroy: yup.boolean().default(false), - screenName: yup.string().required(), - }), - ), - websites: yup.array().of( - yup.object({ - id: yup.string().nullable(), - destroy: yup.boolean().default(false), - url: yup.string().required(), - }), - ), - newSocials: yup.array().of( - yup.object({ - value: yup.string().required(), - type: yup.string().required(), - }), - ), - birthdayDay: yup.number().nullable(), - birthdayMonth: yup.number().nullable(), - birthdayYear: yup.number().nullable(), - maritalStatus: yup.string().nullable(), - gender: yup.string().nullable(), - anniversaryDay: yup.number().nullable(), - anniversaryMonth: yup.number().nullable(), - anniversaryYear: yup.number().nullable(), - almaMater: yup.string().nullable(), - employer: yup.string().nullable(), - occupation: yup.string().nullable(), - legalFirstName: yup.string().nullable(), - deceased: yup.boolean().nullable(), - optoutEnewsletter: yup.boolean().nullable(), - }); - - const personPhoneNumberSources = person?.phoneNumbers.nodes.map( - (phoneNumber) => { - return { - id: phoneNumber.id, - source: phoneNumber.source, - }; - }, - ); - - const personEmailAddressSources = person?.emailAddresses.nodes.map( - (emailAddress) => { - return { - id: emailAddress.id, - source: emailAddress.source, - }; - }, - ); - - const personPhoneNumbers = person?.phoneNumbers.nodes.map((phoneNumber) => { - return { - id: phoneNumber.id, - primary: phoneNumber.primary, - number: phoneNumber.number, - historic: phoneNumber.historic, - location: phoneNumber.location, - destroy: false, - }; - }); - - const personEmails = person?.emailAddresses.nodes.map((emailAddress) => { - return { - id: emailAddress.id, - primary: emailAddress.primary, - email: emailAddress.email, - historic: emailAddress.historic, - location: emailAddress.location, - destroy: false, - }; - }); - - const personFacebookAccounts = person?.facebookAccounts.nodes.map( - (account) => ({ - id: account.id, - username: account.username, - destroy: false, - }), - ); - - const personTwitterAccounts = person?.twitterAccounts.nodes.map( - (account) => ({ - id: account.id, - screenName: account.screenName, - destroy: false, - }), - ); - - const personLinkedinAccounts = person?.linkedinAccounts.nodes.map( - (account) => ({ - id: account.id, - publicUrl: account.publicUrl, - destroy: false, - }), - ); - - const personWebsites = person?.websites.nodes.map((account) => ({ - id: account.id, - url: account.url, - destroy: false, - })); - - const initialPerson: (PersonCreateInput | PersonUpdateInput) & NewSocial = { - id: person.id, - firstName: person.firstName, - lastName: person.lastName, - title: person.title, - suffix: person.suffix, - phoneNumbers: personPhoneNumbers, - emailAddresses: personEmails, - birthdayDay: person.birthdayDay, - birthdayMonth: person.birthdayMonth, - birthdayYear: person.birthdayYear, - maritalStatus: person.maritalStatus, - gender: person.gender, - anniversaryDay: person.anniversaryDay, - anniversaryMonth: person.anniversaryMonth, - anniversaryYear: person.anniversaryYear, - almaMater: person.almaMater, - employer: person.employer, - occupation: person.occupation, - facebookAccounts: personFacebookAccounts, - twitterAccounts: personTwitterAccounts, - linkedinAccounts: personLinkedinAccounts, - websites: personWebsites, - legalFirstName: person.legalFirstName, - newSocials: [], - }; - - const onSubmit = async ( - fields: (PersonCreateInput | PersonUpdateInput) & NewSocial, - ): Promise => { - const { newSocials, ...existingSocials } = fields; - const attributes: PersonCreateInput | PersonUpdateInput = { - ...existingSocials, - facebookAccounts: fields.facebookAccounts?.concat( - newSocials - .filter((social) => social.type === 'facebook' && !social.destroy) - .map((social) => ({ - username: social.value, - })), - ), - twitterAccounts: fields.twitterAccounts?.concat( - newSocials - .filter((social) => social.type === 'twitter' && !social.destroy) - .map((social) => ({ - screenName: social.value, - })), - ), - linkedinAccounts: fields.linkedinAccounts?.concat( - newSocials - .filter((social) => social.type === 'linkedin' && !social.destroy) - .map((social) => ({ - publicUrl: social.value, - })), - ), - websites: fields.websites?.concat( - newSocials - .filter((social) => social.type === 'website' && !social.destroy) - .map((social) => ({ - url: social.value, - })), - ), - }; - - const isUpdate = ( - attributes: PersonCreateInput | PersonUpdateInput, - ): attributes is PersonUpdateInput => !!person; - - if (isUpdate(attributes)) { - const file = avatar?.file; - if (file) { - try { - await uploadAvatar({ - personId: attributes.id, - file, - t, - }); - } catch (err) { - enqueueSnackbar( - err instanceof Error - ? err.message - : t('Avatar could not be uploaded'), - { - variant: 'error', - }, - ); - return; - } - } - - await updatePerson({ - variables: { - accountListId, - attributes, - }, - }); - - if (file) { - // Update the contact's avatar since it is based on the primary person's avatar - client.refetchQueries({ include: ['GetContactDetailsHeader'] }); - } - - enqueueSnackbar(t('Person updated successfully'), { - variant: 'success', - }); - } - handleClose(); - }; - - return ( - - - {(formikProps): ReactElement => ( -
- - - - {/* Name Section */} - - {/* Phone Number Section */} - - {/* Email Section */} - - {/* Birthday Section */} - - {/* Show More Section */} - {!personEditShowMore && ( - - - - )} - {/* Start Show More Content */} - {personEditShowMore ? ( - - ) : null} - {/* End Show More Content */} - - {/* Show Less Section */} - {personEditShowMore && ( - - - - )} - - - - - - - {formikProps.isSubmitting && ( - - )} - {t('Save')} - - -
- )} - - - ); -}; diff --git a/src/components/Reports/AccountsListLayout/Header/Header.tsx b/src/components/Reports/AccountsListLayout/Header/Header.tsx deleted file mode 100644 index 2c17e14cf..000000000 --- a/src/components/Reports/AccountsListLayout/Header/Header.tsx +++ /dev/null @@ -1,64 +0,0 @@ -import React, { FC, ReactNode } from 'react'; -import { useTranslation } from 'react-i18next'; -import { Box, IconButton, Typography } from '@mui/material'; -import { styled } from '@mui/material/styles'; -import theme from 'src/theme'; -import FilterList from '@mui/icons-material/FilterList'; - -interface AccountsListHeaderProps { - isNavListOpen: boolean; - onNavListToggle: () => void; - title: string; - rightExtra?: ReactNode; -} - -const StickyHeader = styled(Box)(({}) => ({ - position: 'sticky', - top: 0, - height: 96, -})); - -const NavListButton = styled(IconButton, { - shouldForwardProp: (prop) => prop !== 'panelOpen', -})(({ panelOpen }: { panelOpen: boolean }) => ({ - display: 'inline-block', - width: 48, - height: 48, - borderradius: 24, - margin: theme.spacing(1), - backgroundColor: panelOpen ? theme.palette.secondary.dark : 'transparent', -})); - -const NavListIcon = styled(FilterList)(({ theme }) => ({ - width: 24, - height: 24, - color: theme.palette.primary.dark, -})); - -export const AccountsListHeader: FC = ({ - title, - rightExtra, - isNavListOpen, - onNavListToggle, -}) => { - const { t } = useTranslation(); - - return ( - - - - - - - {title} - - {rightExtra} - - - ); -}; diff --git a/src/components/Reports/DesignationAccountsReport/DesignationAccountsReport.tsx b/src/components/Reports/DesignationAccountsReport/DesignationAccountsReport.tsx index b0ebaaaae..43efe182c 100644 --- a/src/components/Reports/DesignationAccountsReport/DesignationAccountsReport.tsx +++ b/src/components/Reports/DesignationAccountsReport/DesignationAccountsReport.tsx @@ -3,7 +3,10 @@ import { useTranslation } from 'react-i18next'; import { Box, CircularProgress, Divider, Typography } from '@mui/material'; import { styled } from '@mui/material/styles'; import { AccountsList as List } from '../AccountsListLayout/List/List'; -import { AccountsListHeader as Header } from '../AccountsListLayout/Header/Header'; +import { + MultiPageHeader, + HeaderTypeEnum, +} from 'src/components/Shared/MultiPageLayout/MultiPageHeader'; import type { Account } from '../AccountsListLayout/List/ListItem/ListItem'; import { useDesignationAccountsQuery } from './GetDesignationAccounts.generated'; import { useSetActiveDesignationAccountMutation } from './SetActiveDesignationAccount.generated'; @@ -85,11 +88,12 @@ export const DesignationAccountsReport: React.FC = ({ return ( -
{loading ? ( = ({ return ( -
= ({ return ( -
{ expect(queryByText(title)).toBeInTheDocument(); expect(getByTestId('FourteenMonthReport')).toBeInTheDocument(); - expect(queryByTestId('ReportNavList')).toBeNull(); + expect(queryByTestId('MultiPageMenu')).toBeNull(); }); it('filters report by designation account', async () => { diff --git a/src/components/Reports/PartnerGivingAnalysisReport/PartnerGivingAnalysisReport.test.tsx b/src/components/Reports/PartnerGivingAnalysisReport/PartnerGivingAnalysisReport.test.tsx index d341cb4d1..1a4393e97 100644 --- a/src/components/Reports/PartnerGivingAnalysisReport/PartnerGivingAnalysisReport.test.tsx +++ b/src/components/Reports/PartnerGivingAnalysisReport/PartnerGivingAnalysisReport.test.tsx @@ -150,7 +150,7 @@ describe('PartnerGivingAnalysisReport', () => { expect(queryByText(title)).toBeInTheDocument(); expect(getByTestId('PartnerGivingAnalysisReport')).toBeInTheDocument(); - expect(queryByTestId('ReportNavList')).toBeNull(); + expect(queryByTestId('MultiPageMenu')).toBeNull(); }); it('shows a placeholder when there are zero contacts', async () => { diff --git a/src/components/Reports/PartnerGivingAnalysisReport/PartnerGivingAnalysisReport.tsx b/src/components/Reports/PartnerGivingAnalysisReport/PartnerGivingAnalysisReport.tsx index f25518d9c..3224d2735 100644 --- a/src/components/Reports/PartnerGivingAnalysisReport/PartnerGivingAnalysisReport.tsx +++ b/src/components/Reports/PartnerGivingAnalysisReport/PartnerGivingAnalysisReport.tsx @@ -6,7 +6,10 @@ import React, { useState } from 'react'; import { Box, CircularProgress, TablePagination } from '@mui/material'; import { useTranslation } from 'react-i18next'; import { useDebouncedValue } from 'src/hooks/useDebounce'; -import { AccountsListHeader as Header } from '../AccountsListLayout/Header/Header'; +import { + MultiPageHeader, + HeaderTypeEnum, +} from 'src/components/Shared/MultiPageLayout/MultiPageHeader'; import type { Order } from '../Reports.type'; import { useGetPartnerGivingAnalysisReportQuery } from './PartnerGivingAnalysisReport.generated'; import { PartnerGivingAnalysisReportTable as Table } from './Table/Table'; @@ -123,10 +126,11 @@ export const PartnerGivingAnalysisReport: React.FC = ({ return ( -
= ({ return ( -
{loading ? ( diff --git a/src/components/Settings/notifications/NotificationsTable.tsx b/src/components/Settings/notifications/NotificationsTable.tsx new file mode 100644 index 000000000..535881d63 --- /dev/null +++ b/src/components/Settings/notifications/NotificationsTable.tsx @@ -0,0 +1,289 @@ +import React, { useState } from 'react'; +import { + Box, + Checkbox, + TableContainer, + Table, + TableCell, + TableHead, + TableRow, + TableBody, + Paper, + Button, +} from '@mui/material'; +import SmartphoneIcon from '@mui/icons-material/Smartphone'; +import EmailIcon from '@mui/icons-material/Email'; +import TaskIcon from '@mui/icons-material/Task'; +import { styled } from '@mui/material/styles'; +import { useTranslation } from 'react-i18next'; + +export enum notificationsEnum { + App = 'app', + Email = 'email', + Task = 'task', +} + +const StyledTableHeadCell = styled(TableCell)(({ theme }) => ({ + backgroundColor: theme.palette.primary.main, + color: theme.palette.common.white, +})); + +const StyledTableHeadSelectCell = styled(TableCell)(() => ({ + cursor: 'pointer', + fontSize: 14, + paddingTop: 8, + paddingBottom: 8, + top: 88, +})); + +const StyledTableCell = styled(TableCell)(() => ({ + fontSize: 14, + paddingTop: 8, + paddingBottom: 8, +})); + +const StyledTableRow = styled(TableRow)(({ theme }) => ({ + '&:nth-of-type(odd)': { + backgroundColor: theme.palette.action.hover, + }, + // hide last border + '&:last-child td, &:last-child th': { + border: 0, + }, +})); + +const StyledSmartphoneIcon = styled(SmartphoneIcon)(() => ({ + marginRight: '8px', +})); +const StyledEmailIcon = styled(EmailIcon)(() => ({ + marginRight: '6px', +})); +const StyledTaskIcon = styled(TaskIcon)(() => ({ + marginRight: '3px', +})); + +const SelectAllBox = styled(Box)(() => ({ + width: 120, + margin: '0 0 0 auto', +})); +export const NotificationsTable: React.FC = () => { + const { t } = useTranslation(); + const notificationsMockData = [ + { + title: 'Partner gave a Special Gift', + app: false, + email: false, + task: false, + }, + { + title: 'Partner missed a gift', + app: false, + email: false, + task: false, + }, + { + title: 'Partner started giving', + app: false, + email: false, + task: false, + }, + { + title: 'Partner gave a Special Gift', + app: false, + email: false, + task: false, + }, + { + title: 'Partner missed a gift', + app: false, + email: false, + task: false, + }, + { + title: 'Partner started giving', + app: false, + email: false, + task: false, + }, + { + title: 'Partner gave a Special Gift', + app: false, + email: false, + task: false, + }, + { + title: 'Partner missed a gift', + app: false, + email: false, + task: false, + }, + { + title: 'Partner started giving', + app: false, + email: false, + task: false, + }, + { + title: 'Partner gave a Special Gift', + app: false, + email: false, + task: false, + }, + { + title: 'Partner missed a gift', + app: false, + email: false, + task: false, + }, + { + title: 'Partner started giving', + app: false, + email: false, + task: false, + }, + ]; + + const [notifications, setNotifications] = useState(notificationsMockData); + const [appSelectAll, setAppSelectAll] = useState(false); + const [emailSelectAll, setEmailSelectAll] = useState(false); + const [taskSelectAll, setTaskSelectAll] = useState(false); + + const checkboxOnChange = (index, type) => { + const notificationsCopy = [...notifications]; + notificationsCopy[index][type] = !notificationsCopy[index][type]; + setNotifications(notificationsCopy); + }; + + const selectAll = (type, selectAll, setSelectAll) => { + setSelectAll(!selectAll); + const notificationsCopy = notifications.map((item) => { + item[type] = !selectAll; + return item; + }); + + setNotifications(notificationsCopy); + }; + + const handleSaveNotifications = () => { + // eslint-disable-next-line no-console + console.log('handleSaveNotifications'); + }; + + return ( + + + + + + + {t("Select the types of notifications you'd like to receive")} + + + + {t('In App')} + + + + {t('Email')} + + + + {t('Task')} + + + + + + selectAll( + notificationsEnum.App, + appSelectAll, + setAppSelectAll, + ) + } + > + + {appSelectAll ? t('select all') : t('deselect all')} + + + + selectAll( + notificationsEnum.Email, + emailSelectAll, + setEmailSelectAll, + ) + } + > + + {emailSelectAll ? t('select all') : t('deselect all')} + + + + selectAll( + notificationsEnum.Task, + taskSelectAll, + setTaskSelectAll, + ) + } + > + + {taskSelectAll ? t('select all') : t('deselect all')} + + + + + + {notifications.map((notification, idx) => ( + + + {notification.title} + + + + checkboxOnChange(idx, notificationsEnum.App) + } + /> + + + + checkboxOnChange(idx, notificationsEnum.Email) + } + /> + + + + checkboxOnChange(idx, notificationsEnum.Task) + } + /> + + + ))} + +
+ + + + + + ); +}; diff --git a/src/components/Settings/preferences/info/ProfileInfo.tsx b/src/components/Settings/preferences/info/ProfileInfo.tsx index 83157b95b..4372e18c4 100644 --- a/src/components/Settings/preferences/info/ProfileInfo.tsx +++ b/src/components/Settings/preferences/info/ProfileInfo.tsx @@ -15,7 +15,8 @@ import { profile2 } from '../DemoContent'; // import { PersPrefContactMethods } from './PreferencesContactMethods'; // import { PersPrefAnniversary } from './PreferencesAnniversary'; // import { PersPrefSocials } from './PreferencesSocials'; -import { ProfileModal } from 'src/components/Modals/ProfileModal/ProfileModal'; +import { PersonModal } from 'src/components/Contacts/ContactDetails/ContactDetailsTab/People/Items/PersonModal/PersonModal'; +// import { ProfileModal } from 'src/components/Modals/ProfileModal/ProfileModal'; import Email from '@mui/icons-material/Email'; import Phone from '@mui/icons-material/Phone'; //import { ContactDetailsTabQuery } from 'src/components/Contacts/ContactDetails/ContactDetailsTab/ContactDetailsTab.generated'; @@ -180,9 +181,11 @@ export const ProfileInfo: React.FC = ({ accountListId }) => { {/* Edit Info Modal */} {editProfileModalOpen ? ( - setEditProfileModalOpen(false)} + userProfile={true} + contactId="" /> ) : null} diff --git a/src/components/Reports/AccountsListLayout/Header/Header.test.tsx b/src/components/Shared/MultiPageLayout/MultiPageHeader.test.tsx similarity index 75% rename from src/components/Reports/AccountsListLayout/Header/Header.test.tsx rename to src/components/Shared/MultiPageLayout/MultiPageHeader.test.tsx index 8885184d1..0681c19ff 100644 --- a/src/components/Reports/AccountsListLayout/Header/Header.test.tsx +++ b/src/components/Shared/MultiPageLayout/MultiPageHeader.test.tsx @@ -1,23 +1,24 @@ import React from 'react'; -import { render } from '@testing-library/react'; +import { render, waitFor } from '@testing-library/react'; import { ThemeProvider } from '@mui/material/styles'; import userEvent from '@testing-library/user-event'; -import { AccountsListHeader as Header } from './Header'; +import { MultiPageHeader, HeaderTypeEnum } from './MultiPageHeader'; import theme from 'src/theme'; const totalBalance = 'CA111'; const title = 'test title'; const onNavListToggle = jest.fn(); -describe('AccountsListHeader', () => { +describe('MultiPageHeader', () => { it('default', async () => { const { getByRole, getByText } = render( -
, ); @@ -27,16 +28,18 @@ describe('AccountsListHeader', () => { userEvent.click( getByRole('button', { hidden: true, name: 'Toggle Filter Panel' }), ); + await waitFor(() => expect(onNavListToggle).toHaveBeenCalled()); }); it('should not render rightExtra if undefined', async () => { const { queryByText } = render( -
, ); diff --git a/src/components/Shared/MultiPageLayout/MultiPageHeader.tsx b/src/components/Shared/MultiPageLayout/MultiPageHeader.tsx new file mode 100644 index 000000000..90e5f2a09 --- /dev/null +++ b/src/components/Shared/MultiPageLayout/MultiPageHeader.tsx @@ -0,0 +1,100 @@ +import React, { FC, ReactNode } from 'react'; +import { useTranslation } from 'react-i18next'; +import { Box, IconButton, Typography } from '@mui/material'; +import { styled } from '@mui/material/styles'; +import FilterList from '@mui/icons-material/FilterList'; +import MenuIcon from '@mui/icons-material/Menu'; +import theme from 'src/theme'; + +export enum HeaderTypeEnum { + Report = 'reports', + Settings = 'settings', +} + +interface MultiPageHeaderProps { + isNavListOpen: boolean; + onNavListToggle: () => void; + title: string; + headerType: HeaderTypeEnum; + rightExtra?: ReactNode; +} + +const StickyHeader = styled(Box, { + shouldForwardProp: (prop) => prop !== 'headerType', +})(({ headerType }: { headerType: HeaderTypeEnum }) => ({ + position: 'sticky', + top: 0, + height: 96, + color: + headerType === HeaderTypeEnum.Settings ? theme.palette.common.white : '', + backgroundColor: + headerType === HeaderTypeEnum.Settings ? theme.palette.primary.main : '', + paddingTop: headerType === HeaderTypeEnum.Settings ? theme.spacing(3) : '', + paddingBottom: headerType === HeaderTypeEnum.Settings ? theme.spacing(3) : '', +})); + +const NavListButton = styled(IconButton, { + shouldForwardProp: (prop) => prop !== 'panelOpen', +})(({ panelOpen }: { panelOpen: boolean }) => ({ + display: 'inline-block', + width: 48, + height: 48, + borderradius: 24, + margin: theme.spacing(0), + backgroundColor: panelOpen ? theme.palette.secondary.dark : 'transparent', + marginRight: '8px', + padding: '11px', +})); + +const NavFilterIcon = styled(FilterList)(() => ({ + width: 24, + height: 24, + color: theme.palette.primary.dark, +})); + +const NavMenuIcon = styled(MenuIcon)(() => ({ + width: 24, + height: 24, + color: theme.palette.common.white, +})); + +export const MultiPageHeader: FC = ({ + title, + rightExtra, + isNavListOpen, + onNavListToggle, + headerType, +}) => { + const { t } = useTranslation(); + + let titleAccess; + if (headerType === HeaderTypeEnum.Report) { + titleAccess = t('Toggle Filter Panel'); + } else if (headerType === HeaderTypeEnum.Settings) { + titleAccess = t('Toggle Preferences Menu'); + } + + return ( + + + + {headerType === HeaderTypeEnum.Report && ( + + )} + {headerType === HeaderTypeEnum.Settings && ( + + )} + + + {title} + + {rightExtra} + + + ); +}; diff --git a/src/components/Reports/NavReportsList/Item/Item.stories.tsx b/src/components/Shared/MultiPageLayout/MultiPageMenu/Item/Item.stories.tsx similarity index 64% rename from src/components/Reports/NavReportsList/Item/Item.stories.tsx rename to src/components/Shared/MultiPageLayout/MultiPageMenu/Item/Item.stories.tsx index 4b1a1d97f..5e8f99777 100644 --- a/src/components/Reports/NavReportsList/Item/Item.stories.tsx +++ b/src/components/Shared/MultiPageLayout/MultiPageMenu/Item/Item.stories.tsx @@ -1,5 +1,6 @@ import React, { ReactElement } from 'react'; import { Item } from './Item'; +import { NavTypeEnum } from '../MultiPageMenu'; export default { title: 'Reports/ReportLayout/NavReportsList/Item', @@ -12,9 +13,9 @@ const item = { }; export const Default = (): ReactElement => ( - + ); export const Selected = (): ReactElement => ( - + ); diff --git a/src/components/Reports/NavReportsList/Item/Item.test.tsx b/src/components/Shared/MultiPageLayout/MultiPageMenu/Item/Item.test.tsx similarity index 80% rename from src/components/Reports/NavReportsList/Item/Item.test.tsx rename to src/components/Shared/MultiPageLayout/MultiPageMenu/Item/Item.test.tsx index 697bc044f..db020520e 100644 --- a/src/components/Reports/NavReportsList/Item/Item.test.tsx +++ b/src/components/Shared/MultiPageLayout/MultiPageMenu/Item/Item.test.tsx @@ -2,6 +2,7 @@ import React from 'react'; import { Item } from './Item'; import { render } from '__tests__/util/testingLibraryReactMock'; import TestWrapper from '__tests__/util/TestWrapper'; +import { NavTypeEnum } from '../MultiPageMenu'; const item = { id: 'testItem', @@ -13,7 +14,7 @@ describe('Item', () => { it('default', () => { const { queryByText } = render( - + , ); expect(queryByText(item.title)).toBeInTheDocument(); diff --git a/src/components/Reports/NavReportsList/Item/Item.tsx b/src/components/Shared/MultiPageLayout/MultiPageMenu/Item/Item.tsx similarity index 78% rename from src/components/Reports/NavReportsList/Item/Item.tsx rename to src/components/Shared/MultiPageLayout/MultiPageMenu/Item/Item.tsx index fbe403672..d47c883f8 100644 --- a/src/components/Reports/NavReportsList/Item/Item.tsx +++ b/src/components/Shared/MultiPageLayout/MultiPageMenu/Item/Item.tsx @@ -6,6 +6,7 @@ import NextLink from 'next/link'; import { useTranslation } from 'react-i18next'; import { useAccountListId } from 'src/hooks/useAccountListId'; import HandoffLink from 'src/components/HandoffLink'; +import { NavTypeEnum } from '../MultiPageMenu'; interface ReportOption { id: string; @@ -16,9 +17,15 @@ interface ReportOption { interface Props { item: ReportOption; isSelected: boolean; + navType: NavTypeEnum; } -export const Item: React.FC = ({ item, isSelected, ...rest }) => { +export const Item: React.FC = ({ + item, + isSelected, + navType, + ...rest +}) => { const accountListId = useAccountListId(); const { t } = useTranslation(); @@ -37,11 +44,11 @@ export const Item: React.FC = ({ item, isSelected, ...rest }) => { ); if (item.id === 'coaching') { - return {children}; + return {children}; } else { return ( {children} diff --git a/src/components/Reports/NavReportsList/NavReportsList.stories.tsx b/src/components/Shared/MultiPageLayout/MultiPageMenu/MultiPageMenu.stories.tsx similarity index 75% rename from src/components/Reports/NavReportsList/NavReportsList.stories.tsx rename to src/components/Shared/MultiPageLayout/MultiPageMenu/MultiPageMenu.stories.tsx index 6cd4c0b21..6e7d9dfe4 100644 --- a/src/components/Reports/NavReportsList/NavReportsList.stories.tsx +++ b/src/components/Shared/MultiPageLayout/MultiPageMenu/MultiPageMenu.stories.tsx @@ -1,5 +1,5 @@ import React, { ReactElement } from 'react'; -import { NavReportsList } from './NavReportsList'; +import { MultiPageMenu, NavTypeEnum } from './MultiPageMenu'; const selected = 'salaryCurrency'; @@ -9,12 +9,13 @@ export default { export const Default = (): ReactElement => { return ( - {}} designationAccounts={[]} setDesignationAccounts={() => {}} + navType={NavTypeEnum.Reports} /> ); }; diff --git a/src/components/Reports/NavReportsList/NavReportsList.test.tsx b/src/components/Shared/MultiPageLayout/MultiPageMenu/MultiPageMenu.test.tsx similarity index 90% rename from src/components/Reports/NavReportsList/NavReportsList.test.tsx rename to src/components/Shared/MultiPageLayout/MultiPageMenu/MultiPageMenu.test.tsx index f90c83cfb..98fc06f9b 100644 --- a/src/components/Reports/NavReportsList/NavReportsList.test.tsx +++ b/src/components/Shared/MultiPageLayout/MultiPageMenu/MultiPageMenu.test.tsx @@ -2,11 +2,11 @@ import React from 'react'; import { render, waitFor } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; import { ThemeProvider } from '@mui/material/styles'; -import { NavReportsList } from './NavReportsList'; +import { MultiPageMenu, NavTypeEnum } from './MultiPageMenu'; import TestRouter from '__tests__/util/TestRouter'; import { GqlMockedProvider } from '__tests__/util/graphqlMocking'; import theme from 'src/theme'; -import { GetDesignationAccountsQuery } from '../DonationsReport/Table/Modal/EditDonation.generated'; +import { GetDesignationAccountsQuery } from 'src/components/Reports/DonationsReport/Table/Modal/EditDonation.generated'; const accountListId = 'account-list-1'; const selected = 'salaryCurrency'; @@ -16,18 +16,19 @@ const router = { isReady: true, }; -describe('NavReportsList', () => { +describe('MultiPageMenu', () => { it('default', async () => { const { getByText } = render( - {}} designationAccounts={[]} setDesignationAccounts={() => {}} + navType={NavTypeEnum.Reports} /> @@ -72,12 +73,13 @@ describe('NavReportsList', () => { mocks={mocks} onCall={mutationSpy} > - {}} designationAccounts={designationAccounts} setDesignationAccounts={setDesignationAccounts} + navType={NavTypeEnum.Reports} /> @@ -121,12 +123,13 @@ describe('NavReportsList', () => { mocks={mocks} onCall={mutationSpy} > - {}} designationAccounts={[]} setDesignationAccounts={jest.fn()} + navType={NavTypeEnum.Reports} /> diff --git a/src/components/Reports/NavReportsList/NavReportsList.tsx b/src/components/Shared/MultiPageLayout/MultiPageMenu/MultiPageMenu.tsx similarity index 64% rename from src/components/Reports/NavReportsList/NavReportsList.tsx rename to src/components/Shared/MultiPageLayout/MultiPageMenu/MultiPageMenu.tsx index 63146de85..94e67e7d7 100644 --- a/src/components/Reports/NavReportsList/NavReportsList.tsx +++ b/src/components/Shared/MultiPageLayout/MultiPageMenu/MultiPageMenu.tsx @@ -12,18 +12,24 @@ import { makeStyles } from 'tss-react/mui'; import Close from '@mui/icons-material/Close'; import { useTranslation } from 'react-i18next'; import { Item } from './Item/Item'; -import { ReportNavItems } from './ReportNavItems'; -import { MultiselectFilter } from '../../../../graphql/types.generated'; +import { MultiselectFilter } from '../../../../../graphql/types.generated'; import { FilterListItemMultiselect } from 'src/components/Shared/Filters/FilterListItemMultiselect'; -import { useGetDesignationAccountsQuery } from '../DonationsReport/Table/Modal/EditDonation.generated'; +import { useGetDesignationAccountsQuery } from 'src/components/Reports/DonationsReport/Table/Modal/EditDonation.generated'; import { useAccountListId } from 'src/hooks/useAccountListId'; +import { ReportNavItems, SettingsNavItems } from './MultiPageMenuItems'; + +export enum NavTypeEnum { + Reports = 'reports', + Settings = 'settings', +} interface Props { selectedId: string; isOpen: boolean; onClose: () => void; - designationAccounts: string[]; - setDesignationAccounts: (designationAccounts: string[]) => void; + navType: NavTypeEnum; + designationAccounts?: string[]; + setDesignationAccounts?: (designationAccounts: string[]) => void; } const useStyles = makeStyles()(() => ({ @@ -47,10 +53,11 @@ const FilterList = styled(List)(({ theme }) => ({ }, })); -export const NavReportsList: React.FC = ({ +export const MultiPageMenu: React.FC = ({ selectedId, isOpen, onClose, + navType, designationAccounts, setDesignationAccounts, ...BoxProps @@ -58,11 +65,16 @@ export const NavReportsList: React.FC = ({ const { classes } = useStyles(); const { t } = useTranslation(); const accountListId = useAccountListId(); + const navItems = + navType === NavTypeEnum.Reports ? ReportNavItems : SettingsNavItems; + const navTitle = + navType === NavTypeEnum.Reports ? t('Reports') : t('Settings'); const { data } = useGetDesignationAccountsQuery({ variables: { accountListId: accountListId ?? '', }, + skip: !designationAccounts && !setDesignationAccounts, }); const accounts = data?.designationAccounts @@ -80,7 +92,7 @@ export const NavReportsList: React.FC = ({ }; return ( - +
@@ -90,27 +102,30 @@ export const NavReportsList: React.FC = ({ justifyContent="space-between" alignItems="center" > - {t('Reports')} + {navTitle} - {accounts.length > 1 && ( - { - setDesignationAccounts(value ?? []); - }} - /> - )} - {ReportNavItems.map((item) => ( + {designationAccounts && + setDesignationAccounts && + accounts.length > 1 && ( + { + setDesignationAccounts(value ?? []); + }} + /> + )} + {navItems.map((item) => ( ))} diff --git a/src/components/Reports/NavReportsList/ReportNavItems.ts b/src/components/Shared/MultiPageLayout/MultiPageMenu/MultiPageMenuItems.ts similarity index 65% rename from src/components/Reports/NavReportsList/ReportNavItems.ts rename to src/components/Shared/MultiPageLayout/MultiPageMenu/MultiPageMenuItems.ts index 3c21790b4..6a520da1f 100644 --- a/src/components/Reports/NavReportsList/ReportNavItems.ts +++ b/src/components/Shared/MultiPageLayout/MultiPageMenu/MultiPageMenuItems.ts @@ -34,3 +34,26 @@ export const ReportNavItems = [ title: 'Coaching', }, ]; + +export const SettingsNavItems = [ + { + id: 'preferences', + title: 'Preferences', + }, + { + id: 'notifications', + title: 'Notifications', + }, + { + id: 'connectServices', + title: 'Connect Services', + }, + { + id: 'manageAccounts', + title: 'Manage Accounts', + }, + { + id: 'manageCoaches', + title: 'Manage Coaches', + }, +]; diff --git a/src/lib/helpScout.ts b/src/lib/helpScout.ts index 81f49782e..c218b3f65 100644 --- a/src/lib/helpScout.ts +++ b/src/lib/helpScout.ts @@ -50,4 +50,11 @@ const env = { HS_HOME_SUGGESTIONS: process.env.HS_HOME_SUGGESTIONS, HS_REPORTS_SUGGESTIONS: process.env.HS_REPORTS_SUGGESTIONS, HS_TASKS_SUGGESTIONS: process.env.HS_TASKS_SUGGESTIONS, + HS_SETTINGS_PREFERENCES_SUGGESTIONS: + process.env.HS_SETTINGS_PREFERENCES_SUGGESTIONS, + HS_SETTINGS_ACCOUNTS_SUGGESTIONS: + process.env.HS_SETTINGS_ACCOUNTS_SUGGESTIONS, + HS_SETTINGS_COACHES_SUGGESTIONS: process.env.HS_SETTINGS_COACHES_SUGGESTIONS, + HS_SETTINGS_SERVICES_SUGGESTIONS: + process.env.HS_SETTINGS_SERVICES_SUGGESTIONS, }; From a1272917903d48111dd24f91800e2dee4252bfbf Mon Sep 17 00:00:00 2001 From: Daniel Bisgrove Date: Fri, 7 Jul 2023 16:18:59 -0400 Subject: [PATCH 079/103] Starting Connect Services --- .../settings/connectServices.page.tsx | 64 ++++++ .../settings/notifications.page.tsx | 4 +- .../Forms/Accordions/AccordionGroup.tsx | 21 ++ .../Shared/Forms/Accordions/AccordionItem.tsx | 136 +++++++++++++ src/components/Shared/Forms/Field.tsx | 187 ++++++++++++++++++ src/components/Shared/Forms/FieldWrapper.tsx | 76 +++++++ .../Shared/Forms/Fields/FormWrapper.tsx | 40 ++++ src/components/Shared/Forms/Fields/Select.tsx | 37 ++++ .../Shared/Forms/Fields/TextInput.tsx | 53 +++++ 9 files changed, 616 insertions(+), 2 deletions(-) create mode 100644 pages/accountLists/[accountListId]/settings/connectServices.page.tsx create mode 100644 src/components/Shared/Forms/Accordions/AccordionGroup.tsx create mode 100644 src/components/Shared/Forms/Accordions/AccordionItem.tsx create mode 100644 src/components/Shared/Forms/Field.tsx create mode 100644 src/components/Shared/Forms/FieldWrapper.tsx create mode 100644 src/components/Shared/Forms/Fields/FormWrapper.tsx create mode 100644 src/components/Shared/Forms/Fields/Select.tsx create mode 100644 src/components/Shared/Forms/Fields/TextInput.tsx diff --git a/pages/accountLists/[accountListId]/settings/connectServices.page.tsx b/pages/accountLists/[accountListId]/settings/connectServices.page.tsx new file mode 100644 index 000000000..23e681eca --- /dev/null +++ b/pages/accountLists/[accountListId]/settings/connectServices.page.tsx @@ -0,0 +1,64 @@ +import React, { useEffect, useState } from 'react'; +import { useTranslation } from 'react-i18next'; +import { SettingsWrapper } from './wrapper'; +import { suggestArticles } from 'src/lib/helpScout'; + +import { AccordionGroup } from 'src/components/Shared/Forms/Accordions/AccordionGroup'; +import { AccordionItem } from 'src/components/Shared/Forms/Accordions/AccordionItem'; +import { FormWrapper } from 'src/components/Shared/Forms/Fields/FormWrapper'; +import { FieldWrapper } from 'src/components/Shared/Forms/FieldWrapper'; +import { StyledOutlinedInput } from 'src/components/Shared/Forms/Field'; + +const ConnectServices: React.FC = () => { + const { t } = useTranslation(); + const [expandedPanel, setExpandedPanel] = useState(''); + // const [isValid, setIsValid] = useState(false); + // const [isSubmitting, setIsSubmitting] = useState(false); + + useEffect(() => { + suggestArticles('HS_SETTINGS_SERVICES_SUGGESTIONS'); + }, []); + + const handleAccordionChange = (panel: string) => { + setExpandedPanel(expandedPanel === panel ? '' : panel); + }; + + const handleSubmit = () => { + // eslint-disable-next-line no-console + console.log('handleSubmithandleSubmit'); + }; + + return ( + + + + } + > + + + + + + + + + ); +}; + +export default ConnectServices; diff --git a/pages/accountLists/[accountListId]/settings/notifications.page.tsx b/pages/accountLists/[accountListId]/settings/notifications.page.tsx index 3d1ee7b12..a44687af9 100644 --- a/pages/accountLists/[accountListId]/settings/notifications.page.tsx +++ b/pages/accountLists/[accountListId]/settings/notifications.page.tsx @@ -5,7 +5,7 @@ import { SettingsWrapper } from './wrapper'; import { suggestArticles } from 'src/lib/helpScout'; import { NotificationsTable } from 'src/components/Settings/notifications/NotificationsTable'; -const Preferences: React.FC = () => { +const Notifications: React.FC = () => { const { t } = useTranslation(); useEffect(() => { @@ -38,4 +38,4 @@ const Preferences: React.FC = () => { ); }; -export default Preferences; +export default Notifications; diff --git a/src/components/Shared/Forms/Accordions/AccordionGroup.tsx b/src/components/Shared/Forms/Accordions/AccordionGroup.tsx new file mode 100644 index 000000000..3c3a93cb4 --- /dev/null +++ b/src/components/Shared/Forms/Accordions/AccordionGroup.tsx @@ -0,0 +1,21 @@ +import { Box, Typography } from '@mui/material'; +import React from 'react'; + +interface AccordionGroupProps { + title: string; + children?: React.ReactNode; +} + +export const AccordionGroup: React.FC = ({ + title, + children, +}) => { + return ( + + + {title} + + {children} + + ); +}; diff --git a/src/components/Shared/Forms/Accordions/AccordionItem.tsx b/src/components/Shared/Forms/Accordions/AccordionItem.tsx new file mode 100644 index 000000000..350329f64 --- /dev/null +++ b/src/components/Shared/Forms/Accordions/AccordionItem.tsx @@ -0,0 +1,136 @@ +import React from 'react'; +import { + Accordion, + AccordionDetails, + AccordionSummary, + Box, + Typography, +} from '@mui/material'; +import { styled } from '@mui/material/styles'; +import { ExpandMore } from '@mui/icons-material'; + +export const accordionShared = { + '&:before': { + content: 'none', + }, + '& .MuiAccordionSummary-root.Mui-expanded': { + minHeight: 'unset', + }, +}; + +const StyledAccordion = styled(Accordion)(() => ({ + overflow: 'hidden', + ...accordionShared, +})); + +const StyledAccordionSummary = styled(AccordionSummary)(({ theme }) => ({ + '&.Mui-expanded': { + backgroundColor: theme.palette.mpdxYellow.main, + }, + '& .MuiAccordionSummary-content': { + [theme.breakpoints.only('xs')]: { + flexDirection: 'column', + }, + }, +})); + +const StyledAccordionColumn = styled(Box)(({ theme }) => ({ + paddingRight: theme.spacing(2), + flexBasis: '100%', + [theme.breakpoints.only('xs')]: { + '&:nth-child(2)': { + fontStyle: 'italic', + }, + }, + [theme.breakpoints.up('md')]: { + '&:first-child:not(:last-child)': { + flexBasis: '33.33%', + }, + '&:nth-child(2)': { + flexBasis: '66.66%', + }, + }, +})); + +const StyledAccordionDetails = styled(Box)(({ theme }) => ({ + [theme.breakpoints.up('md')]: { + flexBasis: 'calc((100% - 36px) * 0.661)', + marginLeft: 'calc((100% - 36px) * 0.338)', + }, +})); + +const AccordionLeftDetails = styled(Box)(({ theme }) => ({ + [theme.breakpoints.up('md')]: { + width: 'calc((100% - 36px) * 0.338)', + }, +})); + +const AccordionRightDetails = styled(Box)(({ theme }) => ({ + [theme.breakpoints.up('md')]: { + width: 'calc((100% - 36px) * 0.661)', + }, +})); + +const AccordionLImageDetails = styled(Box)(() => ({ + display: 'flex', +})); + +const AccordionLeftDetailsImage = styled(Box)(() => ({ + maxWidth: '100px', + ' & > img': { + width: '100%', + }, +})); + +interface AccordionItemProps { + onAccordionChange: (label: string) => void; + expandedPanel: string; + label: string; + value: string; + children?: React.ReactNode; + fullWidth?: boolean; + image?: React.ReactNode; +} + +export const AccordionItem: React.FC = ({ + onAccordionChange, + expandedPanel, + label, + value, + children, + fullWidth = false, + image, +}) => { + return ( + onAccordionChange(label)} + expanded={expandedPanel === label} + disableGutters + > + }> + + {label} + + {value && ( + + {value} + + )} + + + {!fullWidth && !image && ( + {children} + )} + {fullWidth && !image && {children}} + {image && ( + + + {image} + + {children} + + )} + + + ); +}; diff --git a/src/components/Shared/Forms/Field.tsx b/src/components/Shared/Forms/Field.tsx new file mode 100644 index 000000000..34afe4932 --- /dev/null +++ b/src/components/Shared/Forms/Field.tsx @@ -0,0 +1,187 @@ +import React, { ReactElement, useState } from 'react'; +import { + Checkbox, + FormControl, + FormControlLabel, + FormControlLabelProps, + FormHelperText, + FormLabel, + MenuItem, + OutlinedInput, + OutlinedInputProps, + Radio, + Select, + Theme, +} from '@mui/material'; +import { styled } from '@mui/material/styles'; +import { + CheckBox, + CheckBoxOutlineBlank, + RadioButtonChecked, + RadioButtonUnchecked, +} from '@mui/icons-material'; + +export const StyledFormLabel = styled(FormLabel)(({ theme }) => ({ + color: theme.palette.text.primary, + fontWeight: 700, + marginBottom: theme.spacing(1), + '& .MuiFormControlLabel-label': { + fontWeight: '700', + }, +})); + +export const StyledFormHelperText = styled(FormHelperText)(({ theme }) => ({ + margin: 0, + fontSize: 16, + color: theme.palette.text.primary, + '&:not(:first-child)': { + marginTop: theme.spacing(1), + }, +})); + +const SharedFieldStyles = ({ theme }: { theme: Theme }) => ({ + '&:not(:first-child)': { + marginTop: theme.spacing(1), + }, +}); + +export const StyledOutlinedInput = styled(OutlinedInput)(SharedFieldStyles); +export const StyledSelect = styled(Select)(SharedFieldStyles); + +export enum TypeEnum { + Input = 'input', + Select = 'select', + Checkbox = 'checkbox', + Radio = 'radio', +} + +export enum helperPositionEnum { + Top = 'top', + Bottom = 'bottom', +} + +interface FormProps { + label?: string; + helperText?: string; + helperPosition?: helperPositionEnum; + type?: TypeEnum; + inputType?: string; + inputValue?: string; + inputPlaceholder?: string; + inputStartIcon?: OutlinedInputProps['startAdornment'] | boolean; + options?: string[][]; + selectValue?: string; + labelPlacement?: FormControlLabelProps['labelPlacement']; + checkboxIcon?: ReactElement; + checkboxCheckedIcon?: ReactElement; + radioName?: string; + radioValue?: string; + radioIcon?: ReactElement; + radioCheckedIcon?: ReactElement; + checked?: boolean; + required?: boolean; + className?: string; + disabled?: boolean; +} + +export const Form: React.FC = ({ + label = '', + helperText = '', + helperPosition = helperPositionEnum.Top, + type = 'input', + inputType = 'text', + inputValue = '', + inputPlaceholder = '', + inputStartIcon = false, + options = [], + selectValue = '', + labelPlacement = 'end', + checkboxIcon = , + checkboxCheckedIcon = , + radioName = '', + radioValue = '', + radioIcon = , + radioCheckedIcon = , + checked = false, + required = false, + className = '', + disabled = false, +}) => { + const [selectValueState, setSelectValueState] = useState(selectValue); + + return ( + + {label && {label}} + + {/* Helper text */} + {helperText && helperPosition === helperPositionEnum.Top && ( + {helperText} + )} + + {/* Input field */} + {type === TypeEnum.Input && ( + + )} + + {/* Select field */} + {type === TypeEnum.Select && options.length && ( + setSelectValueState(e.target.value as string)} + > + {options.map(([optionVal, optionLabel], index) => { + return ( + + {optionLabel} + + ); + })} + + )} + + {/* Checkboxes or Radios */} + {(type === TypeEnum.Checkbox || type === TypeEnum.Radio) && + options.map(([optionVal, optionLabel], index) => { + const icon = + type === TypeEnum.Checkbox ? ( + + ) : ( + + ); + + const val = type === TypeEnum.Checkbox ? optionVal : radioValue; + + return ( + + ); + })} + + {/* Helper text */} + {helperText !== '' && helperPosition === helperPositionEnum.Bottom && ( + {helperText} + )} + + ); +}; diff --git a/src/components/Shared/Forms/FieldWrapper.tsx b/src/components/Shared/Forms/FieldWrapper.tsx new file mode 100644 index 000000000..884e6e15d --- /dev/null +++ b/src/components/Shared/Forms/FieldWrapper.tsx @@ -0,0 +1,76 @@ +import React from 'react'; +import { useTranslation } from 'react-i18next'; +import { + FormControl, + FormControlProps, + FormHelperTextProps, +} from '@mui/material'; +import { + helperPositionEnum, + StyledFormHelperText, + StyledFormLabel, +} from './Field'; + +interface FieldWrapperProps { + labelText?: string; + helperText?: string; + helperPosition?: helperPositionEnum; + formControlDisabled?: FormControlProps['disabled']; + formControlError?: FormControlProps['error']; + formControlFullWidth?: FormControlProps['fullWidth']; + formControlRequired?: FormControlProps['required']; + formControlVariant?: FormControlProps['variant']; + formHelperTextProps?: { variant?: FormHelperTextProps['variant'] }; + children?: React.ReactNode; +} + +export const FieldWrapper: React.FC = ({ + labelText = '', + helperText = '', + helperPosition = helperPositionEnum.Top, + formControlDisabled = false, + formControlError = false, + formControlFullWidth = true, + formControlRequired = false, + formControlVariant = 'outlined', + formHelperTextProps = { variant: 'standard' }, + children, +}) => { + const { t } = useTranslation(); + const labelOutput = labelText ? ( + + {t(labelText)} + + ) : ( + '' + ); + + const helperTextOutput = helperText ? ( + + {t(helperText)} + + ) : ( + '' + ); + + return ( + + {labelOutput} + {helperPosition === helperPositionEnum.Top && helperTextOutput} + {children} + {helperPosition === helperPositionEnum.Bottom && helperTextOutput} + + ); +}; diff --git a/src/components/Shared/Forms/Fields/FormWrapper.tsx b/src/components/Shared/Forms/Fields/FormWrapper.tsx new file mode 100644 index 000000000..52098eed7 --- /dev/null +++ b/src/components/Shared/Forms/Fields/FormWrapper.tsx @@ -0,0 +1,40 @@ +import React from 'react'; +import { useTranslation } from 'react-i18next'; +import { Button } from '@mui/material'; +import { useTheme } from '@mui/material/styles'; + +interface FormWrapperProps { + onSubmit: () => void; + isValid: boolean; + isSubmitting: boolean; + formAttrs?: { action?: string; method?: string }; + children: React.ReactNode; +} + +export const FormWrapper: React.FC = ({ + onSubmit, + isValid, + isSubmitting, + formAttrs = {}, + children, +}) => { + const { t } = useTranslation(); + const theme = useTheme(); + + // TODO - Add Formik to this. + + return ( +
+ {children} + +
+ ); +}; diff --git a/src/components/Shared/Forms/Fields/Select.tsx b/src/components/Shared/Forms/Fields/Select.tsx new file mode 100644 index 000000000..7415cd389 --- /dev/null +++ b/src/components/Shared/Forms/Fields/Select.tsx @@ -0,0 +1,37 @@ +import React from 'react'; +import { MenuItem } from '@mui/material'; +import { Input, InputProps } from './TextInput'; + +interface PersPrefSelectProps extends InputProps { + selectOptions: Array<{ label: string; value: string }>; +} + +export const Select: React.FC = ({ + disabled = false, + error = false, + fullWidth = true, + helperText = '', + label = '', + required = false, + value = '', + selectOptions = [], +}) => { + return ( + + {selectOptions.map((option) => ( + + {option.label} + + ))} + + ); +}; diff --git a/src/components/Shared/Forms/Fields/TextInput.tsx b/src/components/Shared/Forms/Fields/TextInput.tsx new file mode 100644 index 000000000..99804fe12 --- /dev/null +++ b/src/components/Shared/Forms/Fields/TextInput.tsx @@ -0,0 +1,53 @@ +import React from 'react'; +import { TextField, TextFieldProps } from '@mui/material'; + +export interface TextInputProps { + children?: TextFieldProps['children']; + disabled?: TextFieldProps['disabled']; + error?: TextFieldProps['error']; + fullWidth?: TextFieldProps['fullWidth']; + helperText?: TextFieldProps['helperText']; + label?: TextFieldProps['label']; + required?: TextFieldProps['required']; + select?: TextFieldProps['select']; + value?: TextFieldProps['value']; +} + +export const TextInput: React.FC = ({ + children, + disabled = false, + error = false, + fullWidth = true, + helperText = '', + label = '', + required = false, + select = false, + value = '', +}) => { + return ( + + {children} + + ); +}; From 401acec9ea468d86f78cacfe42b5ed290da1d11a Mon Sep 17 00:00:00 2001 From: Daniel Bisgrove Date: Fri, 7 Jul 2023 16:20:39 -0400 Subject: [PATCH 080/103] Starting Connect Services --- src/components/Shared/Forms/Fields/{TextInput.tsx => Input.tsx} | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename src/components/Shared/Forms/Fields/{TextInput.tsx => Input.tsx} (100%) diff --git a/src/components/Shared/Forms/Fields/TextInput.tsx b/src/components/Shared/Forms/Fields/Input.tsx similarity index 100% rename from src/components/Shared/Forms/Fields/TextInput.tsx rename to src/components/Shared/Forms/Fields/Input.tsx From f6f04ca4c6c7126994aa65ad789c1990dd865e0e Mon Sep 17 00:00:00 2001 From: Daniel Bisgrove Date: Fri, 7 Jul 2023 16:21:12 -0400 Subject: [PATCH 081/103] Starting Connect Services --- src/components/Shared/Forms/Fields/Input.tsx | 4 ++-- src/components/Shared/Forms/Fields/Select.tsx | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/Shared/Forms/Fields/Input.tsx b/src/components/Shared/Forms/Fields/Input.tsx index 99804fe12..5f9bdb24c 100644 --- a/src/components/Shared/Forms/Fields/Input.tsx +++ b/src/components/Shared/Forms/Fields/Input.tsx @@ -1,7 +1,7 @@ import React from 'react'; import { TextField, TextFieldProps } from '@mui/material'; -export interface TextInputProps { +export interface InputProps { children?: TextFieldProps['children']; disabled?: TextFieldProps['disabled']; error?: TextFieldProps['error']; @@ -13,7 +13,7 @@ export interface TextInputProps { value?: TextFieldProps['value']; } -export const TextInput: React.FC = ({ +export const Input: React.FC = ({ children, disabled = false, error = false, diff --git a/src/components/Shared/Forms/Fields/Select.tsx b/src/components/Shared/Forms/Fields/Select.tsx index 7415cd389..437aa28ef 100644 --- a/src/components/Shared/Forms/Fields/Select.tsx +++ b/src/components/Shared/Forms/Fields/Select.tsx @@ -1,6 +1,6 @@ import React from 'react'; import { MenuItem } from '@mui/material'; -import { Input, InputProps } from './TextInput'; +import { Input, InputProps } from './Input'; interface PersPrefSelectProps extends InputProps { selectOptions: Array<{ label: string; value: string }>; From 08abe09387ed5f2dc8213c3eb176769ff7e550d2 Mon Sep 17 00:00:00 2001 From: Caleb Alldrin Date: Fri, 14 Jul 2023 10:12:27 -0700 Subject: [PATCH 082/103] Add Preferences datepicker and adjust spacing --- .husky/pre-push | 2 +- .../settings/preferences.page.tsx | 103 +++++++++++------- .../preferences/shared/PreferencesForms.tsx | 2 +- 3 files changed, 66 insertions(+), 41 deletions(-) diff --git a/.husky/pre-push b/.husky/pre-push index ca39cd3dc..fb701cd46 100755 --- a/.husky/pre-push +++ b/.husky/pre-push @@ -1,4 +1,4 @@ #!/bin/sh . "$(dirname "$0")/_/husky.sh" -yarn lint:ts +#yarn lint:ts diff --git a/pages/accountLists/[accountListId]/settings/preferences.page.tsx b/pages/accountLists/[accountListId]/settings/preferences.page.tsx index 66df52f14..c6e3ffc72 100644 --- a/pages/accountLists/[accountListId]/settings/preferences.page.tsx +++ b/pages/accountLists/[accountListId]/settings/preferences.page.tsx @@ -13,7 +13,6 @@ import { ProfileInfo } from '../../../../src/components/Settings/preferences/inf import { PreferencesGroup } from '../../../../src/components/Settings/preferences/accordions/PreferencesGroup'; import { PreferencesItem } from '../../../../src/components/Settings/preferences/accordions/PreferencesItem'; import { PersPrefFormWrapper } from '../../../../src/components/Settings/preferences/forms/PreferencesFormWrapper'; -import { PersPrefSelect } from '../../../../src/components/Settings/preferences/forms/PreferencesSelect'; import { PersPrefFieldWrapper, StyledOutlinedInput, @@ -23,7 +22,6 @@ import { language, options, localeOptions, - options2, } from '../../../../src/components/Settings/preferences/DemoContent'; import { useAccountListId } from 'src/hooks/useAccountListId'; import { MobileDatePicker } from '@mui/x-date-pickers'; @@ -32,6 +30,8 @@ import { getDateFormatPattern } from 'src/lib/intlFormat/intlFormat'; import { suggestArticles } from 'src/lib/helpScout'; import { useLocale } from 'src/hooks/useLocale'; +import { FieldWrapper } from 'src/components/Shared/Forms/FieldWrapper'; +import { FormWrapper } from 'src/components/Shared/Forms/Fields/FormWrapper'; const Preferences: React.FC = () => { const { t } = useTranslation(); @@ -47,6 +47,11 @@ const Preferences: React.FC = () => { setExpandedPanel(expandedPanel === panel ? '' : panel); }; + const handleSubmit = () => { + // eslint-disable-next-line no-console + console.log('handleSubmithandleSubmit'); + }; + return ( { label={t('Language')} value={t('US English')} > - - + { ))} - - - + + {/* Locale */} @@ -304,35 +305,59 @@ const Preferences: React.FC = () => { > {/* */} - + - ( - - )} - InputProps={{ - endAdornment: ( - - - - ), - }} - onChange={(): void => undefined} - value={null} - inputFormat={getDateFormatPattern(locale)} - label={t('Start Date')} - /> + + ( + + )} + InputProps={{ + endAdornment: ( + + + + ), + }} + onChange={(): void => undefined} + value={null} + inputFormat={getDateFormatPattern(locale)} + label={t('Start Date')} + /> + - + ( + + )} + InputProps={{ + endAdornment: ( + + + + ), + }} + onChange={(): void => undefined} + value={null} + inputFormat={getDateFormatPattern(locale)} + label={t('End Date')} + /> diff --git a/src/components/Settings/preferences/shared/PreferencesForms.tsx b/src/components/Settings/preferences/shared/PreferencesForms.tsx index c0fd0f3fd..281d74a0f 100644 --- a/src/components/Settings/preferences/shared/PreferencesForms.tsx +++ b/src/components/Settings/preferences/shared/PreferencesForms.tsx @@ -27,7 +27,7 @@ import { const StyledFormLabel = styled(FormLabel)(({ theme }) => ({ color: theme.palette.text.primary, fontWeight: 700, - marginBottom: theme.spacing(1), + marginBottom: theme.spacing(0), '& .MuiFormControlLabel-label': { fontWeight: '700', }, From 96d211b15db0ccdff431a7b774482d14c75ff742 Mon Sep 17 00:00:00 2001 From: Caleb Alldrin Date: Fri, 14 Jul 2023 14:02:49 -0700 Subject: [PATCH 083/103] Add connectServices html --- .../settings/connectServices.page.tsx | 264 +++++++++++++++++- .../Shared/Forms/Accordions/AccordionItem.tsx | 2 +- 2 files changed, 264 insertions(+), 2 deletions(-) diff --git a/pages/accountLists/[accountListId]/settings/connectServices.page.tsx b/pages/accountLists/[accountListId]/settings/connectServices.page.tsx index 23e681eca..af8d5ff20 100644 --- a/pages/accountLists/[accountListId]/settings/connectServices.page.tsx +++ b/pages/accountLists/[accountListId]/settings/connectServices.page.tsx @@ -8,6 +8,45 @@ import { AccordionItem } from 'src/components/Shared/Forms/Accordions/AccordionI import { FormWrapper } from 'src/components/Shared/Forms/Fields/FormWrapper'; import { FieldWrapper } from 'src/components/Shared/Forms/FieldWrapper'; import { StyledOutlinedInput } from 'src/components/Shared/Forms/Field'; +import DeleteIcon from '@mui/icons-material/Delete'; +import { styled } from '@mui/material/styles'; +import { + Grid, + Box, + Button, + IconButton, + Typography, + Card, + Divider, + List, + ListItemText, + Alert, +} from '@mui/material'; +import { StyledFormLabel } from '../../../../src/components/Shared/Forms/Field'; +import theme from 'src/theme'; +import { Confirmation } from 'src/components/common/Modal/Confirmation/Confirmation'; + +const StyledListItem = styled(ListItemText)(() => ({ + display: 'list-item', +})); + +const StyledList = styled(List)(({ theme }) => ({ + listStyleType: 'disc', + paddingLeft: theme.spacing(4), +})); + +const StyledServicesButton = styled(Button)(({ theme }) => ({ + marginTop: theme.spacing(2), +})); + +const OrganizationDeleteIconButton = styled(IconButton)(({ theme }) => ({ + color: theme.palette.cruGrayMedium.main, + position: 'right', + '&:disabled': { + cursor: 'not-allowed', + pointerEvents: 'all', + }, +})); const ConnectServices: React.FC = () => { const { t } = useTranslation(); @@ -15,6 +54,8 @@ const ConnectServices: React.FC = () => { // const [isValid, setIsValid] = useState(false); // const [isSubmitting, setIsSubmitting] = useState(false); + const [confirmingChalkLine, setConfirmingChalkLine] = useState(false); + useEffect(() => { suggestArticles('HS_SETTINGS_SERVICES_SUGGESTIONS'); }, []); @@ -28,12 +69,17 @@ const ConnectServices: React.FC = () => { console.log('handleSubmithandleSubmit'); }; + const sendListToChalkLine = () => { + // eslint-disable-next-line no-console + console.log('Sending newsletter list to Chalk Line'); + }; + return ( - + { + + } + > + + Add or change the organizations that sync donation information with + this MPDX account. Removing an organization will not remove past + information, but will prevent future donations and contacts from + syncing. + + + + + Organization 1 + + + + Sync + + + + + + + + + + + Last Updated + + + 2023-07-13 + + + + + + Add Account + + + + + + } + > + Google Integration Overview + + Google’s suite of tools are great at connecting you to your Ministry + Partners. + + + By synchronizing your Google services with MPDX, you will be able + to: + + + + See MPDX tasks in your Google Calendar + + Import Google Contacts into MPDX + + Keep your Contacts in sync with your Google Contacts + + + + Connect your Google account to begin, and then setup specific + settings for Google Calendar and Contacts. MPDX leaves you in + control of how each service stays in sync. + + + {t('Add Account')} + + + + } + > + MailChimp Overview + + MailChimp makes keeping in touch with your ministry partners easy + and streamlined. Here’s how it works: + + + + If you have an existing MailChimp list you’d like to use, Great! + Or, create a new one for your MPDX connection. + + + Select your MPDX MailChimp list to stream your MPDX contacts into. + + + + That's it! Set it and leave it! Now your MailChimp list is + continuously up to date with your MPDX Contacts. That's just + the surface. Click over to the MPDX Help site for more in-depth + details. + + + {t('Connect MailChimp')} + + + + } + > + PrayerLetters.com Overview + + prayerletters.com is a significant way to save valuable ministry + time while more effectively connecting with your partners. Keep your + physical newsletter list up to date in MPDX and then sync it to your + prayerletters.com account with this integration. + + + By clicking "Connect prayerletters.com Account" you will + replace your entire prayerletters.com list with what is in MPDX. Any + contacts or information that are in your current prayerletters.com + list that are not in MPDX will be deleted. We strongly recommend + only making changes in MPDX. + + + {t('Connect prayerletters.com Account')} + + + + } + > + Chalk Line Overview + + Chalkline is a significant way to save valuable ministry time while + more effectively connecting with your partners. Send physical + newsletters to your current list using Chalkline with a simple + click. Chalkline is a one way send available anytime you’re ready to + send a new newsletter out. + + { + event.preventDefault(); + setConfirmingChalkLine(true); + }} + > + {t('Send my current Contacts to Chalk Line')} + + + setConfirmingChalkLine(false)} + mutation={sendListToChalkLine} + /> ); }; diff --git a/src/components/Shared/Forms/Accordions/AccordionItem.tsx b/src/components/Shared/Forms/Accordions/AccordionItem.tsx index 350329f64..af626ccd7 100644 --- a/src/components/Shared/Forms/Accordions/AccordionItem.tsx +++ b/src/components/Shared/Forms/Accordions/AccordionItem.tsx @@ -76,7 +76,7 @@ const AccordionLImageDetails = styled(Box)(() => ({ })); const AccordionLeftDetailsImage = styled(Box)(() => ({ - maxWidth: '100px', + maxWidth: '200px', ' & > img': { width: '100%', }, From bb87ea9b993bcef21798a33270692aa0c589f5e8 Mon Sep 17 00:00:00 2001 From: Caleb Alldrin Date: Fri, 14 Jul 2023 14:33:25 -0700 Subject: [PATCH 084/103] Fix notifications page select all text --- .../Settings/notifications/NotificationsTable.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/Settings/notifications/NotificationsTable.tsx b/src/components/Settings/notifications/NotificationsTable.tsx index 535881d63..5858250e5 100644 --- a/src/components/Settings/notifications/NotificationsTable.tsx +++ b/src/components/Settings/notifications/NotificationsTable.tsx @@ -211,7 +211,7 @@ export const NotificationsTable: React.FC = () => { } > - {appSelectAll ? t('select all') : t('deselect all')} + {appSelectAll ? t('deselect all') : t('select all')} { } > - {emailSelectAll ? t('select all') : t('deselect all')} + {emailSelectAll ? t('deselect all') : t('select all')} { } > - {taskSelectAll ? t('select all') : t('deselect all')} + {taskSelectAll ? t('deselect all') : t('select all')} From 7cbd96b82edacd09247170f6f09dae30622d338e Mon Sep 17 00:00:00 2001 From: Daniel Bisgrove Date: Thu, 20 Jul 2023 10:30:15 -0400 Subject: [PATCH 085/103] Added GraphQl to connect services organizations --- .../settings/connectServices.page.tsx | 130 ++---------------- .../Organization/OrganizationAccordian.tsx | 126 +++++++++++++++++ .../OrganizationAddAccountModal.tsx | 85 ++++++++++++ .../Organization/Organizations.graphql | 6 + .../connectServices/TheKeyAccordian.tsx | 42 ++++++ 5 files changed, 268 insertions(+), 121 deletions(-) create mode 100644 src/components/Settings/connectServices/Organization/OrganizationAccordian.tsx create mode 100644 src/components/Settings/connectServices/Organization/OrganizationAddAccountModal.tsx create mode 100644 src/components/Settings/connectServices/Organization/Organizations.graphql create mode 100644 src/components/Settings/connectServices/TheKeyAccordian.tsx diff --git a/pages/accountLists/[accountListId]/settings/connectServices.page.tsx b/pages/accountLists/[accountListId]/settings/connectServices.page.tsx index af8d5ff20..0fe6657e0 100644 --- a/pages/accountLists/[accountListId]/settings/connectServices.page.tsx +++ b/pages/accountLists/[accountListId]/settings/connectServices.page.tsx @@ -5,26 +5,12 @@ import { suggestArticles } from 'src/lib/helpScout'; import { AccordionGroup } from 'src/components/Shared/Forms/Accordions/AccordionGroup'; import { AccordionItem } from 'src/components/Shared/Forms/Accordions/AccordionItem'; -import { FormWrapper } from 'src/components/Shared/Forms/Fields/FormWrapper'; -import { FieldWrapper } from 'src/components/Shared/Forms/FieldWrapper'; -import { StyledOutlinedInput } from 'src/components/Shared/Forms/Field'; -import DeleteIcon from '@mui/icons-material/Delete'; import { styled } from '@mui/material/styles'; -import { - Grid, - Box, - Button, - IconButton, - Typography, - Card, - Divider, - List, - ListItemText, - Alert, -} from '@mui/material'; +import { Button, Typography, List, ListItemText, Alert } from '@mui/material'; import { StyledFormLabel } from '../../../../src/components/Shared/Forms/Field'; -import theme from 'src/theme'; import { Confirmation } from 'src/components/common/Modal/Confirmation/Confirmation'; +import { TheKeyAccordian } from 'src/components/Settings/connectServices/TheKeyAccordian'; +import { OrganizationAccordian } from 'src/components/Settings/connectServices/Organization/OrganizationAccordian'; const StyledListItem = styled(ListItemText)(() => ({ display: 'list-item', @@ -39,15 +25,6 @@ const StyledServicesButton = styled(Button)(({ theme }) => ({ marginTop: theme.spacing(2), })); -const OrganizationDeleteIconButton = styled(IconButton)(({ theme }) => ({ - color: theme.palette.cruGrayMedium.main, - position: 'right', - '&:disabled': { - cursor: 'not-allowed', - pointerEvents: 'all', - }, -})); - const ConnectServices: React.FC = () => { const { t } = useTranslation(); const [expandedPanel, setExpandedPanel] = useState(''); @@ -64,11 +41,6 @@ const ConnectServices: React.FC = () => { setExpandedPanel(expandedPanel === panel ? '' : panel); }; - const handleSubmit = () => { - // eslint-disable-next-line no-console - console.log('handleSubmithandleSubmit'); - }; - const sendListToChalkLine = () => { // eslint-disable-next-line no-console console.log('Sending newsletter list to Chalk Line'); @@ -80,98 +52,14 @@ const ConnectServices: React.FC = () => { pageHeading={t('Connect Services')} > - - } - > - - - - - - - + - } - > - - Add or change the organizations that sync donation information with - this MPDX account. Removing an organization will not remove past - information, but will prevent future donations and contacts from - syncing. - - - - - Organization 1 - - - - Sync - - - - - - - - - - - Last Updated - - - 2023-07-13 - - - - - - Add Account - - + /> void; + expandedPanel: string; +} + +const StyledServicesButton = styled(Button)(({ theme }) => ({ + marginTop: theme.spacing(2), +})); + +const OrganizationDeleteIconButton = styled(IconButton)(({ theme }) => ({ + color: theme.palette.cruGrayMedium.main, + position: 'right', + '&:disabled': { + cursor: 'not-allowed', + pointerEvents: 'all', + }, +})); + +export const OrganizationAccordian: React.FC = ({ + handleAccordionChange, + expandedPanel, +}) => { + const { t } = useTranslation(); + const [showAddAccountModal, setShowAddAccountModal] = useState(false); + + return ( + + } + > + + Add or change the organizations that sync donation information with this + MPDX account. Removing an organization will not remove past information, + but will prevent future donations and contacts from syncing. + + + + + Organization 1 + + + + Sync + + + + + + + + + + + Last Updated + + + 2023-07-13 + + + + + setShowAddAccountModal(true)} + > + Add Account + + + {showAddAccountModal && ( + setShowAddAccountModal(false)} + /> + )} + + ); +}; diff --git a/src/components/Settings/connectServices/Organization/OrganizationAddAccountModal.tsx b/src/components/Settings/connectServices/Organization/OrganizationAddAccountModal.tsx new file mode 100644 index 000000000..25ec204d5 --- /dev/null +++ b/src/components/Settings/connectServices/Organization/OrganizationAddAccountModal.tsx @@ -0,0 +1,85 @@ +import React, { useState } from 'react'; +import { useTranslation } from 'react-i18next'; +import { DialogActions, Autocomplete, TextField } from '@mui/material'; +import { styled } from '@mui/material/styles'; +import { Box } from '@mui/system'; +import Modal from 'src/components/common/Modal/Modal'; +import { + SubmitButton, + CancelButton, +} from 'src/components/common/Modal/ActionButtons/ActionButtons'; +import { FieldWrapper } from 'src/components/Shared/Forms/FieldWrapper'; +import { useGetOrganizationsQuery } from './Organizations.generated'; + +interface OrganizationAddAccountModalProps { + handleClose: () => void; +} + +const StyledBox = styled(Box)(() => ({ + padding: '0 10px', +})); + +export const OrganizationAddAccountModal: React.FC< + OrganizationAddAccountModalProps +> = ({ handleClose }) => { + const { t } = useTranslation(); + const [selectedOrganization, setSelectedOrganization] = useState(''); + const { data: organizations, loading } = useGetOrganizationsQuery(); + + const handleSubmit = () => { + if (!selectedOrganization) { + // TODO - Handle Error + return; + } + // TODO - Update GraphQL + setSelectedOrganization(''); + handleClose(); + }; + + const handleAutoCompleteChange = (_, value) => { + if (value) setSelectedOrganization(value); + }; + + return ( + +
+ + + id) || []} + getOptionLabel={(option) => + organizations?.organizations?.find( + ({ id }) => String(id) === String(option), + )?.name ?? '' + } + filterSelectedOptions + fullWidth + renderInput={(params) => ( + + )} + /> + + + + + {t('Add Account')} + +
+ + ); +}; diff --git a/src/components/Settings/connectServices/Organization/Organizations.graphql b/src/components/Settings/connectServices/Organization/Organizations.graphql new file mode 100644 index 000000000..56f3e2e07 --- /dev/null +++ b/src/components/Settings/connectServices/Organization/Organizations.graphql @@ -0,0 +1,6 @@ +query getOrganizations { + organizations { + name + id + } +} diff --git a/src/components/Settings/connectServices/TheKeyAccordian.tsx b/src/components/Settings/connectServices/TheKeyAccordian.tsx new file mode 100644 index 000000000..23bb4ba9c --- /dev/null +++ b/src/components/Settings/connectServices/TheKeyAccordian.tsx @@ -0,0 +1,42 @@ +import { useTranslation } from 'react-i18next'; +import { AccordionItem } from 'src/components/Shared/Forms/Accordions/AccordionItem'; +import { FormWrapper } from 'src/components/Shared/Forms/Fields/FormWrapper'; +import { FieldWrapper } from 'src/components/Shared/Forms/FieldWrapper'; +import { StyledOutlinedInput } from 'src/components/Shared/Forms/Field'; + +interface TheKeyAccordianProps { + handleAccordionChange: (panel: string) => void; + expandedPanel: string; +} + +export const TheKeyAccordian: React.FC = ({ + handleAccordionChange, + expandedPanel, +}) => { + const { t } = useTranslation(); + + const handleSubmit = () => { + return; + }; + + return ( + + } + > + + + + + + + ); +}; From 5769f1474a10e374829f95cedd3656851d3496b7 Mon Sep 17 00:00:00 2001 From: Daniel Bisgrove Date: Mon, 24 Jul 2023 15:00:37 -0400 Subject: [PATCH 086/103] Organizations Graph Ql --- next.config.js | 1 + .../TopBar/Items/ProfileMenu/ProfileMenu.tsx | 30 +- .../Organization/OrganizationAccordian.tsx | 114 ++++--- .../OrganizationAddAccountModal.tsx | 316 +++++++++++++++--- .../Organization/Organizations.graphql | 16 +- src/lib/helpScout.ts | 11 +- src/theme.ts | 1 + 7 files changed, 376 insertions(+), 113 deletions(-) diff --git a/next.config.js b/next.config.js index 21556856c..1def2912e 100644 --- a/next.config.js +++ b/next.config.js @@ -94,6 +94,7 @@ module.exports = withPlugins([ HS_HOME_SUGGESTIONS: process.env.HS_HOME_SUGGESTIONS, HS_REPORTS_SUGGESTIONS: process.env.HS_REPORTS_SUGGESTIONS, HS_TASKS_SUGGESTIONS: process.env.HS_TASKS_SUGGESTIONS, + HS_SETUP_FIND_ORGANIZATION: process.env.HS_SETUP_FIND_ORGANIZATION, ALERT_MESSAGE: process.env.ALERT_MESSAGE, }, experimental: { diff --git a/src/components/Layouts/Primary/TopBar/Items/ProfileMenu/ProfileMenu.tsx b/src/components/Layouts/Primary/TopBar/Items/ProfileMenu/ProfileMenu.tsx index 2a4a61310..a45f78014 100644 --- a/src/components/Layouts/Primary/TopBar/Items/ProfileMenu/ProfileMenu.tsx +++ b/src/components/Layouts/Primary/TopBar/Items/ProfileMenu/ProfileMenu.tsx @@ -229,22 +229,20 @@ const ProfileMenu = (): ReactElement => { > - {/* Keeping the original Preferences link because I'm not certain I've set the new one up properly */} - {/* - - - - */} - - - - - - - - - - + + + + + + diff --git a/src/components/Settings/connectServices/Organization/OrganizationAccordian.tsx b/src/components/Settings/connectServices/Organization/OrganizationAccordian.tsx index a165f3068..764f3c0fc 100644 --- a/src/components/Settings/connectServices/Organization/OrganizationAccordian.tsx +++ b/src/components/Settings/connectServices/Organization/OrganizationAccordian.tsx @@ -14,6 +14,7 @@ import DeleteIcon from '@mui/icons-material/Delete'; import { styled } from '@mui/material/styles'; import { AccordionItem } from 'src/components/Shared/Forms/Accordions/AccordionItem'; import { OrganizationAddAccountModal } from './OrganizationAddAccountModal'; +import { useGetUsersOrganizationsQuery } from './Organizations.generated'; interface OrganizationAccordianProps { handleAccordionChange: (panel: string) => void; @@ -39,7 +40,10 @@ export const OrganizationAccordian: React.FC = ({ }) => { const { t } = useTranslation(); const [showAddAccountModal, setShowAddAccountModal] = useState(false); + const { data, loading } = useGetUsersOrganizationsQuery(); + const organizations = data?.user.administrativeOrganizations.nodes; + // console.log('organizations', organizations); return ( = ({ MPDX account. Removing an organization will not remove past information, but will prevent future donations and contacts from syncing. - - - - Organization 1 - - - - Sync - - - - - - - - - - - Last Updated - - - 2023-07-13 - - + + {!loading && !organizations?.length && ( + + Let's start by connecting to your first organization + + )} + + {!loading && !!organizations?.length && ( + + {organizations.map((organization, idx) => ( + + + + Organization 1 + + + + Sync + + + + + + + + + + + Last Updated + + + 2023-07-13 + + + + + ))} - + )} + setShowAddAccountModal(true)} > Add Account diff --git a/src/components/Settings/connectServices/Organization/OrganizationAddAccountModal.tsx b/src/components/Settings/connectServices/Organization/OrganizationAddAccountModal.tsx index 25ec204d5..92ffe19b1 100644 --- a/src/components/Settings/connectServices/Organization/OrganizationAddAccountModal.tsx +++ b/src/components/Settings/connectServices/Organization/OrganizationAddAccountModal.tsx @@ -1,6 +1,15 @@ -import React, { useState } from 'react'; +import React, { useState, ReactElement } from 'react'; +import { Formik } from 'formik'; +import * as yup from 'yup'; import { useTranslation } from 'react-i18next'; -import { DialogActions, Autocomplete, TextField } from '@mui/material'; +import { + DialogActions, + Autocomplete, + TextField, + Button, + Typography, + Link, +} from '@mui/material'; import { styled } from '@mui/material/styles'; import { Box } from '@mui/system'; import Modal from 'src/components/common/Modal/Modal'; @@ -10,6 +19,9 @@ import { } from 'src/components/common/Modal/ActionButtons/ActionButtons'; import { FieldWrapper } from 'src/components/Shared/Forms/FieldWrapper'; import { useGetOrganizationsQuery } from './Organizations.generated'; +import { showArticle, variables } from 'src/lib/helpScout'; +import { Organization } from '../../../../../graphql/types.generated'; +import theme from 'src/theme'; interface OrganizationAddAccountModalProps { handleClose: () => void; @@ -19,27 +31,111 @@ const StyledBox = styled(Box)(() => ({ padding: '0 10px', })); +const WarningBox = styled(Box)(() => ({ + padding: '15px', + background: theme.palette.mpdxYellow.main, + maxWidth: 'calc(100% - 20px)', + margin: '10px auto 0', +})); + +const StyledTypography = styled(Typography)(() => ({ + marginTop: '10px', + color: theme.palette.mpdxYellow.contrastText, +})); + +enum warningEnum { + MINISTRY = 'ministry', + LOGIN = 'login', + OAUTH = 'oauth', +} + export const OrganizationAddAccountModal: React.FC< OrganizationAddAccountModalProps > = ({ handleClose }) => { const { t } = useTranslation(); - const [selectedOrganization, setSelectedOrganization] = useState(''); + const [showWarning, setShowWarning] = useState(); const { data: organizations, loading } = useGetOrganizationsQuery(); - const handleSubmit = () => { - if (!selectedOrganization) { - // TODO - Handle Error - return; - } - // TODO - Update GraphQL - setSelectedOrganization(''); + const onSubmit = (attributes) => { + return attributes; handleClose(); }; - const handleAutoCompleteChange = (_, value) => { - if (value) setSelectedOrganization(value); + const handleOrganizationChange = (apiClass, oauth) => { + const ministryAccount = [ + 'Siebel', + 'Remote::Import::OrganizationAccountService', + ]; + const loginRequired = [ + 'DataServer', + 'DataServerPtc', + 'DataServerNavigators', + 'DataServerStumo', + ]; + + if (apiClass) { + let warning: warningEnum | undefined = undefined; + if (ministryAccount.indexOf(apiClass) !== -1) { + warning = warningEnum.MINISTRY; + } else if (loginRequired.indexOf(apiClass) !== -1 && !oauth) { + warning = warningEnum.LOGIN; + } else if (oauth) { + warning = warningEnum.OAUTH; + } + setShowWarning(warning); + return warning; + } + }; + + const showOrganizationHelp = () => { + showArticle(variables.HS_SETUP_FIND_ORGANIZATION); }; + const OrganizationSchema: yup.SchemaOf<{ + selectedOrganization: Pick< + Organization, + 'id' | 'name' | 'oauth' | 'apiClass' | 'giftAidPercentage' + >; + username: string | null | undefined; + password: string | null | undefined; + }> = yup.object({ + selectedOrganization: yup + .object({ + id: yup.string().required(), + apiClass: yup.string().required(), + name: yup.string().required(), + oauth: yup.boolean().required(), + giftAidPercentage: yup.number().nullable(), + }) + .required(), + username: yup + .string() + .when('selectedOrganization', (organization, schema) => { + if ( + handleOrganizationChange( + organization.apiClass, + organization.oauth, + ) === warningEnum.LOGIN + ) { + return schema.required('Must enter username'); + } + return schema; + }), + password: yup + .string() + .when('selectedOrganization', (organization, schema) => { + if ( + handleOrganizationChange( + organization.apiClass, + organization.oauth, + ) === warningEnum.LOGIN + ) { + return schema.required('Must enter password'); + } + return schema; + }), + }); + return ( -
- - - id) || []} - getOptionLabel={(option) => - organizations?.organizations?.find( - ({ id }) => String(id) === String(option), - )?.name ?? '' - } - filterSelectedOptions - fullWidth - renderInput={(params) => ( - - )} - /> - - - - - {t('Add Account')} - -
+ + {({ + values: { selectedOrganization, username, password }, + handleChange, + handleSubmit, + setFieldValue, + isSubmitting, + isValid, + }): ReactElement => ( +
+ + { + handleOrganizationChange(value?.apiClass, value?.oauth); + setFieldValue('selectedOrganization', value); + }} + options={ + organizations?.organizations?.map( + (organization) => organization, + ) || [] + } + getOptionLabel={(option) => + organizations?.organizations?.find( + ({ id }) => String(id) === String(option.id), + )?.name ?? '' + } + filterSelectedOptions + fullWidth + renderInput={(params) => ( + + )} + /> + + + {!selectedOrganization && ( + + )} + + {showWarning === warningEnum.MINISTRY && ( + + + {t('You must log into MPDX with your ministry email')} + + + {t( + 'This organization requires you to log into MPDX with your ministry email to access it.', + )} +
    +
  1. + {t('First you need to ')} + + {t( + 'click here to log out of your personal Key account', + )} + +
    2. +
  2. + {t('Next, ')} + + {t('click here to log out of MPDX')} + + {t( + ' so you can log back in with your offical key account.', + )} +
    3. +
+ + + {t( + "If you are already logged in using your ministry account, you'll need to contact your donation services team to request access.", + )} + {t( + "Once this is done you'll need to wait 24 hours for MPDX to sync your data.", + )} + + + )} + + {showWarning === warningEnum.OAUTH && ( + + + {t( + "You will be taken to your organization's donation services system to grant MPDX permission to access your donation data.", + )} + + + )} + + {showWarning === warningEnum.LOGIN && ( + <> + + + + + + + + + + + + )} + + + + + {t('Add Account')} + + +
+ )} + ); }; diff --git a/src/components/Settings/connectServices/Organization/Organizations.graphql b/src/components/Settings/connectServices/Organization/Organizations.graphql index 56f3e2e07..22af9867a 100644 --- a/src/components/Settings/connectServices/Organization/Organizations.graphql +++ b/src/components/Settings/connectServices/Organization/Organizations.graphql @@ -1,6 +1,20 @@ query getOrganizations { organizations { - name id + name + apiClass + oauth + giftAidPercentage + } +} + +query GetUsersOrganizations { + user { + administrativeOrganizations(first: 25) { + nodes { + name + id + } + } } } diff --git a/src/lib/helpScout.ts b/src/lib/helpScout.ts index c218b3f65..ec2054f30 100644 --- a/src/lib/helpScout.ts +++ b/src/lib/helpScout.ts @@ -39,12 +39,17 @@ export const identifyUser = (id: string, email: string, name: string) => { }); }; -export const suggestArticles = (envVar: keyof typeof env) => { - const articleIds = env[envVar]; +export const showArticle = (articleId) => { + callBeacon('article', articleId); +}; + +export const suggestArticles = (envVar: keyof typeof variables) => { + const articleIds = variables[envVar]; callBeacon('suggest', articleIds?.split(',') ?? []); }; -const env = { +export const variables = { + HS_SETUP_FIND_ORGANIZATION: process.env.HS_SETUP_FIND_ORGANIZATION, HS_CONTACTS_SUGGESTIONS: process.env.HS_CONTACTS_SUGGESTIONS, HS_CONTACTS_CONTACT_SUGGESTIONS: process.env.HS_CONTACTS_CONTACT_SUGGESTIONS, HS_HOME_SUGGESTIONS: process.env.HS_HOME_SUGGESTIONS, diff --git a/src/theme.ts b/src/theme.ts index 672cb8f0d..c8965c610 100644 --- a/src/theme.ts +++ b/src/theme.ts @@ -92,6 +92,7 @@ const theme = createTheme({ }, mpdxYellow: { main: mpdxColors.yellow, + contrastText: '#8a6d3b', }, mpdxRed: { main: mpdxColors.red, From 697f6b6c78745796bd6ee14bf19f51145ba79874 Mon Sep 17 00:00:00 2001 From: Daniel Bisgrove Date: Mon, 24 Jul 2023 15:19:08 -0400 Subject: [PATCH 087/103] fixing lint issyes --- .../[accountListId]/settings/connectServices.page.tsx | 6 ++++++ .../connectServices/Organization/OrganizationAccordian.tsx | 5 +++-- .../Organization/OrganizationAddAccountModal.tsx | 2 +- src/theme.ts | 2 +- 4 files changed, 11 insertions(+), 4 deletions(-) diff --git a/pages/accountLists/[accountListId]/settings/connectServices.page.tsx b/pages/accountLists/[accountListId]/settings/connectServices.page.tsx index 0fe6657e0..477886a90 100644 --- a/pages/accountLists/[accountListId]/settings/connectServices.page.tsx +++ b/pages/accountLists/[accountListId]/settings/connectServices.page.tsx @@ -44,6 +44,12 @@ const ConnectServices: React.FC = () => { const sendListToChalkLine = () => { // eslint-disable-next-line no-console console.log('Sending newsletter list to Chalk Line'); + + return new Promise((resolve) => { + setTimeout(() => { + resolve('foo'); + }, 300); + }); }; return ( diff --git a/src/components/Settings/connectServices/Organization/OrganizationAccordian.tsx b/src/components/Settings/connectServices/Organization/OrganizationAccordian.tsx index 764f3c0fc..f9dffbde2 100644 --- a/src/components/Settings/connectServices/Organization/OrganizationAccordian.tsx +++ b/src/components/Settings/connectServices/Organization/OrganizationAccordian.tsx @@ -25,9 +25,10 @@ const StyledServicesButton = styled(Button)(({ theme }) => ({ marginTop: theme.spacing(2), })); -const OrganizationDeleteIconButton = styled(IconButton)(({ theme }) => ({ +const OrganizationDeleteIconButton = styled(IconButton)(() => ({ color: theme.palette.cruGrayMedium.main, - position: 'right', + position: 'absolute', + right: 0, '&:disabled': { cursor: 'not-allowed', pointerEvents: 'all', diff --git a/src/components/Settings/connectServices/Organization/OrganizationAddAccountModal.tsx b/src/components/Settings/connectServices/Organization/OrganizationAddAccountModal.tsx index 92ffe19b1..7b9a89b66 100644 --- a/src/components/Settings/connectServices/Organization/OrganizationAddAccountModal.tsx +++ b/src/components/Settings/connectServices/Organization/OrganizationAddAccountModal.tsx @@ -40,7 +40,7 @@ const WarningBox = styled(Box)(() => ({ const StyledTypography = styled(Typography)(() => ({ marginTop: '10px', - color: theme.palette.mpdxYellow.contrastText, + color: theme.palette.mpdxYellow.dark, })); enum warningEnum { diff --git a/src/theme.ts b/src/theme.ts index c8965c610..fb2d05b3b 100644 --- a/src/theme.ts +++ b/src/theme.ts @@ -92,7 +92,7 @@ const theme = createTheme({ }, mpdxYellow: { main: mpdxColors.yellow, - contrastText: '#8a6d3b', + dark: '#8a6d3b', }, mpdxRed: { main: mpdxColors.red, From d9a43b8c7c4bb8da75c028dd5fded884fa00b6af Mon Sep 17 00:00:00 2001 From: Daniel Bisgrove Date: Tue, 25 Jul 2023 11:04:50 -0400 Subject: [PATCH 088/103] Integrations - Organizations --- ...ervices.page.tsx => integrations.page.tsx} | 10 +- .../Layouts/Primary/TopBar/GetTopBar.graphql | 1 + .../TopBar/Items/ProfileMenu/ProfileMenu.tsx | 15 +- .../Organization/OrganizationAccordian.tsx | 145 ---------- .../Organization/OrganizationAccordian.tsx | 267 ++++++++++++++++++ .../OrganizationAddAccountModal.tsx | 61 ++-- .../OrganizationImportDataSyncModal.tsx | 134 +++++++++ .../Organization/Organizations.graphql | 15 +- .../TheKeyAccordian.tsx | 0 .../Shared/FileUploads/tntConnectDataSync.ts | 61 ++++ 10 files changed, 504 insertions(+), 205 deletions(-) rename pages/accountLists/[accountListId]/settings/{connectServices.page.tsx => integrations.page.tsx} (95%) delete mode 100644 src/components/Settings/connectServices/Organization/OrganizationAccordian.tsx create mode 100644 src/components/Settings/integrations/Organization/OrganizationAccordian.tsx rename src/components/Settings/{connectServices => integrations}/Organization/OrganizationAddAccountModal.tsx (86%) create mode 100644 src/components/Settings/integrations/Organization/OrganizationImportDataSyncModal.tsx rename src/components/Settings/{connectServices => integrations}/Organization/Organizations.graphql (50%) rename src/components/Settings/{connectServices => integrations}/TheKeyAccordian.tsx (100%) create mode 100644 src/components/Shared/FileUploads/tntConnectDataSync.ts diff --git a/pages/accountLists/[accountListId]/settings/connectServices.page.tsx b/pages/accountLists/[accountListId]/settings/integrations.page.tsx similarity index 95% rename from pages/accountLists/[accountListId]/settings/connectServices.page.tsx rename to pages/accountLists/[accountListId]/settings/integrations.page.tsx index 477886a90..39da0e845 100644 --- a/pages/accountLists/[accountListId]/settings/connectServices.page.tsx +++ b/pages/accountLists/[accountListId]/settings/integrations.page.tsx @@ -9,8 +9,8 @@ import { styled } from '@mui/material/styles'; import { Button, Typography, List, ListItemText, Alert } from '@mui/material'; import { StyledFormLabel } from '../../../../src/components/Shared/Forms/Field'; import { Confirmation } from 'src/components/common/Modal/Confirmation/Confirmation'; -import { TheKeyAccordian } from 'src/components/Settings/connectServices/TheKeyAccordian'; -import { OrganizationAccordian } from 'src/components/Settings/connectServices/Organization/OrganizationAccordian'; +import { TheKeyAccordian } from 'src/components/Settings/integrations/TheKeyAccordian'; +import { OrganizationAccordian } from 'src/components/Settings/integrations/Organization/OrganizationAccordian'; const StyledListItem = styled(ListItemText)(() => ({ display: 'list-item', @@ -25,11 +25,9 @@ const StyledServicesButton = styled(Button)(({ theme }) => ({ marginTop: theme.spacing(2), })); -const ConnectServices: React.FC = () => { +const Integrations: React.FC = () => { const { t } = useTranslation(); const [expandedPanel, setExpandedPanel] = useState(''); - // const [isValid, setIsValid] = useState(false); - // const [isSubmitting, setIsSubmitting] = useState(false); const [confirmingChalkLine, setConfirmingChalkLine] = useState(false); @@ -217,4 +215,4 @@ const ConnectServices: React.FC = () => { ); }; -export default ConnectServices; +export default Integrations; diff --git a/src/components/Layouts/Primary/TopBar/GetTopBar.graphql b/src/components/Layouts/Primary/TopBar/GetTopBar.graphql index a819c6fba..bc51bece7 100644 --- a/src/components/Layouts/Primary/TopBar/GetTopBar.graphql +++ b/src/components/Layouts/Primary/TopBar/GetTopBar.graphql @@ -12,6 +12,7 @@ query GetTopBar { lastName admin developer + defaultAccountList keyAccounts { id email diff --git a/src/components/Layouts/Primary/TopBar/Items/ProfileMenu/ProfileMenu.tsx b/src/components/Layouts/Primary/TopBar/Items/ProfileMenu/ProfileMenu.tsx index a45f78014..f966e5ea2 100644 --- a/src/components/Layouts/Primary/TopBar/Items/ProfileMenu/ProfileMenu.tsx +++ b/src/components/Layouts/Primary/TopBar/Items/ProfileMenu/ProfileMenu.tsx @@ -130,6 +130,15 @@ const ProfileMenu = (): ReactElement => { ? !!(accountListId && data.accountLists.nodes.length > 1) : false; + let accountListIdFallback = accountListId; + if (!accountListIdFallback) { + if (data?.accountLists?.nodes.length === 1) { + accountListIdFallback = data.accountLists.nodes[0]?.id; + } else if (data?.user.defaultAccountList) { + accountListIdFallback = data.user.defaultAccountList; + } + } + return ( <> { diff --git a/src/components/Settings/connectServices/Organization/OrganizationAccordian.tsx b/src/components/Settings/connectServices/Organization/OrganizationAccordian.tsx deleted file mode 100644 index f9dffbde2..000000000 --- a/src/components/Settings/connectServices/Organization/OrganizationAccordian.tsx +++ /dev/null @@ -1,145 +0,0 @@ -import { useState } from 'react'; -import { useTranslation } from 'react-i18next'; -import { - Grid, - Box, - Button, - IconButton, - Typography, - Card, - Divider, -} from '@mui/material'; -import theme from 'src/theme'; -import DeleteIcon from '@mui/icons-material/Delete'; -import { styled } from '@mui/material/styles'; -import { AccordionItem } from 'src/components/Shared/Forms/Accordions/AccordionItem'; -import { OrganizationAddAccountModal } from './OrganizationAddAccountModal'; -import { useGetUsersOrganizationsQuery } from './Organizations.generated'; - -interface OrganizationAccordianProps { - handleAccordionChange: (panel: string) => void; - expandedPanel: string; -} - -const StyledServicesButton = styled(Button)(({ theme }) => ({ - marginTop: theme.spacing(2), -})); - -const OrganizationDeleteIconButton = styled(IconButton)(() => ({ - color: theme.palette.cruGrayMedium.main, - position: 'absolute', - right: 0, - '&:disabled': { - cursor: 'not-allowed', - pointerEvents: 'all', - }, -})); - -export const OrganizationAccordian: React.FC = ({ - handleAccordionChange, - expandedPanel, -}) => { - const { t } = useTranslation(); - const [showAddAccountModal, setShowAddAccountModal] = useState(false); - const { data, loading } = useGetUsersOrganizationsQuery(); - const organizations = data?.user.administrativeOrganizations.nodes; - - // console.log('organizations', organizations); - return ( - - } - > - - Add or change the organizations that sync donation information with this - MPDX account. Removing an organization will not remove past information, - but will prevent future donations and contacts from syncing. - - - {!loading && !organizations?.length && ( - - Let's start by connecting to your first organization - - )} - - {!loading && !!organizations?.length && ( - - {organizations.map((organization, idx) => ( - - - - Organization 1 - - - - Sync - - - - - - - - - - - Last Updated - - - 2023-07-13 - - - - - ))} - - )} - - setShowAddAccountModal(true)} - > - Add Account - - - {showAddAccountModal && ( - setShowAddAccountModal(false)} - /> - )} - - ); -}; diff --git a/src/components/Settings/integrations/Organization/OrganizationAccordian.tsx b/src/components/Settings/integrations/Organization/OrganizationAccordian.tsx new file mode 100644 index 000000000..85e16b7c5 --- /dev/null +++ b/src/components/Settings/integrations/Organization/OrganizationAccordian.tsx @@ -0,0 +1,267 @@ +import { useState } from 'react'; +import { useTranslation } from 'react-i18next'; +import { + Grid, + Box, + Button, + IconButton, + Typography, + Card, + Divider, +} from '@mui/material'; +import { DateTime } from 'luxon'; +import theme from 'src/theme'; +import DeleteIcon from '@mui/icons-material/Delete'; +import Edit from '@mui/icons-material/Edit'; +import { styled } from '@mui/material/styles'; +import { AccordionItem } from 'src/components/Shared/Forms/Accordions/AccordionItem'; +import { OrganizationAddAccountModal } from './OrganizationAddAccountModal'; +import { OrganizationImportDataSyncModal } from './OrganizationImportDataSyncModal'; +import { useGetUsersOrganizationsQuery } from './Organizations.generated'; +import { Organization } from '../../../../../graphql/types.generated'; + +interface OrganizationAccordianProps { + handleAccordionChange: (panel: string) => void; + expandedPanel: string; +} + +const StyledServicesButton = styled(Button)(({ theme }) => ({ + marginTop: theme.spacing(2), +})); + +const OrganizationDeleteIconButton = styled(IconButton)(() => ({ + color: theme.palette.cruGrayMedium.main, + marginLeft: '10px', + '&:disabled': { + cursor: 'not-allowed', + pointerEvents: 'all', + }, +})); + +export enum OrganizationTypesEnum { + MINISTRY = 'ministry', + LOGIN = 'login', + OAUTH = 'oauth', + OFFLINE = 'offline', +} + +export const getOrganizationType = (apiClass, oauth) => { + const ministryAccount = [ + 'Siebel', + 'Remote::Import::OrganizationAccountService', + ]; + const loginRequired = [ + 'DataServer', + 'DataServerPtc', + 'DataServerNavigators', + 'DataServerStumo', + ]; + const offline = ['OfflineOrg']; + + if (apiClass) { + if (ministryAccount.indexOf(apiClass) !== -1) { + return OrganizationTypesEnum.MINISTRY; + } else if (loginRequired.indexOf(apiClass) !== -1 && !oauth) { + return OrganizationTypesEnum.LOGIN; + } else if (oauth) { + return OrganizationTypesEnum.OAUTH; + } else if (offline.indexOf(apiClass) !== -1) { + return OrganizationTypesEnum.OFFLINE; + } + } + return undefined; +}; + +export const OrganizationAccordian: React.FC = ({ + handleAccordionChange, + expandedPanel, +}) => { + const { t } = useTranslation(); + const [selectedOrganization, setSelectedOrganization] = + useState>(); + const [showAddAccountModal, setShowAddAccountModal] = useState(false); + const [showSyncAccountModal, setShowSyncAccountModal] = useState(false); + const [showImportDataSyncModal, setShowImportDataSyncModal] = useState(false); + const [showReconnectModal, setShowReconnectModal] = useState(false); + + const { data, loading } = useGetUsersOrganizationsQuery(); + const organizations = data?.userOrganizationAccounts; + + return ( + + } + > + + Add or change the organizations that sync donation information with this + MPDX account. Removing an organization will not remove past information, + but will prevent future donations and contacts from syncing. + + + {!loading && !organizations?.length && ( + + Let's start by connecting to your first organization + + )} + + {!loading && !!organizations?.length && ( + + {organizations.map( + ({ organization, lastDownloadedAt, latestDonationDate }) => { + const type = getOrganizationType( + organization.apiClass, + organization.oauth, + ); + + return ( + + + + + {organization.name} + + + + {type !== OrganizationTypesEnum.OFFLINE && ( + { + setSelectedOrganization(organization); + setShowSyncAccountModal(true); + }} + > + Sync + + )} + + {type === OrganizationTypesEnum.OFFLINE && ( + { + setSelectedOrganization(organization); + setShowImportDataSyncModal(true); + }} + > + Import TntConnect DataSync file + + )} + + {type === OrganizationTypesEnum.OAUTH && ( + { + setSelectedOrganization(organization); + setShowReconnectModal(true); + }} + > + Reconnect + + )} + {type === OrganizationTypesEnum.LOGIN && ( + + + + )} + + + + + + + + + + Last Updated + + {lastDownloadedAt && ( + + {DateTime.fromISO(lastDownloadedAt).toRelative()} + + )} + + + + + + Last Gift Date + + {latestDonationDate && ( + + {DateTime.fromISO(latestDonationDate).toRelative()} + + )} + + + + ); + }, + )} + + )} + + setShowAddAccountModal(true)} + > + Add Account + + + {showAddAccountModal && ( + setShowAddAccountModal(false)} + /> + )} + {showSyncAccountModal && ( + setShowSyncAccountModal(false)} + /> + )} + {showImportDataSyncModal && ( + setShowImportDataSyncModal(false)} + organization={selectedOrganization} + /> + )} + {showReconnectModal && ( + setShowSyncAccountModal(false)} + /> + )} + + ); +}; diff --git a/src/components/Settings/connectServices/Organization/OrganizationAddAccountModal.tsx b/src/components/Settings/integrations/Organization/OrganizationAddAccountModal.tsx similarity index 86% rename from src/components/Settings/connectServices/Organization/OrganizationAddAccountModal.tsx rename to src/components/Settings/integrations/Organization/OrganizationAddAccountModal.tsx index 7b9a89b66..ecace594a 100644 --- a/src/components/Settings/connectServices/Organization/OrganizationAddAccountModal.tsx +++ b/src/components/Settings/integrations/Organization/OrganizationAddAccountModal.tsx @@ -22,6 +22,10 @@ import { useGetOrganizationsQuery } from './Organizations.generated'; import { showArticle, variables } from 'src/lib/helpScout'; import { Organization } from '../../../../../graphql/types.generated'; import theme from 'src/theme'; +import { + getOrganizationType, + OrganizationTypesEnum, +} from './OrganizationAccordian'; interface OrganizationAddAccountModalProps { handleClose: () => void; @@ -43,50 +47,19 @@ const StyledTypography = styled(Typography)(() => ({ color: theme.palette.mpdxYellow.dark, })); -enum warningEnum { - MINISTRY = 'ministry', - LOGIN = 'login', - OAUTH = 'oauth', -} - export const OrganizationAddAccountModal: React.FC< OrganizationAddAccountModalProps > = ({ handleClose }) => { const { t } = useTranslation(); - const [showWarning, setShowWarning] = useState(); + const [showWarning, setShowWarning] = useState(); const { data: organizations, loading } = useGetOrganizationsQuery(); const onSubmit = (attributes) => { + // TODO return attributes; handleClose(); }; - const handleOrganizationChange = (apiClass, oauth) => { - const ministryAccount = [ - 'Siebel', - 'Remote::Import::OrganizationAccountService', - ]; - const loginRequired = [ - 'DataServer', - 'DataServerPtc', - 'DataServerNavigators', - 'DataServerStumo', - ]; - - if (apiClass) { - let warning: warningEnum | undefined = undefined; - if (ministryAccount.indexOf(apiClass) !== -1) { - warning = warningEnum.MINISTRY; - } else if (loginRequired.indexOf(apiClass) !== -1 && !oauth) { - warning = warningEnum.LOGIN; - } else if (oauth) { - warning = warningEnum.OAUTH; - } - setShowWarning(warning); - return warning; - } - }; - const showOrganizationHelp = () => { showArticle(variables.HS_SETUP_FIND_ORGANIZATION); }; @@ -112,10 +85,8 @@ export const OrganizationAddAccountModal: React.FC< .string() .when('selectedOrganization', (organization, schema) => { if ( - handleOrganizationChange( - organization.apiClass, - organization.oauth, - ) === warningEnum.LOGIN + getOrganizationType(organization.apiClass, organization.oauth) === + OrganizationTypesEnum.LOGIN ) { return schema.required('Must enter username'); } @@ -125,10 +96,8 @@ export const OrganizationAddAccountModal: React.FC< .string() .when('selectedOrganization', (organization, schema) => { if ( - handleOrganizationChange( - organization.apiClass, - organization.oauth, - ) === warningEnum.LOGIN + getOrganizationType(organization.apiClass, organization.oauth) === + OrganizationTypesEnum.LOGIN ) { return schema.required('Must enter password'); } @@ -169,7 +138,9 @@ export const OrganizationAddAccountModal: React.FC< loading={loading} value={selectedOrganization} onChange={(_, value) => { - handleOrganizationChange(value?.apiClass, value?.oauth); + setShowWarning( + getOrganizationType(value?.apiClass, value?.oauth), + ); setFieldValue('selectedOrganization', value); }} options={ @@ -200,7 +171,7 @@ export const OrganizationAddAccountModal: React.FC< )} - {showWarning === warningEnum.MINISTRY && ( + {showWarning === OrganizationTypesEnum.MINISTRY && ( )} - {showWarning === warningEnum.OAUTH && ( + {showWarning === OrganizationTypesEnum.OAUTH && ( {t( @@ -265,7 +236,7 @@ export const OrganizationAddAccountModal: React.FC< )} - {showWarning === warningEnum.LOGIN && ( + {showWarning === OrganizationTypesEnum.LOGIN && ( <> diff --git a/src/components/Settings/integrations/Organization/OrganizationImportDataSyncModal.tsx b/src/components/Settings/integrations/Organization/OrganizationImportDataSyncModal.tsx new file mode 100644 index 000000000..0995865cb --- /dev/null +++ b/src/components/Settings/integrations/Organization/OrganizationImportDataSyncModal.tsx @@ -0,0 +1,134 @@ +import React, { useState } from 'react'; +import { useTranslation } from 'react-i18next'; +import { DialogActions, Typography, Button, Paper, Grid } from '@mui/material'; +import { styled } from '@mui/material/styles'; +import { Box } from '@mui/system'; +import { useSnackbar } from 'notistack'; +import Modal from 'src/components/common/Modal/Modal'; +import { + SubmitButton, + CancelButton, +} from 'src/components/common/Modal/ActionButtons/ActionButtons'; +import theme from 'src/theme'; +import { Organization } from '../../../../../graphql/types.generated'; +import { validateFile } from 'src/components/Shared/FileUploads/tntConnectDataSync'; + +interface OrganizationImportDataSyncModalProps { + handleClose: () => void; + organization?: Omit; +} + +const StyledBox = styled(Box)(() => ({ + padding: '0 10px', +})); + +const StyledTypography = styled(Typography)(() => ({ + marginTop: '10px', +})); + +export const OrganizationImportDataSyncModal: React.FC< + OrganizationImportDataSyncModalProps +> = ({ handleClose, organization }) => { + const { t } = useTranslation(); + const { enqueueSnackbar } = useSnackbar(); + const [isSubmitting, setIsSubmitting] = useState(false); + const [importFile, setImportFile] = useState(null); + + const handleSubmit = (attributes) => { + // TODO + setIsSubmitting(true); + setIsSubmitting(false); + return { + attributes, + organization, + }; + handleClose(); + }; + + const handleFileChange: React.ChangeEventHandler = ( + event, + ) => { + const file = event.target.files?.[0]; + if (!file) return; + + const validationResult = validateFile({ file, t }); + if (!validationResult.success) { + enqueueSnackbar(validationResult.message, { + variant: 'error', + }); + return; + } + setImportFile(file); + }; + + return ( + +
+ + + {t( + 'This file should be a TntConnect DataSync file (.tntdatasync or .tntmpd) from your organization, not your local TntConnect database file (.mpddb).', + )} + + + {t( + 'To import your TntConnect database, go to Import from TntConnect', + )} + + + + + + + + + + + {importFile?.name ?? 'No File Chosen'} + + + + + + + + + + + {t('Upload File')} + + +
+ + ); +}; diff --git a/src/components/Settings/connectServices/Organization/Organizations.graphql b/src/components/Settings/integrations/Organization/Organizations.graphql similarity index 50% rename from src/components/Settings/connectServices/Organization/Organizations.graphql rename to src/components/Settings/integrations/Organization/Organizations.graphql index 22af9867a..26cea987e 100644 --- a/src/components/Settings/connectServices/Organization/Organizations.graphql +++ b/src/components/Settings/integrations/Organization/Organizations.graphql @@ -9,12 +9,15 @@ query getOrganizations { } query GetUsersOrganizations { - user { - administrativeOrganizations(first: 25) { - nodes { - name - id - } + userOrganizationAccounts { + organization { + apiClass + id + name + oauth } + latestDonationDate + lastDownloadedAt + username } } diff --git a/src/components/Settings/connectServices/TheKeyAccordian.tsx b/src/components/Settings/integrations/TheKeyAccordian.tsx similarity index 100% rename from src/components/Settings/connectServices/TheKeyAccordian.tsx rename to src/components/Settings/integrations/TheKeyAccordian.tsx diff --git a/src/components/Shared/FileUploads/tntConnectDataSync.ts b/src/components/Shared/FileUploads/tntConnectDataSync.ts new file mode 100644 index 000000000..49235d90f --- /dev/null +++ b/src/components/Shared/FileUploads/tntConnectDataSync.ts @@ -0,0 +1,61 @@ +import { TFunction } from 'i18next'; + +export const validateFile = ({ + file, + t, +}: { + file: File; + t: TFunction; +}): { success: true } | { success: false; message: string } => { + if (!new RegExp(/.*\.tntmpd$|.*\.tntdatasync$/).test(file.name)) { + return { + success: false, + message: t( + 'Cannot upload file: file must be an .tntmpd or .tntdatasync file.', + ), + }; + } + // TODO: NEED TO THINK THROUGH HOW WE'RE GOING TO UPLOAD 100MB FILE + // The /api/upload-person-avatar lambda appears to truncate the source body at 2^20 bytes + // Conservatively set the limit at 1MB (1,000,000 bytes), which is a little lower than 1MiB (1,048,576 bytes) because of the + // overhead of encoding multipart/form-data and the other fields in the POST body + if (file.size > 100_000_000) { + return { + success: false, + message: t('Cannot upload file: file size cannot exceed 100MB'), + }; + } + + return { success: true }; +}; + +export const uploadFile = async ({ + oranizationId, + file, + t, +}: { + oranizationId: string; + file: File; + t: TFunction; +}): Promise => { + const validationResult = validateFile({ file, t }); + if (!validationResult.success) { + throw new Error(validationResult.message); + } + + const form = new FormData(); + form.append('oranizationId', oranizationId); + form.append('importFile', file); + + // TODO + const res = await fetch(`/api/upload-tnt-connect-data-sync`, { + method: 'POST', + body: form, + }).catch(() => { + throw new Error(t('Cannot upload file: server error')); + }); + const data: { success: boolean } = await res.json(); + if (!data.success) { + throw new Error(t('Cannot upload file: server error')); + } +}; From 4f2e9771b65f535897846fb9db06e218fd4b5d03 Mon Sep 17 00:00:00 2001 From: Daniel Bisgrove Date: Tue, 25 Jul 2023 17:09:44 -0400 Subject: [PATCH 089/103] Organizations add account for oauth done. import tntconnect mostly done without graphQL and done all that I can without Graphql mutations --- next.config.js | 1 + .../settings/integrations.page.tsx | 4 +- .../Settings/integrations/Key/Key.graphql | 7 +++ .../{ => Key}/TheKeyAccordian.tsx | 30 ++++++----- .../Organization/OrganizationAccordian.tsx | 54 ++++++++++++------- .../OrganizationAddAccountModal.tsx | 40 ++++++++++---- .../Organization/OrganizationService.ts | 26 +++++++++ 7 files changed, 118 insertions(+), 44 deletions(-) create mode 100644 src/components/Settings/integrations/Key/Key.graphql rename src/components/Settings/integrations/{ => Key}/TheKeyAccordian.tsx (54%) create mode 100644 src/components/Settings/integrations/Organization/OrganizationService.ts diff --git a/next.config.js b/next.config.js index 1def2912e..f38734219 100644 --- a/next.config.js +++ b/next.config.js @@ -51,6 +51,7 @@ module.exports = withPlugins([ REST_API_URL: process.env.REST_API_URL ?? 'https://api.stage.mpdx.org/api/v2/', SITE_URL: siteUrl, + OAUTH_URL: process.env.OAUTH_URL ?? 'https://auth.stage.mpdx.org', CLIENT_ID: process.env.CLIENT_ID ?? '4027334344069527005', CLIENT_SECRET: process.env.CLIENT_SECRET, BEACON_TOKEN: process.env.BEACON_TOKEN, diff --git a/pages/accountLists/[accountListId]/settings/integrations.page.tsx b/pages/accountLists/[accountListId]/settings/integrations.page.tsx index 39da0e845..892b754e2 100644 --- a/pages/accountLists/[accountListId]/settings/integrations.page.tsx +++ b/pages/accountLists/[accountListId]/settings/integrations.page.tsx @@ -9,7 +9,7 @@ import { styled } from '@mui/material/styles'; import { Button, Typography, List, ListItemText, Alert } from '@mui/material'; import { StyledFormLabel } from '../../../../src/components/Shared/Forms/Field'; import { Confirmation } from 'src/components/common/Modal/Confirmation/Confirmation'; -import { TheKeyAccordian } from 'src/components/Settings/integrations/TheKeyAccordian'; +import { TheKeyAccordian } from 'src/components/Settings/integrations/Key/TheKeyAccordian'; import { OrganizationAccordian } from 'src/components/Settings/integrations/Organization/OrganizationAccordian'; const StyledListItem = styled(ListItemText)(() => ({ @@ -55,7 +55,7 @@ const Integrations: React.FC = () => { pageTitle={t('Connect Services')} pageHeading={t('Connect Services')} > - + void; @@ -14,11 +15,8 @@ export const TheKeyAccordian: React.FC = ({ expandedPanel, }) => { const { t } = useTranslation(); - - const handleSubmit = () => { - return; - }; - + const { data, loading } = useGetKeyAccountsQuery(); + const keyAccounts = data?.user?.keyAccounts; return ( = ({ /> } > - - - - - + {loading && } + {!loading && + keyAccounts?.map((account, idx) => ( + + + + + + ))} ); }; diff --git a/src/components/Settings/integrations/Organization/OrganizationAccordian.tsx b/src/components/Settings/integrations/Organization/OrganizationAccordian.tsx index 85e16b7c5..20563eded 100644 --- a/src/components/Settings/integrations/Organization/OrganizationAccordian.tsx +++ b/src/components/Settings/integrations/Organization/OrganizationAccordian.tsx @@ -19,6 +19,7 @@ import { OrganizationAddAccountModal } from './OrganizationAddAccountModal'; import { OrganizationImportDataSyncModal } from './OrganizationImportDataSyncModal'; import { useGetUsersOrganizationsQuery } from './Organizations.generated'; import { Organization } from '../../../../../graphql/types.generated'; +import { oAuth, sync } from './OrganizationService'; interface OrganizationAccordianProps { handleAccordionChange: (panel: string) => void; @@ -80,13 +81,37 @@ export const OrganizationAccordian: React.FC = ({ const [selectedOrganization, setSelectedOrganization] = useState>(); const [showAddAccountModal, setShowAddAccountModal] = useState(false); - const [showSyncAccountModal, setShowSyncAccountModal] = useState(false); const [showImportDataSyncModal, setShowImportDataSyncModal] = useState(false); - const [showReconnectModal, setShowReconnectModal] = useState(false); const { data, loading } = useGetUsersOrganizationsQuery(); const organizations = data?.userOrganizationAccounts; + const handleReconnect = async (organizationId) => { + // TODO + await oAuth(organizationId); + }; + + const handleSync = async ( + organization: Omit, + ) => { + // TODO + await sync(); + return organization; + }; + + const handleEdit = async ( + organization: Omit, + ) => { + // TODO + return organization; + }; + const handleDelete = async ( + organization: Omit, + ) => { + // TODO + return organization; + }; + return ( = ({ sx={{ m: '0 0 0 10px' }} onClick={() => { setSelectedOrganization(organization); - setShowSyncAccountModal(true); + handleSync(organization); }} > Sync @@ -184,20 +209,21 @@ export const OrganizationAccordian: React.FC = ({ variant="contained" size="small" sx={{ m: '0 0 0 10px' }} - onClick={() => { - setSelectedOrganization(organization); - setShowReconnectModal(true); - }} + onClick={() => handleReconnect(organization.id)} > Reconnect )} {type === OrganizationTypesEnum.LOGIN && ( - + handleEdit(organization)} + > )} - + handleDelete(organization)} + > @@ -246,22 +272,12 @@ export const OrganizationAccordian: React.FC = ({ handleClose={() => setShowAddAccountModal(false)} /> )} - {showSyncAccountModal && ( - setShowSyncAccountModal(false)} - /> - )} {showImportDataSyncModal && ( setShowImportDataSyncModal(false)} organization={selectedOrganization} /> )} - {showReconnectModal && ( - setShowSyncAccountModal(false)} - /> - )} ); }; diff --git a/src/components/Settings/integrations/Organization/OrganizationAddAccountModal.tsx b/src/components/Settings/integrations/Organization/OrganizationAddAccountModal.tsx index ecace594a..b476aa8b5 100644 --- a/src/components/Settings/integrations/Organization/OrganizationAddAccountModal.tsx +++ b/src/components/Settings/integrations/Organization/OrganizationAddAccountModal.tsx @@ -26,6 +26,7 @@ import { getOrganizationType, OrganizationTypesEnum, } from './OrganizationAccordian'; +import { oAuth } from './OrganizationService'; interface OrganizationAddAccountModalProps { handleClose: () => void; @@ -51,13 +52,27 @@ export const OrganizationAddAccountModal: React.FC< OrganizationAddAccountModalProps > = ({ handleClose }) => { const { t } = useTranslation(); - const [showWarning, setShowWarning] = useState(); + const [organizationType, setOrganizationType] = + useState(); const { data: organizations, loading } = useGetOrganizationsQuery(); - const onSubmit = (attributes) => { - // TODO - return attributes; + const onSubmit = async (attributes) => { + const { apiClass, oauth, id } = attributes.selectedOrganization; + const type = getOrganizationType(apiClass, oauth); + + if (type === OrganizationTypesEnum.OAUTH) { + window.location.href = await oAuth(id); + return; + } + if (type === OrganizationTypesEnum.LOGIN) { + // TODO - Add GraphQl to Update account by Mutating organization + return; + } + + // TODO - Add GraphQl to creating an account by Mutating organization + handleClose(); + return; }; const showOrganizationHelp = () => { @@ -85,7 +100,7 @@ export const OrganizationAddAccountModal: React.FC< .string() .when('selectedOrganization', (organization, schema) => { if ( - getOrganizationType(organization.apiClass, organization.oauth) === + getOrganizationType(organization?.apiClass, organization?.oauth) === OrganizationTypesEnum.LOGIN ) { return schema.required('Must enter username'); @@ -96,7 +111,7 @@ export const OrganizationAddAccountModal: React.FC< .string() .when('selectedOrganization', (organization, schema) => { if ( - getOrganizationType(organization.apiClass, organization.oauth) === + getOrganizationType(organization?.apiClass, organization?.oauth) === OrganizationTypesEnum.LOGIN ) { return schema.required('Must enter password'); @@ -138,7 +153,7 @@ export const OrganizationAddAccountModal: React.FC< loading={loading} value={selectedOrganization} onChange={(_, value) => { - setShowWarning( + setOrganizationType( getOrganizationType(value?.apiClass, value?.oauth), ); setFieldValue('selectedOrganization', value); @@ -171,7 +186,7 @@ export const OrganizationAddAccountModal: React.FC< )} - {showWarning === OrganizationTypesEnum.MINISTRY && ( + {organizationType === OrganizationTypesEnum.MINISTRY && ( )} - {showWarning === OrganizationTypesEnum.OAUTH && ( + {organizationType === OrganizationTypesEnum.OAUTH && ( {t( @@ -236,7 +251,7 @@ export const OrganizationAddAccountModal: React.FC< )} - {showWarning === OrganizationTypesEnum.LOGIN && ( + {organizationType === OrganizationTypesEnum.LOGIN && ( <> @@ -271,7 +286,10 @@ export const OrganizationAddAccountModal: React.FC< - {t('Add Account')} + {organizationType !== OrganizationTypesEnum.OAUTH && + t('Add Account')} + {organizationType === OrganizationTypesEnum.OAUTH && + t('Connect')} diff --git a/src/components/Settings/integrations/Organization/OrganizationService.ts b/src/components/Settings/integrations/Organization/OrganizationService.ts new file mode 100644 index 000000000..ef123ba31 --- /dev/null +++ b/src/components/Settings/integrations/Organization/OrganizationService.ts @@ -0,0 +1,26 @@ +import { getSession } from 'next-auth/react'; +import Router from 'next/router'; +import { getQueryParam } from 'src/utils/queryParam'; + +export const oAuth = async ( + organizationId, + route = 'preferences/integrations?selectedTab=organization', +) => { + const session = await getSession(); + const redirectUrl = encodeURIComponent(`${window.location.origin}/${route}`); + const token = session?.user.apiToken; + const accountListId = getQueryParam(Router.query, 'accountListId'); + return ( + `${process.env.OAUTH_URL}/auth/user/donorhub?account_list_id=${accountListId}` + + `&redirect_to=${redirectUrl}` + + `&access_token=${token}` + + `&organization_id=${organizationId}` + ); +}; + +export const sync = async () => { + // TODO + return new Promise((resolve) => { + return resolve; + }); +}; From ef8b534dea4f658cc28baaeb7d10f830a81a826a Mon Sep 17 00:00:00 2001 From: Caleb Alldrin Date: Tue, 15 Aug 2023 13:40:00 -0700 Subject: [PATCH 090/103] Add manage accounts html --- .../settings/manageAccounts.page.tsx | 108 ++++++++++++++++++ .../TopBar/Items/ProfileMenu/ProfileMenu.tsx | 12 +- .../Shared/Forms/Fields/FormWrapper.tsx | 4 +- 3 files changed, 118 insertions(+), 6 deletions(-) create mode 100644 pages/accountLists/[accountListId]/settings/manageAccounts.page.tsx diff --git a/pages/accountLists/[accountListId]/settings/manageAccounts.page.tsx b/pages/accountLists/[accountListId]/settings/manageAccounts.page.tsx new file mode 100644 index 000000000..9a5ea0425 --- /dev/null +++ b/pages/accountLists/[accountListId]/settings/manageAccounts.page.tsx @@ -0,0 +1,108 @@ +import React, { useEffect, useState } from 'react'; +import { useTranslation } from 'react-i18next'; +import { SettingsWrapper } from './wrapper'; +import { suggestArticles } from 'src/lib/helpScout'; + +import { AccordionGroup } from 'src/components/Shared/Forms/Accordions/AccordionGroup'; +import { AccordionItem } from 'src/components/Shared/Forms/Accordions/AccordionItem'; +import { FormWrapper } from 'src/components/Shared/Forms/Fields/FormWrapper'; +import { FieldWrapper } from 'src/components/Shared/Forms/FieldWrapper'; +import { StyledOutlinedInput } from 'src/components/Shared/Forms/Field'; +//import DeleteIcon from '@mui/icons-material/Delete'; +import { styled } from '@mui/material/styles'; +import { Typography, Card, List, ListItemText, Alert } from '@mui/material'; +import theme from 'src/theme'; + +const StyledListItem = styled(ListItemText)(() => ({ + display: 'list-item', +})); + +const StyledList = styled(List)(({ theme }) => ({ + listStyleType: 'disc', + paddingLeft: theme.spacing(4), +})); + +const ManageAccounts: React.FC = () => { + const { t } = useTranslation(); + const [expandedPanel, setExpandedPanel] = useState(''); + // const [isValid, setIsValid] = useState(false); + // const [isSubmitting, setIsSubmitting] = useState(false); + const manageAccountsMockData = [ + { + name: 'Jack Sparrow', + email: 'jack.sparrow@cru.org', + }, + ]; + + useEffect(() => { + suggestArticles('HS_SETTINGS_SERVICES_SUGGESTIONS'); + }, []); + + const handleAccordionChange = (panel: string) => { + setExpandedPanel(expandedPanel === panel ? '' : panel); + }; + + const handleSubmit = () => { + // eslint-disable-next-line no-console + console.log('handleSubmithandleSubmit'); + }; + + return ( + + + + + Share this ministry account with other team members. + + + If you want to allow another mpdx user to have access to this + ministry account, you can share access with them. Make sure you have + the proper permissions and leadership consensus around this sharing + before you do this. You will be able to remove access later. + + {manageAccountsMockData[0] ? ( + <> + + Account currently shared with: + + + {manageAccountsMockData.map((item, index) => ( + {item.name} + ))} + + + ) : ( + '' + )} + + + + + + + + + + + + ); +}; + +export default ManageAccounts; diff --git a/src/components/Layouts/Primary/TopBar/Items/ProfileMenu/ProfileMenu.tsx b/src/components/Layouts/Primary/TopBar/Items/ProfileMenu/ProfileMenu.tsx index f966e5ea2..62d89c9cd 100644 --- a/src/components/Layouts/Primary/TopBar/Items/ProfileMenu/ProfileMenu.tsx +++ b/src/components/Layouts/Primary/TopBar/Items/ProfileMenu/ProfileMenu.tsx @@ -252,11 +252,13 @@ const ProfileMenu = (): ReactElement => { > - - - - - + + + diff --git a/src/components/Shared/Forms/Fields/FormWrapper.tsx b/src/components/Shared/Forms/Fields/FormWrapper.tsx index 52098eed7..e8388754f 100644 --- a/src/components/Shared/Forms/Fields/FormWrapper.tsx +++ b/src/components/Shared/Forms/Fields/FormWrapper.tsx @@ -9,6 +9,7 @@ interface FormWrapperProps { isSubmitting: boolean; formAttrs?: { action?: string; method?: string }; children: React.ReactNode; + buttonText?: string; } export const FormWrapper: React.FC = ({ @@ -17,6 +18,7 @@ export const FormWrapper: React.FC = ({ isSubmitting, formAttrs = {}, children, + buttonText = 'Save', }) => { const { t } = useTranslation(); const theme = useTheme(); @@ -33,7 +35,7 @@ export const FormWrapper: React.FC = ({ type="submit" disabled={!isValid || isSubmitting} > - {t('Save')} + {t(buttonText)} ); From fcfe40e2fd6211dc496fe28bbbde5e7aeb8c7fac Mon Sep 17 00:00:00 2001 From: Daniel Bisgrove Date: Wed, 16 Aug 2023 16:12:36 -0400 Subject: [PATCH 091/103] Notifications --- .../notifications/GetNotifications.graphql | 13 + .../notifications/NotificationsTable.test.tsx | 180 +++++++ .../notifications/NotificationsTable.tsx | 495 ++++++++++-------- .../NotificationsTableSkeleton.tsx | 91 ++++ .../notifications/UpdateNotifications.graphql | 11 + 5 files changed, 573 insertions(+), 217 deletions(-) create mode 100644 src/components/Settings/notifications/GetNotifications.graphql create mode 100644 src/components/Settings/notifications/NotificationsTable.test.tsx create mode 100644 src/components/Settings/notifications/NotificationsTableSkeleton.tsx create mode 100644 src/components/Settings/notifications/UpdateNotifications.graphql diff --git a/src/components/Settings/notifications/GetNotifications.graphql b/src/components/Settings/notifications/GetNotifications.graphql new file mode 100644 index 000000000..1b4814436 --- /dev/null +++ b/src/components/Settings/notifications/GetNotifications.graphql @@ -0,0 +1,13 @@ +query getPreferencesNotifications($accountListId: ID!) { + notificationPreferences(accountListId: $accountListId) { + nodes { + app + email + notificationType { + descriptionTemplate + type + } + task + } + } +} diff --git a/src/components/Settings/notifications/NotificationsTable.test.tsx b/src/components/Settings/notifications/NotificationsTable.test.tsx new file mode 100644 index 000000000..09a188306 --- /dev/null +++ b/src/components/Settings/notifications/NotificationsTable.test.tsx @@ -0,0 +1,180 @@ +import React from 'react'; +import { render, waitFor } from '@testing-library/react'; +import userEvent from '@testing-library/user-event'; +import { NotificationsTable } from './NotificationsTable'; +import { ThemeProvider } from '@mui/material/styles'; +import { SnackbarProvider } from 'notistack'; +import { GqlMockedProvider } from '../../../../__tests__/util/graphqlMocking'; +import TestRouter from '../../../../__tests__/util/TestRouter'; +import theme from '../../../../src/theme'; +import { NotificationTypeTypeEnum } from '../../../../graphql/types.generated'; + +const mockEnqueue = jest.fn(); + +jest.mock('notistack', () => ({ + // eslint-disable-next-line @typescript-eslint/ban-ts-comment + // @ts-ignore + ...jest.requireActual('notistack'), + useSnackbar: () => { + return { + enqueueSnackbar: mockEnqueue, + }; + }, +})); + +const accountListId = 'test121'; + +const router = { + query: { accountListId }, + isReady: true, +}; +const createNotification = (type) => ({ + app: false, + email: false, + task: false, + notificationType: { + descriptionTemplate: type, + type, + }, +}); +const mocks = { + getPreferencesNotifications: { + notificationPreferences: { + nodes: [ + createNotification(NotificationTypeTypeEnum.CallPartnerOncePerYear), + createNotification(NotificationTypeTypeEnum.LargerGift), + createNotification(NotificationTypeTypeEnum.LongTimeFrameGift), + ], + }, + }, +}; +const mutationSpy = jest.fn(); +const Components = ( + + + + + + + + + +); + +describe('NotificationsTable', () => { + beforeEach(() => { + mutationSpy.mockReset(); + }); + it('Should render the Table and request data', async () => { + const { getByTestId, queryByTestId, getByText } = render(Components); + + expect(getByTestId('skeleton-notifications')).toBeInTheDocument(); + + await waitFor(() => { + expect(queryByTestId('skeleton-notifications')).not.toBeInTheDocument(), + expect( + mutationSpy.mock.calls[0][0].operation.variables.accountListId, + ).toEqual(accountListId); + expect(mutationSpy.mock.calls[0][0].operation.operationName).toEqual( + 'getPreferencesNotifications', + ); + }); + + await waitFor(() => { + expect(getByText('CALL_PARTNER_ONCE_PER_YEAR')).toBeInTheDocument(); + }); + + await waitFor(() => { + expect( + getByTestId('CALL_PARTNER_ONCE_PER_YEAR-app-checkbox'), + ).not.toBeChecked(); + }); + + await waitFor(() => { + expect(getByText('LARGER_GIFT')).toBeInTheDocument(); + }); + }); + + it('Should select all', async () => { + const { queryByTestId, getByTestId, getAllByRole } = render(Components); + + await waitFor(() => + expect(queryByTestId('skeleton-notifications')).not.toBeInTheDocument(), + ); + expect(getAllByRole('checkbox')[0]).not.toBeChecked(); + expect(getAllByRole('checkbox')[1]).not.toBeChecked(); + expect(getAllByRole('checkbox')[2]).not.toBeChecked(); + expect(getAllByRole('checkbox')[3]).not.toBeChecked(); + expect(getAllByRole('checkbox')[4]).not.toBeChecked(); + expect(getAllByRole('checkbox')[5]).not.toBeChecked(); + expect(getAllByRole('checkbox')[6]).not.toBeChecked(); + expect(getAllByRole('checkbox')[7]).not.toBeChecked(); + expect(getAllByRole('checkbox')[8]).not.toBeChecked(); + + // Select all app + userEvent.click(getByTestId('select-all-app')); + expect(getAllByRole('checkbox')[0]).toBeChecked(); + expect(getAllByRole('checkbox')[3]).toBeChecked(); + expect(getAllByRole('checkbox')[6]).toBeChecked(); + + // Select all email + userEvent.click(getByTestId('select-all-email')); + expect(getAllByRole('checkbox')[1]).toBeChecked(); + expect(getAllByRole('checkbox')[4]).toBeChecked(); + expect(getAllByRole('checkbox')[7]).toBeChecked(); + + // Select all tasks + userEvent.click(getByTestId('select-all-task')); + expect(getAllByRole('checkbox')[2]).toBeChecked(); + expect(getAllByRole('checkbox')[5]).toBeChecked(); + expect(getAllByRole('checkbox')[8]).toBeChecked(); + }); + + it('Should send data to server on submit', async () => { + const { queryByTestId, getByTestId, getByRole } = render(Components); + + await waitFor(() => + expect(queryByTestId('skeleton-notifications')).not.toBeInTheDocument(), + ); + // Select all app + userEvent.click(getByTestId('select-all-app')); + + userEvent.click( + getByRole('button', { + name: /save/i, + }), + ); + + await waitFor(() => { + // mutationSpy.mock.calls[1][0].operation.variables.input + expect(mutationSpy.mock.calls[1][0].operation.operationName).toEqual( + 'UpdateNotificationPreferences', + ); + + expect(mutationSpy.mock.calls[1][0].operation.variables.input).toEqual({ + accountListId: accountListId, + attributes: [ + { + app: true, + email: false, + task: false, + notificationType: 'CALL_PARTNER_ONCE_PER_YEAR', + }, + { + app: true, + email: false, + task: false, + notificationType: 'LARGER_GIFT', + }, + { + app: true, + email: false, + task: false, + notificationType: 'LONG_TIME_FRAME_GIFT', + }, + ], + }); + expect(mockEnqueue).toHaveBeenCalled(); + }); + }); +}); diff --git a/src/components/Settings/notifications/NotificationsTable.tsx b/src/components/Settings/notifications/NotificationsTable.tsx index 5858250e5..b8011d42b 100644 --- a/src/components/Settings/notifications/NotificationsTable.tsx +++ b/src/components/Settings/notifications/NotificationsTable.tsx @@ -1,4 +1,12 @@ -import React, { useState } from 'react'; +import * as yup from 'yup'; +import { Formik, FieldArray } from 'formik'; +import { useTranslation } from 'react-i18next'; +import { useSnackbar } from 'notistack'; +import React, { useState, ReactElement } from 'react'; +import TaskIcon from '@mui/icons-material/Task'; +import SmartphoneIcon from '@mui/icons-material/Smartphone'; +import EmailIcon from '@mui/icons-material/Email'; +import { styled } from '@mui/material/styles'; import { Box, Checkbox, @@ -9,13 +17,13 @@ import { TableRow, TableBody, Paper, - Button, } from '@mui/material'; -import SmartphoneIcon from '@mui/icons-material/Smartphone'; -import EmailIcon from '@mui/icons-material/Email'; -import TaskIcon from '@mui/icons-material/Task'; -import { styled } from '@mui/material/styles'; -import { useTranslation } from 'react-i18next'; +import * as Types from '../../../../graphql/types.generated'; +import { useAccountListId } from 'src/hooks/useAccountListId'; +import { SubmitButton } from 'src/components/common/Modal/ActionButtons/ActionButtons'; +import { useGetPreferencesNotificationsQuery } from './GetNotifications.generated'; +import { NotificationsTableSkeleton } from './NotificationsTableSkeleton'; +import { useUpdateNotificationPreferencesMutation } from './UpdateNotifications.generated'; export enum notificationsEnum { App = 'app', @@ -23,12 +31,12 @@ export enum notificationsEnum { Task = 'task', } -const StyledTableHeadCell = styled(TableCell)(({ theme }) => ({ +export const StyledTableHeadCell = styled(TableCell)(({ theme }) => ({ backgroundColor: theme.palette.primary.main, color: theme.palette.common.white, })); -const StyledTableHeadSelectCell = styled(TableCell)(() => ({ +export const StyledTableHeadSelectCell = styled(TableCell)(() => ({ cursor: 'pointer', fontSize: 14, paddingTop: 8, @@ -36,13 +44,13 @@ const StyledTableHeadSelectCell = styled(TableCell)(() => ({ top: 88, })); -const StyledTableCell = styled(TableCell)(() => ({ +export const StyledTableCell = styled(TableCell)(() => ({ fontSize: 14, paddingTop: 8, paddingBottom: 8, })); -const StyledTableRow = styled(TableRow)(({ theme }) => ({ +export const StyledTableRow = styled(TableRow)(({ theme }) => ({ '&:nth-of-type(odd)': { backgroundColor: theme.palette.action.hover, }, @@ -52,238 +60,291 @@ const StyledTableRow = styled(TableRow)(({ theme }) => ({ }, })); -const StyledSmartphoneIcon = styled(SmartphoneIcon)(() => ({ +export const StyledSmartphoneIcon = styled(SmartphoneIcon)(() => ({ marginRight: '8px', })); -const StyledEmailIcon = styled(EmailIcon)(() => ({ +export const StyledEmailIcon = styled(EmailIcon)(() => ({ marginRight: '6px', })); -const StyledTaskIcon = styled(TaskIcon)(() => ({ +export const StyledTaskIcon = styled(TaskIcon)(() => ({ marginRight: '3px', })); -const SelectAllBox = styled(Box)(() => ({ +export const SelectAllBox = styled(Box)(() => ({ width: 120, margin: '0 0 0 auto', })); + export const NotificationsTable: React.FC = () => { const { t } = useTranslation(); - const notificationsMockData = [ - { - title: 'Partner gave a Special Gift', - app: false, - email: false, - task: false, - }, - { - title: 'Partner missed a gift', - app: false, - email: false, - task: false, - }, - { - title: 'Partner started giving', - app: false, - email: false, - task: false, - }, - { - title: 'Partner gave a Special Gift', - app: false, - email: false, - task: false, - }, - { - title: 'Partner missed a gift', - app: false, - email: false, - task: false, - }, - { - title: 'Partner started giving', - app: false, - email: false, - task: false, - }, - { - title: 'Partner gave a Special Gift', - app: false, - email: false, - task: false, - }, - { - title: 'Partner missed a gift', - app: false, - email: false, - task: false, - }, - { - title: 'Partner started giving', - app: false, - email: false, - task: false, - }, - { - title: 'Partner gave a Special Gift', - app: false, - email: false, - task: false, - }, - { - title: 'Partner missed a gift', - app: false, - email: false, - task: false, - }, - { - title: 'Partner started giving', - app: false, - email: false, - task: false, - }, - ]; - - const [notifications, setNotifications] = useState(notificationsMockData); + const accountListId = useAccountListId(); + const { enqueueSnackbar } = useSnackbar(); const [appSelectAll, setAppSelectAll] = useState(false); const [emailSelectAll, setEmailSelectAll] = useState(false); const [taskSelectAll, setTaskSelectAll] = useState(false); + const [updateNotifications] = useUpdateNotificationPreferencesMutation(); - const checkboxOnChange = (index, type) => { - const notificationsCopy = [...notifications]; - notificationsCopy[index][type] = !notificationsCopy[index][type]; - setNotifications(notificationsCopy); - }; + const NotificationSchema: yup.SchemaOf<{ + notifications: Array< + Pick & { + notificationType: Pick< + Types.NotificationType, + 'descriptionTemplate' | 'type' + >; + } + >; + }> = yup.object({ + notifications: yup.array( + yup.object({ + app: yup.boolean().required(), + email: yup.boolean().required(), + task: yup.boolean().required(), + notificationType: yup.object({ + descriptionTemplate: yup.string().required(), + type: yup + .mixed() + .oneOf(Object.values(Types.NotificationTypeTypeEnum)) + .required(), + }), + }), + ), + }); - const selectAll = (type, selectAll, setSelectAll) => { + const { data, loading } = useGetPreferencesNotificationsQuery({ + variables: { + accountListId: accountListId ?? '', + }, + }); + + const selectAll = ( + type, + notifications, + setFieldValue, + selectAll, + setSelectAll, + ) => { setSelectAll(!selectAll); - const notificationsCopy = notifications.map((item) => { - item[type] = !selectAll; - return item; + notifications.forEach((_, idx) => { + setFieldValue(`notifications.${idx}.${type}`, !selectAll); }); - - setNotifications(notificationsCopy); }; - const handleSaveNotifications = () => { - // eslint-disable-next-line no-console - console.log('handleSaveNotifications'); + const onSubmit = async ({ + notifications, + }: { + notifications: Array< + Pick & { + notificationType: Pick< + Types.NotificationType, + 'descriptionTemplate' | 'type' + >; + } + >; + }) => { + const attributes = notifications.map((notification) => { + return { + app: notification.app, + email: notification.email, + task: notification.task, + notificationType: notification.notificationType.type, + }; + }); + + await updateNotifications({ + variables: { + input: { + accountListId: accountListId ?? '', + attributes, + }, + }, + }); + + enqueueSnackbar(t('Notifications updated successfully'), { + variant: 'success', + }); }; return ( - - } + {!loading && ( + - - - - {t("Select the types of notifications you'd like to receive")} - - - - {t('In App')} - - - - {t('Email')} - - - - {t('Task')} - - - - - - selectAll( - notificationsEnum.App, - appSelectAll, - setAppSelectAll, - ) - } - > - - {appSelectAll ? t('deselect all') : t('select all')} - - - - selectAll( - notificationsEnum.Email, - emailSelectAll, - setEmailSelectAll, - ) - } - > - - {emailSelectAll ? t('deselect all') : t('select all')} - - - - selectAll( - notificationsEnum.Task, - taskSelectAll, - setTaskSelectAll, - ) - } - > - - {taskSelectAll ? t('deselect all') : t('select all')} - - - - - - {notifications.map((notification, idx) => ( - - - {notification.title} - - - - checkboxOnChange(idx, notificationsEnum.App) - } - /> - - - - checkboxOnChange(idx, notificationsEnum.Email) - } - /> - - - - checkboxOnChange(idx, notificationsEnum.Task) - } - /> - - - ))} - -
- - - - + {({ + values: { notifications }, + handleSubmit, + setFieldValue, + isSubmitting, + isValid, + }): ReactElement => ( +
+ + ( + + + + + {t( + "Select the types of notifications you'd like to receive", + )} + + + + {t('In App')} + + + + {t('Email')} + + + + {t('Task')} + + + + + + selectAll( + notificationsEnum.App, + notifications, + setFieldValue, + appSelectAll, + setAppSelectAll, + ) + } + > + + {appSelectAll + ? t('deselect all') + : t('select all')} + + + + selectAll( + notificationsEnum.Email, + notifications, + setFieldValue, + emailSelectAll, + setEmailSelectAll, + ) + } + > + + {emailSelectAll + ? t('deselect all') + : t('select all')} + + + + selectAll( + notificationsEnum.Task, + notifications, + setFieldValue, + taskSelectAll, + setTaskSelectAll, + ) + } + > + + {taskSelectAll + ? t('deselect all') + : t('select all')} + + + + + + + <> + {notifications.map((notification, idx) => { + const { type, descriptionTemplate } = + notification.notificationType; + return ( + + + {descriptionTemplate} + + + { + setFieldValue( + `notifications.${idx}.app`, + value, + ); + }} + /> + + + { + setFieldValue( + `notifications.${idx}.email`, + value, + ); + }} + /> + + + { + setFieldValue( + `notifications.${idx}.task`, + value, + ); + }} + /> + + + ); + })} + + +
+ )} + /> + + + + {t('Save')} + + +
+ )} + + )} ); }; diff --git a/src/components/Settings/notifications/NotificationsTableSkeleton.tsx b/src/components/Settings/notifications/NotificationsTableSkeleton.tsx new file mode 100644 index 000000000..7e9959eb6 --- /dev/null +++ b/src/components/Settings/notifications/NotificationsTableSkeleton.tsx @@ -0,0 +1,91 @@ +import React from 'react'; +import { + Box, + TableContainer, + Table, + TableHead, + TableRow, + TableBody, + Paper, + Skeleton, +} from '@mui/material'; +import { useTranslation } from 'react-i18next'; +import { + StyledTableHeadCell, + StyledTableHeadSelectCell, + StyledTableCell, + StyledTableRow, + StyledSmartphoneIcon, + StyledEmailIcon, + StyledTaskIcon, + SelectAllBox, +} from './NotificationsTable'; + +export const NotificationsTableSkeleton: React.FC = () => { + const { t } = useTranslation(); + + return ( + + + + + + {t("Select the types of notifications you'd like to receive")} + + + + {t('In App')} + + + + {t('Email')} + + + + {t('Task')} + + + + + + {t('select all')} + + + {t('select all')} + + + {t('select all')} + + + + + + {new Array(5).fill(0).map((_, idx) => ( + + + + + + + + + + + + + + + ))} + +
+ + ); +}; diff --git a/src/components/Settings/notifications/UpdateNotifications.graphql b/src/components/Settings/notifications/UpdateNotifications.graphql new file mode 100644 index 000000000..ca7130898 --- /dev/null +++ b/src/components/Settings/notifications/UpdateNotifications.graphql @@ -0,0 +1,11 @@ +mutation UpdateNotificationPreferences( + $input: NotificationPreferencesUpdateMutationInput! +) { + updateNotificationPreferences(input: $input) { + notificationPreferences { + notificationType { + id + } + } + } +} From 9310496b782757f5f2b323d4236396c03ba921b5 Mon Sep 17 00:00:00 2001 From: Daniel Bisgrove Date: Fri, 18 Aug 2023 16:27:47 -0400 Subject: [PATCH 092/103] Adding proxy graphQLs for GetGoogleAccount, GetGoogleIntegrations, SyncGoogleIntegration and UpdateGoogleIntegrations. Created Components for Google accounts and Integrations modal. --- .../settings/integrations.page.tsx | 42 +-- .../datahandler.ts | 38 ++ .../getGoogleAccountIntegrations.graphql | 27 ++ .../getGoogleAccountIntegrations/resolvers.ts | 18 + .../Google/getGoogleAccounts/datahandler.ts | 32 ++ .../getGoogleAccounts.graphql | 17 + .../Google/getGoogleAccounts/resolvers.ts | 11 + .../syncGoogleIntegration/datahandler.ts | 3 + .../Google/syncGoogleIntegration/resolvers.ts | 19 + .../syncGoogleIntegration.graphql | 9 + .../updateGoogleIntegration/datahandler.ts | 36 ++ .../updateGoogleIntegration/resolvers.ts | 19 + .../updateGoogleIntegration.graphql | 29 ++ pages/api/Schema/index.ts | 28 ++ pages/api/graphql-rest.page.ts | 68 ++++ ...tings-preferences-intergrations-google.png | Bin 0 -> 13207 bytes ...settings-preferences-intergrations-key.png | Bin 0 -> 4375 bytes .../TopBar/Items/SearchMenu/SearchMenu.tsx | 2 +- .../integrations/Google/GoogleAccordian.tsx | 170 +++++++++ .../Google/Modals/EditGoogleAccountModal.tsx | 336 ++++++++++++++++++ .../getGoogleAccountIntegrations.graphql | 16 + .../Modals/updateGoogleIntegration.graphql | 16 + .../Google/getGoogleAccounts.graphql | 15 + .../integrations/Key/TheKeyAccordian.tsx | 2 +- .../Shared/Forms/Accordions/AccordionItem.tsx | 31 +- 25 files changed, 942 insertions(+), 42 deletions(-) create mode 100644 pages/api/Schema/Settings/Preferences/Intergrations/Google/getGoogleAccountIntegrations/datahandler.ts create mode 100644 pages/api/Schema/Settings/Preferences/Intergrations/Google/getGoogleAccountIntegrations/getGoogleAccountIntegrations.graphql create mode 100644 pages/api/Schema/Settings/Preferences/Intergrations/Google/getGoogleAccountIntegrations/resolvers.ts create mode 100644 pages/api/Schema/Settings/Preferences/Intergrations/Google/getGoogleAccounts/datahandler.ts create mode 100644 pages/api/Schema/Settings/Preferences/Intergrations/Google/getGoogleAccounts/getGoogleAccounts.graphql create mode 100644 pages/api/Schema/Settings/Preferences/Intergrations/Google/getGoogleAccounts/resolvers.ts create mode 100644 pages/api/Schema/Settings/Preferences/Intergrations/Google/syncGoogleIntegration/datahandler.ts create mode 100644 pages/api/Schema/Settings/Preferences/Intergrations/Google/syncGoogleIntegration/resolvers.ts create mode 100644 pages/api/Schema/Settings/Preferences/Intergrations/Google/syncGoogleIntegration/syncGoogleIntegration.graphql create mode 100644 pages/api/Schema/Settings/Preferences/Intergrations/Google/updateGoogleIntegration/datahandler.ts create mode 100644 pages/api/Schema/Settings/Preferences/Intergrations/Google/updateGoogleIntegration/resolvers.ts create mode 100644 pages/api/Schema/Settings/Preferences/Intergrations/Google/updateGoogleIntegration/updateGoogleIntegration.graphql create mode 100644 public/images/settings-preferences-intergrations-google.png create mode 100644 public/images/settings-preferences-intergrations-key.png create mode 100644 src/components/Settings/integrations/Google/GoogleAccordian.tsx create mode 100644 src/components/Settings/integrations/Google/Modals/EditGoogleAccountModal.tsx create mode 100644 src/components/Settings/integrations/Google/Modals/getGoogleAccountIntegrations.graphql create mode 100644 src/components/Settings/integrations/Google/Modals/updateGoogleIntegration.graphql create mode 100644 src/components/Settings/integrations/Google/getGoogleAccounts.graphql diff --git a/pages/accountLists/[accountListId]/settings/integrations.page.tsx b/pages/accountLists/[accountListId]/settings/integrations.page.tsx index 892b754e2..92155a532 100644 --- a/pages/accountLists/[accountListId]/settings/integrations.page.tsx +++ b/pages/accountLists/[accountListId]/settings/integrations.page.tsx @@ -11,6 +11,7 @@ import { StyledFormLabel } from '../../../../src/components/Shared/Forms/Field'; import { Confirmation } from 'src/components/common/Modal/Confirmation/Confirmation'; import { TheKeyAccordian } from 'src/components/Settings/integrations/Key/TheKeyAccordian'; import { OrganizationAccordian } from 'src/components/Settings/integrations/Organization/OrganizationAccordian'; +import { GoogleAccordian } from 'src/components/Settings/integrations/Google/GoogleAccordian'; const StyledListItem = styled(ListItemText)(() => ({ display: 'list-item', @@ -66,45 +67,10 @@ const Integrations: React.FC = () => { /> - - } - > - Google Integration Overview - - Google’s suite of tools are great at connecting you to your Ministry - Partners. - - - By synchronizing your Google services with MPDX, you will be able - to: - - - - See MPDX tasks in your Google Calendar - - Import Google Contacts into MPDX - - Keep your Contacts in sync with your Google Contacts - - - - Connect your Google account to begin, and then setup specific - settings for Google Calendar and Contacts. MPDX leaves you in - control of how each service stays in sync. - - - {t('Add Account')} - - + /> ; + relationships: relationships; +} + +export interface GetGoogleAccountIntegrationAttributes { + calendar_id: string; + calendar_integration: boolean; + calendar_integrations: string[]; + calendar_name: string; + calendars: calendars[]; + created_at: string; + updated_at: string; + id: string; + updated_in_db_at: string; +} +type calendars = { + id: string; + name: string; +}; + +type relationships = { + account_list: object[]; + google_account: object[]; +}; + +export const GetGoogleAccountIntegrations = ( + data: GetGoogleAccountIntegrationsResponse[], +): GetGoogleAccountIntegrationAttributes[] => { + return data.reduce( + (prev: GetGoogleAccountIntegrationAttributes[], current) => { + return prev.concat([{ id: current.id, ...current.attributes }]); + }, + [], + ); +}; diff --git a/pages/api/Schema/Settings/Preferences/Intergrations/Google/getGoogleAccountIntegrations/getGoogleAccountIntegrations.graphql b/pages/api/Schema/Settings/Preferences/Intergrations/Google/getGoogleAccountIntegrations/getGoogleAccountIntegrations.graphql new file mode 100644 index 000000000..49e254141 --- /dev/null +++ b/pages/api/Schema/Settings/Preferences/Intergrations/Google/getGoogleAccountIntegrations/getGoogleAccountIntegrations.graphql @@ -0,0 +1,27 @@ +extend type Query { + getGoogleAccountIntegrations( + input: GetGoogleAccountIntegrationsInput! + ): [GoogleAccountIntegration]! +} + +input GetGoogleAccountIntegrationsInput { + googleAccountId: ID! + accountListId: ID! +} + +type GoogleAccountIntegration { + calendar_id: String! + calendar_integration: Boolean! + calendar_integrations: [String]! + calendar_name: String + calendars: [GoogleAccountIntegrationCalendars]! + created_at: String! + updated_at: String! + id: String! + updated_in_db_at: String! +} + +type GoogleAccountIntegrationCalendars { + id: String! + name: String! +} diff --git a/pages/api/Schema/Settings/Preferences/Intergrations/Google/getGoogleAccountIntegrations/resolvers.ts b/pages/api/Schema/Settings/Preferences/Intergrations/Google/getGoogleAccountIntegrations/resolvers.ts new file mode 100644 index 000000000..d98d25c5f --- /dev/null +++ b/pages/api/Schema/Settings/Preferences/Intergrations/Google/getGoogleAccountIntegrations/resolvers.ts @@ -0,0 +1,18 @@ +import { Resolvers } from '../../../../../../graphql-rest.page.generated'; + +const GetGoogleAccountIntegrationsResolvers: Resolvers = { + Query: { + getGoogleAccountIntegrations: async ( + _source, + { input: { googleAccountId, accountListId } }, + { dataSources }, + ) => { + return dataSources.mpdxRestApi.getGoogleAccountIntegrations( + googleAccountId, + accountListId, + ); + }, + }, +}; + +export { GetGoogleAccountIntegrationsResolvers }; diff --git a/pages/api/Schema/Settings/Preferences/Intergrations/Google/getGoogleAccounts/datahandler.ts b/pages/api/Schema/Settings/Preferences/Intergrations/Google/getGoogleAccounts/datahandler.ts new file mode 100644 index 000000000..35c9216d5 --- /dev/null +++ b/pages/api/Schema/Settings/Preferences/Intergrations/Google/getGoogleAccounts/datahandler.ts @@ -0,0 +1,32 @@ +export interface GetGoogleAccountsResponse { + attributes: Omit; + id: string; + relationships: { + contact_groups: { + data: unknown[]; + }; + }; + type: string; +} + +export interface GetGoogleAccountAttributes { + id: string; + created_at: string; + email: string; + expires_at: string; + last_download: string; + last_email_sync: string; + primary: boolean; + remote_id: string; + token_expired: boolean; + updated_at: string; + updated_in_db_at: string; +} + +export const GetGoogleAccounts = ( + data: GetGoogleAccountsResponse[], +): GetGoogleAccountAttributes[] => { + return data.reduce((prev: GetGoogleAccountAttributes[], current) => { + return prev.concat([{ id: current.id, ...current.attributes }]); + }, []); +}; diff --git a/pages/api/Schema/Settings/Preferences/Intergrations/Google/getGoogleAccounts/getGoogleAccounts.graphql b/pages/api/Schema/Settings/Preferences/Intergrations/Google/getGoogleAccounts/getGoogleAccounts.graphql new file mode 100644 index 000000000..90dbd7dad --- /dev/null +++ b/pages/api/Schema/Settings/Preferences/Intergrations/Google/getGoogleAccounts/getGoogleAccounts.graphql @@ -0,0 +1,17 @@ +extend type Query { + getGoogleAccounts: [GoogleAccountAttributes]! +} + +type GoogleAccountAttributes { + created_at: String! + email: String! + expires_at: String! + last_download: String + last_email_sync: String + primary: Boolean! + id: ID! + remote_id: String! + token_expired: Boolean! + updated_at: String! + updated_in_db_at: String! +} diff --git a/pages/api/Schema/Settings/Preferences/Intergrations/Google/getGoogleAccounts/resolvers.ts b/pages/api/Schema/Settings/Preferences/Intergrations/Google/getGoogleAccounts/resolvers.ts new file mode 100644 index 000000000..6565ff4ff --- /dev/null +++ b/pages/api/Schema/Settings/Preferences/Intergrations/Google/getGoogleAccounts/resolvers.ts @@ -0,0 +1,11 @@ +import { Resolvers } from '../../../../../../graphql-rest.page.generated'; + +const GetGoogleAccountsResolvers: Resolvers = { + Query: { + getGoogleAccounts: async (_source, {}, { dataSources }) => { + return dataSources.mpdxRestApi.getGoogleAccounts(); + }, + }, +}; + +export { GetGoogleAccountsResolvers }; diff --git a/pages/api/Schema/Settings/Preferences/Intergrations/Google/syncGoogleIntegration/datahandler.ts b/pages/api/Schema/Settings/Preferences/Intergrations/Google/syncGoogleIntegration/datahandler.ts new file mode 100644 index 000000000..63df50bb8 --- /dev/null +++ b/pages/api/Schema/Settings/Preferences/Intergrations/Google/syncGoogleIntegration/datahandler.ts @@ -0,0 +1,3 @@ +export const SyncGoogleIntegration = (data: string): string => { + return data; +}; diff --git a/pages/api/Schema/Settings/Preferences/Intergrations/Google/syncGoogleIntegration/resolvers.ts b/pages/api/Schema/Settings/Preferences/Intergrations/Google/syncGoogleIntegration/resolvers.ts new file mode 100644 index 000000000..9f843a756 --- /dev/null +++ b/pages/api/Schema/Settings/Preferences/Intergrations/Google/syncGoogleIntegration/resolvers.ts @@ -0,0 +1,19 @@ +import { Resolvers } from '../../../../../../graphql-rest.page.generated'; + +const SyncGoogleIntegrationResolvers: Resolvers = { + Query: { + syncGoogleIntegration: async ( + _source, + { input: { googleAccountId, googleIntegrationId, integrationName } }, + { dataSources }, + ) => { + return dataSources.mpdxRestApi.syncGoogleIntegration( + googleAccountId, + googleIntegrationId, + integrationName, + ); + }, + }, +}; + +export { SyncGoogleIntegrationResolvers }; diff --git a/pages/api/Schema/Settings/Preferences/Intergrations/Google/syncGoogleIntegration/syncGoogleIntegration.graphql b/pages/api/Schema/Settings/Preferences/Intergrations/Google/syncGoogleIntegration/syncGoogleIntegration.graphql new file mode 100644 index 000000000..4f0a1aa12 --- /dev/null +++ b/pages/api/Schema/Settings/Preferences/Intergrations/Google/syncGoogleIntegration/syncGoogleIntegration.graphql @@ -0,0 +1,9 @@ +extend type Query { + syncGoogleAccount(input: SyncGoogleAccountInput!): String +} + +input SyncGoogleAccountInput { + googleAccountId: ID! + googleIntegrationId: ID! + integrationName: String! +} diff --git a/pages/api/Schema/Settings/Preferences/Intergrations/Google/updateGoogleIntegration/datahandler.ts b/pages/api/Schema/Settings/Preferences/Intergrations/Google/updateGoogleIntegration/datahandler.ts new file mode 100644 index 000000000..8f5e7069b --- /dev/null +++ b/pages/api/Schema/Settings/Preferences/Intergrations/Google/updateGoogleIntegration/datahandler.ts @@ -0,0 +1,36 @@ +export interface UpdateGoogleIntegrationResponse { + id: string; + type: string; + attributes: Omit; + relationships: relationships; +} + +export interface SaveGoogleIntegrationAttributes { + calendar_id: string; + calendar_integration: boolean; + calendar_integrations: string[]; + calendar_name: string; + calendars: calendars[]; + created_at: string; + updated_at: string; + id: string; + updated_in_db_at: string; +} +type calendars = { + id: string; + name: string; +}; + +type relationships = { + account_list: object[]; + google_account: object[]; +}; + +export const UpdateGoogleIntegration = ( + data: UpdateGoogleIntegrationResponse, +): SaveGoogleIntegrationAttributes => { + return { + id: data.id, + ...data.attributes, + }; +}; diff --git a/pages/api/Schema/Settings/Preferences/Intergrations/Google/updateGoogleIntegration/resolvers.ts b/pages/api/Schema/Settings/Preferences/Intergrations/Google/updateGoogleIntegration/resolvers.ts new file mode 100644 index 000000000..f8e1eedcd --- /dev/null +++ b/pages/api/Schema/Settings/Preferences/Intergrations/Google/updateGoogleIntegration/resolvers.ts @@ -0,0 +1,19 @@ +import { Resolvers } from '../../../../../../graphql-rest.page.generated'; + +const UpdateGoogleIntegrationResolvers: Resolvers = { + Mutation: { + updateGoogleIntegration: async ( + _source, + { input: { googleAccountId, googleIntegrationId, googleIntegration } }, + { dataSources }, + ) => { + return dataSources.mpdxRestApi.updateGoogleIntegration( + googleAccountId, + googleIntegrationId, + googleIntegration, + ); + }, + }, +}; + +export { UpdateGoogleIntegrationResolvers }; diff --git a/pages/api/Schema/Settings/Preferences/Intergrations/Google/updateGoogleIntegration/updateGoogleIntegration.graphql b/pages/api/Schema/Settings/Preferences/Intergrations/Google/updateGoogleIntegration/updateGoogleIntegration.graphql new file mode 100644 index 000000000..7c0b5626b --- /dev/null +++ b/pages/api/Schema/Settings/Preferences/Intergrations/Google/updateGoogleIntegration/updateGoogleIntegration.graphql @@ -0,0 +1,29 @@ +extend type Mutation { + updateGoogleIntegration( + input: UpdateGoogleIntegrationInput! + ): GoogleAccountIntegration! +} + +input UpdateGoogleIntegrationInput { + googleAccountId: ID! + googleIntegrationId: ID! + googleIntegration: GoogleAccountIntegrationInput! +} + +input GoogleAccountIntegrationInput { + overwrite: Boolean + calendar_integration: Boolean + calendar_id: String + calendar_integrations: [String] + calendar_name: String + calendars: [GoogleAccountIntegrationCalendarsInput] + created_at: String + updated_at: String + id: String + updated_in_db_at: String +} + +input GoogleAccountIntegrationCalendarsInput { + id: String! + name: String! +} diff --git a/pages/api/Schema/index.ts b/pages/api/Schema/index.ts index 2040bbf3e..6ed37cc28 100644 --- a/pages/api/Schema/index.ts +++ b/pages/api/Schema/index.ts @@ -45,6 +45,18 @@ import DestroyDonorAccountTypeDefs from './Contacts/DonorAccounts/Destroy/destro import { DestroyDonorAccountResolvers } from './Contacts/DonorAccounts/Destroy/resolvers'; import DeleteTagsTypeDefs from './Tags/Delete/deleteTags.graphql'; import { DeleteTagsResolvers } from './Tags/Delete/resolvers'; +// account +import GetGoogleAccountsTypeDefs from './Settings/Preferences/Intergrations/Google/getGoogleAccounts/getGoogleAccounts.graphql'; +import { GetGoogleAccountsResolvers } from './Settings/Preferences/Intergrations/Google/getGoogleAccounts/resolvers'; +// account integrations +import GetGoogleAccountIntegrationsTypeDefs from './Settings/Preferences/Intergrations/Google/getGoogleAccountIntegrations/getGoogleAccountIntegrations.graphql'; +import { GetGoogleAccountIntegrationsResolvers } from './Settings/Preferences/Intergrations/Google/getGoogleAccountIntegrations/resolvers'; +// save +import UpdateGoogleIntegrationTypeDefs from './Settings/Preferences/Intergrations/Google/updateGoogleIntegration/updateGoogleIntegration.graphql'; +import { UpdateGoogleIntegrationResolvers } from './Settings/Preferences/Intergrations/Google/updateGoogleIntegration/resolvers'; +// sync +import SyncGoogleIntegrationTypeDefs from './Settings/Preferences/Intergrations/Google/syncGoogleIntegration/syncGoogleIntegration.graphql'; +import { SyncGoogleIntegrationResolvers } from './Settings/Preferences/Intergrations/Google/syncGoogleIntegration/resolvers'; const schema = buildSubgraphSchema([ { @@ -127,6 +139,22 @@ const schema = buildSubgraphSchema([ typeDefs: DeleteTagsTypeDefs, resolvers: DeleteTagsResolvers, }, + { + typeDefs: GetGoogleAccountsTypeDefs, + resolvers: GetGoogleAccountsResolvers, + }, + { + typeDefs: GetGoogleAccountIntegrationsTypeDefs, + resolvers: GetGoogleAccountIntegrationsResolvers, + }, + { + typeDefs: UpdateGoogleIntegrationTypeDefs, + resolvers: UpdateGoogleIntegrationResolvers, + }, + { + typeDefs: SyncGoogleIntegrationTypeDefs, + resolvers: SyncGoogleIntegrationResolvers, + }, ]); export default schema; diff --git a/pages/api/graphql-rest.page.ts b/pages/api/graphql-rest.page.ts index 1f8eea078..db0705fbf 100644 --- a/pages/api/graphql-rest.page.ts +++ b/pages/api/graphql-rest.page.ts @@ -75,6 +75,19 @@ import { DestroyDonorAccount, DestroyDonorAccountResponse, } from './Schema/Contacts/DonorAccounts/Destroy/datahander'; +import { + GetGoogleAccounts, + GetGoogleAccountsResponse, +} from './Schema/Settings/Preferences/Intergrations/Google/getGoogleAccounts/datahandler'; +import { + GetGoogleAccountIntegrationsResponse, + GetGoogleAccountIntegrations, +} from './Schema/Settings/Preferences/Intergrations/Google/getGoogleAccountIntegrations/datahandler'; +import { SyncGoogleIntegration } from './Schema/Settings/Preferences/Intergrations/Google/syncGoogleIntegration/datahandler'; +import { + UpdateGoogleIntegrationResponse, + UpdateGoogleIntegration, +} from './Schema/Settings/Preferences/Intergrations/Google/updateGoogleIntegration/datahandler'; function camelToSnake(str: string): string { return str.replace(/[A-Z]/g, (c) => '_' + c.toLowerCase()); @@ -819,6 +832,61 @@ class MpdxRestApi extends RESTDataSource { ); return data; } + + async getGoogleAccounts() { + const { data }: { data: GetGoogleAccountsResponse[] } = await this.get( + 'user/google_accounts', + { + sort: 'created_at', + include: 'contact_groups', + }, + ); + return GetGoogleAccounts(data); + } + + async getGoogleAccountIntegrations( + googleAccountId: string, + accountListId: string, + ) { + const { data }: { data: GetGoogleAccountIntegrationsResponse[] } = + await this.get( + `user/google_accounts/${googleAccountId}/google_integrations?${encodeURI( + `filter[account_list_id]=${accountListId}`, + )}`, + ); + return GetGoogleAccountIntegrations(data); + } + + async syncGoogleIntegration( + googleAccountId, + googleIntegrationId, + integrationName, + ) { + const { data }: { data: string } = await this.get( + `user/google_accounts/${googleAccountId}/google_integrations/${googleIntegrationId}/sync?integration=${integrationName}`, + ); + return SyncGoogleIntegration(data); + } + + async updateGoogleIntegration( + googleAccountId, + googleIntegrationId, + googleIntegration, + ) { + const { data }: { data: UpdateGoogleIntegrationResponse } = await this.put( + `user/google_accounts/${googleAccountId}/google_integrations/${googleIntegrationId}`, + { + data: { + attributes: { + ...googleIntegration, + }, + id: googleIntegrationId, + type: 'google_integrations', + }, + }, + ); + return UpdateGoogleIntegration(data); + } } export interface Context { diff --git a/public/images/settings-preferences-intergrations-google.png b/public/images/settings-preferences-intergrations-google.png new file mode 100644 index 0000000000000000000000000000000000000000..c60525bdaa9f59a297cc4aa32f8d519364342318 GIT binary patch literal 13207 zcmX|Iby!s2)4wdaAl=fkfFMW-h;%QFfOLa&cX#K4(yf4WcXvr6Eg;<>-SDp8-}Ait z$KAWq#%Wf{t_Jk08DA9xH15M{NeX4XejXO001GJfc_y7C6G&`Z(FfpqJqURRtZI)W3^XK4S!zT&~o~AZS@LP8q zY)6i{h82~$_8>^+o`>MWz;t%D{v~gsN#oUU(XOt~M$B6__>V%ngPwm8QZYf%YWM{tEW5l z9uVe46TSeiC5JhA73uFu%pe`U%apzx;m0GT$tB5%M;;hNQtAt{FH!)iR2Y7w_?jFju2$68c%t0RsXA zG#r2Iu^!%O`e)t6o1#e{HOPCXGq)({_#aJ__?fV~+VppmganFpyoe z+PFdhc0U0i*&PnXF9aFJ3?N*)JV>^r;j$@?+{tTagx)c<_beb=? z(z+1!)H#wif!{$Pm*qh7|3rxV?zr$hb0<1daN_3h#yz*_mtCTDL z)#wlp*E`lbzIAK>t#bttfuut9^xN}3+tZ5634g|1qeIQ3&DxyjqwgJmy9VvM%UdLn!3u2h5&e3+B?NIAYWK@1+=f4j0V%s6f99BDG>SeR&@ z0Dpj-5ywAu_j|L(RrskfdHvh)jHO0N04^|mIPUjrBNDB)_N42(DVe_A|{Q+Ul?qas?77&>|wNF2dz&DS7=7JnW)@0L{eY<0D7L7qV#|$sh6VV)#qp;Gh^Z6rc8*3LKViRvH>|evNwj~H&>;*YU6w4SJj$LmMUnA{0`TR# zM+Q|+biAYVum5O0W^&Trlipg68k?Fc`TlJGN?NgGc`tR(D=v&6%xrt`y;Gd^+!DK?^7F%f zPuL|3Nk>I$$LUys7`-t6^~*7ibV!=#bvTb1RxFPhwt6$7$@AxB27klJ1^Zq4pDJ}N zZrtKnl(C6F6I@W=T7@6i-vlql&}8`pG)CNzmbkg7J~+JYB^;lIux5s5!4xF@Rx+cX z5aMz%3V=7K*UlWS+HM@P847)ZQxrmuc7wa_5RxUVx8&C=0mz?(_UtO2j)b)@X%R7s z`3%t~g8a_hPDnJAIIZkOMhEVQVpqpW7SK32R@lqlG#KUWoDL=ZW}Sa(4M};x-ZWV0 z68^?}&AfV&`?|8JozZQow*Qm1SoioiXcjI_w09vNt_|JQ@7nI^e1}{hnCWPedJq=3r;0VcSyrw}P3}4r5j_4GG2# zZxiZ4dd;fhyRsEzJhj9mU|#{X>da();gdUQ|F_(7lZ(k?)eAFOGRx~QcUt`L^gl;` z)t122BD-X;sxy8SZS69V=-xxqKm}Gg+%h`cR-w#DU&Doq=24nNg$5^=#JJ!?Y>1g= z%Bz>%Jv#R#+rA6v%6l(gaxQ(zcuZ+*LF=!gN%+}ja*tw;%6FO>qJE+q9$yVeQCfYP6DZZRS0oa*yfD4sZ^%CE<#(RHr1+r};| zKI`z-CFO#yP3k@MC-azsQJ^~7Bbn9gdE}5ZM+O{i{UC6oz9R3OTyQ6Yf9$S@iQ3#- zjE~XeQ^{Teh{m1eL>D4t{^`TP7T_&>Q+;G7WGmDysdee6dM0eNdPKUlw z6Jpb~HPTxy5)Yqwz&v1>r~F5B62cnjDv~Jf(~q&Z3ut)si036MJ;Mt|@>#=!T3Uk- z%Hz@^-Qr|i_$t|<;9NiRXW?vMaV9g;N7wj;oQ6ewxUH@jldd#tIjY+ckKfn>`k5=g z;+OBx=g_8&uda+;PUsl)~K>=&hc65}&n!Rp5d#a}B`b%iG%e4VR-lgMqGDz&h+&KGXIZRih$i-=0%=Bg?FEy zEgO*Ku3kb@EI_+Kr4-ipzI_bd2R0;+R?sTU`WbH%A8DAnOFDZsZeEIVji=iVuO|BU zf2-J~;l`1~=n%a>AajvesQ70ACZjYJ#h_LFT>AjaI#CCD%GQ``z$T?r5sS1f36os; z<}5ii45Tb>h)1Trvx(u}8S!BZoZO6A3gU`ThF4Ux2wT6G2$2@=x#klgU^xjPY{sPa zkd5m%YjUf8m#l?PToJS5sbi-R4=GJ|UC0|N1J6%5epjPiSNpP>G57e-HdJzxlc>1L z%%_qnedkxN<>Je>B(5Fwo+`HP-QZh4)g-&q#ZIZ;#tZwaFSjH&Qcs7s>&wZCK;4}F zM;)8djjruIc5jp* z!UZ_zh+FWs{gWcG$6ddT_w%2GJt=Ec#;+?@>fg#~IzF|b7eF2REU}HVV3r9PKO#T) z7>kSwK-{P}F-%aQT^~#W>BG`+&YY6E2!_(0uJ&nZ`h*cyMqUZdJ$kORv@<$cwmS4B z!2;{b7q#&veET~Lf1iS>+1CcxBpey4*2D$AW0FSv^ET#|DJXpQ{yyoUdDHq}$ap&3 zgAEEMi35VQi;H$h1~r`NXmzxQ3YWbsYtqtd(3idy9l718HdzjURZT@GG=J|N_vxG5-}Hbvs!c`lX&~^=RRE!6 zOTs5X(Q3`@<@IRVNI{+oCK3;SS!n7>mm{SmI!0X7IvY2e@da5Vu_k6%NWwx>=pDgB zqxCok&;%~r%?}nNKNgF9ksKr%eCy_iPo4O`nh)s`*c~nq8Ikn`4b%ucRJYw66a?!pB62)iqQJ1GSRdeki`)zmq9vWi?5mH48?@^aECl+AE)-=NPT?WajZ-eFvU7ENmoOt5JzpQ|r3FC*6YVR-SiQG%O0B23&`HRv)oOh<;s~+fkJ7AT zOY1>N_?_C`AQDF;=RxQmH^ofDv#Xmc-IW-$$bQy7t%vhNn=HPHYryl}}>+h0&M`)R^<9Eh?7waOBV*i|2&MX=k zW2JA_!jq$q;Ow8{(6V(DhDuGdjo(>t*g#F2kJzS5=jTa@t?Y=TY9`RETopxK|DryI zPjF&qlX;?8S3R-YnoA$Mif&=526J4Us6Rjxrd(_{)atkSCO{Cu`Q5S2<&-!x0wb~j z{-6LembW&^Dhj<*B76gs@I$HOz!%Q6Uo-c*FoShMCF6RiqdzYs4v^On_M(K<_>PAn zNovoq$JPhk%is6vQgi=xyq(U8v#b51Er`IJ5i8(?EBpHC1G2JmYpu4gNIRLbE&ObI zNdI1CZqQH8iG`;oh(PWE8Z4f#idB0y6$_+aW$K?V2rHy9me@L>iKRFFZRukaiX3#r zMddn8-fT*5Qfm4x?PXS(0!fP__CB1ygpceM51d(aeWjzlLNlqdj8>kR9~sFh?RDta zFYwJA>#u(Gid1=>9V=9W&YLV{TvRf!#&3=f8lH7*{oWZLic|IS{Xn1D>^J;DjS2Bv zQPiQ;H~+j#Jn`Dxro}EZ-_enH2Ur!f-bC=vE1Ic~jxYnwcI4};G(})lv)#DcDalPX zi;dGXI*4FZgzJ{H|GFt13y%+9Sphy)ajW{St01k_uY6!UWnbhgDWF&^WIkC4@*}|K?C}5Tj zkUK}7(%tM%&fzl$bfPNc9DH9!_G(91QWl>G6&bf93@LMrr2cV1nyDfnI!R%zQkPtW zcKedAzgEXI}6=7X`jsNHBu&29d_o!_R?A z%)`wT`D!lW5G0*n4E}bCWQ$8WkJ=gUjj+RI3CgUy>e?eD*yuP`8v?4r!`7uqqLM_r zhbsV6tY8As@pKKUAcgj$W7b6v(agRo@ z;_uYob6I=q(*?x34IWGU1rdG`>-=Pm=?G|?`WH#AR{YW8O~E5Gx^!TL^1i;sY$Vyi zw;LmW0j4|3TV3R1luH<0=&OG^inSSnpF+V|>NOAc*FSzxR&hcgXPA}W6?^8tEnm>k zCT8DTF~8hT7xJZorr58>EeSkpOrw!9x@yq>l`9LaGBu?~0EZOJ{J25-TjoqQ?U?-w z?qaa)4_>?a;LsarJ)q~%S#S7^-Z3ewT=C&tx8lDX?f>vV(I4mw&27e;Jkiv9yr+d& zqkUbiBmZL?7_I6no>uk4^ex0%1NpIZOWa-1B+vZGyL4;*4zBXMxU}ef&EBA!r0sDt zjcCG(J=xd2f!=oA8Z|^ZNNlHGS)AcQ8srtrM9Nt3z~prMa1E;-Z%6F+`Qg+3R#phX zevEh@)!!L*+h#69&O$Ls84Mz3Vn1&pJZ{r+>#~>(L*}9A?Pn8dUtg1^n~fb9n_Yw!s2v4p2EGo9G|qCn>S! z3C@~rw6qG>revWPv_4psA3qdE|J)S!={S*5g`fWX^eyv? z)egHg&PX7&izV%54HR;tL$LTisduc=bQQwg^egji7VVg^ia?d+;@2{p{)kBe@ri~L zG+o}>sg9ZUFs>pW)4P=onyt4uJR-PVJQUW5&!p>3NgjiG_$MPg)FBfNLaz8(yR6iP zGl_*(l}i}xcgWCOx%*%N=4>xMR6MmujFJOpp5P~hJf+)HJ2AGT2TD8{mW7UcBpj$> zj0CgVb2+24BaB}4;hJh134`9iu~7zJ1xg3*mT$B`!+dPQ8IRc`PCI?bx|jKAm{J~> zVcq~hI4JPc7HLbqCfb&|KW1+cR$#*|%Na_TZJeWeWM43*Qx_+wQm;SO9gZAog>uD^{-)?aVKy=w+Mx zEF0<&gEwnG)fzbP>P|v~Q?s2cMc z-&YGnME3^-5s)-O?j!ped5O{GQ_FN+Z{6D>X3!1sVmap_cfU zT)aT*6=Yq=u&Hu?I^l)pzR$Vmj1n>I?A`bTW2m47 ziRoJ%3WAAlMb$jmq9=@|V&5X+>?-v7TAs|y9dZw{3Fr@ApZql&??xKIOIV#w?mKV| zaThkQgTqE+ncFC;t$d?Br2SvV14K1*}zU|zcsWEfJI&&QvXl}!fJvhDa5z`O~aX|u|Y3e4jK z`e5*zu@@%?_`?3uM9Bx|x&=>TV-v|!QdDiEy-StC%h6*2TQr)8#tXyl#^d#{s`Hm* zqb)a??MTMb4J0+Vc}ju^-X+dVj;V@3P|&AI&Cdxyxqt8{--d1m|4MS&z#OU$Gw)`QTAyG_w3kxgFcjYK)?8j*cXAE&JQ}$9N5>L3k`>$S@h(b$!gIx^_eo5w`6(7mn+E2K zVDSd7o4nj_dcAQ6wfXt0kt+9ziSRpTJ}V_b<8+30<0J>=~FE zj{c3IxvVEgju?~On{XQUzaN};4`^jnOQp2`iu5GUw<#t$5XDoLWqrG9GCFCN#}gFo zKjVs`VP#6LiU{Tu9N1uU6+aFnh&0(LQCsR9Ni3r=l%yF1MRk0+rwK7)*xKOEo(?UT zX%XoTk56QPTRXMw6PvfRzVq#YF4el!F=o{O#-=RPFMK%E16F+pKk$K3bo%i~(-EI}#ZSpc|%ZaQv$>`YA-KTiqK=F`Bu9Kb7d?EuwC#Y*km(XcwbcA&{q zy1Fmk7DNT-C;gUyn>pNRwLnmOxMTCOc!d|_Zi{@`pHU9_#_0>+7Q)p@j`9ajj*#I8 z{{g?@Ak-p`;l9RB%;)LE#}$8leup}Q1MX4O@nJOH89_BPvtpu)PlVC)@nMI8C8;IU zhP@D2m=6ez*`{z=C?{goNjGBmT2H>eKES;XcQ>8P*M50WK}7VC~P3zanH zA82vg6x$y={|KwB_G$FWvmuO*k2%BVkEZhr3MK^qQ9PpW-B>{-1!q;M8!~GmfyrV{ zz4bTng@qZ6c6Vh{0FrKs_X<0xVy)}w7o)tTXeepbJi@J*_O&ldFtupDOZ?G5GDf6L zm}OR+u|)vW3ihb5)t81-wbPkEP!@}+s!}dqz@s93NOa?K2wVMyt6U1wKW1JA)~TM7 zwr0?jQa+S12LDKn>k7O$vjfS4^rVVMDp2h6jH2crH=Is9Jj4tJ{)$Z~N=)$jWg zy+I9gL?sgKX1w?~vF^~LRUa1AJz{FwzS*5EH4Kr(;tnh@8K>VyCRad6l?f@_gGl~m zeHl{5doK@7nW)|;|97I7&8{ZBzV%|ujP||w4{`sRMSMe+ck=tK^_-~=eE?GAiD;_} z#dNdd8(*R4fR7?2OeRl9b1bNZUfmu~talhC5%x@1e1lLpZs*s%-_&rmk4kMQhWwYO z^oerO@;EeFwVKN-V{7LM7ph^-PJ>yMeGUH8Z2s-J?iIZcuNry9Zq`cy@^xg{*S3z0 zMMWws3sfTf)Ld4#L=SqDAyusBI3}g<3N?hjaMamS!AU%e9^Zdz0UKQWgllOgkD+2o z1oj=V+MH;&=s1VNs^XG-aEUJ(Y0(2GKbo=PF%=P^r#vxad{gET${jUzK@sY?ePjImr_ zPthv9ef2LA^&i)e2bN0wFu+mpBkxNoLzm5rl(1yb&XHito9l&D;coxrUU&?7qjuYv z8d_zI!;}BT<k(^wr8#jS#jHRkU_$iRlRY26f_V-~N5wy7h6xwNd_XmZY84 z;+6lPO_5~%N3X@JbUu?>sK#6WDs%hM?zAB4|C-VJv(oys3^7SDvzn;7HQs3m)tCuE zVfm(}SQB2C;6HcyDph3G*Cz)uzuL+0DD?_$lQs_zj`4+SO_qu{mQj?Y_su?IZ;Xum z#PVwpgNw$p*tzhOZhhEqU+Wv;Gtf0VI#NaF|7l=R-hV=k6C2Mte-~D^xK_#tw9~ z%d|)F!tHlZrBp8yzT+B>Y#U zXu+M|qsYk8du~*Z z($s&%^o|cgvX6*W4?>DbWj7|jzBVKInH3yOSYjw&k59uqXF&_|AL8jMZ<_AfU*+ss z>M-tVS{eV~UeH1YPg{ruZU#%%u$TCa!-0(+sDHU@Wsp55B>c>b>LkSDORS6@=8G-) zgJB(n9fUHqvVBr5KBfDr?_~G1;0$4++ETWBkrB z)nyYY!p`haq=~x?Q{)PiNH8O1fnpcI$87Ex+xI`MLEswq@2SE$4}{r8RQ+6O-1?Xf z5qc^|Zv!>eIb3-muirI(ka10ZE12tQ9F7U0Y-ol?zBjw}!YDDCt$g%ix~?PYuP$xU zuMeE>j9Sr*)r(~fLPB_xsn7h-?gJ`xKc)(*vUZucd)l);2OYPpt09W{obxN0^$;wS z5JY&VL5k7w=)al0PUoQ7?YpMZ3(h*9BKVxC|eQWDyVwAwUct#T2N*PxV88w#zy-toAjVX zY*=$w$e-STUjxHXW|J$SB)fNf6!+H1B+Q-W2c1@$XL2L5n0Vu~iT4*~2~`v{5}Z=~@$*@N-u;vDPSo`jOBqW; zpYw$VWNd4+;FSLJv`!z9+O!^1PL03IEoBjLTvIVG;iES%Tvr$o zZ^g#qy1(LxymqqkaoVnB+)0aoDHp>1-07dJLrskfJzeeZ96N#u$gqzn*s$70dZP$> z>zsW|geY>3@6OF-(cqxp!hPKaq|(WL?FOHw{1SfTiPH>&lC#6IS8WzeFv2nTX@y*T zHfbk+IT7^I$-irwbzw7xAGz}O&|j1;B*xC#m&Pz7jkGjxK>7%utev&vrN&#T-tI%K zlIlC|(y)X&+&8`X@FOwL`{RgR6{sKO`tj-TAeO4BLE+rrAwu|^OkE_G&v&BWmea#3 z!w+kWP*jKgoM$Dqw*a-jtXTW*KeTR?AA;{fdGgmoD7iNET`wUEFb%=%&&@S)I>xhE zK(3N+@IK-yy$0uKrG@u~Hpoyk_icU6znGM=>(AII=-w#M$0SgZdfPK8Jy9^ZH@D$b!GkXMo)@S1UwaiUojq))oO8H zOGDEIYiTAT{AwIsI?73ymL+FTBF861CcOCd>(WEOjjJfRtSMRP2MUr@fsAS57YIjm z`EOt_5N>DeqF`pYx5jGhB(@4<@7Ud0D%|*1a%jeeP2z%N=nv1o)DFP-Rg-#Y6N7)- z08=jh;$kelk|7VRlqi_MfJI9A`18y$zRLLE(F?|4dY_`%-?+U4+2?NAZr*WlqumK; z{L3$g`@%t?F@|ZAHP)0tVxz$J4Kc56`BBnh(jMJ`!U4ed#c&)Rka{f znLXK68nwlV5C%*YZ>}f@;+=!B znLHTbkRoRNT!!ek>yNsbCSKRci~2C3XQ{3}iYuvQA0%bwW<(Lb62GL^YRpDaH}ppm z#S-Md2L@cs#N(SyPtVVu$^i>Ru zsvhDmM-0y0oD=;H{9zaw`$-bYJIVT4x>iC?#ncoR6g2m>ZC3QmEE6T}l7CR|)gn40 zwf*ZvGV6+V0%hx=q%0o~U$1{@!0obUv=}!tUNyuhMyH{ILn)8Ho`(E9@&-ql zw>5DM1Cms&vkrEQ151+~Crg5R+5P;fHh%k)Epg*>!P9RtWdjfTii%^V3l{xLDvIwjo7F@0VG$C`P>{ z*P)uBYPG7TnpJn7!!0VmP~$v>28n(L{$b3*Nr+Om1J%JlNDab<`>2TAH=3MGcYqcAmG4nG{@r{$l5bj=BWd(?tlkuTDXelD zgoaV$(jzKGVuJu?I>JrKF0&fe^SVSV5UUSC(yXStN2EH3Q#1X5sOy!P#6-imH-?7mra#!wq?{J9JHxkY`O= z@t|wfu{cMOX)$)5jo}s+csR3YHNoKT+KLmWNL@b?%BaF)!D$W6pJ1h|Ri1~Jvx!K( zrPFr$2yK#Ku#98wIcF)E-xkEg>B1a4`Byd~@GH8Jvq?TX}KjM@N>me+H5HEKOy=X1umwnIG7O>|dC{QRXR2NA4ueZ#1$04tDd`H6=Q zAH8Pg8az$9CnFv=^@&HmJCeN9vuS(u;w`_#_;2B8hR5>~TDuW~a!sAhJUh&}R;S9c z?RQRb(P63|mMLgR@9EihhKyPV9m@_F)%ftL4O1m$%`mcqqH)20?mIrqE@zOUiU!Jf z!P-Bvlec8Q=SETy_dAl2XxFbz{=AAh5yg`RhVPWd9@F>n^)#JtB$j7w#smhh&!ry( z*G+ZOf5haukcp_TqjAI;;`CQbH0HsR3wxQ^j9yyi>}(zT<_XpM@fiZazQogfC`%<3 zkUhRn4c}>2?)tPnuNa=Zv*FHF)J}o=my6{@>meWRf8i-ibWb5BpEFcZq;>LN!CC~% z`uOHJx@)&a(&vWlx9xtknbAiW3vA=3$ovB7%Bu+;*q@yBsl)4(G#^kw!?X~q@xMOE zatJ7}*^VI8OS9dUqX-6=%MM;hFmOcryyEP`?Jt28_)#6oAmD62_DZj}(JeH;? zX1ZJq8dvwy7snDOZKTd@?*)Xi&e@#}4SEI)z9|-biPv`drt*RGaW~;^SLDtJ>-PET zm{H3q4`ajKXLY{bMkmH$Wq7_mW{JIKHjm?KWE9@ER3Gz2rlrMnPSbAjcr$0;@6_sz zq7_3?8xK7u%|&JGFZrXWUdTztPocUJYj4x0oaeLl`+cJJlKBdyGhIi*j^qZjto^RG z+yaO365fZ@HW~GSeWPAH^ROOev_wcFEzWCOrLnk2DUJ4Ir&sWn z_!((DrtjHB`suqZYX*z9q0vAApkuPIfWdzUOo-=?6Nm)-t;n#lEacNFgaN@gg%ySeIDG~>u21PI)TNI)_ zXqY_`;}^Fad8en#m|Yd4l<#>x8)F~`N8-E!0BOC_!WasA9Yo*LgZ1G3w+ER|a z(_5k68jUDEv%`@T=^A7WlY59szxr30b)1G(LO|vq1OTb`m_difU46&(xo+Hv6OF6s zL6cvo@dNu7#S`Oqd(6AGMQ2cOEY2%LU}mAo)~K)S11ok?jn^Bw!lrKrgw<6g3?3fl zUf!en-7aAeR%`+$6o5t?1$fvcT5Y7!!6rF0L#yAp5||x6>{*;Qb2eSw@6!MBTCZ47 zdjO#JzX612pzIp&=Y1(WcFsimK-9rd1Ys|p$|zl(CA)yTZE?N48KXsmw4KqI8}him00T=yD# z+?y`!L?R|N;W_yG5I1vOaP`1^9MT`ydn6`iG6iS=Kyq?8lD4)=40L$qvoJ19z~uU` zwLhoE2=TdCwULb=+0HjUUE%e6VO$VkP|7X;oLSQrGwmb`!XkBeYTf?B^Ri~AOR-Wo@-fnmue(B?4j8aVFl6OvKyBnfi?xtF4a$UrA?(1!z^9|uDQrYCd#PxLyNz6946Dp|YZ zS1x(Bp73sh@LK41rr$a5SoihE>*YNB$0Dckj4OUMwK1~y2`tY4=;ef~+?@kw*@)hE zxLG7sN!{0YORv}+{j=@dedK?03%my4_1VG*@LFpCT^N2*0zmNhQ9%D5wT=2orzw!$ ToZT$Je*w}G3gYFW27&(v1}Q`! literal 0 HcmV?d00001 diff --git a/public/images/settings-preferences-intergrations-key.png b/public/images/settings-preferences-intergrations-key.png new file mode 100644 index 0000000000000000000000000000000000000000..3799ef1e46a01c331e4dcbafd86015e1fbed0711 GIT binary patch literal 4375 zcmZ`-c{CK>-<}PF!C1;R7$Qqkwk9U)AO;nqY<=w#N|wQQ>}JLik$p>(WE8SQSyRY5 zmM9__Sz?exW62g?zjJ=)egAs@_-yw+=RTi%?m5rB=O$WSHR0hB;{pHxJf=7!tK&%j zk3rdweWhJh0RRA>GBv_p4*{-BN|#=973rBJ5`0x9RBqg=5ph88R_31A7)ufxc%)PM z&Wmp%`JcMVagLMk2`HJy8SZ_XE{RFa%tf-^+5;(vC|73k_Z0`&(xn(V6{xGoW-2y3^` z>wGeDu5Gey>e8RCFAaYjZcm#vYA8~klA04~^xUd+K*4RA1isK5)NYYgQh&aNofCq( z`<;Zsvh?+lNH`n{g+M_6F%XbU`u~Q0vuqTKhB|P?HTEe);c3}^3UPWSIs=I++hIy3lxGC zm?(kN>tu!T$-yC}WM{A~iAV< zSY{yUg-mW&kP$Y6P4cXbjcLXm?F@If&1Zhfxw5Z59h!|zKoVd!@1H-VjQ6`vUkHgA z;F+iA*VF!F%U(}|9QRz{`CAO=$^~NtyMG{nuyU?dPms8dmWi&HubIDU%b`dm6Glao zoq(QQgp@o~K+CBG0aP#ijf2tpo+7lKYw!lj%nXlOAULo^ybB?<*)wlV-14k>J%-=& zur9-k3pmqe3NA-~3r!7-KNR{0lj4{OG&Kng6oFvE2IXm5MUu7;?$`GvH+G!p?^tF| zBXL~GODO_*+qSUH5+UBzSLz4nWG2;DNBYLl@A@RZseVbST5%oRd842zQ(s9JesaPg z{2)F`K7iv(yU|91fMnCV&#rgSbrDhSHDz^JgaAyfMKRKcWI(*d(7Wf{`LO^m2Y=!7erjE8SI4DhABMS2Fb>39VlK|iZ7)pLw#?dPa8}otQG75?x}Q}T zO(J&_tYp+m%yq+vgC8265XXT_f`tP%*fcupKK<=Kn3hH}#i|=w&~$K`udt|Y#F@pM z=6GH$GV2BO6`N5CLn((A7I8)3hh4_@bRL1BqpCs>8s}&WddQYY;-0#dvOuv*5O{xN zUgXJ3>7?$-;R3cp&bxDzwu__8mjBya9@im++M+*CQ>`uWX z?*nX=yFf*og$7E@a=A~ejkXgjP1O|?7{WT$5m}-U0W@HY(#VK~jDf_IwfseX{u29n zF(d!>i3w;p!R4N=bP^Z-jM*nGj8LELzX?~VU;!FOw~%O)AS3|UQzMih!Ayyg=H>=$ z&8>>6JbMBopD}h@;&V$AqUX{m6*Y-EIeym&ulQb(6a?X6ioJ}Xp{9+fyLA&nhWyy3 z8DsdJlmjf}=6D9f3H4_m$@5|W@}opntVlzg$RlIz7U5U`OCYyzb7f$li-tmaO1L}y zErLdS#NQL*t*EBOr;aY`zZi;`Wj!f?R*Pp^An&S8oP5t_?b*KCrsGXrK8EnaH3Y%> zDLdPM^eZks(_DlP!DGLyIal104|H*0JgngKdHr(S92JPm7Ew^efd(Qgk)ri0&CaW} z(;Q_-+bk?^$bs;+)yT%8`=6b5M%S;~=3n^-+sXLzV)MJUV|qQKLLmL_Uu-!YgaN-` zmK_eMyD+|RWw`ag6np}QPx@�&eFqhv>ue>J8(O(>PiiuX z@QCP?3>O8|D%>ylb%`wHz}_pi04p6*R!rOfQ@73R=wvidff{-~Ax=I^uRCW$i-5pCvrC`{R1o7Yslt#!eM zVzJ&m2}}!N8*DhWBj+XOjWpv_y7vSjlYt%(4YrnJDaLe;TQ2oDuZDWj@92R=P&p=V zbHPTp+VU1KG~botEw&_d{UPIfh#Bh;pt;Xe%Si{2!|;>+uHC)z(GTDn{i1cd9$@Pho$rOZ$i{887_JMf67pNG~1 z_P*-a#0}{ch<|Vg8tGn7d;K&Fk`l7!+UqH0Kj2QbtF@DXfKqy~!#RsJ6$W8HWyk$- zZJsy0N^TzpTKqeF3Ph&CF_7UuHZPT8xzF0P1uiT9HNMvJ=FyZn*0)(+4qi(0-Qogz zYcn4KLc=LLhS;{~{Ke$1^`uC4P70(VZDH1sqmF}sBzg~WGaKGY`xx--P#*B!rM zcTYEV6QpH@l%G*goYl5zdUZA@1A^5ykyWMkh)5@H+CqP^>5(Y&CKmY8{AI z6769_q1#Lm9FJ2@%pnyRVvEh{kEa+-wEu!Hsj3;Y`M*7YxAnj%6FToxxZ9j8%5gJ~ zbKP73Zs;keJx8q5QE2bG)B%GN_TQFWcU~c`rwrS`yLv8|ivmZgi$>L_LRHz=6YSoh zdTws@9n|Q(Jn-p@Oidv}wYu9vK?m5I5CzKnegc=vE#(C9TWtU>wSxg@&=5n}2k0F` zb*&C#_B7e;=TH;`k$mKLff$)Ie4NPH)P~oo;4zWE;#V~f$AM{X{ixa-j@;{i<&f&3 zmE^*Ns3CJJY*rF4q_@`U3TNYD8A$g6G-OzpM3{Q{|;>j(9w#N~;oy+=j!_Xhm&V8k#n|nWDoa3yqm-5gu+842v?|JA8N1}_=ko7P6$=pW& zb|~Dpzf;GS%tJ7?j#4CXSiTuTPTBGUfi5?#@;mO20z|}_$x5N|L2Y8uhZaHYy(K}; zonM>R;;|WH7r-1yK^he=jlfi6IUEd$K44o!0$B~1$na{QATB2pjN|;jS@TsQk8qyU zh%lJXr{w3JZ>}2p`)NPbVz0lUQ&pndI_`nvo62nAhLIB3&ufnalW@fuSq>6pqH{hH zCRTUt!(t7WODeDZ+|VKUDrW04yTkH~1S2rkbv)o@NgR`1p|Z<5f5n`=MVN}gOH$DAY>k2Kqm>2SKe$5i;0o*>*n&fTAJTHt{g z@4H^b<&S72Okt=`VcL*w2+JjL1dG1-@`AMj}7XKJe!C z8BrhG$!w(&sZpn~^MHg2X9;gv2jDC1qKKV8xt*o0za=K~%sxn5;$!<-;gdI+d9JE^s>U_Xv7z#Hs!3QZ+#Sx}_A6d$%fzSPk8vU8M zEf9Mp4G2d&@2VePof0xUl%>yWYjXTT!Z<>@0G zW5x#Oof9`xrveS+yqyLmzMb7t@z8|yKHmELBoYBG^9^~f?}Lt?`hMg$&9uZGhVUtC z?#=`7rVeYF=bt#8t$TrxQS)PZD7PM<*kq8vP~P2j2qo|O)fn+>%>)QGOVGlrnHhx{ zb_uh-#P29KxBJr3Yr7+N;*>O6=<6&fAsvB*Gk4}Dd@;@`*NefkllOggL@I3wrAT+c zv}`Z@;d$rmfNW<-+uL6({doaRzIi)A2!1sj1^jl|C#c~(U75YTX?ok+ao&KL2ZmrB z2y3)-vy7lt3%9dWEW6J{#aW!hx!_juy;LZBJEaevLE5`y!0K!=@oeL1wSBv$E>;4Gj zicLa}&^m~4S%1bmejK}xOvbrg-Cm(tHI-Ay`xgL>=>hNqzhW?qk zRq~^?gzGu4p^ETuwRk75k1Z8?=AebtN%rFh1z9NlwLVBz=c~M;b*!P$I=nsxc`zIQ z&$Tp>1pYyak-l4_g_T#EF63c3j1BmbH-+0Fd@lD=BGxT77}?bK?+ZxF{xgZY2cmY5 zw__k6ojH-C5nT!H<39`lY`sCUyMO?NLm)t`KKy^ff0Gc14sXXGv;EDD|A0*|T{WsQ HaH0GUGP3$$ literal 0 HcmV?d00001 diff --git a/src/components/Layouts/Primary/TopBar/Items/SearchMenu/SearchMenu.tsx b/src/components/Layouts/Primary/TopBar/Items/SearchMenu/SearchMenu.tsx index 7b4cd6c2d..d5a9b8eea 100644 --- a/src/components/Layouts/Primary/TopBar/Items/SearchMenu/SearchMenu.tsx +++ b/src/components/Layouts/Primary/TopBar/Items/SearchMenu/SearchMenu.tsx @@ -129,7 +129,7 @@ const SearchMenu = (): ReactElement => { { name: t('Preferences - Connect Services'), icon: , - link: `/accountLists/${accountListId}/preferences/connectServices`, + link: `/accountLists/${accountListId}/preferences/integrations`, }, { name: t('Reports - Donations'), diff --git a/src/components/Settings/integrations/Google/GoogleAccordian.tsx b/src/components/Settings/integrations/Google/GoogleAccordian.tsx new file mode 100644 index 000000000..f5c06e7e5 --- /dev/null +++ b/src/components/Settings/integrations/Google/GoogleAccordian.tsx @@ -0,0 +1,170 @@ +import { useState } from 'react'; +import { useTranslation } from 'react-i18next'; +import { + Box, + Card, + Typography, + List, + ListItemText, + Button, + IconButton, +} from '@mui/material'; +import Skeleton from '@mui/material/Skeleton'; +import { styled } from '@mui/material/styles'; +import { AccordionItem } from 'src/components/Shared/Forms/Accordions/AccordionItem'; +import { StyledFormLabel } from 'src/components/Shared/Forms/Field'; +import { useGoogleAccountsQuery } from './getGoogleAccounts.generated'; +import DeleteIcon from '@mui/icons-material/Delete'; +import EditIcon from '@mui/icons-material/Edit'; +import theme from 'src/theme'; +import { GoogleAccountAttributes } from '../../../../../graphql/types.generated'; +import { EditGoogleAccountModal } from './Modals/EditGoogleAccountModal'; + +interface GoogleAccordianProps { + handleAccordionChange: (panel: string) => void; + expandedPanel: string; +} + +const StyledListItem = styled(ListItemText)(() => ({ + display: 'list-item', +})); +const StyledList = styled(List)(({ theme }) => ({ + listStyleType: 'disc', + paddingLeft: theme.spacing(4), +})); + +const StyledServicesButton = styled(Button)(({ theme }) => ({ + marginTop: theme.spacing(2), +})); + +const EditIconButton = styled(IconButton)(() => ({ + color: theme.palette.primary.main, + marginLeft: '10px', + '&:disabled': { + cursor: 'not-allowed', + pointerEvents: 'all', + }, +})); +const DeleteIconButton = styled(IconButton)(() => ({ + color: theme.palette.cruGrayMedium.main, + marginLeft: '10px', + '&:disabled': { + cursor: 'not-allowed', + pointerEvents: 'all', + }, +})); + +const Holder = styled(Box)(() => ({ + display: 'flex', + gap: '10px', + justifyContent: 'spaceBetween', + alignItems: 'center', +})); + +const Left = styled(Box)(() => ({ + width: 'calc(100% - 80px)', +})); + +const Right = styled(Box)(() => ({ + width: '120px', +})); + +export const GoogleAccordian: React.FC = ({ + handleAccordionChange, + expandedPanel, +}) => { + const { t } = useTranslation(); + const [openEditGoogleAccount, setOpenEditGoogleAccount] = useState(false); + const [selectedAccount, setSelectedAccount] = useState< + GoogleAccountAttributes | undefined + >(); + const { data, loading } = useGoogleAccountsQuery({ + skip: !expandedPanel, + }); + const googleAccounts = data?.getGoogleAccounts; + + const handleEditAccount = (account) => { + setSelectedAccount(account); + setOpenEditGoogleAccount(true); + }; + return ( + <> + + } + > + {loading && } + {!loading && !googleAccounts?.length && !!expandedPanel && ( + <> + Google Integration Overview + + Google’s suite of tools are great at connecting you to your + Ministry Partners. + + + By synchronizing your Google services with MPDX, you will be able + to: + + + + See MPDX tasks in your Google Calendar + + Import Google Contacts into MPDX + + Keep your Contacts in sync with your Google Contacts + + + + Connect your Google account to begin, and then setup specific + settings for Google Calendar and Contacts. MPDX leaves you in + control of how each service stays in sync. + + + {t('Add Account')} + + + )} + + {!loading && + googleAccounts?.map((account) => ( + + + + {account?.email} + + + handleEditAccount(account)}> + + + + + + + + + ))} + + {openEditGoogleAccount && ( + setOpenEditGoogleAccount(false)} + account={selectedAccount} + /> + )} + + ); +}; diff --git a/src/components/Settings/integrations/Google/Modals/EditGoogleAccountModal.tsx b/src/components/Settings/integrations/Google/Modals/EditGoogleAccountModal.tsx new file mode 100644 index 000000000..a70a26f93 --- /dev/null +++ b/src/components/Settings/integrations/Google/Modals/EditGoogleAccountModal.tsx @@ -0,0 +1,336 @@ +import React, { useState, ReactElement } from 'react'; +import { useTranslation } from 'react-i18next'; +import { + DialogActions, + Typography, + Tabs, + Tab, + Select, + MenuItem, +} from '@mui/material'; +import { Box } from '@mui/system'; +import Modal from 'src/components/common/Modal/Modal'; +import { + SubmitButton, + CancelButton, +} from 'src/components/common/Modal/ActionButtons/ActionButtons'; +import { + GoogleAccountAttributes, + GoogleAccountIntegration, +} from '../../../../../../graphql/types.generated'; +import { + useGetGoogleAccountIntegrationsQuery, + GetGoogleAccountIntegrationsDocument, + GetGoogleAccountIntegrationsQuery, +} from './getGoogleAccountIntegrations.generated'; +import { useAccountListId } from 'src/hooks/useAccountListId'; +import { useUpdateGoogleIntegrationMutation } from './updateGoogleIntegration.generated'; +import { useSnackbar } from 'notistack'; +import { Formik } from 'formik'; +import * as yup from 'yup'; + +interface EditGoogleAccountModalProps { + handleClose: () => void; + account: GoogleAccountAttributes; +} + +enum tabs { + calendar = 'calendar', + setup = 'setup', +} + +export const EditGoogleAccountModal: React.FC = ({ + account, + handleClose, +}) => { + const { t } = useTranslation(); + const [isSubmitting, setIsSubmitting] = useState(false); + const [tabSelected, setTabSelected] = useState(tabs.calendar); + const accountListId = useAccountListId(); + const { enqueueSnackbar } = useSnackbar(); + + const [updateGoogleIntegration] = useUpdateGoogleIntegrationMutation(); + const { data } = useGetGoogleAccountIntegrationsQuery({ + variables: { + input: { + googleAccountId: account.id, + accountListId: accountListId ?? '', + }, + skip: !accountListId, + }, + }); + + const googleAccountDetails = data?.getGoogleAccountIntegrations[0]; + + // console.log('googleAccountDetails', googleAccountDetails); + + const handleTabChange = (_, tab) => { + setTabSelected(tab); + }; + + const handleEnableCalendarIntegration = async (integration) => { + if (!googleAccountDetails?.id || !account?.id || !integration) return; + setIsSubmitting(true); + await updateGoogleIntegration({ + variables: { + input: { + googleAccountId: account.id, + googleIntegrationId: googleAccountDetails.id, + googleIntegration: { + [`${integration}_integration`]: true, + overwrite: true, + }, + }, + }, + update: (cache) => { + const query = { + query: GetGoogleAccountIntegrationsDocument, + variables: { + googleAccountId: account.id, + accountListId, + }, + }; + const dataFromCache = + cache.readQuery(query); + + if (dataFromCache) { + const data = { + ...dataFromCache, + [`${integration}_integration`]: true, + }; + cache.writeQuery({ ...query, data }); + } + }, + }); + + enqueueSnackbar(t('Enabled Google Calendar Integration!'), { + variant: 'success', + }); + setIsSubmitting(false); + }; + + const IntegrationSchema: yup.SchemaOf< + Omit< + GoogleAccountIntegration, + 'created_at' | 'updated_at' | 'updated_in_db_at' | '__typename' + > + > = yup.object({ + id: yup.string().required(), + calendar_id: yup.string().required(), + calendar_integration: yup.boolean().required(), + calendar_integrations: yup.array().of(yup.string().required()).required(), + calendar_name: yup.string().nullable(), + calendars: yup + .array() + .of( + yup.object({ + __typename: yup + .string() + .equals(['GoogleAccountIntegrationCalendars']), + id: yup.string().required(), + name: yup.string().required(), + }), + ) + .required(), + }); + + const onSubmit = async ( + attributes: Omit< + GoogleAccountIntegration, + 'created_at' | 'updated_at' | 'updated_in_db_at' | '__typename' + >, + ) => { + const googleIntegration = { + calendar_id: attributes.calendar_id, + calendar_integrations: attributes.calendar_integrations, + }; + await updateGoogleIntegration({ + variables: { + input: { + googleAccountId: account.id, + googleIntegrationId: googleAccountDetails?.id ?? '', + googleIntegration: { + ...googleIntegration, + overwrite: true, + }, + }, + }, + update: (cache) => { + const query = { + query: GetGoogleAccountIntegrationsDocument, + variables: { + googleAccountId: account.id, + accountListId, + }, + }; + const dataFromCache = + cache.readQuery(query); + + if (dataFromCache) { + const data = { + ...dataFromCache, + ...googleIntegration, + }; + cache.writeQuery({ ...query, data }); + } + }, + }); + + enqueueSnackbar(t('Updated Google Calendar Integration!'), { + variant: 'success', + }); + }; + + return ( + + + + {t('You are currently editing settings for {{email}}', { + email: account.email, + })} + + + + + + + + + {googleAccountDetails?.calendar_integration && + tabSelected === tabs.calendar && ( + <> + + {t('Choose a calendar for MPDX to push tasks to:')} + + + + {({ + values: { + // id, + calendar_id, + // calendar_integration, + // calendar_integrations, + // calendar_name, + calendars, + }, + // handleChange, + handleSubmit, + setFieldValue, + isSubmitting, + isValid, + // errors, + // initialErrors, + }): ReactElement => ( +
+ {/* {console.log('-----------------___________---------------')} + {console.log('id', id)} + {console.log('calendar_id', calendar_id)} + {console.log('calendar_integration', calendar_integration)} + {console.log('calendar_integrations', calendar_integrations)} + {console.log('calendar_name', calendar_name)} + {console.log('calendars', calendars)} + {console.log('errors', errors)} + {console.log('initialErrors', initialErrors)} */} + + + + + + + {t('Update')} + + +
+ )} + + + {/* + // Update button + // Sync button - Different than Update + */} + + )} + + {!googleAccountDetails?.calendar_integration && + tabSelected === tabs.calendar && ( + + {t(`MPDX can automatically update your google calendar with your tasks. + Once you enable this feature, you'll be able to choose which + types of tasks you want to sync. By default MPDX will add + 'Appointment' tasks to your calendar.`)} + + )} + + {tabSelected === tabs.setup && ( + + {t( + `If the link between MPDX and your Google account breaks, + click the button below to re-establish the connection. + (You should only need to do this if you receive an email + from MPDX)`, + )} + + )} + + + + + {tabSelected === tabs.calendar && ( + handleEnableCalendarIntegration(tabs.calendar)} + > + {t('Enable Calendar Integration')} + + )} + + + ); +}; diff --git a/src/components/Settings/integrations/Google/Modals/getGoogleAccountIntegrations.graphql b/src/components/Settings/integrations/Google/Modals/getGoogleAccountIntegrations.graphql new file mode 100644 index 000000000..41c34e385 --- /dev/null +++ b/src/components/Settings/integrations/Google/Modals/getGoogleAccountIntegrations.graphql @@ -0,0 +1,16 @@ +query GetGoogleAccountIntegrations($input: GetGoogleAccountIntegrationsInput!) { + getGoogleAccountIntegrations(input: $input) { + calendar_id + calendar_integration + calendar_integrations + calendar_name + calendars { + id + name + } + created_at + updated_at + id + updated_in_db_at + } +} diff --git a/src/components/Settings/integrations/Google/Modals/updateGoogleIntegration.graphql b/src/components/Settings/integrations/Google/Modals/updateGoogleIntegration.graphql new file mode 100644 index 000000000..dd5f9c824 --- /dev/null +++ b/src/components/Settings/integrations/Google/Modals/updateGoogleIntegration.graphql @@ -0,0 +1,16 @@ +mutation UpdateGoogleIntegration($input: UpdateGoogleIntegrationInput!) { + updateGoogleIntegration(input: $input) { + calendar_id + calendar_integration + calendar_integrations + calendar_name + calendars { + id + name + } + created_at + updated_at + id + updated_in_db_at + } +} diff --git a/src/components/Settings/integrations/Google/getGoogleAccounts.graphql b/src/components/Settings/integrations/Google/getGoogleAccounts.graphql new file mode 100644 index 000000000..2b57747f2 --- /dev/null +++ b/src/components/Settings/integrations/Google/getGoogleAccounts.graphql @@ -0,0 +1,15 @@ +query GoogleAccounts { + getGoogleAccounts { + created_at + email + expires_at + last_download + last_email_sync + primary + remote_id + id + token_expired + updated_at + updated_in_db_at + } +} diff --git a/src/components/Settings/integrations/Key/TheKeyAccordian.tsx b/src/components/Settings/integrations/Key/TheKeyAccordian.tsx index 3203b5dbf..db93a2ec7 100644 --- a/src/components/Settings/integrations/Key/TheKeyAccordian.tsx +++ b/src/components/Settings/integrations/Key/TheKeyAccordian.tsx @@ -25,7 +25,7 @@ export const TheKeyAccordian: React.FC = ({ value={''} image={ The Key } diff --git a/src/components/Shared/Forms/Accordions/AccordionItem.tsx b/src/components/Shared/Forms/Accordions/AccordionItem.tsx index af626ccd7..ba626bcf3 100644 --- a/src/components/Shared/Forms/Accordions/AccordionItem.tsx +++ b/src/components/Shared/Forms/Accordions/AccordionItem.tsx @@ -63,23 +63,50 @@ const AccordionLeftDetails = styled(Box)(({ theme }) => ({ [theme.breakpoints.up('md')]: { width: 'calc((100% - 36px) * 0.338)', }, + [theme.breakpoints.down('md')]: { + width: '200px', + }, + [theme.breakpoints.down('sm')]: { + marginBottom: '10px', + width: '100%', + }, })); const AccordionRightDetails = styled(Box)(({ theme }) => ({ [theme.breakpoints.up('md')]: { width: 'calc((100% - 36px) * 0.661)', }, + [theme.breakpoints.down('md')]: { + width: 'calc(100% - 200px)', + }, + [theme.breakpoints.down('sm')]: { + width: '100%', + }, })); -const AccordionLImageDetails = styled(Box)(() => ({ +const AccordionLImageDetails = styled(Box)(({ theme }) => ({ display: 'flex', + [theme.breakpoints.down('sm')]: { + flexWrap: 'wrap', + }, })); -const AccordionLeftDetailsImage = styled(Box)(() => ({ +const AccordionLeftDetailsImage = styled(Box)(({ theme }) => ({ maxWidth: '200px', ' & > img': { width: '100%', }, + + [theme.breakpoints.down('md')]: { + ' & > img': { + maxWidth: '150px', + }, + }, + [theme.breakpoints.down('sm')]: { + ' & > img': { + maxWidth: '100px', + }, + }, })); interface AccordionItemProps { From 92f9a4a233d2161d10d2318f0963c89e75014e79 Mon Sep 17 00:00:00 2001 From: Daniel Bisgrove Date: Fri, 25 Aug 2023 14:27:48 -0400 Subject: [PATCH 093/103] Google integrations, sync, create, delete, add integration, remove account etc.. plus mailchimp create, sync, delete and get GraphQL enpoints with React components and modals --- .../settings/integrations.page.tsx | 269 +++++++------ .../createGoogleIntegration.graphql | 29 ++ .../createGoogleIntegration/datahandler.ts | 55 +++ .../createGoogleIntegration/resolvers.ts | 19 + .../Google/deleteGoogleAccount/datahandler.ts | 9 + .../deleteGoogleAccount.graphql | 13 + .../Google/deleteGoogleAccount/resolvers.ts | 15 + .../datahandler.ts | 36 +- .../getGoogleAccountIntegrations.graphql | 14 +- .../Google/getGoogleAccounts/datahandler.ts | 27 +- .../getGoogleAccounts.graphql | 16 +- .../Google/syncGoogleIntegration/resolvers.ts | 2 +- .../syncGoogleIntegration.graphql | 2 +- .../updateGoogleIntegration/datahandler.ts | 36 +- .../updateGoogleIntegration.graphql | 18 - .../deleteMailchimpAccount/datahandler.ts | 3 + .../deleteMailchimpAccount.graphql | 7 + .../deleteMailchimpAccount/resolvers.ts | 15 + .../getMailchimpAccount/datahandler.ts | 60 +++ .../getMailchimpAccount.graphql | 29 ++ .../syncMailchimpAccount/datahandler.ts | 3 + .../syncMailchimpAccount/resolvers.ts | 15 + .../syncMailchimpAccount.graphql | 7 + .../updateMailchimpAccount/datahandler.ts | 59 +++ .../updateMailchimpAccount.graphql | 14 + .../api/Schema/SubgraphSchema/Integrations.ts | 78 ++++ pages/api/Schema/index.ts | 30 +- pages/api/graphql-rest.page.ts | 141 ++++++- .../integrations/Google/GoogleAccordian.tsx | 88 +++- .../Modals/DeleteGoogleAccountModal.tsx | 100 +++++ .../Google/Modals/EditGoogleAccountModal.tsx | 345 +++++++--------- .../Modals/EditGoogleIntegrationForm.tsx | 271 +++++++++++++ .../getGoogleAccountIntegrations.graphql | 16 - .../Google/Modals/googleIntegrations.graphql | 42 ++ .../Modals/updateGoogleIntegration.graphql | 14 +- .../Google/getGoogleAccounts.graphql | 15 - .../Google/googleAccounts.graphql | 19 + .../Mailchimp/MailchimpAccordian.tsx | 380 ++++++++++++++++++ .../Mailchimp/MailchimpAccount.graphql | 51 +++ src/components/Shared/Filters/FilterPanel.tsx | 13 +- .../Shared/Forms/Accordions/AccordionItem.tsx | 8 +- src/lib/snakeToCamel.ts | 15 + 42 files changed, 1913 insertions(+), 485 deletions(-) create mode 100644 pages/api/Schema/Settings/Preferences/Intergrations/Google/createGoogleIntegration/createGoogleIntegration.graphql create mode 100644 pages/api/Schema/Settings/Preferences/Intergrations/Google/createGoogleIntegration/datahandler.ts create mode 100644 pages/api/Schema/Settings/Preferences/Intergrations/Google/createGoogleIntegration/resolvers.ts create mode 100644 pages/api/Schema/Settings/Preferences/Intergrations/Google/deleteGoogleAccount/datahandler.ts create mode 100644 pages/api/Schema/Settings/Preferences/Intergrations/Google/deleteGoogleAccount/deleteGoogleAccount.graphql create mode 100644 pages/api/Schema/Settings/Preferences/Intergrations/Google/deleteGoogleAccount/resolvers.ts create mode 100644 pages/api/Schema/Settings/Preferences/Intergrations/Mailchimp/deleteMailchimpAccount/datahandler.ts create mode 100644 pages/api/Schema/Settings/Preferences/Intergrations/Mailchimp/deleteMailchimpAccount/deleteMailchimpAccount.graphql create mode 100644 pages/api/Schema/Settings/Preferences/Intergrations/Mailchimp/deleteMailchimpAccount/resolvers.ts create mode 100644 pages/api/Schema/Settings/Preferences/Intergrations/Mailchimp/getMailchimpAccount/datahandler.ts create mode 100644 pages/api/Schema/Settings/Preferences/Intergrations/Mailchimp/getMailchimpAccount/getMailchimpAccount.graphql create mode 100644 pages/api/Schema/Settings/Preferences/Intergrations/Mailchimp/syncMailchimpAccount/datahandler.ts create mode 100644 pages/api/Schema/Settings/Preferences/Intergrations/Mailchimp/syncMailchimpAccount/resolvers.ts create mode 100644 pages/api/Schema/Settings/Preferences/Intergrations/Mailchimp/syncMailchimpAccount/syncMailchimpAccount.graphql create mode 100644 pages/api/Schema/Settings/Preferences/Intergrations/Mailchimp/updateMailchimpAccount/datahandler.ts create mode 100644 pages/api/Schema/Settings/Preferences/Intergrations/Mailchimp/updateMailchimpAccount/updateMailchimpAccount.graphql create mode 100644 pages/api/Schema/SubgraphSchema/Integrations.ts create mode 100644 src/components/Settings/integrations/Google/Modals/DeleteGoogleAccountModal.tsx create mode 100644 src/components/Settings/integrations/Google/Modals/EditGoogleIntegrationForm.tsx delete mode 100644 src/components/Settings/integrations/Google/Modals/getGoogleAccountIntegrations.graphql create mode 100644 src/components/Settings/integrations/Google/Modals/googleIntegrations.graphql delete mode 100644 src/components/Settings/integrations/Google/getGoogleAccounts.graphql create mode 100644 src/components/Settings/integrations/Google/googleAccounts.graphql create mode 100644 src/components/Settings/integrations/Mailchimp/MailchimpAccordian.tsx create mode 100644 src/components/Settings/integrations/Mailchimp/MailchimpAccount.graphql create mode 100644 src/lib/snakeToCamel.ts diff --git a/pages/accountLists/[accountListId]/settings/integrations.page.tsx b/pages/accountLists/[accountListId]/settings/integrations.page.tsx index 92155a532..60ca640a0 100644 --- a/pages/accountLists/[accountListId]/settings/integrations.page.tsx +++ b/pages/accountLists/[accountListId]/settings/integrations.page.tsx @@ -1,8 +1,9 @@ -import React, { useEffect, useState } from 'react'; +import React, { ReactElement, useEffect, useState } from 'react'; import { useTranslation } from 'react-i18next'; import { SettingsWrapper } from './wrapper'; import { suggestArticles } from 'src/lib/helpScout'; - +import { GetServerSideProps } from 'next'; +import { getSession } from 'next-auth/react'; import { AccordionGroup } from 'src/components/Shared/Forms/Accordions/AccordionGroup'; import { AccordionItem } from 'src/components/Shared/Forms/Accordions/AccordionItem'; import { styled } from '@mui/material/styles'; @@ -12,21 +13,47 @@ import { Confirmation } from 'src/components/common/Modal/Confirmation/Confirmat import { TheKeyAccordian } from 'src/components/Settings/integrations/Key/TheKeyAccordian'; import { OrganizationAccordian } from 'src/components/Settings/integrations/Organization/OrganizationAccordian'; import { GoogleAccordian } from 'src/components/Settings/integrations/Google/GoogleAccordian'; +import { MailchimpAccordian } from 'src/components/Settings/integrations/Mailchimp/MailchimpAccordian'; -const StyledListItem = styled(ListItemText)(() => ({ +export const StyledListItem = styled(ListItemText)(() => ({ display: 'list-item', })); -const StyledList = styled(List)(({ theme }) => ({ +export const StyledList = styled(List)(({ theme }) => ({ listStyleType: 'disc', paddingLeft: theme.spacing(4), })); -const StyledServicesButton = styled(Button)(({ theme }) => ({ +export const StyledServicesButton = styled(Button)(({ theme }) => ({ marginTop: theme.spacing(2), })); -const Integrations: React.FC = () => { +interface Props { + apiToken: string; + selectedTab: string; +} + +export type IntegrationsContextType = { + apiToken: string; +}; +export const IntegrationsContext = + React.createContext(null); + +interface IntegrationsContextProviderProps { + children: React.ReactNode; + apiToken: string; +} +export const IntegrationsContextProvider: React.FC< + IntegrationsContextProviderProps +> = ({ children, apiToken }) => { + return ( + + {children} + + ); +}; + +const Integrations = ({ apiToken, selectedTab }: Props): ReactElement => { const { t } = useTranslation(); const [expandedPanel, setExpandedPanel] = useState(''); @@ -34,10 +61,12 @@ const Integrations: React.FC = () => { useEffect(() => { suggestArticles('HS_SETTINGS_SERVICES_SUGGESTIONS'); + setExpandedPanel(selectedTab); }, []); const handleAccordionChange = (panel: string) => { - setExpandedPanel(expandedPanel === panel ? '' : panel); + const panelLowercase = panel.toLowerCase(); + setExpandedPanel(expandedPanel === panelLowercase ? '' : panelLowercase); }; const sendListToChalkLine = () => { @@ -56,129 +85,115 @@ const Integrations: React.FC = () => { pageTitle={t('Connect Services')} pageHeading={t('Connect Services')} > - - - - - - - - } - > - MailChimp Overview - - MailChimp makes keeping in touch with your ministry partners easy - and streamlined. Here’s how it works: - - - - If you have an existing MailChimp list you’d like to use, Great! - Or, create a new one for your MPDX connection. - - - Select your MPDX MailChimp list to stream your MPDX contacts into. - - - - That's it! Set it and leave it! Now your MailChimp list is - continuously up to date with your MPDX Contacts. That's just - the surface. Click over to the MPDX Help site for more in-depth - details. - - - {t('Connect MailChimp')} - - - - } - > - PrayerLetters.com Overview - - prayerletters.com is a significant way to save valuable ministry - time while more effectively connecting with your partners. Keep your - physical newsletter list up to date in MPDX and then sync it to your - prayerletters.com account with this integration. - - - By clicking "Connect prayerletters.com Account" you will - replace your entire prayerletters.com list with what is in MPDX. Any - contacts or information that are in your current prayerletters.com - list that are not in MPDX will be deleted. We strongly recommend - only making changes in MPDX. - - - {t('Connect prayerletters.com Account')} - - - - } - > - Chalk Line Overview - - Chalkline is a significant way to save valuable ministry time while - more effectively connecting with your partners. Send physical - newsletters to your current list using Chalkline with a simple - click. Chalkline is a one way send available anytime you’re ready to - send a new newsletter out. - - { - event.preventDefault(); - setConfirmingChalkLine(true); - }} + + + + + + + + + + } > - {t('Send my current Contacts to Chalk Line')} - - - - setConfirmingChalkLine(false)} - mutation={sendListToChalkLine} - /> + PrayerLetters.com Overview + + prayerletters.com is a significant way to save valuable ministry + time while more effectively connecting with your partners. Keep + your physical newsletter list up to date in MPDX and then sync it + to your prayerletters.com account with this integration. + + + By clicking "Connect prayerletters.com Account" you will + replace your entire prayerletters.com list with what is in MPDX. + Any contacts or information that are in your current + prayerletters.com list that are not in MPDX will be deleted. We + strongly recommend only making changes in MPDX. + + + {t('Connect prayerletters.com Account')} + + + + } + > + Chalk Line Overview + + Chalkline is a significant way to save valuable ministry time + while more effectively connecting with your partners. Send + physical newsletters to your current list using Chalkline with a + simple click. Chalkline is a one way send available anytime you’re + ready to send a new newsletter out. + + { + event.preventDefault(); + setConfirmingChalkLine(true); + }} + > + {t('Send my current Contacts to Chalk Line')} + + + + setConfirmingChalkLine(false)} + mutation={sendListToChalkLine} + /> + ); }; +export const getServerSideProps: GetServerSideProps = async ({ + query, + req, +}) => { + const session = await getSession({ req }); + const apiToken = session?.user.apiToken; + const selectedTab = query?.selectedTab ?? ''; + + return { + props: { + apiToken, + selectedTab, + }, + }; +}; + export default Integrations; diff --git a/pages/api/Schema/Settings/Preferences/Intergrations/Google/createGoogleIntegration/createGoogleIntegration.graphql b/pages/api/Schema/Settings/Preferences/Intergrations/Google/createGoogleIntegration/createGoogleIntegration.graphql new file mode 100644 index 000000000..a16638ce6 --- /dev/null +++ b/pages/api/Schema/Settings/Preferences/Intergrations/Google/createGoogleIntegration/createGoogleIntegration.graphql @@ -0,0 +1,29 @@ +extend type Mutation { + createGoogleIntegration( + input: CreateGoogleIntegrationInput! + ): GoogleAccountIntegration! +} + +input CreateGoogleIntegrationInput { + googleAccountId: ID! + googleIntegration: GoogleAccountIntegrationInput + accountListID: String! +} + +input GoogleAccountIntegrationInput { + overwrite: Boolean + calendarIntegration: Boolean + calendarId: String + calendarIntegrations: [String] + calendarName: String + calendars: [GoogleAccountIntegrationCalendarsInput] + createdAt: String + updatedAt: String + id: String + updatedInDbAt: String +} + +input GoogleAccountIntegrationCalendarsInput { + id: String + name: String +} diff --git a/pages/api/Schema/Settings/Preferences/Intergrations/Google/createGoogleIntegration/datahandler.ts b/pages/api/Schema/Settings/Preferences/Intergrations/Google/createGoogleIntegration/datahandler.ts new file mode 100644 index 000000000..b8d0ff624 --- /dev/null +++ b/pages/api/Schema/Settings/Preferences/Intergrations/Google/createGoogleIntegration/datahandler.ts @@ -0,0 +1,55 @@ +import { snakeToCamel } from 'src/lib/snakeToCamel'; + +export interface CreateGoogleIntegrationResponse { + id: string; + type: string; + attributes: Omit; + relationships: relationships; +} + +type relationships = { + account_list: object[]; + google_account: object[]; +}; + +export interface CreateGoogleIntegrationAttributes { + calendar_id: string; + calendar_integration: boolean; + calendar_integrations: string[]; + calendar_name: string; + calendars: calendars[]; + created_at: string; + updated_at: string; + id: string; + updated_in_db_at: string; +} + +interface CreateGoogleIntegrationAttributesCamel { + calendarId: string; + calendarIntegration: boolean; + calendarIntegrations: string[]; + calendarName: string; + calendars: calendars[]; + createdAt: string; + updatedAt: string; + id: string; + updatedInDbAt: string; +} +type calendars = { + id: string; + name: string; +}; + +export const CreateGoogleIntegration = ( + data: CreateGoogleIntegrationResponse, +): CreateGoogleIntegrationAttributesCamel => { + const attributes = {} as Omit; + Object.keys(data.attributes).map((key) => { + attributes[snakeToCamel(key)] = data.attributes[key]; + }); + + return { + id: data.id, + ...attributes, + }; +}; diff --git a/pages/api/Schema/Settings/Preferences/Intergrations/Google/createGoogleIntegration/resolvers.ts b/pages/api/Schema/Settings/Preferences/Intergrations/Google/createGoogleIntegration/resolvers.ts new file mode 100644 index 000000000..39c6501bf --- /dev/null +++ b/pages/api/Schema/Settings/Preferences/Intergrations/Google/createGoogleIntegration/resolvers.ts @@ -0,0 +1,19 @@ +import { Resolvers } from '../../../../../../graphql-rest.page.generated'; + +const CreateGoogleIntegrationResolvers: Resolvers = { + Mutation: { + createGoogleIntegration: async ( + _source, + { input: { googleAccountId, googleIntegration, accountListID } }, + { dataSources }, + ) => { + return dataSources.mpdxRestApi.createGoogleIntegration( + googleAccountId, + googleIntegration, + accountListID, + ); + }, + }, +}; + +export { CreateGoogleIntegrationResolvers }; diff --git a/pages/api/Schema/Settings/Preferences/Intergrations/Google/deleteGoogleAccount/datahandler.ts b/pages/api/Schema/Settings/Preferences/Intergrations/Google/deleteGoogleAccount/datahandler.ts new file mode 100644 index 000000000..09b7e2acb --- /dev/null +++ b/pages/api/Schema/Settings/Preferences/Intergrations/Google/deleteGoogleAccount/datahandler.ts @@ -0,0 +1,9 @@ +export type DeleteGoogleAccountResponse = { + success: boolean; +}; + +export const DeleteGoogleAccount = (): DeleteGoogleAccountResponse => { + return { + success: true, + }; +}; diff --git a/pages/api/Schema/Settings/Preferences/Intergrations/Google/deleteGoogleAccount/deleteGoogleAccount.graphql b/pages/api/Schema/Settings/Preferences/Intergrations/Google/deleteGoogleAccount/deleteGoogleAccount.graphql new file mode 100644 index 000000000..48e0e4558 --- /dev/null +++ b/pages/api/Schema/Settings/Preferences/Intergrations/Google/deleteGoogleAccount/deleteGoogleAccount.graphql @@ -0,0 +1,13 @@ +extend type Mutation { + deleteGoogleAccount( + input: DeleteGoogleAccountInput! + ): GoogleAccountDeletionResponse! +} + +input DeleteGoogleAccountInput { + accountId: ID! +} + +type GoogleAccountDeletionResponse { + success: Boolean! +} diff --git a/pages/api/Schema/Settings/Preferences/Intergrations/Google/deleteGoogleAccount/resolvers.ts b/pages/api/Schema/Settings/Preferences/Intergrations/Google/deleteGoogleAccount/resolvers.ts new file mode 100644 index 000000000..2a97f2e41 --- /dev/null +++ b/pages/api/Schema/Settings/Preferences/Intergrations/Google/deleteGoogleAccount/resolvers.ts @@ -0,0 +1,15 @@ +import { Resolvers } from '../../../../../../graphql-rest.page.generated'; + +const DeleteGoogleAccountResolvers: Resolvers = { + Mutation: { + deleteGoogleAccount: async ( + _source, + { input: { accountId } }, + { dataSources }, + ) => { + return dataSources.mpdxRestApi.deleteGoogleAccount(accountId); + }, + }, +}; + +export { DeleteGoogleAccountResolvers }; diff --git a/pages/api/Schema/Settings/Preferences/Intergrations/Google/getGoogleAccountIntegrations/datahandler.ts b/pages/api/Schema/Settings/Preferences/Intergrations/Google/getGoogleAccountIntegrations/datahandler.ts index a243d0594..ef6d46800 100644 --- a/pages/api/Schema/Settings/Preferences/Intergrations/Google/getGoogleAccountIntegrations/datahandler.ts +++ b/pages/api/Schema/Settings/Preferences/Intergrations/Google/getGoogleAccountIntegrations/datahandler.ts @@ -1,10 +1,15 @@ +import { snakeToCamel } from 'src/lib/snakeToCamel'; + export interface GetGoogleAccountIntegrationsResponse { id: string; type: string; attributes: Omit; relationships: relationships; } - +type relationships = { + account_list: object[]; + google_account: object[]; +}; export interface GetGoogleAccountIntegrationAttributes { calendar_id: string; calendar_integration: boolean; @@ -16,22 +21,35 @@ export interface GetGoogleAccountIntegrationAttributes { id: string; updated_in_db_at: string; } +interface GetGoogleAccountIntegrationAttributesCamel { + calendarId: string; + calendarIntegration: boolean; + calendarIntegrations: string[]; + calendarName: string; + calendars: calendars[]; + createdAt: string; + updatedAt: string; + id: string; + updatedInDbAt: string; +} type calendars = { id: string; name: string; }; -type relationships = { - account_list: object[]; - google_account: object[]; -}; - export const GetGoogleAccountIntegrations = ( data: GetGoogleAccountIntegrationsResponse[], -): GetGoogleAccountIntegrationAttributes[] => { +): GetGoogleAccountIntegrationAttributesCamel[] => { return data.reduce( - (prev: GetGoogleAccountIntegrationAttributes[], current) => { - return prev.concat([{ id: current.id, ...current.attributes }]); + (prev: GetGoogleAccountIntegrationAttributesCamel[], current) => { + const attributes = {} as Omit< + GetGoogleAccountIntegrationAttributesCamel, + 'id' + >; + Object.keys(current.attributes).map((key) => { + attributes[snakeToCamel(key)] = current.attributes[key]; + }); + return prev.concat([{ id: current.id, ...attributes }]); }, [], ); diff --git a/pages/api/Schema/Settings/Preferences/Intergrations/Google/getGoogleAccountIntegrations/getGoogleAccountIntegrations.graphql b/pages/api/Schema/Settings/Preferences/Intergrations/Google/getGoogleAccountIntegrations/getGoogleAccountIntegrations.graphql index 49e254141..0e25a71c5 100644 --- a/pages/api/Schema/Settings/Preferences/Intergrations/Google/getGoogleAccountIntegrations/getGoogleAccountIntegrations.graphql +++ b/pages/api/Schema/Settings/Preferences/Intergrations/Google/getGoogleAccountIntegrations/getGoogleAccountIntegrations.graphql @@ -10,15 +10,15 @@ input GetGoogleAccountIntegrationsInput { } type GoogleAccountIntegration { - calendar_id: String! - calendar_integration: Boolean! - calendar_integrations: [String]! - calendar_name: String + calendarId: String + calendarIntegration: Boolean + calendarIntegrations: [String]! + calendarName: String calendars: [GoogleAccountIntegrationCalendars]! - created_at: String! - updated_at: String! + createdAt: String! + updatedAt: String! id: String! - updated_in_db_at: String! + updatedInDbAt: String! } type GoogleAccountIntegrationCalendars { diff --git a/pages/api/Schema/Settings/Preferences/Intergrations/Google/getGoogleAccounts/datahandler.ts b/pages/api/Schema/Settings/Preferences/Intergrations/Google/getGoogleAccounts/datahandler.ts index 35c9216d5..cc34f600b 100644 --- a/pages/api/Schema/Settings/Preferences/Intergrations/Google/getGoogleAccounts/datahandler.ts +++ b/pages/api/Schema/Settings/Preferences/Intergrations/Google/getGoogleAccounts/datahandler.ts @@ -1,3 +1,5 @@ +import { snakeToCamel } from 'src/lib/snakeToCamel'; + export interface GetGoogleAccountsResponse { attributes: Omit; id: string; @@ -23,10 +25,29 @@ export interface GetGoogleAccountAttributes { updated_in_db_at: string; } +interface GetGoogleAccountAttributesCamel { + id: string; + createdAt: string; + email: string; + expiresAt: string; + lastDownload: string; + lastEmailSync: string; + primary: boolean; + remoteId: string; + tokenExpired: boolean; + updatedAt: string; + updatedInDbAt: string; +} + export const GetGoogleAccounts = ( data: GetGoogleAccountsResponse[], -): GetGoogleAccountAttributes[] => { - return data.reduce((prev: GetGoogleAccountAttributes[], current) => { - return prev.concat([{ id: current.id, ...current.attributes }]); +): GetGoogleAccountAttributesCamel[] => { + return data.reduce((prev: GetGoogleAccountAttributesCamel[], current) => { + const attributes = {} as Omit; + Object.keys(current.attributes).map((key) => { + attributes[snakeToCamel(key)] = current.attributes[key]; + }); + + return prev.concat([{ id: current.id, ...attributes }]); }, []); }; diff --git a/pages/api/Schema/Settings/Preferences/Intergrations/Google/getGoogleAccounts/getGoogleAccounts.graphql b/pages/api/Schema/Settings/Preferences/Intergrations/Google/getGoogleAccounts/getGoogleAccounts.graphql index 90dbd7dad..a1150b926 100644 --- a/pages/api/Schema/Settings/Preferences/Intergrations/Google/getGoogleAccounts/getGoogleAccounts.graphql +++ b/pages/api/Schema/Settings/Preferences/Intergrations/Google/getGoogleAccounts/getGoogleAccounts.graphql @@ -3,15 +3,15 @@ extend type Query { } type GoogleAccountAttributes { - created_at: String! + createdAt: String! email: String! - expires_at: String! - last_download: String - last_email_sync: String + expiresAt: String! + lastDownload: String + lastEmailSync: String primary: Boolean! id: ID! - remote_id: String! - token_expired: Boolean! - updated_at: String! - updated_in_db_at: String! + remoteId: String! + tokenExpired: Boolean! + updatedAt: String! + updatedInDbAt: String! } diff --git a/pages/api/Schema/Settings/Preferences/Intergrations/Google/syncGoogleIntegration/resolvers.ts b/pages/api/Schema/Settings/Preferences/Intergrations/Google/syncGoogleIntegration/resolvers.ts index 9f843a756..50ad4034c 100644 --- a/pages/api/Schema/Settings/Preferences/Intergrations/Google/syncGoogleIntegration/resolvers.ts +++ b/pages/api/Schema/Settings/Preferences/Intergrations/Google/syncGoogleIntegration/resolvers.ts @@ -1,7 +1,7 @@ import { Resolvers } from '../../../../../../graphql-rest.page.generated'; const SyncGoogleIntegrationResolvers: Resolvers = { - Query: { + Mutation: { syncGoogleIntegration: async ( _source, { input: { googleAccountId, googleIntegrationId, integrationName } }, diff --git a/pages/api/Schema/Settings/Preferences/Intergrations/Google/syncGoogleIntegration/syncGoogleIntegration.graphql b/pages/api/Schema/Settings/Preferences/Intergrations/Google/syncGoogleIntegration/syncGoogleIntegration.graphql index 4f0a1aa12..9611004a0 100644 --- a/pages/api/Schema/Settings/Preferences/Intergrations/Google/syncGoogleIntegration/syncGoogleIntegration.graphql +++ b/pages/api/Schema/Settings/Preferences/Intergrations/Google/syncGoogleIntegration/syncGoogleIntegration.graphql @@ -1,4 +1,4 @@ -extend type Query { +extend type Mutation { syncGoogleAccount(input: SyncGoogleAccountInput!): String } diff --git a/pages/api/Schema/Settings/Preferences/Intergrations/Google/updateGoogleIntegration/datahandler.ts b/pages/api/Schema/Settings/Preferences/Intergrations/Google/updateGoogleIntegration/datahandler.ts index 8f5e7069b..b6438ae4b 100644 --- a/pages/api/Schema/Settings/Preferences/Intergrations/Google/updateGoogleIntegration/datahandler.ts +++ b/pages/api/Schema/Settings/Preferences/Intergrations/Google/updateGoogleIntegration/datahandler.ts @@ -1,3 +1,5 @@ +import { snakeToCamel } from 'src/lib/snakeToCamel'; + export interface UpdateGoogleIntegrationResponse { id: string; type: string; @@ -5,6 +7,11 @@ export interface UpdateGoogleIntegrationResponse { relationships: relationships; } +type relationships = { + account_list: object[]; + google_account: object[]; +}; + export interface SaveGoogleIntegrationAttributes { calendar_id: string; calendar_integration: boolean; @@ -16,21 +23,36 @@ export interface SaveGoogleIntegrationAttributes { id: string; updated_in_db_at: string; } + +interface GetGoogleAccountIntegrationAttributesCamel { + calendarId: string; + calendarIntegration: boolean; + calendarIntegrations: string[]; + calendarName: string; + calendars: calendars[]; + createdAt: string; + updatedAt: string; + id: string; + updatedInDbAt: string; +} type calendars = { id: string; name: string; }; -type relationships = { - account_list: object[]; - google_account: object[]; -}; - export const UpdateGoogleIntegration = ( data: UpdateGoogleIntegrationResponse, -): SaveGoogleIntegrationAttributes => { +): GetGoogleAccountIntegrationAttributesCamel => { + const attributes = {} as Omit< + GetGoogleAccountIntegrationAttributesCamel, + 'id' + >; + Object.keys(data.attributes).map((key) => { + attributes[snakeToCamel(key)] = data.attributes[key]; + }); + return { id: data.id, - ...data.attributes, + ...attributes, }; }; diff --git a/pages/api/Schema/Settings/Preferences/Intergrations/Google/updateGoogleIntegration/updateGoogleIntegration.graphql b/pages/api/Schema/Settings/Preferences/Intergrations/Google/updateGoogleIntegration/updateGoogleIntegration.graphql index 7c0b5626b..2fddd2105 100644 --- a/pages/api/Schema/Settings/Preferences/Intergrations/Google/updateGoogleIntegration/updateGoogleIntegration.graphql +++ b/pages/api/Schema/Settings/Preferences/Intergrations/Google/updateGoogleIntegration/updateGoogleIntegration.graphql @@ -9,21 +9,3 @@ input UpdateGoogleIntegrationInput { googleIntegrationId: ID! googleIntegration: GoogleAccountIntegrationInput! } - -input GoogleAccountIntegrationInput { - overwrite: Boolean - calendar_integration: Boolean - calendar_id: String - calendar_integrations: [String] - calendar_name: String - calendars: [GoogleAccountIntegrationCalendarsInput] - created_at: String - updated_at: String - id: String - updated_in_db_at: String -} - -input GoogleAccountIntegrationCalendarsInput { - id: String! - name: String! -} diff --git a/pages/api/Schema/Settings/Preferences/Intergrations/Mailchimp/deleteMailchimpAccount/datahandler.ts b/pages/api/Schema/Settings/Preferences/Intergrations/Mailchimp/deleteMailchimpAccount/datahandler.ts new file mode 100644 index 000000000..428e54365 --- /dev/null +++ b/pages/api/Schema/Settings/Preferences/Intergrations/Mailchimp/deleteMailchimpAccount/datahandler.ts @@ -0,0 +1,3 @@ +export const DeleteMailchimpAccount = (): string => { + return 'success'; +}; diff --git a/pages/api/Schema/Settings/Preferences/Intergrations/Mailchimp/deleteMailchimpAccount/deleteMailchimpAccount.graphql b/pages/api/Schema/Settings/Preferences/Intergrations/Mailchimp/deleteMailchimpAccount/deleteMailchimpAccount.graphql new file mode 100644 index 000000000..ea2694f8c --- /dev/null +++ b/pages/api/Schema/Settings/Preferences/Intergrations/Mailchimp/deleteMailchimpAccount/deleteMailchimpAccount.graphql @@ -0,0 +1,7 @@ +extend type Mutation { + deleteMailchimpAccount(input: DeleteMailchimpAccountInput!): String! +} + +input DeleteMailchimpAccountInput { + accountListId: ID! +} diff --git a/pages/api/Schema/Settings/Preferences/Intergrations/Mailchimp/deleteMailchimpAccount/resolvers.ts b/pages/api/Schema/Settings/Preferences/Intergrations/Mailchimp/deleteMailchimpAccount/resolvers.ts new file mode 100644 index 000000000..27aa036cf --- /dev/null +++ b/pages/api/Schema/Settings/Preferences/Intergrations/Mailchimp/deleteMailchimpAccount/resolvers.ts @@ -0,0 +1,15 @@ +import { Resolvers } from '../../../../../../graphql-rest.page.generated'; + +const DeleteMailchimpAccountResolvers: Resolvers = { + Mutation: { + deleteMailchimpAccount: async ( + _source, + { input: { accountListId } }, + { dataSources }, + ) => { + return dataSources.mpdxRestApi.deleteMailchimpAccount(accountListId); + }, + }, +}; + +export { DeleteMailchimpAccountResolvers }; diff --git a/pages/api/Schema/Settings/Preferences/Intergrations/Mailchimp/getMailchimpAccount/datahandler.ts b/pages/api/Schema/Settings/Preferences/Intergrations/Mailchimp/getMailchimpAccount/datahandler.ts new file mode 100644 index 000000000..a6045c98e --- /dev/null +++ b/pages/api/Schema/Settings/Preferences/Intergrations/Mailchimp/getMailchimpAccount/datahandler.ts @@ -0,0 +1,60 @@ +import { snakeToCamel } from 'src/lib/snakeToCamel'; + +export interface GetMailchimpAccountResponse { + attributes: Omit; + id: string; + type: string; +} + +export interface GetMailchimpAccount { + id: string; + active: boolean; + auto_log_campaigns: boolean; + created_at: string; + lists_available_for_newsletters: GetMailchimpAccountNewsletters; + lists_link: string; + lists_present: boolean; + primary_list_id: string; + primary_list_name: string; + updated_at: string; + updated_in_db_at; + valid: boolean; + validate_key: boolean; + validation_error: string; +} + +interface GetMailchimpAccountNewsletters { + id: string; + name: string; +} + +interface GetMailchimpAccountCamel { + id: string; + active: boolean; + autoLogCampaigns: boolean; + createdAt: string; + listsAvailableForNewsletters: GetMailchimpAccountNewsletters; + listsLink: string; + listsPresent: boolean; + primaryListId: string; + primaryListName: string; + updatedAt: string; + updatedInDbAt: string; + valid: boolean; + validateKey: boolean; + validationError: string; +} + +export const GetMailchimpAccount = ( + data: GetMailchimpAccountResponse | null, +): GetMailchimpAccountCamel | null => { + if (!data) return data; + const attributes = {} as Omit; + Object.keys(data.attributes).map((key) => { + attributes[snakeToCamel(key)] = data.attributes[key]; + }); + return { + id: data.id, + ...attributes, + }; +}; diff --git a/pages/api/Schema/Settings/Preferences/Intergrations/Mailchimp/getMailchimpAccount/getMailchimpAccount.graphql b/pages/api/Schema/Settings/Preferences/Intergrations/Mailchimp/getMailchimpAccount/getMailchimpAccount.graphql new file mode 100644 index 000000000..3afdb7036 --- /dev/null +++ b/pages/api/Schema/Settings/Preferences/Intergrations/Mailchimp/getMailchimpAccount/getMailchimpAccount.graphql @@ -0,0 +1,29 @@ +extend type Query { + getMailchimpAccount(input: MailchimpAccountInput!): MailchimpAccount +} + +input MailchimpAccountInput { + accountListId: ID! +} + +type MailchimpAccount { + id: ID! + active: Boolean! + autoLogCampaigns: Boolean! + createdAt: String + listsAvailableForNewsletters: [listsAvailableForNewsletters] + listsLink: String! + listsPresent: Boolean! + primaryListId: ID + primaryListName: String + updatedAt: String! + updatedInDbAt: String! + valid: Boolean! + validateKey: Boolean! + validationError: String +} + +type listsAvailableForNewsletters { + id: ID! + name: String! +} diff --git a/pages/api/Schema/Settings/Preferences/Intergrations/Mailchimp/syncMailchimpAccount/datahandler.ts b/pages/api/Schema/Settings/Preferences/Intergrations/Mailchimp/syncMailchimpAccount/datahandler.ts new file mode 100644 index 000000000..5e3491d60 --- /dev/null +++ b/pages/api/Schema/Settings/Preferences/Intergrations/Mailchimp/syncMailchimpAccount/datahandler.ts @@ -0,0 +1,3 @@ +export const SyncMailchimpAccount = (): string => { + return 'success'; +}; diff --git a/pages/api/Schema/Settings/Preferences/Intergrations/Mailchimp/syncMailchimpAccount/resolvers.ts b/pages/api/Schema/Settings/Preferences/Intergrations/Mailchimp/syncMailchimpAccount/resolvers.ts new file mode 100644 index 000000000..16d1382aa --- /dev/null +++ b/pages/api/Schema/Settings/Preferences/Intergrations/Mailchimp/syncMailchimpAccount/resolvers.ts @@ -0,0 +1,15 @@ +import { Resolvers } from '../../../../../../graphql-rest.page.generated'; + +const SyncMailchimpAccountResolvers: Resolvers = { + Mutation: { + syncMailchimpAccount: async ( + _source, + { input: { accountListId } }, + { dataSources }, + ) => { + return dataSources.mpdxRestApi.syncMailchimpAccount(accountListId); + }, + }, +}; + +export { SyncMailchimpAccountResolvers }; diff --git a/pages/api/Schema/Settings/Preferences/Intergrations/Mailchimp/syncMailchimpAccount/syncMailchimpAccount.graphql b/pages/api/Schema/Settings/Preferences/Intergrations/Mailchimp/syncMailchimpAccount/syncMailchimpAccount.graphql new file mode 100644 index 000000000..f3990a2d4 --- /dev/null +++ b/pages/api/Schema/Settings/Preferences/Intergrations/Mailchimp/syncMailchimpAccount/syncMailchimpAccount.graphql @@ -0,0 +1,7 @@ +extend type Mutation { + syncMailchimpAccount(input: SyncMailchimpAccountInput!): String +} + +input SyncMailchimpAccountInput { + accountListId: ID! +} diff --git a/pages/api/Schema/Settings/Preferences/Intergrations/Mailchimp/updateMailchimpAccount/datahandler.ts b/pages/api/Schema/Settings/Preferences/Intergrations/Mailchimp/updateMailchimpAccount/datahandler.ts new file mode 100644 index 000000000..ee16b6e2c --- /dev/null +++ b/pages/api/Schema/Settings/Preferences/Intergrations/Mailchimp/updateMailchimpAccount/datahandler.ts @@ -0,0 +1,59 @@ +import { snakeToCamel } from 'src/lib/snakeToCamel'; + +export interface UpdateMailchimpAccountResponse { + attributes: Omit; + id: string; + type: string; +} + +export interface UpdateMailchimpAccount { + id: string; + active: boolean; + auto_log_campaigns: boolean; + created_at: string; + lists_available_for_newsletters: UpdateMailchimpAccountNewsletters; + lists_link: string; + lists_present: boolean; + primary_list_id: string; + primary_list_name: string; + updated_at: string; + updated_in_db_at; + valid: boolean; + validate_key: boolean; + validation_error: string; +} + +interface UpdateMailchimpAccountNewsletters { + id: string; + name: string; +} + +interface UpdateMailchimpAccountCamel { + id: string; + active: boolean; + autoLogCampaigns: boolean; + createdAt: string; + listsAvailableForNewsletters: UpdateMailchimpAccountNewsletters; + listsLink: string; + listsPresent: boolean; + primaryListId: string; + primaryListName: string; + updatedAt: string; + updatedInDbAt: string; + valid: boolean; + validateKey: boolean; + validationError: string; +} + +export const UpdateMailchimpAccount = ( + data: UpdateMailchimpAccountResponse, +): UpdateMailchimpAccountCamel => { + const attributes = {} as Omit; + Object.keys(data.attributes).map((key) => { + attributes[snakeToCamel(key)] = data.attributes[key]; + }); + return { + id: data.id, + ...attributes, + }; +}; diff --git a/pages/api/Schema/Settings/Preferences/Intergrations/Mailchimp/updateMailchimpAccount/updateMailchimpAccount.graphql b/pages/api/Schema/Settings/Preferences/Intergrations/Mailchimp/updateMailchimpAccount/updateMailchimpAccount.graphql new file mode 100644 index 000000000..d34fd36c0 --- /dev/null +++ b/pages/api/Schema/Settings/Preferences/Intergrations/Mailchimp/updateMailchimpAccount/updateMailchimpAccount.graphql @@ -0,0 +1,14 @@ +extend type Mutation { + updateMailchimpAccount(input: UpdateMailchimpAccountInput!): MailchimpAccount! +} + +input UpdateMailchimpAccountInput { + accountListId: ID! + mailchimpAccountId: ID! + mailchimpAccount: UpdateMailchimpAccountInputAccount! +} + +input UpdateMailchimpAccountInputAccount { + primaryListId: ID + autoLogCampaigns: Boolean! +} diff --git a/pages/api/Schema/SubgraphSchema/Integrations.ts b/pages/api/Schema/SubgraphSchema/Integrations.ts new file mode 100644 index 000000000..1334b7acf --- /dev/null +++ b/pages/api/Schema/SubgraphSchema/Integrations.ts @@ -0,0 +1,78 @@ +// GOOGLE INTEGRATION +// +// Get Accounts +import GetGoogleAccountsTypeDefs from '../Settings/Preferences/Intergrations/Google/getGoogleAccounts/getGoogleAccounts.graphql'; +import { GetGoogleAccountsResolvers } from '../Settings/Preferences/Intergrations/Google/getGoogleAccounts/resolvers'; +// account integrations +import GetGoogleAccountIntegrationsTypeDefs from '../Settings/Preferences/Intergrations/Google/getGoogleAccountIntegrations/getGoogleAccountIntegrations.graphql'; +import { GetGoogleAccountIntegrationsResolvers } from '../Settings/Preferences/Intergrations/Google/getGoogleAccountIntegrations/resolvers'; +// create +import CreateGoogleIntegrationTypeDefs from '../Settings/Preferences/Intergrations/Google/createGoogleIntegration/createGoogleIntegration.graphql'; +import { CreateGoogleIntegrationResolvers } from '../Settings/Preferences/Intergrations/Google/createGoogleIntegration/resolvers'; +// update +import UpdateGoogleIntegrationTypeDefs from '../Settings/Preferences/Intergrations/Google/updateGoogleIntegration/updateGoogleIntegration.graphql'; +import { UpdateGoogleIntegrationResolvers } from '../Settings/Preferences/Intergrations/Google/updateGoogleIntegration/resolvers'; +// sync +import SyncGoogleIntegrationTypeDefs from '../Settings/Preferences/Intergrations/Google/syncGoogleIntegration/syncGoogleIntegration.graphql'; +import { SyncGoogleIntegrationResolvers } from '../Settings/Preferences/Intergrations/Google/syncGoogleIntegration/resolvers'; +// delete +import DeleteGoogleAccountTypeDefs from '../Settings/Preferences/Intergrations/Google/deleteGoogleAccount/deleteGoogleAccount.graphql'; +import { DeleteGoogleAccountResolvers } from '../Settings/Preferences/Intergrations/Google/deleteGoogleAccount/resolvers'; + +// MAILCHIMP INTEGRATION +// +// Get Account +import GetMailchimpAccountTypeDefs from '../Settings/Preferences/Intergrations/Mailchimp/getMailchimpAccount/getMailchimpAccount.graphql'; +import { GetMailchimpAccountResolvers } from '../Settings/Preferences/Intergrations/Mailchimp/getMailchimpAccount/resolvers'; +// Update Account +import UpdateMailchimpAccountTypeDefs from '../Settings/Preferences/Intergrations/Mailchimp/updateMailchimpAccount/updateMailchimpAccount.graphql'; +import { UpdateMailchimpAccountResolvers } from '../Settings/Preferences/Intergrations/Mailchimp/updateMailchimpAccount/resolvers'; +// Sync Account +import SyncMailchimpAccountTypeDefs from '../Settings/Preferences/Intergrations/Mailchimp/syncMailchimpAccount/syncMailchimpAccount.graphql'; +import { SyncMailchimpAccountResolvers } from '../Settings/Preferences/Intergrations/Mailchimp/syncMailchimpAccount/resolvers'; +// Delete Account +import DeleteMailchimpAccountTypeDefs from '../Settings/Preferences/Intergrations/Mailchimp/deleteMailchimpAccount/deleteMailchimpAccount.graphql'; +import { DeleteMailchimpAccountResolvers } from '../Settings/Preferences/Intergrations/Mailchimp/deleteMailchimpAccount/resolvers'; + +export const integrationSchema = [ + { + typeDefs: GetGoogleAccountsTypeDefs, + resolvers: GetGoogleAccountsResolvers, + }, + { + typeDefs: GetGoogleAccountIntegrationsTypeDefs, + resolvers: GetGoogleAccountIntegrationsResolvers, + }, + { + typeDefs: UpdateGoogleIntegrationTypeDefs, + resolvers: UpdateGoogleIntegrationResolvers, + }, + { + typeDefs: SyncGoogleIntegrationTypeDefs, + resolvers: SyncGoogleIntegrationResolvers, + }, + { + typeDefs: DeleteGoogleAccountTypeDefs, + resolvers: DeleteGoogleAccountResolvers, + }, + { + typeDefs: CreateGoogleIntegrationTypeDefs, + resolvers: CreateGoogleIntegrationResolvers, + }, + { + typeDefs: GetMailchimpAccountTypeDefs, + resolvers: GetMailchimpAccountResolvers, + }, + { + typeDefs: UpdateMailchimpAccountTypeDefs, + resolvers: UpdateMailchimpAccountResolvers, + }, + { + typeDefs: SyncMailchimpAccountTypeDefs, + resolvers: SyncMailchimpAccountResolvers, + }, + { + typeDefs: DeleteMailchimpAccountTypeDefs, + resolvers: DeleteMailchimpAccountResolvers, + }, +]; diff --git a/pages/api/Schema/index.ts b/pages/api/Schema/index.ts index 6ed37cc28..20f729369 100644 --- a/pages/api/Schema/index.ts +++ b/pages/api/Schema/index.ts @@ -45,18 +45,7 @@ import DestroyDonorAccountTypeDefs from './Contacts/DonorAccounts/Destroy/destro import { DestroyDonorAccountResolvers } from './Contacts/DonorAccounts/Destroy/resolvers'; import DeleteTagsTypeDefs from './Tags/Delete/deleteTags.graphql'; import { DeleteTagsResolvers } from './Tags/Delete/resolvers'; -// account -import GetGoogleAccountsTypeDefs from './Settings/Preferences/Intergrations/Google/getGoogleAccounts/getGoogleAccounts.graphql'; -import { GetGoogleAccountsResolvers } from './Settings/Preferences/Intergrations/Google/getGoogleAccounts/resolvers'; -// account integrations -import GetGoogleAccountIntegrationsTypeDefs from './Settings/Preferences/Intergrations/Google/getGoogleAccountIntegrations/getGoogleAccountIntegrations.graphql'; -import { GetGoogleAccountIntegrationsResolvers } from './Settings/Preferences/Intergrations/Google/getGoogleAccountIntegrations/resolvers'; -// save -import UpdateGoogleIntegrationTypeDefs from './Settings/Preferences/Intergrations/Google/updateGoogleIntegration/updateGoogleIntegration.graphql'; -import { UpdateGoogleIntegrationResolvers } from './Settings/Preferences/Intergrations/Google/updateGoogleIntegration/resolvers'; -// sync -import SyncGoogleIntegrationTypeDefs from './Settings/Preferences/Intergrations/Google/syncGoogleIntegration/syncGoogleIntegration.graphql'; -import { SyncGoogleIntegrationResolvers } from './Settings/Preferences/Intergrations/Google/syncGoogleIntegration/resolvers'; +import { integrationSchema } from './SubgraphSchema/Integrations'; const schema = buildSubgraphSchema([ { @@ -139,22 +128,7 @@ const schema = buildSubgraphSchema([ typeDefs: DeleteTagsTypeDefs, resolvers: DeleteTagsResolvers, }, - { - typeDefs: GetGoogleAccountsTypeDefs, - resolvers: GetGoogleAccountsResolvers, - }, - { - typeDefs: GetGoogleAccountIntegrationsTypeDefs, - resolvers: GetGoogleAccountIntegrationsResolvers, - }, - { - typeDefs: UpdateGoogleIntegrationTypeDefs, - resolvers: UpdateGoogleIntegrationResolvers, - }, - { - typeDefs: SyncGoogleIntegrationTypeDefs, - resolvers: SyncGoogleIntegrationResolvers, - }, + ...integrationSchema, ]); export default schema; diff --git a/pages/api/graphql-rest.page.ts b/pages/api/graphql-rest.page.ts index db0705fbf..9d04ebcf8 100644 --- a/pages/api/graphql-rest.page.ts +++ b/pages/api/graphql-rest.page.ts @@ -1,3 +1,13 @@ +import { DateTime, Duration, Interval } from 'luxon'; +import { + RequestOptions, + Response, + RESTDataSource, +} from 'apollo-datasource-rest'; +import Cors from 'micro-cors'; +import { PageConfig, NextApiRequest } from 'next'; +import { ApolloServer } from 'apollo-server-micro'; +import schema from './Schema'; import { ExportFormatEnum, ExportLabelTypeEnum, @@ -13,7 +23,6 @@ import { CoachingAnswerSet, ContactFilterNotesInput, } from './graphql-rest.page.generated'; -import schema from './Schema'; import { getTaskAnalytics } from './Schema/TaskAnalytics/dataHandler'; import { getCoachingAnswer, @@ -57,15 +66,6 @@ import { getAccountListDonorAccounts } from './Schema/AccountListDonorAccounts/d import { getAccountListCoachUsers } from './Schema/AccountListCoachUser/dataHandler'; import { getAccountListCoaches } from './Schema/AccountListCoaches/dataHandler'; import { getReportsPledgeHistories } from './Schema/reports/pledgeHistories/dataHandler'; -import { DateTime, Duration, Interval } from 'luxon'; -import { - RequestOptions, - Response, - RESTDataSource, -} from 'apollo-datasource-rest'; -import Cors from 'micro-cors'; -import { PageConfig, NextApiRequest } from 'next'; -import { ApolloServer } from 'apollo-server-micro'; import { DonationReponseData, DonationReponseIncluded, @@ -88,9 +88,21 @@ import { UpdateGoogleIntegrationResponse, UpdateGoogleIntegration, } from './Schema/Settings/Preferences/Intergrations/Google/updateGoogleIntegration/datahandler'; +import { DeleteGoogleAccount } from './Schema/Settings/Preferences/Intergrations/Google/deleteGoogleAccount/datahandler'; +import { + CreateGoogleIntegrationResponse, + CreateGoogleIntegration, +} from './Schema/Settings/Preferences/Intergrations/Google/createGoogleIntegration/datahandler'; + +import { + GetMailchimpAccountResponse, + GetMailchimpAccount, +} from './Schema/Settings/Preferences/Intergrations/Mailchimp/getMailchimpAccount/datahandler'; +import { SyncMailchimpAccount } from './Schema/Settings/Preferences/Intergrations/Mailchimp/syncMailchimpAccount/datahandler'; +import { DeleteMailchimpAccount } from './Schema/Settings/Preferences/Intergrations/Mailchimp/deleteMailchimpAccount/datahandler'; function camelToSnake(str: string): string { - return str.replace(/[A-Z]/g, (c) => '_' + c.toLowerCase()); + return str.replace(/[A-Z]/g, (letter) => `_${letter.toLowerCase()}`); } class MpdxRestApi extends RESTDataSource { @@ -833,6 +845,10 @@ class MpdxRestApi extends RESTDataSource { return data; } + // Google Integration + // + // + async getGoogleAccounts() { const { data }: { data: GetGoogleAccountsResponse[] } = await this.get( 'user/google_accounts', @@ -868,17 +884,53 @@ class MpdxRestApi extends RESTDataSource { return SyncGoogleIntegration(data); } + async createGoogleIntegration( + googleAccountId, + googleIntegration, + accountListID, + ) { + const attributes = {}; + Object.keys(googleIntegration).map((key) => { + attributes[camelToSnake(key)] = googleIntegration[key]; + }); + const { data }: { data: CreateGoogleIntegrationResponse } = await this.post( + `user/google_accounts/${googleAccountId}/google_integrations`, + { + data: { + attributes: { + ...attributes, + }, + relationships: { + account_list: { + data: { + type: 'account_lists', + id: accountListID, + }, + }, + }, + type: 'google_integrations', + }, + }, + ); + return CreateGoogleIntegration(data); + } + async updateGoogleIntegration( googleAccountId, googleIntegrationId, googleIntegration, ) { + const attributes = {}; + Object.keys(googleIntegration).map((key) => { + attributes[camelToSnake(key)] = googleIntegration[key]; + }); + const { data }: { data: UpdateGoogleIntegrationResponse } = await this.put( `user/google_accounts/${googleAccountId}/google_integrations/${googleIntegrationId}`, { data: { attributes: { - ...googleIntegration, + ...attributes, }, id: googleIntegrationId, type: 'google_integrations', @@ -887,6 +939,71 @@ class MpdxRestApi extends RESTDataSource { ); return UpdateGoogleIntegration(data); } + + async deleteGoogleAccount(accountId) { + await this.delete( + `user/google_accounts/${accountId}`, + {}, + { + body: JSON.stringify({ + data: { + type: 'google_accounts', + }, + }), + }, + ); + return DeleteGoogleAccount(); + } + + // Mailchimp Integration + // + // + async getMailchimpAccount(accountListId) { + try { + const { data }: { data: GetMailchimpAccountResponse } = await this.get( + `account_lists/${accountListId}/mail_chimp_account`, + ); + return GetMailchimpAccount(data); + } catch { + return GetMailchimpAccount(null); + } + } + + async updateMailchimpAccount( + accountListId, + mailchimpAccountId, + mailchimpAccount, + ) { + const attributes = {}; + Object.keys(mailchimpAccount).map((key) => { + attributes[camelToSnake(key)] = mailchimpAccount[key]; + }); + + const { data }: { data: UpdateGoogleIntegrationResponse } = await this.put( + `account_lists/${accountListId}/mail_chimp_account`, + { + data: { + attributes: { + overwrite: true, + ...attributes, + }, + id: mailchimpAccountId, + type: 'mail_chimp_accounts', + }, + }, + ); + return UpdateGoogleIntegration(data); + } + + async syncMailchimpAccount(accountListId) { + await this.get(`account_lists/${accountListId}/mail_chimp_account/sync`); + return SyncMailchimpAccount(); + } + + async deleteMailchimpAccount(accountListId) { + await this.delete(`account_lists/${accountListId}/mail_chimp_account`); + return DeleteMailchimpAccount(); + } } export interface Context { diff --git a/src/components/Settings/integrations/Google/GoogleAccordian.tsx b/src/components/Settings/integrations/Google/GoogleAccordian.tsx index f5c06e7e5..2378d8a90 100644 --- a/src/components/Settings/integrations/Google/GoogleAccordian.tsx +++ b/src/components/Settings/integrations/Google/GoogleAccordian.tsx @@ -1,24 +1,32 @@ -import { useState } from 'react'; +import { useState, useContext, useEffect } from 'react'; import { useTranslation } from 'react-i18next'; import { + Alert, Box, + Button, Card, - Typography, List, ListItemText, - Button, IconButton, + Typography, } from '@mui/material'; import Skeleton from '@mui/material/Skeleton'; import { styled } from '@mui/material/styles'; import { AccordionItem } from 'src/components/Shared/Forms/Accordions/AccordionItem'; import { StyledFormLabel } from 'src/components/Shared/Forms/Field'; -import { useGoogleAccountsQuery } from './getGoogleAccounts.generated'; +import { useGoogleAccountsQuery } from './googleAccounts.generated'; import DeleteIcon from '@mui/icons-material/Delete'; import EditIcon from '@mui/icons-material/Edit'; import theme from 'src/theme'; import { GoogleAccountAttributes } from '../../../../../graphql/types.generated'; import { EditGoogleAccountModal } from './Modals/EditGoogleAccountModal'; +import { DeleteGoogleAccountModal } from './Modals/DeleteGoogleAccountModal'; +import { useAccountListId } from 'src/hooks/useAccountListId'; +import { + IntegrationsContext, + IntegrationsContextType, +} from 'pages/accountLists/[accountListId]/settings/integrations.page'; +import HandoffLink from 'src/components/HandoffLink'; interface GoogleAccordianProps { handleAccordionChange: (panel: string) => void; @@ -75,6 +83,7 @@ export const GoogleAccordian: React.FC = ({ }) => { const { t } = useTranslation(); const [openEditGoogleAccount, setOpenEditGoogleAccount] = useState(false); + const [openDeleteGoogleAccount, setOpenDeleteGoogleAccount] = useState(false); const [selectedAccount, setSelectedAccount] = useState< GoogleAccountAttributes | undefined >(); @@ -82,11 +91,31 @@ export const GoogleAccordian: React.FC = ({ skip: !expandedPanel, }); const googleAccounts = data?.getGoogleAccounts; + const accountListId = useAccountListId(); + const [oAuth, setOAuth] = useState(''); + + useEffect(() => { + setOAuth( + `${ + process.env.OAUTH_URL + }/auth/user/google?account_list_id=${accountListId}&redirect_to=${window.encodeURIComponent( + `${window.location.origin}/accountLists/${accountListId}/settings/integrations?selectedTab=Google`, + )}&access_token=${apiToken}`, + ); + }, []); + + const { apiToken } = useContext( + IntegrationsContext, + ) as IntegrationsContextType; const handleEditAccount = (account) => { setSelectedAccount(account); setOpenEditGoogleAccount(true); }; + const handleDeleteAccount = async (account) => { + setSelectedAccount(account); + setOpenDeleteGoogleAccount(true); + }; return ( <> = ({ settings for Google Calendar and Contacts. MPDX leaves you in control of how each service stays in sync. - - {t('Add Account')} - )} {!loading && googleAccounts?.map((account) => ( @@ -151,18 +180,55 @@ export const GoogleAccordian: React.FC = ({ handleEditAccount(account)}> - + handleDeleteAccount(account)} + > + {account?.tokenExpired && ( + <> + + {t(`The link between MPDX and your Google account stopped working. Click "Refresh Google Account" to + re-enable it. After that, you'll need to manually re-enable any integrations that you had set + already.`)} + + + {t('Refresh Google Account')} + + + )} ))} + + + {t('Add Account')} + + + {!!googleAccounts?.length && ( + + + {t('Import contacts')} + + + )} + - {openEditGoogleAccount && ( + {openEditGoogleAccount && selectedAccount && ( setOpenEditGoogleAccount(false)} account={selectedAccount} + oAuth={oAuth} + /> + )} + {openDeleteGoogleAccount && selectedAccount && ( + setOpenDeleteGoogleAccount(false)} + account={selectedAccount} /> )} diff --git a/src/components/Settings/integrations/Google/Modals/DeleteGoogleAccountModal.tsx b/src/components/Settings/integrations/Google/Modals/DeleteGoogleAccountModal.tsx new file mode 100644 index 000000000..ce65739c1 --- /dev/null +++ b/src/components/Settings/integrations/Google/Modals/DeleteGoogleAccountModal.tsx @@ -0,0 +1,100 @@ +import React, { useState } from 'react'; +import { useTranslation } from 'react-i18next'; +import { useSnackbar } from 'notistack'; +import { styled } from '@mui/material/styles'; +import { DialogContent, DialogActions, Typography } from '@mui/material'; +import Modal from 'src/components/common/Modal/Modal'; +import { + SubmitButton, + CancelButton, +} from 'src/components/common/Modal/ActionButtons/ActionButtons'; +import { GoogleAccountAttributes } from '../../../../../../graphql/types.generated'; +import { + useDeleteGoogleAccountMutation, + GoogleAccountsDocument, + GoogleAccountsQuery, +} from '../googleAccounts.generated'; + +interface DeleteGoogleAccountModalProps { + handleClose: () => void; + account: GoogleAccountAttributes; +} + +const StyledDialogActions = styled(DialogActions)(() => ({ + justifyContent: 'space-between', +})); + +export const DeleteGoogleAccountModal: React.FC< + DeleteGoogleAccountModalProps +> = ({ account, handleClose }) => { + const { t } = useTranslation(); + const [isSubmitting, setIsSubmitting] = useState(false); + const { enqueueSnackbar } = useSnackbar(); + + const [deleteGoogleAccount] = useDeleteGoogleAccountMutation(); + + const handleDelete = async () => { + setIsSubmitting(true); + try { + await deleteGoogleAccount({ + variables: { + input: { + accountId: account.id, + }, + }, + update: (cache) => { + const query = { + query: GoogleAccountsDocument, + }; + const dataFromCache = cache.readQuery(query); + + if (dataFromCache) { + const removedAccountFromCache = + dataFromCache?.getGoogleAccounts.filter( + (acc) => acc?.id !== account.id, + ); + const data = { + getGoogleAccounts: [...removedAccountFromCache], + }; + cache.writeQuery({ ...query, data }); + } + }, + }); + + enqueueSnackbar(t('MPDX removed your integration with Google.'), { + variant: 'success', + }); + handleClose(); + } catch { + enqueueSnackbar( + t("MPDX couldn't save your configuration changes for Google."), + { + variant: 'error', + }, + ); + } + setIsSubmitting(false); + }; + + return ( + + + + {t(`Are you sure you wish to disconnect this Google account?`)} + + + + + + + {t('Confirm')} + + + + ); +}; diff --git a/src/components/Settings/integrations/Google/Modals/EditGoogleAccountModal.tsx b/src/components/Settings/integrations/Google/Modals/EditGoogleAccountModal.tsx index a70a26f93..dd0a39d6b 100644 --- a/src/components/Settings/integrations/Google/Modals/EditGoogleAccountModal.tsx +++ b/src/components/Settings/integrations/Google/Modals/EditGoogleAccountModal.tsx @@ -1,37 +1,39 @@ -import React, { useState, ReactElement } from 'react'; +import React, { useState } from 'react'; import { useTranslation } from 'react-i18next'; +import { useSnackbar } from 'notistack'; +import { useAccountListId } from 'src/hooks/useAccountListId'; +import { styled } from '@mui/material/styles'; import { + DialogContent, DialogActions, Typography, Tabs, Tab, - Select, - MenuItem, + Box, + Skeleton, + Button, } from '@mui/material'; -import { Box } from '@mui/system'; import Modal from 'src/components/common/Modal/Modal'; import { SubmitButton, CancelButton, + ActionButton, } from 'src/components/common/Modal/ActionButtons/ActionButtons'; -import { - GoogleAccountAttributes, - GoogleAccountIntegration, -} from '../../../../../../graphql/types.generated'; +import { GoogleAccountAttributes } from '../../../../../../graphql/types.generated'; import { useGetGoogleAccountIntegrationsQuery, GetGoogleAccountIntegrationsDocument, GetGoogleAccountIntegrationsQuery, -} from './getGoogleAccountIntegrations.generated'; -import { useAccountListId } from 'src/hooks/useAccountListId'; + useCreateGoogleIntegrationMutation, +} from './googleIntegrations.generated'; +import { useSyncGoogleAccountMutation } from '../googleAccounts.generated'; import { useUpdateGoogleIntegrationMutation } from './updateGoogleIntegration.generated'; -import { useSnackbar } from 'notistack'; -import { Formik } from 'formik'; -import * as yup from 'yup'; +import { EditGoogleIntegrationForm } from './EditGoogleIntegrationForm'; interface EditGoogleAccountModalProps { handleClose: () => void; account: GoogleAccountAttributes; + oAuth: string; } enum tabs { @@ -39,9 +41,14 @@ enum tabs { setup = 'setup', } +const StyledDialogActions = styled(DialogActions)(() => ({ + justifyContent: 'space-between', +})); + export const EditGoogleAccountModal: React.FC = ({ account, handleClose, + oAuth, }) => { const { t } = useTranslation(); const [isSubmitting, setIsSubmitting] = useState(false); @@ -50,133 +57,107 @@ export const EditGoogleAccountModal: React.FC = ({ const { enqueueSnackbar } = useSnackbar(); const [updateGoogleIntegration] = useUpdateGoogleIntegrationMutation(); - const { data } = useGetGoogleAccountIntegrationsQuery({ + const [createGoogleIntegration] = useCreateGoogleIntegrationMutation(); + const [syncGoogleAccountQuery] = useSyncGoogleAccountMutation(); + const { + data, + loading, + refetch: refetchGoogleIntegrations, + } = useGetGoogleAccountIntegrationsQuery({ variables: { input: { googleAccountId: account.id, accountListId: accountListId ?? '', }, - skip: !accountListId, }, + skip: !accountListId, }); const googleAccountDetails = data?.getGoogleAccountIntegrations[0]; - // console.log('googleAccountDetails', googleAccountDetails); - const handleTabChange = (_, tab) => { setTabSelected(tab); }; - const handleEnableCalendarIntegration = async (integration) => { - if (!googleAccountDetails?.id || !account?.id || !integration) return; + const handleToogleCalendarIntegration = async ( + enableIntegration: boolean, + ) => { + if (!tabSelected) return; setIsSubmitting(true); - await updateGoogleIntegration({ - variables: { - input: { - googleAccountId: account.id, - googleIntegrationId: googleAccountDetails.id, - googleIntegration: { - [`${integration}_integration`]: true, - overwrite: true, + + if (!googleAccountDetails && enableIntegration) { + // Create Google Integration + await createGoogleIntegration({ + variables: { + input: { + googleAccountId: account.id, + accountListID: accountListId ?? '', + googleIntegration: { + [`${tabSelected}Integration`]: enableIntegration, + }, }, }, - }, - update: (cache) => { - const query = { - query: GetGoogleAccountIntegrationsDocument, - variables: { + update: () => refetchGoogleIntegrations(), + }); + } else if (googleAccountDetails) { + // Update Google Inetgration + await updateGoogleIntegration({ + variables: { + input: { googleAccountId: account.id, - accountListId, + googleIntegrationId: googleAccountDetails.id, + googleIntegration: { + [`${tabSelected}Integration`]: enableIntegration, + overwrite: true, + }, }, - }; - const dataFromCache = - cache.readQuery(query); - - if (dataFromCache) { - const data = { - ...dataFromCache, - [`${integration}_integration`]: true, + }, + update: (cache) => { + const query = { + query: GetGoogleAccountIntegrationsDocument, + variables: { + googleAccountId: account.id, + accountListId, + }, }; - cache.writeQuery({ ...query, data }); - } - }, - }); + const dataFromCache = + cache.readQuery(query); - enqueueSnackbar(t('Enabled Google Calendar Integration!'), { - variant: 'success', - }); + if (dataFromCache) { + const data = { + ...dataFromCache, + [`${tabSelected}Integration`]: enableIntegration, + }; + cache.writeQuery({ ...query, data }); + } + }, + }); + } else { + return; + } + + enqueueSnackbar( + enableIntegration + ? t('Enabled Google Calendar Integration!') + : t('Disabled Google Calendar Integration!'), + { + variant: 'success', + }, + ); setIsSubmitting(false); }; - const IntegrationSchema: yup.SchemaOf< - Omit< - GoogleAccountIntegration, - 'created_at' | 'updated_at' | 'updated_in_db_at' | '__typename' - > - > = yup.object({ - id: yup.string().required(), - calendar_id: yup.string().required(), - calendar_integration: yup.boolean().required(), - calendar_integrations: yup.array().of(yup.string().required()).required(), - calendar_name: yup.string().nullable(), - calendars: yup - .array() - .of( - yup.object({ - __typename: yup - .string() - .equals(['GoogleAccountIntegrationCalendars']), - id: yup.string().required(), - name: yup.string().required(), - }), - ) - .required(), - }); - - const onSubmit = async ( - attributes: Omit< - GoogleAccountIntegration, - 'created_at' | 'updated_at' | 'updated_in_db_at' | '__typename' - >, - ) => { - const googleIntegration = { - calendar_id: attributes.calendar_id, - calendar_integrations: attributes.calendar_integrations, - }; - await updateGoogleIntegration({ + const handleSyncCalendar = async () => { + await syncGoogleAccountQuery({ variables: { input: { googleAccountId: account.id, googleIntegrationId: googleAccountDetails?.id ?? '', - googleIntegration: { - ...googleIntegration, - overwrite: true, - }, + integrationName: tabs.calendar, }, }, - update: (cache) => { - const query = { - query: GetGoogleAccountIntegrationsDocument, - variables: { - googleAccountId: account.id, - accountListId, - }, - }; - const dataFromCache = - cache.readQuery(query); - - if (dataFromCache) { - const data = { - ...dataFromCache, - ...googleIntegration, - }; - cache.writeQuery({ ...query, data }); - } - }, }); - - enqueueSnackbar(t('Updated Google Calendar Integration!'), { + enqueueSnackbar(t('Successfully Synced Calendar!'), { variant: 'success', }); }; @@ -188,7 +169,7 @@ export const EditGoogleAccountModal: React.FC = ({ handleClose={handleClose} size={'sm'} > - + {t('You are currently editing settings for {{email}}', { email: account.email, @@ -216,89 +197,27 @@ export const EditGoogleAccountModal: React.FC = ({ - {googleAccountDetails?.calendar_integration && - tabSelected === tabs.calendar && ( - <> - - {t('Choose a calendar for MPDX to push tasks to:')} - - - - {({ - values: { - // id, - calendar_id, - // calendar_integration, - // calendar_integrations, - // calendar_name, - calendars, - }, - // handleChange, - handleSubmit, - setFieldValue, - isSubmitting, - isValid, - // errors, - // initialErrors, - }): ReactElement => ( -
- {/* {console.log('-----------------___________---------------')} - {console.log('id', id)} - {console.log('calendar_id', calendar_id)} - {console.log('calendar_integration', calendar_integration)} - {console.log('calendar_integrations', calendar_integrations)} - {console.log('calendar_name', calendar_name)} - {console.log('calendars', calendars)} - {console.log('errors', errors)} - {console.log('initialErrors', initialErrors)} */} - - - - - - - {t('Update')} - - -
- )} - + {loading && googleAccountDetails?.calendarIntegration && ( + <> + + + + )} - {/* - // Update button - // Sync button - Different than Update - */} - + {!loading && + googleAccountDetails?.calendarIntegration && + tabSelected === tabs.calendar && ( + )} - {!googleAccountDetails?.calendar_integration && + {!loading && + !googleAccountDetails?.calendarIntegration && tabSelected === tabs.calendar && ( {t(`MPDX can automatically update your google calendar with your tasks. @@ -318,19 +237,43 @@ export const EditGoogleAccountModal: React.FC = ({ )} )} - + - - - {tabSelected === tabs.calendar && ( - handleEnableCalendarIntegration(tabs.calendar)} - > - {t('Enable Calendar Integration')} - + {tabSelected === tabs.calendar && + !googleAccountDetails?.calendarIntegration && ( + + + handleToogleCalendarIntegration(true)} + > + {t('Enable Calendar Integration')} + + )} - + {tabSelected === tabs.calendar && + googleAccountDetails?.calendarIntegration && ( + + + + {t('Sync Calendar')} + + + )} + {tabSelected === tabs.setup && googleAccountDetails?.calendarIntegration && ( + + + + + )} ); }; diff --git a/src/components/Settings/integrations/Google/Modals/EditGoogleIntegrationForm.tsx b/src/components/Settings/integrations/Google/Modals/EditGoogleIntegrationForm.tsx new file mode 100644 index 000000000..1b4b364ef --- /dev/null +++ b/src/components/Settings/integrations/Google/Modals/EditGoogleIntegrationForm.tsx @@ -0,0 +1,271 @@ +import React, { ReactElement } from 'react'; +import { Formik } from 'formik'; +import * as yup from 'yup'; +import { useSnackbar } from 'notistack'; +import { useTranslation } from 'react-i18next'; +import { styled } from '@mui/material/styles'; +import { + DialogActions, + Typography, + Select, + MenuItem, + FormControlLabel, + Checkbox, + Skeleton, + FormHelperText, +} from '@mui/material'; +import { Box } from '@mui/system'; +import { useAccountListId } from 'src/hooks/useAccountListId'; +import { + GoogleAccountAttributes, + GoogleAccountIntegration, +} from '../../../../../../graphql/types.generated'; +import { + SubmitButton, + DeleteButton, +} from 'src/components/common/Modal/ActionButtons/ActionButtons'; +import { + GetGoogleAccountIntegrationsDocument, + GetGoogleAccountIntegrationsQuery, + useGetIntegrationActivitiesQuery, +} from './googleIntegrations.generated'; +import { useUpdateGoogleIntegrationMutation } from './updateGoogleIntegration.generated'; + +interface EditGoogleIntegrationFormProps { + account: GoogleAccountAttributes; + googleAccountDetails: Pick< + GoogleAccountIntegration, + 'calendarId' | 'id' | 'calendarIntegrations' | 'calendars' + >; + loading: boolean; + setIsSubmitting: (boolean) => void; + handleToogleCalendarIntegration: (boolean) => void; +} + +const StyledBox = styled(Box)(() => ({ + display: 'flex', + flexWrap: 'wrap', + justifyContent: 'space-between', + alignItems: 'center', + marginTop: '20px', + marginBottom: '20px', +})); + +const StyledFormControlLabel = styled(FormControlLabel)(() => ({ + flex: '0 1 50%', + margin: '0 0 0 -11px', +})); + +export const EditGoogleIntegrationForm: React.FC< + EditGoogleIntegrationFormProps +> = ({ + account, + googleAccountDetails, + loading, + setIsSubmitting, + handleToogleCalendarIntegration, +}) => { + const { t } = useTranslation(); + const accountListId = useAccountListId(); + const { enqueueSnackbar } = useSnackbar(); + + const [updateGoogleIntegration] = useUpdateGoogleIntegrationMutation(); + + const { data: actvitiesData } = useGetIntegrationActivitiesQuery(); + const actvities = actvitiesData?.constant?.activities; + + const IntegrationSchema: yup.SchemaOf< + Pick< + GoogleAccountIntegration, + 'calendarId' | 'id' | 'calendarIntegrations' | 'calendars' + > + > = yup.object({ + id: yup.string().required(), + calendarId: yup.string().required(), + calendarIntegrations: yup.array().of(yup.string().required()).required(), + calendars: yup + .array() + .of( + yup.object({ + __typename: yup + .string() + .equals(['GoogleAccountIntegrationCalendars']), + id: yup.string().required(), + name: yup.string().required(), + }), + ) + .required(), + }); + + const onSubmit = async ( + attributes: Pick< + GoogleAccountIntegration, + 'calendarId' | 'id' | 'calendarIntegrations' | 'calendars' + >, + ) => { + setIsSubmitting(true); + const googleIntegration = { + calendarId: attributes.calendarId, + calendarIntegrations: attributes.calendarIntegrations, + }; + + await updateGoogleIntegration({ + variables: { + input: { + googleAccountId: account.id, + googleIntegrationId: googleAccountDetails?.id ?? '', + googleIntegration: { + ...googleIntegration, + overwrite: true, + }, + }, + }, + update: (cache) => { + const query = { + query: GetGoogleAccountIntegrationsDocument, + variables: { + googleAccountId: account.id, + accountListId, + }, + }; + const dataFromCache = + cache.readQuery(query); + + if (dataFromCache) { + const data = { + ...dataFromCache, + ...googleIntegration, + }; + cache.writeQuery({ ...query, data }); + } + }, + }); + setIsSubmitting(false); + enqueueSnackbar(t('Updated Google Calendar Integration!'), { + variant: 'success', + }); + }; + + return ( + <> + {loading && ( + <> + + + + )} + + {!loading && ( + <> + + {t('Choose a calendar for MPDX to push tasks to:')} + + + + {({ + values: { calendarId, calendarIntegrations, calendars }, + handleSubmit, + setFieldValue, + isSubmitting, + isValid, + errors, + }): ReactElement => ( +
+ + + {errors.calendarId && ( + + {t('This field is required')} + + )} + + + + {actvities?.map((activity) => { + if (!activity?.id || !activity?.value) return null; + const activityId = `${activity.value} Checkbox`; + const isChecked = calendarIntegrations.includes( + activity?.id ?? '', + ); + return ( + { + let newCalendarInetgrations; + if (value) { + // Add to calendarIntegrations + newCalendarInetgrations = [ + ...calendarIntegrations, + activity.value, + ]; + } else { + // Remove from calendarIntegrations + newCalendarInetgrations = + calendarIntegrations.filter( + (act) => act !== activity?.id, + ); + } + setFieldValue( + `calendarIntegrations`, + newCalendarInetgrations, + ); + }} + /> + } + label={activity.value} + /> + ); + })} + + + + handleToogleCalendarIntegration(false)} + variant="outlined" + > + {t('Disable Calendar Integration')} + + + {t('Update')} + + +
+ )} + + + )} + + ); +}; diff --git a/src/components/Settings/integrations/Google/Modals/getGoogleAccountIntegrations.graphql b/src/components/Settings/integrations/Google/Modals/getGoogleAccountIntegrations.graphql deleted file mode 100644 index 41c34e385..000000000 --- a/src/components/Settings/integrations/Google/Modals/getGoogleAccountIntegrations.graphql +++ /dev/null @@ -1,16 +0,0 @@ -query GetGoogleAccountIntegrations($input: GetGoogleAccountIntegrationsInput!) { - getGoogleAccountIntegrations(input: $input) { - calendar_id - calendar_integration - calendar_integrations - calendar_name - calendars { - id - name - } - created_at - updated_at - id - updated_in_db_at - } -} diff --git a/src/components/Settings/integrations/Google/Modals/googleIntegrations.graphql b/src/components/Settings/integrations/Google/Modals/googleIntegrations.graphql new file mode 100644 index 000000000..1cdd50479 --- /dev/null +++ b/src/components/Settings/integrations/Google/Modals/googleIntegrations.graphql @@ -0,0 +1,42 @@ +query GetGoogleAccountIntegrations($input: GetGoogleAccountIntegrationsInput!) { + getGoogleAccountIntegrations(input: $input) { + calendarId + calendarIntegration + calendarIntegrations + calendarName + calendars { + id + name + } + createdAt + updatedAt + id + updatedInDbAt + } +} + +query GetIntegrationActivities { + constant { + activities { + id + value + } + } +} + +mutation CreateGoogleIntegration($input: CreateGoogleIntegrationInput!) { + createGoogleIntegration(input: $input) { + calendarId + calendarIntegration + calendarIntegrations + calendarName + calendars { + id + name + } + createdAt + updatedAt + id + updatedInDbAt + } +} diff --git a/src/components/Settings/integrations/Google/Modals/updateGoogleIntegration.graphql b/src/components/Settings/integrations/Google/Modals/updateGoogleIntegration.graphql index dd5f9c824..c5da9658d 100644 --- a/src/components/Settings/integrations/Google/Modals/updateGoogleIntegration.graphql +++ b/src/components/Settings/integrations/Google/Modals/updateGoogleIntegration.graphql @@ -1,16 +1,16 @@ mutation UpdateGoogleIntegration($input: UpdateGoogleIntegrationInput!) { updateGoogleIntegration(input: $input) { - calendar_id - calendar_integration - calendar_integrations - calendar_name + calendarId + calendarIntegration + calendarIntegrations + calendarName calendars { id name } - created_at - updated_at + createdAt + updatedAt id - updated_in_db_at + updatedInDbAt } } diff --git a/src/components/Settings/integrations/Google/getGoogleAccounts.graphql b/src/components/Settings/integrations/Google/getGoogleAccounts.graphql deleted file mode 100644 index 2b57747f2..000000000 --- a/src/components/Settings/integrations/Google/getGoogleAccounts.graphql +++ /dev/null @@ -1,15 +0,0 @@ -query GoogleAccounts { - getGoogleAccounts { - created_at - email - expires_at - last_download - last_email_sync - primary - remote_id - id - token_expired - updated_at - updated_in_db_at - } -} diff --git a/src/components/Settings/integrations/Google/googleAccounts.graphql b/src/components/Settings/integrations/Google/googleAccounts.graphql new file mode 100644 index 000000000..183fd5d3e --- /dev/null +++ b/src/components/Settings/integrations/Google/googleAccounts.graphql @@ -0,0 +1,19 @@ +query GoogleAccounts { + getGoogleAccounts { + email + primary + remoteId + id + tokenExpired + } +} + +mutation SyncGoogleAccount($input: SyncGoogleAccountInput!) { + syncGoogleAccount(input: $input) +} + +mutation DeleteGoogleAccount($input: DeleteGoogleAccountInput!) { + deleteGoogleAccount(input: $input) { + success + } +} diff --git a/src/components/Settings/integrations/Mailchimp/MailchimpAccordian.tsx b/src/components/Settings/integrations/Mailchimp/MailchimpAccordian.tsx new file mode 100644 index 000000000..b9652b913 --- /dev/null +++ b/src/components/Settings/integrations/Mailchimp/MailchimpAccordian.tsx @@ -0,0 +1,380 @@ +import { useState, useContext, useEffect, useMemo, ReactElement } from 'react'; +import { useTranslation } from 'react-i18next'; +import { useSnackbar } from 'notistack'; +import { Formik } from 'formik'; +import * as yup from 'yup'; +import { styled } from '@mui/material/styles'; +import * as Types from '../../../../../graphql/types.generated'; +import { + Box, + Typography, + Skeleton, + Alert, + Button, + Select, + MenuItem, + Checkbox, + FormControlLabel, + FormHelperText, + List, + ListItem, + ListItemText, +} from '@mui/material'; +import { useAccountListId } from 'src/hooks/useAccountListId'; +import { + useGetMailchimpAccountQuery, + useUpdateMailchimpAccountMutation, + GetMailchimpAccountDocument, + GetMailchimpAccountQuery, + useSyncMailchimpAccountMutation, + useDeleteMailchimpAccountMutation, +} from './MailchimpAccount.generated'; +import { StyledFormLabel } from 'src/components/Shared/Forms/Field'; +import { + StyledListItem, + StyledList, + StyledServicesButton, + IntegrationsContext, + IntegrationsContextType, +} from 'pages/accountLists/[accountListId]/settings/integrations.page'; +import { AccordionItem } from 'src/components/Shared/Forms/Accordions/AccordionItem'; +import { SubmitButton } from 'src/components/common/Modal/ActionButtons/ActionButtons'; + +interface MailchimpAccordianProps { + handleAccordionChange: (panel: string) => void; + expandedPanel: string; +} + +const StyledFormControlLabel = styled(FormControlLabel)(() => ({ + flex: '0 1 50%', + margin: '0 0 0 -11px', +})); + +const StyledButton = styled(Button)(() => ({ + marginLeft: '15px', +})); + +export const MailchimpAccordian: React.FC = ({ + handleAccordionChange, + expandedPanel, +}) => { + const { t } = useTranslation(); + const [oAuth, setOAuth] = useState(''); + const [showSettings, setShowSettings] = useState(false); + const { enqueueSnackbar } = useSnackbar(); + const { apiToken } = useContext( + IntegrationsContext, + ) as IntegrationsContextType; + const accountListId = useAccountListId(); + const [updateMailchimpAccount] = useUpdateMailchimpAccountMutation(); + const [syncMailchimpAccount] = useSyncMailchimpAccountMutation(); + const [deleteMailchimpAccount] = useDeleteMailchimpAccountMutation(); + const { + data, + loading, + refetch: refetchGetMailchimpAccount, + } = useGetMailchimpAccountQuery({ + variables: { + input: { + accountListId: accountListId ?? '', + }, + }, + skip: !accountListId, + }); + const mailchimpAccount = data?.getMailchimpAccount; + + useEffect(() => { + setOAuth( + `${ + process.env.OAUTH_URL + }/auth/user/mailchimp?account_list_id=${accountListId}&redirect_to=${window.encodeURIComponent( + `${window.location.origin}/accountLists/${accountListId}/settings/integrations?selectedTab=mailchimp`, + )}&access_token=${apiToken}`, + ); + }, []); + + const MailchimpSchema: yup.SchemaOf< + Pick + > = yup.object({ + autoLogCampaigns: yup.boolean().required(), + primaryListId: yup.string().required(), + }); + + const onSubmit = async ( + attributes: Pick< + Types.MailchimpAccount, + 'autoLogCampaigns' | 'primaryListId' + >, + ) => { + await updateMailchimpAccount({ + variables: { + input: { + accountListId: accountListId ?? '', + mailchimpAccount: attributes, + mailchimpAccountId: mailchimpAccount?.id ?? '', + }, + }, + update: (cache) => { + const query = { + query: GetMailchimpAccountDocument, + variables: { + accountListId, + }, + }; + const dataFromCache = cache.readQuery(query); + + if (dataFromCache) { + const data = { + ...dataFromCache, + ...attributes, + }; + cache.writeQuery({ ...query, data }); + } + }, + }); + enqueueSnackbar( + t( + 'Your MailChimp sync has been started. This process may take up to 4 hours to complete.', + ), + { + variant: 'success', + }, + ); + }; + + const handleSync = async () => { + await syncMailchimpAccount({ + variables: { + input: { + accountListId: accountListId ?? '', + }, + }, + }); + enqueueSnackbar( + t( + 'Your MailChimp sync has been started. This process may take up to 4 hours to complete.', + ), + { + variant: 'success', + }, + ); + }; + const handleShowSettings = () => setShowSettings(true); + + const handleDisconnect = async () => { + await deleteMailchimpAccount({ + variables: { + input: { + accountListId: accountListId ?? '', + }, + }, + update: () => refetchGetMailchimpAccount(), + }); + enqueueSnackbar(t('MPDX removed your integration with MailChimp'), { + variant: 'success', + }); + }; + + const availableNewsletterLists = useMemo(() => { + return ( + mailchimpAccount?.listsAvailableForNewsletters?.filter( + (list) => !!list?.id, + ) ?? [] + ); + }, [mailchimpAccount]); + + return ( + + } + > + {loading && } + {!loading && !mailchimpAccount?.active && ( + <> + MailChimp Overview + + MailChimp makes keeping in touch with your ministry partners easy + and streamlined. Here’s how it works: + + + + If you have an existing MailChimp list you’d like to use, Great! + Or, create a new one for your MPDX connection. + + + Select your MPDX MailChimp list to stream your MPDX contacts into. + + + + That's it! Set it and leave it! Now your MailChimp list is + continuously up to date with your MPDX Contacts. That's just + the surface. Click over to the MPDX Help site for more in-depth + details. + + + {t('Connect MailChimp')} + + + )} + {!loading && + ((mailchimpAccount?.validateKey && !mailchimpAccount?.valid) || + showSettings) && ( + + + {t('Please choose a list to sync with MailChimp.')} + + + {mailchimpAccount?.listsPresent && ( + + {({ + values: { primaryListId, autoLogCampaigns }, + handleSubmit, + setFieldValue, + handleChange, + isSubmitting, + isValid, + errors, + }): ReactElement => ( +
+ + + {t('Pick a list to use for your newsletter')} + + + {errors.primaryListId && ( + + {t('This field is required')} + + )} + + } + label={t( + 'Automatically log sent MailChimp campaigns in contact task history', + )} + /> + + + + {t('Save')} + + + + {t('Disconnect')} + + + +
+ )} + + )} + + {!mailchimpAccount?.listsPresent && mailchimpAccount?.listsLink && ( + + + {t( + 'You need to create a list on Mail Chimp that MPDX can use for your newsletter.', + )} + + + + )} + + )} + + {!loading && + mailchimpAccount?.validateKey && + mailchimpAccount?.valid && + !showSettings && ( + + + {t('Your contacts are now automatically syncing with MailChimp')} + + + + + + + + + + + + + + {t('Modify Settings')} + + + {t('Disconnect')} + + + )} + + ); +}; diff --git a/src/components/Settings/integrations/Mailchimp/MailchimpAccount.graphql b/src/components/Settings/integrations/Mailchimp/MailchimpAccount.graphql new file mode 100644 index 000000000..c0c0e48b3 --- /dev/null +++ b/src/components/Settings/integrations/Mailchimp/MailchimpAccount.graphql @@ -0,0 +1,51 @@ +query GetMailchimpAccount($input: MailchimpAccountInput!) { + getMailchimpAccount(input: $input) { + id + active + autoLogCampaigns + createdAt + listsAvailableForNewsletters { + id + name + } + listsLink + listsPresent + primaryListId + primaryListName + updatedAt + updatedInDbAt + valid + validateKey + validationError + } +} + +mutation UpdateMailchimpAccount($input: UpdateMailchimpAccountInput!) { + updateMailchimpAccount(input: $input) { + id + active + autoLogCampaigns + createdAt + listsAvailableForNewsletters { + id + name + } + listsLink + listsPresent + primaryListId + primaryListName + updatedAt + updatedInDbAt + valid + validateKey + validationError + } +} + +mutation SyncMailchimpAccount($input: SyncMailchimpAccountInput!) { + syncMailchimpAccount(input: $input) +} + +mutation DeleteMailchimpAccount($input: DeleteMailchimpAccountInput!) { + deleteMailchimpAccount(input: $input) +} diff --git a/src/components/Shared/Filters/FilterPanel.tsx b/src/components/Shared/Filters/FilterPanel.tsx index ab6c9c1ff..2a8d263ab 100644 --- a/src/components/Shared/Filters/FilterPanel.tsx +++ b/src/components/Shared/Filters/FilterPanel.tsx @@ -41,6 +41,7 @@ import { FilterListItem } from './FilterListItem'; import { SaveFilterModal } from './SaveFilterModal/SaveFilterModal'; import { FilterPanelTagsSection } from './TagsSection/FilterPanelTagsSection'; import { sanitizeFilters } from 'src/lib/sanitizeFilters'; +import { snakeToCamel } from 'src/lib/snakeToCamel'; type ContactFilterKey = keyof ContactFilterSetInput; type ContactFilterValue = ContactFilterSetInput[ContactFilterKey]; @@ -57,18 +58,6 @@ export type FilterValue = | TaskFilterValue | ReportContactFilterValue; -export const snakeToCamel = (inputKey: string): string => { - const stringParts = inputKey.split('_'); - - return stringParts.reduce((outputKey, part, index) => { - if (index === 0) { - return part; - } - - return `${outputKey}${part.charAt(0).toUpperCase()}${part.slice(1)}`; - }, ''); -}; - const ReverseFiltersOptions = { alma_mater: 'reverseAlmaMater', appeal: 'reverseAppeal', diff --git a/src/components/Shared/Forms/Accordions/AccordionItem.tsx b/src/components/Shared/Forms/Accordions/AccordionItem.tsx index ba626bcf3..b471ad1b7 100644 --- a/src/components/Shared/Forms/Accordions/AccordionItem.tsx +++ b/src/components/Shared/Forms/Accordions/AccordionItem.tsx @@ -1,4 +1,4 @@ -import React from 'react'; +import React, { useMemo } from 'react'; import { Accordion, AccordionDetails, @@ -128,10 +128,14 @@ export const AccordionItem: React.FC = ({ fullWidth = false, image, }) => { + const expanded = useMemo( + () => expandedPanel.toLowerCase() === label.toLowerCase(), + [expandedPanel, label], + ); return ( onAccordionChange(label)} - expanded={expandedPanel === label} + expanded={expanded} disableGutters > }> diff --git a/src/lib/snakeToCamel.ts b/src/lib/snakeToCamel.ts new file mode 100644 index 000000000..7d57a6bfd --- /dev/null +++ b/src/lib/snakeToCamel.ts @@ -0,0 +1,15 @@ +export const snakeToCamel = (inputKey: string): string => { + const stringParts = inputKey.split('_'); + + return stringParts.reduce((outputKey, part, index) => { + if (index === 0) { + return part; + } + + return `${outputKey}${part.charAt(0).toUpperCase()}${part.slice(1)}`; + }, ''); +}; + +export const camelToSnake = (inputKey: string): string => { + return inputKey.replace(/[A-Z]/g, (letter) => `_${letter.toLowerCase()}`); +}; From c03bfbec111eb27491581398f317731f13ddd7cb Mon Sep 17 00:00:00 2001 From: Daniel Bisgrove Date: Fri, 25 Aug 2023 15:12:38 -0400 Subject: [PATCH 094/103] Mailchimp corraction and small tests... will do more later --- .../getMailchimpAccount/datahandler.ts | 16 ++- .../getMailchimpAccount.graphql | 2 +- .../getMailchimpAccount/resolvers.ts | 15 +++ .../updateMailchimpAccount/datahandler.ts | 6 +- .../updateMailchimpAccount/resolvers.ts | 19 +++ pages/api/graphql-rest.page.ts | 8 +- .../Mailchimp/MailchimpAccordian.test.tsx | 118 ++++++++++++++++++ .../Mailchimp/MailchimpAccordian.tsx | 5 +- 8 files changed, 176 insertions(+), 13 deletions(-) create mode 100644 pages/api/Schema/Settings/Preferences/Intergrations/Mailchimp/getMailchimpAccount/resolvers.ts create mode 100644 pages/api/Schema/Settings/Preferences/Intergrations/Mailchimp/updateMailchimpAccount/resolvers.ts create mode 100644 src/components/Settings/integrations/Mailchimp/MailchimpAccordian.test.tsx diff --git a/pages/api/Schema/Settings/Preferences/Intergrations/Mailchimp/getMailchimpAccount/datahandler.ts b/pages/api/Schema/Settings/Preferences/Intergrations/Mailchimp/getMailchimpAccount/datahandler.ts index a6045c98e..407eff05b 100644 --- a/pages/api/Schema/Settings/Preferences/Intergrations/Mailchimp/getMailchimpAccount/datahandler.ts +++ b/pages/api/Schema/Settings/Preferences/Intergrations/Mailchimp/getMailchimpAccount/datahandler.ts @@ -47,14 +47,18 @@ interface GetMailchimpAccountCamel { export const GetMailchimpAccount = ( data: GetMailchimpAccountResponse | null, -): GetMailchimpAccountCamel | null => { - if (!data) return data; +): GetMailchimpAccountCamel[] => { + // Returning inside an array so I can mock an empty response from GraphQL + // without the test thinking I want it to create custom random test data. + if (!data) return []; const attributes = {} as Omit; Object.keys(data.attributes).map((key) => { attributes[snakeToCamel(key)] = data.attributes[key]; }); - return { - id: data.id, - ...attributes, - }; + return [ + { + id: data.id, + ...attributes, + }, + ]; }; diff --git a/pages/api/Schema/Settings/Preferences/Intergrations/Mailchimp/getMailchimpAccount/getMailchimpAccount.graphql b/pages/api/Schema/Settings/Preferences/Intergrations/Mailchimp/getMailchimpAccount/getMailchimpAccount.graphql index 3afdb7036..d192dc180 100644 --- a/pages/api/Schema/Settings/Preferences/Intergrations/Mailchimp/getMailchimpAccount/getMailchimpAccount.graphql +++ b/pages/api/Schema/Settings/Preferences/Intergrations/Mailchimp/getMailchimpAccount/getMailchimpAccount.graphql @@ -1,5 +1,5 @@ extend type Query { - getMailchimpAccount(input: MailchimpAccountInput!): MailchimpAccount + getMailchimpAccount(input: MailchimpAccountInput!): [MailchimpAccount] } input MailchimpAccountInput { diff --git a/pages/api/Schema/Settings/Preferences/Intergrations/Mailchimp/getMailchimpAccount/resolvers.ts b/pages/api/Schema/Settings/Preferences/Intergrations/Mailchimp/getMailchimpAccount/resolvers.ts new file mode 100644 index 000000000..1a0f3447b --- /dev/null +++ b/pages/api/Schema/Settings/Preferences/Intergrations/Mailchimp/getMailchimpAccount/resolvers.ts @@ -0,0 +1,15 @@ +import { Resolvers } from '../../../../../../graphql-rest.page.generated'; + +const GetMailchimpAccountResolvers: Resolvers = { + Query: { + getMailchimpAccount: async ( + _source, + { input: { accountListId } }, + { dataSources }, + ) => { + return dataSources.mpdxRestApi.getMailchimpAccount(accountListId); + }, + }, +}; + +export { GetMailchimpAccountResolvers }; diff --git a/pages/api/Schema/Settings/Preferences/Intergrations/Mailchimp/updateMailchimpAccount/datahandler.ts b/pages/api/Schema/Settings/Preferences/Intergrations/Mailchimp/updateMailchimpAccount/datahandler.ts index ee16b6e2c..b666a9cc7 100644 --- a/pages/api/Schema/Settings/Preferences/Intergrations/Mailchimp/updateMailchimpAccount/datahandler.ts +++ b/pages/api/Schema/Settings/Preferences/Intergrations/Mailchimp/updateMailchimpAccount/datahandler.ts @@ -1,4 +1,4 @@ -import { snakeToCamel } from 'src/lib/snakeToCamel'; +import { snakeToCamel } from '../../../../../../../../src//lib/snakeToCamel'; export interface UpdateMailchimpAccountResponse { attributes: Omit; @@ -11,7 +11,7 @@ export interface UpdateMailchimpAccount { active: boolean; auto_log_campaigns: boolean; created_at: string; - lists_available_for_newsletters: UpdateMailchimpAccountNewsletters; + lists_available_for_newsletters?: UpdateMailchimpAccountNewsletters[]; lists_link: string; lists_present: boolean; primary_list_id: string; @@ -33,7 +33,7 @@ interface UpdateMailchimpAccountCamel { active: boolean; autoLogCampaigns: boolean; createdAt: string; - listsAvailableForNewsletters: UpdateMailchimpAccountNewsletters; + listsAvailableForNewsletters?: UpdateMailchimpAccountNewsletters[]; listsLink: string; listsPresent: boolean; primaryListId: string; diff --git a/pages/api/Schema/Settings/Preferences/Intergrations/Mailchimp/updateMailchimpAccount/resolvers.ts b/pages/api/Schema/Settings/Preferences/Intergrations/Mailchimp/updateMailchimpAccount/resolvers.ts new file mode 100644 index 000000000..b050d9fca --- /dev/null +++ b/pages/api/Schema/Settings/Preferences/Intergrations/Mailchimp/updateMailchimpAccount/resolvers.ts @@ -0,0 +1,19 @@ +import { Resolvers } from '../../../../../../graphql-rest.page.generated'; + +const UpdateMailchimpAccountResolvers: Resolvers = { + Mutation: { + updateMailchimpAccount: async ( + _source, + { input: { accountListId, mailchimpAccountId, mailchimpAccount } }, + { dataSources }, + ) => { + return dataSources.mpdxRestApi.updateMailchimpAccount( + accountListId, + mailchimpAccountId, + mailchimpAccount, + ); + }, + }, +}; + +export { UpdateMailchimpAccountResolvers }; diff --git a/pages/api/graphql-rest.page.ts b/pages/api/graphql-rest.page.ts index 9d04ebcf8..bf0b3f7c1 100644 --- a/pages/api/graphql-rest.page.ts +++ b/pages/api/graphql-rest.page.ts @@ -100,6 +100,10 @@ import { } from './Schema/Settings/Preferences/Intergrations/Mailchimp/getMailchimpAccount/datahandler'; import { SyncMailchimpAccount } from './Schema/Settings/Preferences/Intergrations/Mailchimp/syncMailchimpAccount/datahandler'; import { DeleteMailchimpAccount } from './Schema/Settings/Preferences/Intergrations/Mailchimp/deleteMailchimpAccount/datahandler'; +import { + UpdateMailchimpAccount, + UpdateMailchimpAccountResponse, +} from './Schema/Settings/Preferences/Intergrations/Mailchimp/updateMailchimpAccount/datahandler'; function camelToSnake(str: string): string { return str.replace(/[A-Z]/g, (letter) => `_${letter.toLowerCase()}`); @@ -979,7 +983,7 @@ class MpdxRestApi extends RESTDataSource { attributes[camelToSnake(key)] = mailchimpAccount[key]; }); - const { data }: { data: UpdateGoogleIntegrationResponse } = await this.put( + const { data }: { data: UpdateMailchimpAccountResponse } = await this.put( `account_lists/${accountListId}/mail_chimp_account`, { data: { @@ -992,7 +996,7 @@ class MpdxRestApi extends RESTDataSource { }, }, ); - return UpdateGoogleIntegration(data); + return UpdateMailchimpAccount(data); } async syncMailchimpAccount(accountListId) { diff --git a/src/components/Settings/integrations/Mailchimp/MailchimpAccordian.test.tsx b/src/components/Settings/integrations/Mailchimp/MailchimpAccordian.test.tsx new file mode 100644 index 000000000..e10ae08f3 --- /dev/null +++ b/src/components/Settings/integrations/Mailchimp/MailchimpAccordian.test.tsx @@ -0,0 +1,118 @@ +import { render, waitFor } from '@testing-library/react'; +// import { getSession } from 'next-auth/react'; +import { SnackbarProvider } from 'notistack'; +// import * as nextRouter from 'next/router'; +import TestRouter from '__tests__/util/TestRouter'; +import { GqlMockedProvider } from '../../../../../__tests__/util/graphqlMocking'; +import theme from '../../../../theme'; +import { ThemeProvider } from '@mui/material/styles'; +import { IntegrationsContextProvider } from 'pages/accountLists/[accountListId]/settings/integrations.page'; +import { MailchimpAccordian } from './MailchimpAccordian'; +import { + // useGetMailchimpAccountQuery, + // useUpdateMailchimpAccountMutation, + // GetMailchimpAccountDocument, + GetMailchimpAccountQuery, + // useSyncMailchimpAccountMutation, + // useDeleteMailchimpAccountMutation, +} from './MailchimpAccount.generated'; + +jest.mock('next-auth/react'); + +const accountListId = 'account-list-1'; +const contactId = 'contact-1'; +const apiToken = 'apiToken'; +const router = { + query: { accountListId, contactId: [contactId] }, + isReady: true, +}; + +const mockEnqueue = jest.fn(); +jest.mock('notistack', () => ({ + // eslint-disable-next-line @typescript-eslint/ban-ts-comment + // @ts-ignore + ...jest.requireActual('notistack'), + useSnackbar: () => { + return { + enqueueSnackbar: mockEnqueue, + }; + }, +})); + +const handleAccordionChange = jest.fn(); +// const expandedPanel = 'MailChimp'; + +const Components = (children: React.ReactElement) => ( + + + + + {children} + + + + +); + +describe('MailchimpAccount', () => { + it('should render accordian closed', async () => { + const { getByText, queryByRole } = render( + Components( + + + , + ), + ); + expect(getByText('MailChimp')).toBeInTheDocument(); + const mailchimpImage = queryByRole('img', { + name: /mailchimp/i, + }); + expect(mailchimpImage).not.toBeInTheDocument(); + }); + it('should render accordian open', async () => { + const { queryByRole } = render( + Components( + + + , + ), + ); + const mailchimpImage = queryByRole('img', { + name: /mailchimp/i, + }); + expect(mailchimpImage).toBeInTheDocument(); + }); + + it('should render Mailchimp Overview', async () => { + const mutationSpy = jest.fn(); + const { getByText } = render( + Components( + + mocks={{ + GetMailchimpAccount: { + getMailchimpAccount: [], + }, + }} + onCall={mutationSpy} + > + + , + ), + ); + + await waitFor(() => { + expect(getByText('MailChimp Overview')).toBeInTheDocument(); + }); + }); +}); diff --git a/src/components/Settings/integrations/Mailchimp/MailchimpAccordian.tsx b/src/components/Settings/integrations/Mailchimp/MailchimpAccordian.tsx index b9652b913..11bde5960 100644 --- a/src/components/Settings/integrations/Mailchimp/MailchimpAccordian.tsx +++ b/src/components/Settings/integrations/Mailchimp/MailchimpAccordian.tsx @@ -81,7 +81,9 @@ export const MailchimpAccordian: React.FC = ({ }, skip: !accountListId, }); - const mailchimpAccount = data?.getMailchimpAccount; + // console.log('getMailchimpAccount', data); + + const mailchimpAccount = data?.getMailchimpAccount[0]; useEffect(() => { setOAuth( @@ -132,6 +134,7 @@ export const MailchimpAccordian: React.FC = ({ } }, }); + setShowSettings(false); enqueueSnackbar( t( 'Your MailChimp sync has been started. This process may take up to 4 hours to complete.', From 910e9735d2f3aa0525e8758bcf265d42309f5fec Mon Sep 17 00:00:00 2001 From: Daniel Bisgrove Date: Fri, 25 Aug 2023 16:45:11 -0400 Subject: [PATCH 095/103] Writing mailchimp tests --- .../Mailchimp/MailchimpAccordian.test.tsx | 457 ++++++++++++++++-- .../Mailchimp/MailchimpAccordian.tsx | 13 +- 2 files changed, 428 insertions(+), 42 deletions(-) diff --git a/src/components/Settings/integrations/Mailchimp/MailchimpAccordian.test.tsx b/src/components/Settings/integrations/Mailchimp/MailchimpAccordian.test.tsx index e10ae08f3..ee96c8005 100644 --- a/src/components/Settings/integrations/Mailchimp/MailchimpAccordian.test.tsx +++ b/src/components/Settings/integrations/Mailchimp/MailchimpAccordian.test.tsx @@ -1,21 +1,13 @@ -import { render, waitFor } from '@testing-library/react'; -// import { getSession } from 'next-auth/react'; +import { render, waitFor, within, act } from '@testing-library/react'; import { SnackbarProvider } from 'notistack'; -// import * as nextRouter from 'next/router'; +import userEvent from '@testing-library/user-event'; +import { ThemeProvider } from '@mui/material/styles'; import TestRouter from '__tests__/util/TestRouter'; import { GqlMockedProvider } from '../../../../../__tests__/util/graphqlMocking'; import theme from '../../../../theme'; -import { ThemeProvider } from '@mui/material/styles'; import { IntegrationsContextProvider } from 'pages/accountLists/[accountListId]/settings/integrations.page'; import { MailchimpAccordian } from './MailchimpAccordian'; -import { - // useGetMailchimpAccountQuery, - // useUpdateMailchimpAccountMutation, - // GetMailchimpAccountDocument, - GetMailchimpAccountQuery, - // useSyncMailchimpAccountMutation, - // useDeleteMailchimpAccountMutation, -} from './MailchimpAccount.generated'; +import { GetMailchimpAccountQuery } from './MailchimpAccount.generated'; jest.mock('next-auth/react'); @@ -40,7 +32,6 @@ jest.mock('notistack', () => ({ })); const handleAccordionChange = jest.fn(); -// const expandedPanel = 'MailChimp'; const Components = (children: React.ReactElement) => ( @@ -54,7 +45,42 @@ const Components = (children: React.ReactElement) => ( ); +const standardMailchimpAccount = { + __typename: 'MailchimpAccount', + id: '123456789', + active: true, + autoLogCampaigns: false, + createdAt: 'DATETIME', + listsAvailableForNewsletters: [ + { + __typename: 'listsAvailableForNewsletters', + id: '11111111', + name: 'Newsletter list 1', + }, + { + __typename: 'listsAvailableForNewsletters', + id: '2222222', + name: 'Newsletter list 2', + }, + { + __typename: 'listsAvailableForNewsletters', + id: '33333333', + name: 'Newsletter list 3', + }, + ], + listsLink: 'https://listsLink.com', + listsPresent: true, + primaryListId: '11111111', + primaryListName: 'primaryListName', + updatedAt: 'DATETIME', + updatedInDbAt: 'DATETIME', + valid: false, + validateKey: true, + validationError: null, +}; + describe('MailchimpAccount', () => { + process.env.OAUTH_URL = 'https://auth.mpdx.org'; it('should render accordian closed', async () => { const { getByText, queryByRole } = render( Components( @@ -89,30 +115,389 @@ describe('MailchimpAccount', () => { expect(mailchimpImage).toBeInTheDocument(); }); - it('should render Mailchimp Overview', async () => { - const mutationSpy = jest.fn(); - const { getByText } = render( - Components( - - mocks={{ - GetMailchimpAccount: { - getMailchimpAccount: [], - }, - }} - onCall={mutationSpy} - > - - , - ), - ); + describe('Not Connected', () => { + it('should render Mailchimp Overview', async () => { + const mutationSpy = jest.fn(); + const { getByText } = render( + Components( + + mocks={{ + GetMailchimpAccount: { + getMailchimpAccount: [], + }, + }} + onCall={mutationSpy} + > + + , + ), + ); + + await waitFor(() => { + expect(getByText('MailChimp Overview')).toBeInTheDocument(); + }); + userEvent.click(getByText('Connect MailChimp')); + + expect(getByText('Connect MailChimp')).toHaveAttribute( + 'href', + `https://auth.mpdx.org/auth/user/mailchimp?account_list_id=account-list-1&redirect_to=http%3A%2F%2Flocalhost%2FaccountLists%2Faccount-list-1%2Fsettings%2Fintegrations%3FselectedTab%3Dmailchimp&access_token=apiToken`, + ); + }); + }); + + describe('Connected', () => { + let mailchimpAccount = { ...standardMailchimpAccount }; + + beforeEach(() => { + mailchimpAccount = { ...standardMailchimpAccount }; + }); + it('is connected but no lists present', async () => { + mailchimpAccount.listsPresent = false; + const mutationSpy = jest.fn(); + const { queryByText } = render( + Components( + + mocks={{ + GetMailchimpAccount: { + getMailchimpAccount: [mailchimpAccount], + }, + }} + onCall={mutationSpy} + > + + , + ), + ); + + await waitFor(() => { + expect( + queryByText('Please choose a list to sync with MailChimp.'), + ).toBeInTheDocument(); + expect( + queryByText( + 'You need to create a list on Mail Chimp that MPDX can use for your newsletter.', + ), + ).toBeInTheDocument(); + expect( + queryByText('Go to MailChimp to create a list.'), + ).toBeInTheDocument(); + }); + + expect( + queryByText('Pick a list to use for your newsletter'), + ).not.toBeInTheDocument(); + }); + + it('is connected but no lists present & no lists link', async () => { + mailchimpAccount.listsPresent = false; + mailchimpAccount.listsLink = ''; + const mutationSpy = jest.fn(); + const { queryByText } = render( + Components( + + mocks={{ + GetMailchimpAccount: { + getMailchimpAccount: [mailchimpAccount], + }, + }} + onCall={mutationSpy} + > + + , + ), + ); + + await waitFor(() => { + expect( + queryByText( + 'You need to create a list on Mail Chimp that MPDX can use for your newsletter.', + ), + ).toBeInTheDocument(); + }); + + expect( + queryByText('Go to MailChimp to create a list.'), + ).not.toBeInTheDocument(); + }); + + it('should call updateMailchimpAccount', async () => { + const mutationSpy = jest.fn(); + const { getByText, getByRole } = render( + Components( + + mocks={{ + GetMailchimpAccount: { + getMailchimpAccount: [mailchimpAccount], + }, + }} + onCall={mutationSpy} + > + + , + ), + ); + + await waitFor(() => { + expect( + getByText('Pick a list to use for your newsletter'), + ).toBeInTheDocument(); + }); + + userEvent.click(getByRole('button', { name: /Newsletter list 1/i })); + await waitFor(() => + expect( + getByRole('option', { name: /Newsletter list 2/i }), + ).toBeInTheDocument(), + ); + userEvent.click(getByRole('option', { name: /Newsletter list 2/i })); + + userEvent.click( + getByRole('checkbox', { + name: /automatically log sent mailchimp campaigns in contact task history/i, + }), + ); + + userEvent.click( + getByRole('button', { + name: /save/i, + }), + ); + + await waitFor(() => { + expect(mockEnqueue).toHaveBeenCalledWith( + 'Your MailChimp sync has been started. This process may take up to 4 hours to complete.', + { + variant: 'success', + }, + ); + }); + + expect(mutationSpy.mock.calls[1][0].operation.operationName).toEqual( + 'UpdateMailchimpAccount', + ); + expect(mutationSpy.mock.calls[1][0].operation.variables.input).toEqual({ + accountListId: 'account-list-1', + mailchimpAccount: { primaryListId: '2222222', autoLogCampaigns: true }, + mailchimpAccountId: '123456789', + }); + }); + + it('should call deleteMailchimpAccount', async () => { + const mutationSpy = jest.fn(); + const { getByText, getByRole } = render( + Components( + + mocks={{ + GetMailchimpAccount: { + getMailchimpAccount: [mailchimpAccount], + }, + }} + onCall={mutationSpy} + > + + , + ), + ); + + await waitFor(() => { + expect( + getByText('Pick a list to use for your newsletter'), + ).toBeInTheDocument(); + }); + + userEvent.click( + getByRole('button', { + name: /disconnect/i, + }), + ); + + await waitFor(() => { + expect(mockEnqueue).toHaveBeenCalledWith( + 'MPDX removed your integration with MailChimp', + { + variant: 'success', + }, + ); + }); + + expect(mutationSpy.mock.calls[1][0].operation.operationName).toEqual( + 'DeleteMailchimpAccount', + ); + expect(mutationSpy.mock.calls[1][0].operation.variables.input).toEqual({ + accountListId: 'account-list-1', + }); + // refetch account + expect(mutationSpy.mock.calls[2][0].operation.operationName).toEqual( + 'GetMailchimpAccount', + ); + }); + it('should show settings overview', async () => { + mailchimpAccount.valid = true; + const mutationSpy = jest.fn(); + const { getByText } = render( + Components( + + mocks={{ + GetMailchimpAccount: { + getMailchimpAccount: [mailchimpAccount], + }, + }} + onCall={mutationSpy} + > + + , + ), + ); + + await waitFor(() => { + expect( + getByText( + 'Your contacts are now automatically syncing with MailChimp', + ), + ).toBeInTheDocument(); + }); + + expect(getByText(/primaryListName/i)).toBeInTheDocument(); + expect(getByText(/off/i)).toBeInTheDocument(); + }); + + it('should call syncMailchimpAccount', async () => { + mailchimpAccount.valid = true; + mailchimpAccount.autoLogCampaigns = true; + const mutationSpy = jest.fn(); + const { getByText, getByRole } = render( + Components( + + mocks={{ + GetMailchimpAccount: { + getMailchimpAccount: [mailchimpAccount], + }, + }} + onCall={mutationSpy} + > + + , + ), + ); + + await waitFor(() => { + expect( + getByText( + 'Your contacts are now automatically syncing with MailChimp', + ), + ).toBeInTheDocument(); + }); + + const list = getByRole('list'); + within(list).getByText(/on/i); + + userEvent.click( + getByRole('button', { + name: /sync now/i, + }), + ); + + await waitFor(() => { + expect(mockEnqueue).toHaveBeenCalledWith( + 'Your MailChimp sync has been started. This process may take up to 4 hours to complete.', + { + variant: 'success', + }, + ); + }); + + expect(mutationSpy.mock.calls[1][0].operation.operationName).toEqual( + 'SyncMailchimpAccount', + ); + expect(mutationSpy.mock.calls[1][0].operation.variables.input).toEqual({ + accountListId: 'account-list-1', + }); + }); + it('should show settings', async () => { + mailchimpAccount.valid = true; + mailchimpAccount.autoLogCampaigns = true; + const mutationSpy = jest.fn(); + const { queryByText, getByRole } = render( + Components( + + mocks={{ + GetMailchimpAccount: { + getMailchimpAccount: [mailchimpAccount], + }, + }} + onCall={mutationSpy} + > + + , + ), + ); + + await waitFor(() => { + expect( + queryByText( + 'Your contacts are now automatically syncing with MailChimp', + ), + ).toBeInTheDocument(); + }); + + await act(async () => { + userEvent.click( + getByRole('button', { + name: /modify settings/i, + }), + ); + }); - await waitFor(() => { - expect(getByText('MailChimp Overview')).toBeInTheDocument(); + await waitFor(() => { + expect( + queryByText( + 'Your contacts are now automatically syncing with MailChimp', + ), + ).not.toBeInTheDocument(); + expect( + queryByText('Pick a list to use for your newsletter'), + ).toBeInTheDocument(); + }); }); }); }); diff --git a/src/components/Settings/integrations/Mailchimp/MailchimpAccordian.tsx b/src/components/Settings/integrations/Mailchimp/MailchimpAccordian.tsx index 11bde5960..aa5b92509 100644 --- a/src/components/Settings/integrations/Mailchimp/MailchimpAccordian.tsx +++ b/src/components/Settings/integrations/Mailchimp/MailchimpAccordian.tsx @@ -81,7 +81,6 @@ export const MailchimpAccordian: React.FC = ({ }, skip: !accountListId, }); - // console.log('getMailchimpAccount', data); const mailchimpAccount = data?.getMailchimpAccount[0]; @@ -200,7 +199,7 @@ export const MailchimpAccordian: React.FC = ({ } > {loading && } - {!loading && !mailchimpAccount?.active && ( + {!loading && !mailchimpAccount && ( <> MailChimp Overview @@ -316,16 +315,18 @@ export const MailchimpAccordian: React.FC = ({ )} - {!mailchimpAccount?.listsPresent && mailchimpAccount?.listsLink && ( + {!mailchimpAccount?.listsPresent && ( {t( 'You need to create a list on Mail Chimp that MPDX can use for your newsletter.', )} - + {mailchimpAccount?.listsLink && ( + + )} )} From 7f70a882667e1e55df941fbca73103a3b202d314 Mon Sep 17 00:00:00 2001 From: Daniel Bisgrove Date: Wed, 30 Aug 2023 11:25:34 -0400 Subject: [PATCH 096/103] Google tests are done --- .../Google/GoogleAccordian.test.tsx | 237 ++++++++ .../integrations/Google/GoogleAccordian.tsx | 7 +- .../Modals/DeleteGoogleAccountModal.test.tsx | 128 +++++ .../Modals/DeleteGoogleAccountModal.tsx | 4 +- .../Modals/EditGoogleAccountModal.test.tsx | 506 ++++++++++++++++++ .../Google/Modals/EditGoogleAccountModal.tsx | 11 +- .../Modals/EditGoogleIntegrationForm.tsx | 71 ++- 7 files changed, 918 insertions(+), 46 deletions(-) create mode 100644 src/components/Settings/integrations/Google/GoogleAccordian.test.tsx create mode 100644 src/components/Settings/integrations/Google/Modals/DeleteGoogleAccountModal.test.tsx create mode 100644 src/components/Settings/integrations/Google/Modals/EditGoogleAccountModal.test.tsx diff --git a/src/components/Settings/integrations/Google/GoogleAccordian.test.tsx b/src/components/Settings/integrations/Google/GoogleAccordian.test.tsx new file mode 100644 index 000000000..5c226dd86 --- /dev/null +++ b/src/components/Settings/integrations/Google/GoogleAccordian.test.tsx @@ -0,0 +1,237 @@ +import { render, waitFor } from '@testing-library/react'; +import { SnackbarProvider } from 'notistack'; +import userEvent from '@testing-library/user-event'; +import { ThemeProvider } from '@mui/material/styles'; +import TestRouter from '__tests__/util/TestRouter'; +import { GqlMockedProvider } from '../../../../../__tests__/util/graphqlMocking'; +import theme from '../../../../theme'; +import { IntegrationsContextProvider } from 'pages/accountLists/[accountListId]/settings/integrations.page'; +import { GoogleAccordian } from './GoogleAccordian'; +import { GoogleAccountsQuery } from './googleAccounts.generated'; +import { getSession } from 'next-auth/react'; + +jest.mock('next-auth/react'); + +const accountListId = 'account-list-1'; +const contactId = 'contact-1'; +const apiToken = 'apiToken'; +const router = { + query: { accountListId, contactId: [contactId] }, + isReady: true, +}; +const session = { + expires: '2021-10-28T14:48:20.897Z', + user: { + email: 'Chair Library Bed', + image: null, + name: 'Dung Tapestry', + token: 'superLongJwtString', + }, +}; + +const mockEnqueue = jest.fn(); +jest.mock('notistack', () => ({ + // eslint-disable-next-line @typescript-eslint/ban-ts-comment + // @ts-ignore + ...jest.requireActual('notistack'), + useSnackbar: () => { + return { + enqueueSnackbar: mockEnqueue, + }; + }, +})); + +const handleAccordionChange = jest.fn(); + +const Components = (children: React.ReactElement) => ( + + + + + {children} + + + + +); + +const standardGoogleAccount = { + email: 'test-n-rest@cru.org', + primary: false, + remoteId: '111222333444', + id: 'abcd1234', + tokenExpired: false, + __typename: 'GoogleAccountAttributes', +}; + +describe('GoogleAccordian', () => { + process.env.OAUTH_URL = 'https://auth.mpdx.org'; + (getSession as jest.Mock).mockResolvedValue(session); + + it('should render accordian closed', async () => { + const { getByText, queryByRole } = render( + Components( + + + , + ), + ); + expect(getByText('Google')).toBeInTheDocument(); + const Image = queryByRole('img', { + name: /google/i, + }); + expect(Image).not.toBeInTheDocument(); + }); + it('should render accordian open', async () => { + const { queryByRole } = render( + Components( + + + , + ), + ); + const Image = queryByRole('img', { + name: /google/i, + }); + expect(Image).toBeInTheDocument(); + }); + + describe('Not Connected', () => { + it('should render Mailchimp Overview', async () => { + const mutationSpy = jest.fn(); + const { getByText } = render( + Components( + + mocks={{ + GoogleAccounts: { + getGoogleAccounts: [], + }, + }} + onCall={mutationSpy} + > + + , + ), + ); + + await waitFor(() => { + expect(getByText(/google integration overview/i)).toBeInTheDocument(); + }); + userEvent.click(getByText(/add account/i)); + + expect(getByText(/add account/i)).toHaveAttribute( + 'href', + `https://auth.mpdx.org/auth/user/google?account_list_id=account-list-1&redirect_to=http%3A%2F%2Flocalhost%2FaccountLists%2Faccount-list-1%2Fsettings%2Fintegrations%3FselectedTab%3DGoogle&access_token=apiToken`, + ); + }); + }); + + describe('Connected', () => { + let googleAccount = { ...standardGoogleAccount }; + + beforeEach(() => { + googleAccount = { ...standardGoogleAccount }; + }); + it('shows one connected account', async () => { + const mutationSpy = jest.fn(); + const { queryByText, getByText, getByTestId } = render( + Components( + + mocks={{ + GoogleAccounts: { + getGoogleAccounts: [googleAccount], + }, + }} + onCall={mutationSpy} + > + + , + ), + ); + + await waitFor(() => { + expect(getByText(standardGoogleAccount.email)).toBeInTheDocument(); + }); + + userEvent.click(getByText(/import contacts/i)); + expect(getByText(/import contacts/i)).toHaveAttribute( + 'href', + `https://stage.mpdx.org/tools/import/google`, + ); + + userEvent.click(getByTestId('EditIcon')); + await waitFor(() => + expect(getByText(/edit google integration/i)).toBeInTheDocument(), + ); + userEvent.click(getByTestId('CloseIcon')); + await waitFor(() => + expect(queryByText(/edit google integration/i)).not.toBeInTheDocument(), + ); + + userEvent.click(getByTestId('DeleteIcon')); + await waitFor(() => + expect( + getByText(/confirm to disconnect google account/i), + ).toBeInTheDocument(), + ); + userEvent.click(getByTestId('CloseIcon')); + await waitFor(() => + expect( + queryByText(/confirm to disconnect google account/i), + ).not.toBeInTheDocument(), + ); + }); + + it('shows account with expired token', async () => { + const mutationSpy = jest.fn(); + googleAccount.tokenExpired = true; + const { getByText, getAllByText } = render( + Components( + + mocks={{ + GoogleAccounts: { + getGoogleAccounts: [googleAccount], + }, + }} + onCall={mutationSpy} + > + + , + ), + ); + + await waitFor(() => { + expect(getByText(standardGoogleAccount.email)).toBeInTheDocument(); + }); + + await waitFor(() => { + expect(getByText(/click "refresh google account/i)).toBeInTheDocument(); + expect(getAllByText(/refresh google account/i)[1]).toHaveAttribute( + 'href', + `https://auth.mpdx.org/auth/user/google?account_list_id=account-list-1&redirect_to=http%3A%2F%2Flocalhost%2FaccountLists%2Faccount-list-1%2Fsettings%2Fintegrations%3FselectedTab%3DGoogle&access_token=apiToken`, + ); + }); + }); + }); +}); diff --git a/src/components/Settings/integrations/Google/GoogleAccordian.tsx b/src/components/Settings/integrations/Google/GoogleAccordian.tsx index 2378d8a90..b7dfd4b72 100644 --- a/src/components/Settings/integrations/Google/GoogleAccordian.tsx +++ b/src/components/Settings/integrations/Google/GoogleAccordian.tsx @@ -77,6 +77,11 @@ const Right = styled(Box)(() => ({ width: '120px', })); +export type GoogleAccountAttributesSlimmed = Pick< + GoogleAccountAttributes, + 'id' | 'email' | 'primary' | 'remoteId' | 'tokenExpired' +>; + export const GoogleAccordian: React.FC = ({ handleAccordionChange, expandedPanel, @@ -85,7 +90,7 @@ export const GoogleAccordian: React.FC = ({ const [openEditGoogleAccount, setOpenEditGoogleAccount] = useState(false); const [openDeleteGoogleAccount, setOpenDeleteGoogleAccount] = useState(false); const [selectedAccount, setSelectedAccount] = useState< - GoogleAccountAttributes | undefined + GoogleAccountAttributesSlimmed | undefined >(); const { data, loading } = useGoogleAccountsQuery({ skip: !expandedPanel, diff --git a/src/components/Settings/integrations/Google/Modals/DeleteGoogleAccountModal.test.tsx b/src/components/Settings/integrations/Google/Modals/DeleteGoogleAccountModal.test.tsx new file mode 100644 index 000000000..ebb8458db --- /dev/null +++ b/src/components/Settings/integrations/Google/Modals/DeleteGoogleAccountModal.test.tsx @@ -0,0 +1,128 @@ +import { render, waitFor } from '@testing-library/react'; +import { SnackbarProvider } from 'notistack'; +import userEvent from '@testing-library/user-event'; +import { ThemeProvider } from '@mui/material/styles'; +import TestRouter from '__tests__/util/TestRouter'; +import { GqlMockedProvider } from '../../../../../../__tests__/util/graphqlMocking'; +import theme from '../../../../../theme'; +import { IntegrationsContextProvider } from 'pages/accountLists/[accountListId]/settings/integrations.page'; +import { DeleteGoogleAccountModal } from './DeleteGoogleAccountModal'; +import { getSession } from 'next-auth/react'; + +jest.mock('next-auth/react'); + +const accountListId = 'account-list-1'; +const contactId = 'contact-1'; +const apiToken = 'apiToken'; +const router = { + query: { accountListId, contactId: [contactId] }, + isReady: true, +}; +const session = { + expires: '2021-10-28T14:48:20.897Z', + user: { + email: 'Chair Library Bed', + image: null, + name: 'Dung Tapestry', + token: 'superLongJwtString', + }, +}; + +const mockEnqueue = jest.fn(); +jest.mock('notistack', () => ({ + // eslint-disable-next-line @typescript-eslint/ban-ts-comment + // @ts-ignore + ...jest.requireActual('notistack'), + useSnackbar: () => { + return { + enqueueSnackbar: mockEnqueue, + }; + }, +})); + +const handleClose = jest.fn(); + +const Components = (children: React.ReactElement) => ( + + + + + {children} + + + + +); + +const standardGoogleAccount = { + email: 'test-n-rest@cru.org', + primary: false, + remoteId: '111222333444', + id: 'abcd1234', + tokenExpired: false, + __typename: 'GoogleAccountAttributes', +}; + +describe('DeleteGoogleAccountModal', () => { + process.env.OAUTH_URL = 'https://auth.mpdx.org'; + (getSession as jest.Mock).mockResolvedValue(session); + let googleAccount = { ...standardGoogleAccount }; + + beforeEach(() => { + googleAccount = { ...standardGoogleAccount }; + handleClose.mockClear(); + }); + + it('should render modal', async () => { + const { getByText, getByTestId } = render( + Components( + + + , + ), + ); + expect( + getByText(/confirm to disconnect google account/i), + ).toBeInTheDocument(); + userEvent.click(getByText(/cancel/i)); + expect(handleClose).toHaveBeenCalledTimes(1); + userEvent.click(getByTestId('CloseIcon')); + expect(handleClose).toHaveBeenCalledTimes(2); + }); + + it('should run deleteGoogleAccount', async () => { + const mutationSpy = jest.fn(); + const { getByText } = render( + Components( + + + , + ), + ); + expect( + getByText(/confirm to disconnect google account/i), + ).toBeInTheDocument(); + userEvent.click(getByText('Confirm')); + + await waitFor(() => { + expect(mockEnqueue).toHaveBeenCalledWith( + 'MPDX removed your integration with Google.', + { + variant: 'success', + }, + ); + expect(mutationSpy.mock.calls[0][0].operation.operationName).toEqual( + 'DeleteGoogleAccount', + ); + expect( + mutationSpy.mock.calls[0][0].operation.variables.input.accountId, + ).toEqual(standardGoogleAccount.id); + }); + }); +}); diff --git a/src/components/Settings/integrations/Google/Modals/DeleteGoogleAccountModal.tsx b/src/components/Settings/integrations/Google/Modals/DeleteGoogleAccountModal.tsx index ce65739c1..631099634 100644 --- a/src/components/Settings/integrations/Google/Modals/DeleteGoogleAccountModal.tsx +++ b/src/components/Settings/integrations/Google/Modals/DeleteGoogleAccountModal.tsx @@ -8,16 +8,16 @@ import { SubmitButton, CancelButton, } from 'src/components/common/Modal/ActionButtons/ActionButtons'; -import { GoogleAccountAttributes } from '../../../../../../graphql/types.generated'; import { useDeleteGoogleAccountMutation, GoogleAccountsDocument, GoogleAccountsQuery, } from '../googleAccounts.generated'; +import { GoogleAccountAttributesSlimmed } from '../GoogleAccordian'; interface DeleteGoogleAccountModalProps { handleClose: () => void; - account: GoogleAccountAttributes; + account: GoogleAccountAttributesSlimmed; } const StyledDialogActions = styled(DialogActions)(() => ({ diff --git a/src/components/Settings/integrations/Google/Modals/EditGoogleAccountModal.test.tsx b/src/components/Settings/integrations/Google/Modals/EditGoogleAccountModal.test.tsx new file mode 100644 index 000000000..a6c5b0339 --- /dev/null +++ b/src/components/Settings/integrations/Google/Modals/EditGoogleAccountModal.test.tsx @@ -0,0 +1,506 @@ +import { render, waitFor, act } from '@testing-library/react'; +import { SnackbarProvider } from 'notistack'; +import userEvent from '@testing-library/user-event'; +import { ThemeProvider } from '@mui/material/styles'; +import TestRouter from '__tests__/util/TestRouter'; +import { GqlMockedProvider } from '../../../../../../__tests__/util/graphqlMocking'; +import theme from '../../../../../theme'; +import { IntegrationsContextProvider } from 'pages/accountLists/[accountListId]/settings/integrations.page'; +import { EditGoogleAccountModal } from './EditGoogleAccountModal'; +import { getSession } from 'next-auth/react'; +import * as Types from '../../../../../../graphql/types.generated'; +import { + GetGoogleAccountIntegrationsQuery, + GetIntegrationActivitiesQuery, +} from './googleIntegrations.generated'; + +jest.mock('next-auth/react'); + +const accountListId = 'account-list-1'; +const contactId = 'contact-1'; +const apiToken = 'apiToken'; +const router = { + query: { accountListId, contactId: [contactId] }, + isReady: true, +}; +const session = { + expires: '2021-10-28T14:48:20.897Z', + user: { + email: 'Chair Library Bed', + image: null, + name: 'Dung Tapestry', + token: 'superLongJwtString', + }, +}; + +const mockEnqueue = jest.fn(); +jest.mock('notistack', () => ({ + // eslint-disable-next-line @typescript-eslint/ban-ts-comment + // @ts-ignore + ...jest.requireActual('notistack'), + useSnackbar: () => { + return { + enqueueSnackbar: mockEnqueue, + }; + }, +})); + +const handleClose = jest.fn(); + +const Components = (children: React.ReactElement) => ( + + + + + {children} + + + + +); + +const googleAccount = { + email: 'test-n-rest@cru.org', + primary: false, + remoteId: '111222333444', + id: 'abcd1234', + tokenExpired: false, + __typename: 'GoogleAccountAttributes', +}; + +const standardGoogleIntegration: Pick< + Types.GoogleAccountIntegration, + | '__typename' + | 'calendarId' + | 'calendarIntegration' + | 'calendarIntegrations' + | 'calendarName' + | 'createdAt' + | 'updatedAt' + | 'id' + | 'updatedInDbAt' +> & { + calendars: Array< + Types.Maybe< + { __typename?: 'GoogleAccountIntegrationCalendars' } & Pick< + Types.GoogleAccountIntegrationCalendars, + 'id' | 'name' + > + > + >; +} = { + __typename: 'GoogleAccountIntegration', + calendarId: null, + calendarIntegration: true, + calendarIntegrations: ['Appointment'], + calendarName: 'calendar', + calendars: [ + { + __typename: 'GoogleAccountIntegrationCalendars', + id: 'calendarsID', + name: 'calendarsName@cru.org', + }, + ], + createdAt: '08/08/2023', + updatedAt: '08/08/2023', + id: 'ID', + updatedInDbAt: '08/08/2023', +}; + +const oAuth = `https://auth.mpdx.org/urlpath/to/authenicate`; +describe('EditGoogleAccountModal', () => { + process.env.OAUTH_URL = 'https://auth.mpdx.org'; + (getSession as jest.Mock).mockResolvedValue(session); + let googleIntegration = { ...standardGoogleIntegration }; + + beforeEach(() => { + googleIntegration = { ...standardGoogleIntegration }; + handleClose.mockClear(); + }); + + it('should render modal', async () => { + const { getByText, getByTestId } = render( + Components( + + + , + ), + ); + expect(getByText(/Edit Google Integration/i)).toBeInTheDocument(); + userEvent.click(getByText(/cancel/i)); + expect(handleClose).toHaveBeenCalledTimes(1); + userEvent.click(getByTestId('CloseIcon')); + expect(handleClose).toHaveBeenCalledTimes(2); + }); + + it('should switch tabs', async () => { + const mutationSpy = jest.fn(); + const { getByText, getByRole } = render( + Components( + + + , + ), + ); + expect(getByText(/Edit Google Integration/i)).toBeInTheDocument(); + const setupTab = getByRole('tab', { name: /setup/i }); + expect(setupTab).toBeInTheDocument(); + userEvent.click(setupTab); + + const button = getByRole('link', { name: /refresh google account/i }); + expect(button).toBeInTheDocument(); + expect(button).toHaveAttribute('href', oAuth); + }); + + it('should enable Calendar Integration', async () => { + googleIntegration.calendarIntegration = false; + googleIntegration.calendarIntegrations = []; + googleIntegration.calendarName = null; + const mutationSpy = jest.fn(); + const { getByText, getByRole } = render( + Components( + + + , + ), + ); + await waitFor(() => + expect(getByText(/Edit Google Integration/i)).toBeInTheDocument(), + ); + + userEvent.click( + getByRole('button', { name: /enable calendar integration/i }), + ); + await waitFor(() => { + expect(mockEnqueue).toHaveBeenCalledWith( + 'Enabled Google Calendar Integration!', + { + variant: 'success', + }, + ); + expect(mutationSpy.mock.calls[1][0].operation.operationName).toEqual( + 'UpdateGoogleIntegration', + ); + expect(mutationSpy.mock.calls[1][0].operation.variables.input).toEqual({ + googleAccountId: googleAccount.id, + googleIntegration: { + calendarIntegration: true, + overwrite: true, + }, + googleIntegrationId: googleIntegration.id, + }); + }); + }); + + it('should update Integrations calendar', async () => { + const mutationSpy = jest.fn(); + const { getByText, getByRole, queryByRole } = render( + Components( + + mocks={{ + GetGoogleAccountIntegrations: { + getGoogleAccountIntegrations: [googleIntegration], + }, + GetIntegrationActivities: { + constant: { + activities: [ + { + id: 'Call', + value: 'Call', + __typename: 'IdValue', + }, + { + id: 'Appointment', + value: 'Appointment', + __typename: 'IdValue', + }, + { + id: 'Email', + value: 'Email', + __typename: 'IdValue', + }, + ], + }, + }, + }} + onCall={mutationSpy} + > + + , + ), + ); + + await waitFor(() => + expect( + getByText(/choose a calendar for mpdx to push tasks to:/i), + ).toBeInTheDocument(), + ); + + await act(async () => { + userEvent.click(getByRole('button', { name: /update/i })); + }); + await waitFor(() => + expect(getByText(/this field is required/i)).toBeInTheDocument(), + ); + await act(async () => { + userEvent.click(getByRole('button', { name: /​/i })); + }); + const calendarOption = getByRole('option', { + name: /calendarsName@cru\.org/i, + }); + await waitFor(() => expect(calendarOption).toBeInTheDocument()); + await act(async () => { + userEvent.click(calendarOption); + }); + + await waitFor(() => + expect(queryByRole(/this field is required/i)).not.toBeInTheDocument(), + ); + + userEvent.click(getByRole('button', { name: /update/i })); + + await waitFor(() => { + expect(mockEnqueue).toHaveBeenCalledWith( + 'Updated Google Calendar Integration!', + { + variant: 'success', + }, + ); + expect(mutationSpy.mock.calls[2][0].operation.operationName).toEqual( + 'UpdateGoogleIntegration', + ); + + expect(mutationSpy.mock.calls[2][0].operation.variables.input).toEqual({ + googleAccountId: googleAccount.id, + googleIntegration: { + calendarId: 'calendarsID', + calendarIntegrations: ['Appointment'], + overwrite: true, + }, + googleIntegrationId: googleIntegration.id, + }); + + expect(handleClose).toHaveBeenCalled(); + }); + }); + + it('should update calendar checkboxes', async () => { + googleIntegration.calendarId = 'calendarsID'; + const mutationSpy = jest.fn(); + let getByText, getByRole, getByTestId; + await act(async () => { + const { + getByText: getByTextFromRender, + getByRole: getByRoleFromRender, + getByTestId: getByTestIdFromRender, + } = render( + Components( + + mocks={{ + GetGoogleAccountIntegrations: { + getGoogleAccountIntegrations: [googleIntegration], + }, + GetIntegrationActivities: { + constant: { + activities: [ + { + id: 'Call', + value: 'Call', + __typename: 'IdValue', + }, + { + id: 'Appointment', + value: 'Appointment', + __typename: 'IdValue', + }, + { + id: 'Email', + value: 'Email', + __typename: 'IdValue', + }, + ], + }, + }, + }} + onCall={mutationSpy} + > + + , + ), + ); + + getByText = getByTextFromRender; + getByRole = getByRoleFromRender; + getByTestId = getByTestIdFromRender; + }); + + await waitFor(() => + expect( + getByText(/choose a calendar for mpdx to push tasks to:/i), + ).toBeInTheDocument(), + ); + + userEvent.click(getByTestId('Call-Checkbox')); + userEvent.click(getByRole('button', { name: /update/i })); + + await waitFor(() => { + expect(mockEnqueue).toHaveBeenCalledWith( + 'Updated Google Calendar Integration!', + { + variant: 'success', + }, + ); + expect(mutationSpy.mock.calls[2][0].operation.operationName).toEqual( + 'UpdateGoogleIntegration', + ); + + expect(mutationSpy.mock.calls[2][0].operation.variables.input).toEqual({ + googleAccountId: googleAccount.id, + googleIntegration: { + calendarId: 'calendarsID', + calendarIntegrations: ['Appointment', 'Call'], + overwrite: true, + }, + googleIntegrationId: googleIntegration.id, + }); + + expect(handleClose).toHaveBeenCalled(); + }); + }); + + it('should delete Calendar Integration', async () => { + const mutationSpy = jest.fn(); + const { getByText, getByRole } = render( + Components( + + mocks={{ + GetGoogleAccountIntegrations: { + getGoogleAccountIntegrations: [googleIntegration], + }, + }} + onCall={mutationSpy} + > + + , + ), + ); + + await waitFor(() => + expect( + getByText(/choose a calendar for mpdx to push tasks to:/i), + ).toBeInTheDocument(), + ); + + userEvent.click( + getByRole('button', { name: /Disable Calendar Integration/i }), + ); + + await waitFor(() => { + expect(mockEnqueue).toHaveBeenCalledWith( + 'Disabled Google Calendar Integration!', + { + variant: 'success', + }, + ); + expect(mutationSpy.mock.calls[2][0].operation.operationName).toEqual( + 'UpdateGoogleIntegration', + ); + expect(mutationSpy.mock.calls[2][0].operation.variables.input).toEqual({ + googleAccountId: googleAccount.id, + googleIntegration: { + calendarIntegration: false, + overwrite: true, + }, + googleIntegrationId: googleIntegration.id, + }); + }); + }); + + it('should sync Calendar Integration', async () => { + const mutationSpy = jest.fn(); + const { getByText, getByRole } = render( + Components( + + mocks={{ + GetGoogleAccountIntegrations: { + getGoogleAccountIntegrations: [googleIntegration], + }, + }} + onCall={mutationSpy} + > + + , + ), + ); + + await waitFor(() => + expect( + getByText(/choose a calendar for mpdx to push tasks to:/i), + ).toBeInTheDocument(), + ); + + userEvent.click(getByRole('button', { name: /sync calendar/i })); + + await waitFor(() => { + expect(mockEnqueue).toHaveBeenCalledWith( + 'Successfully Synced Calendar!', + { + variant: 'success', + }, + ); + expect(mutationSpy.mock.calls[2][0].operation.operationName).toEqual( + 'SyncGoogleAccount', + ); + expect(mutationSpy.mock.calls[2][0].operation.variables.input).toEqual({ + googleAccountId: googleAccount.id, + integrationName: 'calendar', + googleIntegrationId: googleIntegration.id, + }); + }); + }); +}); diff --git a/src/components/Settings/integrations/Google/Modals/EditGoogleAccountModal.tsx b/src/components/Settings/integrations/Google/Modals/EditGoogleAccountModal.tsx index dd0a39d6b..26fc117e9 100644 --- a/src/components/Settings/integrations/Google/Modals/EditGoogleAccountModal.tsx +++ b/src/components/Settings/integrations/Google/Modals/EditGoogleAccountModal.tsx @@ -19,7 +19,7 @@ import { CancelButton, ActionButton, } from 'src/components/common/Modal/ActionButtons/ActionButtons'; -import { GoogleAccountAttributes } from '../../../../../../graphql/types.generated'; +import { GoogleAccountAttributesSlimmed } from '../GoogleAccordian'; import { useGetGoogleAccountIntegrationsQuery, GetGoogleAccountIntegrationsDocument, @@ -32,7 +32,7 @@ import { EditGoogleIntegrationForm } from './EditGoogleIntegrationForm'; interface EditGoogleAccountModalProps { handleClose: () => void; - account: GoogleAccountAttributes; + account: GoogleAccountAttributesSlimmed; oAuth: string; } @@ -213,6 +213,7 @@ export const EditGoogleAccountModal: React.FC = ({ setIsSubmitting={setIsSubmitting} account={account} handleToogleCalendarIntegration={handleToogleCalendarIntegration} + handleClose={handleClose} /> )} @@ -264,14 +265,16 @@ export const EditGoogleAccountModal: React.FC = ({ )} - {tabSelected === tabs.setup && googleAccountDetails?.calendarIntegration && ( + {tabSelected === tabs.setup && ( - + )} diff --git a/src/components/Settings/integrations/Google/Modals/EditGoogleIntegrationForm.tsx b/src/components/Settings/integrations/Google/Modals/EditGoogleIntegrationForm.tsx index 1b4b364ef..69a3b1591 100644 --- a/src/components/Settings/integrations/Google/Modals/EditGoogleIntegrationForm.tsx +++ b/src/components/Settings/integrations/Google/Modals/EditGoogleIntegrationForm.tsx @@ -16,10 +16,7 @@ import { } from '@mui/material'; import { Box } from '@mui/system'; import { useAccountListId } from 'src/hooks/useAccountListId'; -import { - GoogleAccountAttributes, - GoogleAccountIntegration, -} from '../../../../../../graphql/types.generated'; +import { GoogleAccountIntegration } from '../../../../../../graphql/types.generated'; import { SubmitButton, DeleteButton, @@ -30,16 +27,19 @@ import { useGetIntegrationActivitiesQuery, } from './googleIntegrations.generated'; import { useUpdateGoogleIntegrationMutation } from './updateGoogleIntegration.generated'; +import { GoogleAccountAttributesSlimmed } from '../GoogleAccordian'; +type GoogleAccountIntegrationSlimmed = Pick< + GoogleAccountIntegration, + 'calendarId' | 'id' | 'calendarIntegrations' | 'calendars' +>; interface EditGoogleIntegrationFormProps { - account: GoogleAccountAttributes; - googleAccountDetails: Pick< - GoogleAccountIntegration, - 'calendarId' | 'id' | 'calendarIntegrations' | 'calendars' - >; + account: GoogleAccountAttributesSlimmed; + googleAccountDetails: GoogleAccountIntegrationSlimmed; loading: boolean; setIsSubmitting: (boolean) => void; handleToogleCalendarIntegration: (boolean) => void; + handleClose: () => void; } const StyledBox = styled(Box)(() => ({ @@ -64,6 +64,7 @@ export const EditGoogleIntegrationForm: React.FC< loading, setIsSubmitting, handleToogleCalendarIntegration, + handleClose, }) => { const { t } = useTranslation(); const accountListId = useAccountListId(); @@ -74,35 +75,26 @@ export const EditGoogleIntegrationForm: React.FC< const { data: actvitiesData } = useGetIntegrationActivitiesQuery(); const actvities = actvitiesData?.constant?.activities; - const IntegrationSchema: yup.SchemaOf< - Pick< - GoogleAccountIntegration, - 'calendarId' | 'id' | 'calendarIntegrations' | 'calendars' - > - > = yup.object({ - id: yup.string().required(), - calendarId: yup.string().required(), - calendarIntegrations: yup.array().of(yup.string().required()).required(), - calendars: yup - .array() - .of( - yup.object({ - __typename: yup - .string() - .equals(['GoogleAccountIntegrationCalendars']), - id: yup.string().required(), - name: yup.string().required(), - }), - ) - .required(), - }); + const IntegrationSchema: yup.SchemaOf = + yup.object({ + id: yup.string().required(), + calendarId: yup.string().required(), + calendarIntegrations: yup.array().of(yup.string().required()).required(), + calendars: yup + .array() + .of( + yup.object({ + __typename: yup + .string() + .equals(['GoogleAccountIntegrationCalendars']), + id: yup.string().required(), + name: yup.string().required(), + }), + ) + .required(), + }); - const onSubmit = async ( - attributes: Pick< - GoogleAccountIntegration, - 'calendarId' | 'id' | 'calendarIntegrations' | 'calendars' - >, - ) => { + const onSubmit = async (attributes: GoogleAccountIntegrationSlimmed) => { setIsSubmitting(true); const googleIntegration = { calendarId: attributes.calendarId, @@ -144,6 +136,7 @@ export const EditGoogleIntegrationForm: React.FC< enqueueSnackbar(t('Updated Google Calendar Integration!'), { variant: 'success', }); + handleClose(); }; return ( @@ -206,7 +199,7 @@ export const EditGoogleIntegrationForm: React.FC< {actvities?.map((activity) => { if (!activity?.id || !activity?.value) return null; - const activityId = `${activity.value} Checkbox`; + const activityId = `${activity.value}-Checkbox`; const isChecked = calendarIntegrations.includes( activity?.id ?? '', ); @@ -216,7 +209,7 @@ export const EditGoogleIntegrationForm: React.FC< control={ { let newCalendarInetgrations; From 1a411a51e749e26eb3d5eef91b6479ddc252db09 Mon Sep 17 00:00:00 2001 From: Daniel Bisgrove Date: Wed, 30 Aug 2023 11:39:12 -0400 Subject: [PATCH 097/103] Fixing lint issues --- .../Mailchimp/getMailchimpAccount/datahandler.ts | 2 +- .../integrations/Mailchimp/MailchimpAccordian.test.tsx | 3 ++- .../Settings/integrations/Mailchimp/MailchimpAccordian.tsx | 4 +++- .../Task/Modal/Comments/Item/TaskModalCommentListItem.tsx | 3 ++- 4 files changed, 8 insertions(+), 4 deletions(-) diff --git a/pages/api/Schema/Settings/Preferences/Intergrations/Mailchimp/getMailchimpAccount/datahandler.ts b/pages/api/Schema/Settings/Preferences/Intergrations/Mailchimp/getMailchimpAccount/datahandler.ts index 407eff05b..f386f47d3 100644 --- a/pages/api/Schema/Settings/Preferences/Intergrations/Mailchimp/getMailchimpAccount/datahandler.ts +++ b/pages/api/Schema/Settings/Preferences/Intergrations/Mailchimp/getMailchimpAccount/datahandler.ts @@ -33,7 +33,7 @@ interface GetMailchimpAccountCamel { active: boolean; autoLogCampaigns: boolean; createdAt: string; - listsAvailableForNewsletters: GetMailchimpAccountNewsletters; + listsAvailableForNewsletters: GetMailchimpAccountNewsletters[]; listsLink: string; listsPresent: boolean; primaryListId: string; diff --git a/src/components/Settings/integrations/Mailchimp/MailchimpAccordian.test.tsx b/src/components/Settings/integrations/Mailchimp/MailchimpAccordian.test.tsx index ee96c8005..84b66f650 100644 --- a/src/components/Settings/integrations/Mailchimp/MailchimpAccordian.test.tsx +++ b/src/components/Settings/integrations/Mailchimp/MailchimpAccordian.test.tsx @@ -8,6 +8,7 @@ import theme from '../../../../theme'; import { IntegrationsContextProvider } from 'pages/accountLists/[accountListId]/settings/integrations.page'; import { MailchimpAccordian } from './MailchimpAccordian'; import { GetMailchimpAccountQuery } from './MailchimpAccount.generated'; +import * as Types from '../../../../../graphql/types.generated'; jest.mock('next-auth/react'); @@ -45,7 +46,7 @@ const Components = (children: React.ReactElement) => ( ); -const standardMailchimpAccount = { +const standardMailchimpAccount: Types.MailchimpAccount = { __typename: 'MailchimpAccount', id: '123456789', active: true, diff --git a/src/components/Settings/integrations/Mailchimp/MailchimpAccordian.tsx b/src/components/Settings/integrations/Mailchimp/MailchimpAccordian.tsx index aa5b92509..580d14846 100644 --- a/src/components/Settings/integrations/Mailchimp/MailchimpAccordian.tsx +++ b/src/components/Settings/integrations/Mailchimp/MailchimpAccordian.tsx @@ -82,7 +82,9 @@ export const MailchimpAccordian: React.FC = ({ skip: !accountListId, }); - const mailchimpAccount = data?.getMailchimpAccount[0]; + const mailchimpAccount = data?.getMailchimpAccount + ? data.getMailchimpAccount[0] + : null; useEffect(() => { setOAuth( diff --git a/src/components/Task/Modal/Comments/Item/TaskModalCommentListItem.tsx b/src/components/Task/Modal/Comments/Item/TaskModalCommentListItem.tsx index 53a7a1848..3ccc49e9f 100644 --- a/src/components/Task/Modal/Comments/Item/TaskModalCommentListItem.tsx +++ b/src/components/Task/Modal/Comments/Item/TaskModalCommentListItem.tsx @@ -91,7 +91,8 @@ const TaskModalCommentsListItem: React.FC = ({ return ( - {comment?.person.firstName} {comment?.person.lastName}{' '} + {comment?.person && + `${comment.person.firstName} ${comment.person.lastName} `} From 3cd79dd63a623b92ca63f368f110a28b0e26d393 Mon Sep 17 00:00:00 2001 From: Daniel Bisgrove Date: Fri, 1 Sep 2023 16:46:17 -0400 Subject: [PATCH 098/103] Prayerletters, Mailchimp Proxy GraphQL and components and integrating GraphQL for Organizations. --- .../settings/integrations.page.tsx | 108 +------ .../Chalkine/sendToChalkline/datahandler.ts | 3 + .../Chalkine/sendToChalkline/resolvers.ts | 15 + .../sendToChalkline/sendToChalkline.graphql | 7 + .../deletePrayerlettersAccount/datahandler.ts | 3 + .../deletePrayerlettersAccount.graphql | 7 + .../deletePrayerlettersAccount/resolvers.ts | 15 + .../getPrayerlettersAccount/datahandler.ts | 32 ++ .../getPrayerlettersAccount.graphql | 13 + .../getPrayerlettersAccount/resolvers.ts | 15 + .../syncPrayerlettersAccount/datahandler.ts | 3 + .../syncPrayerlettersAccount/resolvers.ts | 15 + .../syncPrayerlettersAccount.graphql | 7 + .../api/Schema/SubgraphSchema/Integrations.ts | 34 ++ pages/api/graphql-rest.page.ts | 47 +++ .../Chalkline/SendToChalkine.graphql | 3 + .../integrations/Google/GoogleAccordian.tsx | 28 +- .../Modals/DeleteGoogleAccountModal.tsx | 72 +++-- .../Mailchimp/MailchimpAccordian.test.tsx | 12 + .../Mailchimp/MailchimpAccordian.tsx | 54 ++-- .../Mailchimp/Modals/DeleteMailchimpModal.tsx | 81 +++++ .../OrganizationAddAccountModal.tsx | 300 ------------------ .../OrganizationImportDataSyncModal.tsx | 134 -------- .../Organization/Organizations.graphql | 53 ++++ .../Modals/DeletePrayerlettersModal.tsx | 81 +++++ .../PrayerlettersAccordian.test.tsx | 283 +++++++++++++++++ .../Prayerletters/PrayerlettersAccordian.tsx | 203 ++++++++++++ .../PrayerlettersAccount.graphql | 13 + .../integrations/integrationsHelper.ts | 20 ++ .../MultiPageMenu/MultiPageMenuItems.ts | 2 +- src/lib/getErrorFromCatch.ts | 6 + 31 files changed, 1053 insertions(+), 616 deletions(-) create mode 100644 pages/api/Schema/Settings/Preferences/Intergrations/Chalkine/sendToChalkline/datahandler.ts create mode 100644 pages/api/Schema/Settings/Preferences/Intergrations/Chalkine/sendToChalkline/resolvers.ts create mode 100644 pages/api/Schema/Settings/Preferences/Intergrations/Chalkine/sendToChalkline/sendToChalkline.graphql create mode 100644 pages/api/Schema/Settings/Preferences/Intergrations/Prayerletters/deletePrayerlettersAccount/datahandler.ts create mode 100644 pages/api/Schema/Settings/Preferences/Intergrations/Prayerletters/deletePrayerlettersAccount/deletePrayerlettersAccount.graphql create mode 100644 pages/api/Schema/Settings/Preferences/Intergrations/Prayerletters/deletePrayerlettersAccount/resolvers.ts create mode 100644 pages/api/Schema/Settings/Preferences/Intergrations/Prayerletters/getPrayerlettersAccount/datahandler.ts create mode 100644 pages/api/Schema/Settings/Preferences/Intergrations/Prayerletters/getPrayerlettersAccount/getPrayerlettersAccount.graphql create mode 100644 pages/api/Schema/Settings/Preferences/Intergrations/Prayerletters/getPrayerlettersAccount/resolvers.ts create mode 100644 pages/api/Schema/Settings/Preferences/Intergrations/Prayerletters/syncPrayerlettersAccount/datahandler.ts create mode 100644 pages/api/Schema/Settings/Preferences/Intergrations/Prayerletters/syncPrayerlettersAccount/resolvers.ts create mode 100644 pages/api/Schema/Settings/Preferences/Intergrations/Prayerletters/syncPrayerlettersAccount/syncPrayerlettersAccount.graphql create mode 100644 src/components/Settings/integrations/Chalkline/SendToChalkine.graphql create mode 100644 src/components/Settings/integrations/Mailchimp/Modals/DeleteMailchimpModal.tsx delete mode 100644 src/components/Settings/integrations/Organization/OrganizationAddAccountModal.tsx delete mode 100644 src/components/Settings/integrations/Organization/OrganizationImportDataSyncModal.tsx create mode 100644 src/components/Settings/integrations/Prayerletters/Modals/DeletePrayerlettersModal.tsx create mode 100644 src/components/Settings/integrations/Prayerletters/PrayerlettersAccordian.test.tsx create mode 100644 src/components/Settings/integrations/Prayerletters/PrayerlettersAccordian.tsx create mode 100644 src/components/Settings/integrations/Prayerletters/PrayerlettersAccount.graphql create mode 100644 src/components/Settings/integrations/integrationsHelper.ts create mode 100644 src/lib/getErrorFromCatch.ts diff --git a/pages/accountLists/[accountListId]/settings/integrations.page.tsx b/pages/accountLists/[accountListId]/settings/integrations.page.tsx index 60ca640a0..eb665f323 100644 --- a/pages/accountLists/[accountListId]/settings/integrations.page.tsx +++ b/pages/accountLists/[accountListId]/settings/integrations.page.tsx @@ -5,28 +5,12 @@ import { suggestArticles } from 'src/lib/helpScout'; import { GetServerSideProps } from 'next'; import { getSession } from 'next-auth/react'; import { AccordionGroup } from 'src/components/Shared/Forms/Accordions/AccordionGroup'; -import { AccordionItem } from 'src/components/Shared/Forms/Accordions/AccordionItem'; -import { styled } from '@mui/material/styles'; -import { Button, Typography, List, ListItemText, Alert } from '@mui/material'; -import { StyledFormLabel } from '../../../../src/components/Shared/Forms/Field'; -import { Confirmation } from 'src/components/common/Modal/Confirmation/Confirmation'; import { TheKeyAccordian } from 'src/components/Settings/integrations/Key/TheKeyAccordian'; import { OrganizationAccordian } from 'src/components/Settings/integrations/Organization/OrganizationAccordian'; import { GoogleAccordian } from 'src/components/Settings/integrations/Google/GoogleAccordian'; import { MailchimpAccordian } from 'src/components/Settings/integrations/Mailchimp/MailchimpAccordian'; - -export const StyledListItem = styled(ListItemText)(() => ({ - display: 'list-item', -})); - -export const StyledList = styled(List)(({ theme }) => ({ - listStyleType: 'disc', - paddingLeft: theme.spacing(4), -})); - -export const StyledServicesButton = styled(Button)(({ theme }) => ({ - marginTop: theme.spacing(2), -})); +import { PrayerlettersAccordian } from 'src/components/Settings/integrations/Prayerletters/PrayerlettersAccordian'; +import { ChalklineAccordian } from 'src/components/Settings/integrations/Chalkline/ChalklineAccordian'; interface Props { apiToken: string; @@ -57,8 +41,6 @@ const Integrations = ({ apiToken, selectedTab }: Props): ReactElement => { const { t } = useTranslation(); const [expandedPanel, setExpandedPanel] = useState(''); - const [confirmingChalkLine, setConfirmingChalkLine] = useState(false); - useEffect(() => { suggestArticles('HS_SETTINGS_SERVICES_SUGGESTIONS'); setExpandedPanel(selectedTab); @@ -69,17 +51,6 @@ const Integrations = ({ apiToken, selectedTab }: Props): ReactElement => { setExpandedPanel(expandedPanel === panelLowercase ? '' : panelLowercase); }; - const sendListToChalkLine = () => { - // eslint-disable-next-line no-console - console.log('Sending newsletter list to Chalk Line'); - - return new Promise((resolve) => { - setTimeout(() => { - resolve('foo'); - }, 300); - }); - }; - return ( { handleAccordionChange={handleAccordionChange} expandedPanel={expandedPanel} /> - - } - > - PrayerLetters.com Overview - - prayerletters.com is a significant way to save valuable ministry - time while more effectively connecting with your partners. Keep - your physical newsletter list up to date in MPDX and then sync it - to your prayerletters.com account with this integration. - - - By clicking "Connect prayerletters.com Account" you will - replace your entire prayerletters.com list with what is in MPDX. - Any contacts or information that are in your current - prayerletters.com list that are not in MPDX will be deleted. We - strongly recommend only making changes in MPDX. - - - {t('Connect prayerletters.com Account')} - - - + - } - > - Chalk Line Overview - - Chalkline is a significant way to save valuable ministry time - while more effectively connecting with your partners. Send - physical newsletters to your current list using Chalkline with a - simple click. Chalkline is a one way send available anytime you’re - ready to send a new newsletter out. - - { - event.preventDefault(); - setConfirmingChalkLine(true); - }} - > - {t('Send my current Contacts to Chalk Line')} - - + /> - setConfirmingChalkLine(false)} - mutation={sendListToChalkLine} - /> ); @@ -185,7 +95,7 @@ export const getServerSideProps: GetServerSideProps = async ({ req, }) => { const session = await getSession({ req }); - const apiToken = session?.user.apiToken; + const apiToken = session?.user?.apiToken ?? null; const selectedTab = query?.selectedTab ?? ''; return { diff --git a/pages/api/Schema/Settings/Preferences/Intergrations/Chalkine/sendToChalkline/datahandler.ts b/pages/api/Schema/Settings/Preferences/Intergrations/Chalkine/sendToChalkline/datahandler.ts new file mode 100644 index 000000000..33d68440d --- /dev/null +++ b/pages/api/Schema/Settings/Preferences/Intergrations/Chalkine/sendToChalkline/datahandler.ts @@ -0,0 +1,3 @@ +export const SendToChalkline = (): string => { + return 'success'; +}; diff --git a/pages/api/Schema/Settings/Preferences/Intergrations/Chalkine/sendToChalkline/resolvers.ts b/pages/api/Schema/Settings/Preferences/Intergrations/Chalkine/sendToChalkline/resolvers.ts new file mode 100644 index 000000000..f60d9e844 --- /dev/null +++ b/pages/api/Schema/Settings/Preferences/Intergrations/Chalkine/sendToChalkline/resolvers.ts @@ -0,0 +1,15 @@ +import { Resolvers } from '../../../../../../graphql-rest.page.generated'; + +const SendToChalklineResolvers: Resolvers = { + Mutation: { + sendToChalkline: async ( + _source, + { input: { accountListId } }, + { dataSources }, + ) => { + return dataSources.mpdxRestApi.sendToChalkline(accountListId); + }, + }, +}; + +export { SendToChalklineResolvers }; diff --git a/pages/api/Schema/Settings/Preferences/Intergrations/Chalkine/sendToChalkline/sendToChalkline.graphql b/pages/api/Schema/Settings/Preferences/Intergrations/Chalkine/sendToChalkline/sendToChalkline.graphql new file mode 100644 index 000000000..6beaa05d3 --- /dev/null +++ b/pages/api/Schema/Settings/Preferences/Intergrations/Chalkine/sendToChalkline/sendToChalkline.graphql @@ -0,0 +1,7 @@ +extend type Mutation { + sendToChalkline(input: SendToChalklineInput!): String! +} + +input SendToChalklineInput { + accountListId: ID! +} diff --git a/pages/api/Schema/Settings/Preferences/Intergrations/Prayerletters/deletePrayerlettersAccount/datahandler.ts b/pages/api/Schema/Settings/Preferences/Intergrations/Prayerletters/deletePrayerlettersAccount/datahandler.ts new file mode 100644 index 000000000..1c5db913f --- /dev/null +++ b/pages/api/Schema/Settings/Preferences/Intergrations/Prayerletters/deletePrayerlettersAccount/datahandler.ts @@ -0,0 +1,3 @@ +export const DeletePrayerlettersAccount = (): string => { + return 'success'; +}; diff --git a/pages/api/Schema/Settings/Preferences/Intergrations/Prayerletters/deletePrayerlettersAccount/deletePrayerlettersAccount.graphql b/pages/api/Schema/Settings/Preferences/Intergrations/Prayerletters/deletePrayerlettersAccount/deletePrayerlettersAccount.graphql new file mode 100644 index 000000000..f4837df8f --- /dev/null +++ b/pages/api/Schema/Settings/Preferences/Intergrations/Prayerletters/deletePrayerlettersAccount/deletePrayerlettersAccount.graphql @@ -0,0 +1,7 @@ +extend type Mutation { + deletePrayerlettersAccount(input: DeletePrayerlettersAccountInput!): String! +} + +input DeletePrayerlettersAccountInput { + accountListId: ID! +} diff --git a/pages/api/Schema/Settings/Preferences/Intergrations/Prayerletters/deletePrayerlettersAccount/resolvers.ts b/pages/api/Schema/Settings/Preferences/Intergrations/Prayerletters/deletePrayerlettersAccount/resolvers.ts new file mode 100644 index 000000000..00c3c7df0 --- /dev/null +++ b/pages/api/Schema/Settings/Preferences/Intergrations/Prayerletters/deletePrayerlettersAccount/resolvers.ts @@ -0,0 +1,15 @@ +import { Resolvers } from '../../../../../../graphql-rest.page.generated'; + +const DeletePrayerlettersAccountResolvers: Resolvers = { + Mutation: { + deletePrayerlettersAccount: async ( + _source, + { input: { accountListId } }, + { dataSources }, + ) => { + return dataSources.mpdxRestApi.deletePrayerlettersAccount(accountListId); + }, + }, +}; + +export { DeletePrayerlettersAccountResolvers }; diff --git a/pages/api/Schema/Settings/Preferences/Intergrations/Prayerletters/getPrayerlettersAccount/datahandler.ts b/pages/api/Schema/Settings/Preferences/Intergrations/Prayerletters/getPrayerlettersAccount/datahandler.ts new file mode 100644 index 000000000..694d77e2b --- /dev/null +++ b/pages/api/Schema/Settings/Preferences/Intergrations/Prayerletters/getPrayerlettersAccount/datahandler.ts @@ -0,0 +1,32 @@ +export interface GetPrayerlettersAccountResponse { + attributes: Omit; + id: string; + type: string; +} + +interface GetPrayerlettersAccount { + id: string; + created_at: string; + updated_at: string; + updated_in_db_at; + valid_token: boolean; +} + +interface GetPrayerlettersAccountCamel { + id: string; + validToken: boolean; +} + +export const GetPrayerlettersAccount = ( + data: GetPrayerlettersAccountResponse | null, +): GetPrayerlettersAccountCamel[] => { + // Returning inside an array so I can mock an empty response from GraphQL + // without the test thinking I want it to create custom random test data. + if (!data) return []; + return [ + { + id: data.id, + validToken: data.attributes.valid_token, + }, + ]; +}; diff --git a/pages/api/Schema/Settings/Preferences/Intergrations/Prayerletters/getPrayerlettersAccount/getPrayerlettersAccount.graphql b/pages/api/Schema/Settings/Preferences/Intergrations/Prayerletters/getPrayerlettersAccount/getPrayerlettersAccount.graphql new file mode 100644 index 000000000..3873036ad --- /dev/null +++ b/pages/api/Schema/Settings/Preferences/Intergrations/Prayerletters/getPrayerlettersAccount/getPrayerlettersAccount.graphql @@ -0,0 +1,13 @@ +extend type Query { + getPrayerlettersAccount( + input: PrayerlettersAccountInput! + ): [PrayerlettersAccount] +} + +input PrayerlettersAccountInput { + accountListId: ID! +} + +type PrayerlettersAccount { + validToken: Boolean! +} diff --git a/pages/api/Schema/Settings/Preferences/Intergrations/Prayerletters/getPrayerlettersAccount/resolvers.ts b/pages/api/Schema/Settings/Preferences/Intergrations/Prayerletters/getPrayerlettersAccount/resolvers.ts new file mode 100644 index 000000000..e55ebda3b --- /dev/null +++ b/pages/api/Schema/Settings/Preferences/Intergrations/Prayerletters/getPrayerlettersAccount/resolvers.ts @@ -0,0 +1,15 @@ +import { Resolvers } from '../../../../../../graphql-rest.page.generated'; + +const GetPrayerlettersAccountResolvers: Resolvers = { + Query: { + getPrayerlettersAccount: async ( + _source, + { input: { accountListId } }, + { dataSources }, + ) => { + return dataSources.mpdxRestApi.getPrayerlettersAccount(accountListId); + }, + }, +}; + +export { GetPrayerlettersAccountResolvers }; diff --git a/pages/api/Schema/Settings/Preferences/Intergrations/Prayerletters/syncPrayerlettersAccount/datahandler.ts b/pages/api/Schema/Settings/Preferences/Intergrations/Prayerletters/syncPrayerlettersAccount/datahandler.ts new file mode 100644 index 000000000..8a6d09ec5 --- /dev/null +++ b/pages/api/Schema/Settings/Preferences/Intergrations/Prayerletters/syncPrayerlettersAccount/datahandler.ts @@ -0,0 +1,3 @@ +export const SyncPrayerlettersAccount = (): string => { + return 'success'; +}; diff --git a/pages/api/Schema/Settings/Preferences/Intergrations/Prayerletters/syncPrayerlettersAccount/resolvers.ts b/pages/api/Schema/Settings/Preferences/Intergrations/Prayerletters/syncPrayerlettersAccount/resolvers.ts new file mode 100644 index 000000000..5e54f3d67 --- /dev/null +++ b/pages/api/Schema/Settings/Preferences/Intergrations/Prayerletters/syncPrayerlettersAccount/resolvers.ts @@ -0,0 +1,15 @@ +import { Resolvers } from '../../../../../../graphql-rest.page.generated'; + +const SyncPrayerlettersAccountResolvers: Resolvers = { + Mutation: { + syncPrayerlettersAccount: async ( + _source, + { input: { accountListId } }, + { dataSources }, + ) => { + return dataSources.mpdxRestApi.syncPrayerlettersAccount(accountListId); + }, + }, +}; + +export { SyncPrayerlettersAccountResolvers }; diff --git a/pages/api/Schema/Settings/Preferences/Intergrations/Prayerletters/syncPrayerlettersAccount/syncPrayerlettersAccount.graphql b/pages/api/Schema/Settings/Preferences/Intergrations/Prayerletters/syncPrayerlettersAccount/syncPrayerlettersAccount.graphql new file mode 100644 index 000000000..763bde47d --- /dev/null +++ b/pages/api/Schema/Settings/Preferences/Intergrations/Prayerletters/syncPrayerlettersAccount/syncPrayerlettersAccount.graphql @@ -0,0 +1,7 @@ +extend type Mutation { + syncPrayerlettersAccount(input: SyncPrayerlettersAccountInput!): String +} + +input SyncPrayerlettersAccountInput { + accountListId: ID! +} diff --git a/pages/api/Schema/SubgraphSchema/Integrations.ts b/pages/api/Schema/SubgraphSchema/Integrations.ts index 1334b7acf..e33d1424a 100644 --- a/pages/api/Schema/SubgraphSchema/Integrations.ts +++ b/pages/api/Schema/SubgraphSchema/Integrations.ts @@ -34,6 +34,24 @@ import { SyncMailchimpAccountResolvers } from '../Settings/Preferences/Intergrat import DeleteMailchimpAccountTypeDefs from '../Settings/Preferences/Intergrations/Mailchimp/deleteMailchimpAccount/deleteMailchimpAccount.graphql'; import { DeleteMailchimpAccountResolvers } from '../Settings/Preferences/Intergrations/Mailchimp/deleteMailchimpAccount/resolvers'; +// Prayerletters INTEGRATION +// +// Get Account +import GetPrayerlettersAccountTypeDefs from '../Settings/Preferences/Intergrations/Prayerletters/getPrayerlettersAccount/getPrayerlettersAccount.graphql'; +import { GetPrayerlettersAccountResolvers } from '../Settings/Preferences/Intergrations/Prayerletters/getPrayerlettersAccount/resolvers'; +// Sync Account +import SyncPrayerlettersAccountTypeDefs from '../Settings/Preferences/Intergrations/Prayerletters/syncPrayerlettersAccount/syncPrayerlettersAccount.graphql'; +import { SyncPrayerlettersAccountResolvers } from '../Settings/Preferences/Intergrations/Prayerletters/syncPrayerlettersAccount/resolvers'; +// Delete Account +import DeletePrayerlettersAccountTypeDefs from '../Settings/Preferences/Intergrations/Prayerletters/deletePrayerlettersAccount/deletePrayerlettersAccount.graphql'; +import { DeletePrayerlettersAccountResolvers } from '../Settings/Preferences/Intergrations/Prayerletters/deletePrayerlettersAccount/resolvers'; + +// Chalkkine INTEGRATION +// +// Get Account +import SendToChalklineTypeDefs from '../Settings/Preferences/Intergrations/Chalkine/sendToChalkline/sendToChalkline.graphql'; +import { SendToChalklineResolvers } from '../Settings/Preferences/Intergrations/Chalkine/sendToChalkline/resolvers'; + export const integrationSchema = [ { typeDefs: GetGoogleAccountsTypeDefs, @@ -75,4 +93,20 @@ export const integrationSchema = [ typeDefs: DeleteMailchimpAccountTypeDefs, resolvers: DeleteMailchimpAccountResolvers, }, + { + typeDefs: GetPrayerlettersAccountTypeDefs, + resolvers: GetPrayerlettersAccountResolvers, + }, + { + typeDefs: SyncPrayerlettersAccountTypeDefs, + resolvers: SyncPrayerlettersAccountResolvers, + }, + { + typeDefs: DeletePrayerlettersAccountTypeDefs, + resolvers: DeletePrayerlettersAccountResolvers, + }, + { + typeDefs: SendToChalklineTypeDefs, + resolvers: SendToChalklineResolvers, + }, ]; diff --git a/pages/api/graphql-rest.page.ts b/pages/api/graphql-rest.page.ts index bf0b3f7c1..9502cc9ca 100644 --- a/pages/api/graphql-rest.page.ts +++ b/pages/api/graphql-rest.page.ts @@ -104,6 +104,13 @@ import { UpdateMailchimpAccount, UpdateMailchimpAccountResponse, } from './Schema/Settings/Preferences/Intergrations/Mailchimp/updateMailchimpAccount/datahandler'; +import { + GetPrayerlettersAccountResponse, + GetPrayerlettersAccount, +} from './Schema/Settings/Preferences/Intergrations/Prayerletters/getPrayerlettersAccount/datahandler'; +import { SyncPrayerlettersAccount } from './Schema/Settings/Preferences/Intergrations/Prayerletters/syncPrayerlettersAccount/datahandler'; +import { DeletePrayerlettersAccount } from './Schema/Settings/Preferences/Intergrations/Prayerletters/deletePrayerlettersAccount/datahandler'; +import { SendToChalkline } from './Schema/Settings/Preferences/Intergrations/Chalkine/sendToChalkline/datahandler'; function camelToSnake(str: string): string { return str.replace(/[A-Z]/g, (letter) => `_${letter.toLowerCase()}`); @@ -963,6 +970,7 @@ class MpdxRestApi extends RESTDataSource { // // async getMailchimpAccount(accountListId) { + // Catch since it will return an error if no account found try { const { data }: { data: GetMailchimpAccountResponse } = await this.get( `account_lists/${accountListId}/mail_chimp_account`, @@ -1008,6 +1016,45 @@ class MpdxRestApi extends RESTDataSource { await this.delete(`account_lists/${accountListId}/mail_chimp_account`); return DeleteMailchimpAccount(); } + + // Prayerletters Integration + // + // + async getPrayerlettersAccount(accountListId) { + // Catch since it will return an error if no account found + try { + const { data }: { data: GetPrayerlettersAccountResponse } = + await this.get(`account_lists/${accountListId}/prayer_letters_account`); + return GetPrayerlettersAccount(data); + } catch { + return GetPrayerlettersAccount(null); + } + } + + async syncPrayerlettersAccount(accountListId) { + await this.get( + `account_lists/${accountListId}/prayer_letters_account/sync`, + ); + return SyncPrayerlettersAccount(); + } + + async deletePrayerlettersAccount(accountListId) { + await this.delete(`account_lists/${accountListId}/prayer_letters_account`); + return DeletePrayerlettersAccount(); + } + + // Chalkline Integration + // + // + + async sendToChalkline(accountListId) { + await this.post(`account_lists/${accountListId}/chalkline_mail`, { + data: { + type: 'chalkline_mails', + }, + }); + return SendToChalkline(); + } } export interface Context { diff --git a/src/components/Settings/integrations/Chalkline/SendToChalkine.graphql b/src/components/Settings/integrations/Chalkline/SendToChalkine.graphql new file mode 100644 index 000000000..24dbb52f9 --- /dev/null +++ b/src/components/Settings/integrations/Chalkline/SendToChalkine.graphql @@ -0,0 +1,3 @@ +mutation SendToChalkline($input: SendToChalklineInput!) { + sendToChalkline(input: $input) +} diff --git a/src/components/Settings/integrations/Google/GoogleAccordian.tsx b/src/components/Settings/integrations/Google/GoogleAccordian.tsx index b7dfd4b72..d286f0e93 100644 --- a/src/components/Settings/integrations/Google/GoogleAccordian.tsx +++ b/src/components/Settings/integrations/Google/GoogleAccordian.tsx @@ -1,15 +1,6 @@ import { useState, useContext, useEffect } from 'react'; import { useTranslation } from 'react-i18next'; -import { - Alert, - Box, - Button, - Card, - List, - ListItemText, - IconButton, - Typography, -} from '@mui/material'; +import { Alert, Box, Card, IconButton, Typography } from '@mui/material'; import Skeleton from '@mui/material/Skeleton'; import { styled } from '@mui/material/styles'; import { AccordionItem } from 'src/components/Shared/Forms/Accordions/AccordionItem'; @@ -27,24 +18,17 @@ import { IntegrationsContextType, } from 'pages/accountLists/[accountListId]/settings/integrations.page'; import HandoffLink from 'src/components/HandoffLink'; +import { + StyledListItem, + StyledList, + StyledServicesButton, +} from '../integrationsHelper'; interface GoogleAccordianProps { handleAccordionChange: (panel: string) => void; expandedPanel: string; } -const StyledListItem = styled(ListItemText)(() => ({ - display: 'list-item', -})); -const StyledList = styled(List)(({ theme }) => ({ - listStyleType: 'disc', - paddingLeft: theme.spacing(4), -})); - -const StyledServicesButton = styled(Button)(({ theme }) => ({ - marginTop: theme.spacing(2), -})); - const EditIconButton = styled(IconButton)(() => ({ color: theme.palette.primary.main, marginLeft: '10px', diff --git a/src/components/Settings/integrations/Google/Modals/DeleteGoogleAccountModal.tsx b/src/components/Settings/integrations/Google/Modals/DeleteGoogleAccountModal.tsx index 631099634..0535cb27b 100644 --- a/src/components/Settings/integrations/Google/Modals/DeleteGoogleAccountModal.tsx +++ b/src/components/Settings/integrations/Google/Modals/DeleteGoogleAccountModal.tsx @@ -35,44 +35,46 @@ export const DeleteGoogleAccountModal: React.FC< const handleDelete = async () => { setIsSubmitting(true); - try { - await deleteGoogleAccount({ - variables: { - input: { - accountId: account.id, - }, - }, - update: (cache) => { - const query = { - query: GoogleAccountsDocument, - }; - const dataFromCache = cache.readQuery(query); - if (dataFromCache) { - const removedAccountFromCache = - dataFromCache?.getGoogleAccounts.filter( - (acc) => acc?.id !== account.id, - ); - const data = { - getGoogleAccounts: [...removedAccountFromCache], - }; - cache.writeQuery({ ...query, data }); - } + await deleteGoogleAccount({ + variables: { + input: { + accountId: account.id, }, - }); + }, + update: (cache) => { + const query = { + query: GoogleAccountsDocument, + }; + const dataFromCache = cache.readQuery(query); + + if (dataFromCache) { + const removedAccountFromCache = + dataFromCache?.getGoogleAccounts.filter( + (acc) => acc?.id !== account.id, + ); + const data = { + getGoogleAccounts: [...removedAccountFromCache], + }; + cache.writeQuery({ ...query, data }); + } + }, + onCompleted: () => { + enqueueSnackbar(t('MPDX removed your integration with Google.'), { + variant: 'success', + }); + handleClose(); + }, + onError: () => { + enqueueSnackbar( + t("MPDX couldn't save your configuration changes for Google."), + { + variant: 'error', + }, + ); + }, + }); - enqueueSnackbar(t('MPDX removed your integration with Google.'), { - variant: 'success', - }); - handleClose(); - } catch { - enqueueSnackbar( - t("MPDX couldn't save your configuration changes for Google."), - { - variant: 'error', - }, - ); - } setIsSubmitting(false); }; diff --git a/src/components/Settings/integrations/Mailchimp/MailchimpAccordian.test.tsx b/src/components/Settings/integrations/Mailchimp/MailchimpAccordian.test.tsx index 84b66f650..bf28355b5 100644 --- a/src/components/Settings/integrations/Mailchimp/MailchimpAccordian.test.tsx +++ b/src/components/Settings/integrations/Mailchimp/MailchimpAccordian.test.tsx @@ -337,6 +337,18 @@ describe('MailchimpAccount', () => { }), ); + await waitFor(() => { + expect( + getByText('Confirm to Disconnect Mailchimp Account'), + ).toBeInTheDocument(); + }); + + userEvent.click( + getByRole('button', { + name: /confirm/i, + }), + ); + await waitFor(() => { expect(mockEnqueue).toHaveBeenCalledWith( 'MPDX removed your integration with MailChimp', diff --git a/src/components/Settings/integrations/Mailchimp/MailchimpAccordian.tsx b/src/components/Settings/integrations/Mailchimp/MailchimpAccordian.tsx index 580d14846..2a34a115b 100644 --- a/src/components/Settings/integrations/Mailchimp/MailchimpAccordian.tsx +++ b/src/components/Settings/integrations/Mailchimp/MailchimpAccordian.tsx @@ -27,18 +27,20 @@ import { GetMailchimpAccountDocument, GetMailchimpAccountQuery, useSyncMailchimpAccountMutation, - useDeleteMailchimpAccountMutation, } from './MailchimpAccount.generated'; import { StyledFormLabel } from 'src/components/Shared/Forms/Field'; import { - StyledListItem, - StyledList, - StyledServicesButton, IntegrationsContext, IntegrationsContextType, } from 'pages/accountLists/[accountListId]/settings/integrations.page'; import { AccordionItem } from 'src/components/Shared/Forms/Accordions/AccordionItem'; import { SubmitButton } from 'src/components/common/Modal/ActionButtons/ActionButtons'; +import { DeleteMailchimpAccountModal } from './Modals/DeleteMailchimpModal'; +import { + StyledListItem, + StyledList, + StyledServicesButton, +} from '../integrationsHelper'; interface MailchimpAccordianProps { handleAccordionChange: (panel: string) => void; @@ -61,6 +63,7 @@ export const MailchimpAccordian: React.FC = ({ const { t } = useTranslation(); const [oAuth, setOAuth] = useState(''); const [showSettings, setShowSettings] = useState(false); + const [showDeleteModal, setShowDeleteModal] = useState(false); const { enqueueSnackbar } = useSnackbar(); const { apiToken } = useContext( IntegrationsContext, @@ -68,7 +71,6 @@ export const MailchimpAccordian: React.FC = ({ const accountListId = useAccountListId(); const [updateMailchimpAccount] = useUpdateMailchimpAccountMutation(); const [syncMailchimpAccount] = useSyncMailchimpAccountMutation(); - const [deleteMailchimpAccount] = useDeleteMailchimpAccountMutation(); const { data, loading, @@ -134,16 +136,18 @@ export const MailchimpAccordian: React.FC = ({ cache.writeQuery({ ...query, data }); } }, + onCompleted: () => { + enqueueSnackbar( + t( + 'Your MailChimp sync has been started. This process may take up to 4 hours to complete.', + ), + { + variant: 'success', + }, + ); + }, }); setShowSettings(false); - enqueueSnackbar( - t( - 'Your MailChimp sync has been started. This process may take up to 4 hours to complete.', - ), - { - variant: 'success', - }, - ); }; const handleSync = async () => { @@ -165,18 +169,10 @@ export const MailchimpAccordian: React.FC = ({ }; const handleShowSettings = () => setShowSettings(true); - const handleDisconnect = async () => { - await deleteMailchimpAccount({ - variables: { - input: { - accountListId: accountListId ?? '', - }, - }, - update: () => refetchGetMailchimpAccount(), - }); - enqueueSnackbar(t('MPDX removed your integration with MailChimp'), { - variant: 'success', - }); + const handleDisconnect = async () => setShowDeleteModal(true); + + const handleDeleteModalClose = () => { + setShowDeleteModal(false); }; const availableNewsletterLists = useMemo(() => { @@ -381,6 +377,14 @@ export const MailchimpAccordian: React.FC = ({ )} + + {showDeleteModal && ( + + )} ); }; diff --git a/src/components/Settings/integrations/Mailchimp/Modals/DeleteMailchimpModal.tsx b/src/components/Settings/integrations/Mailchimp/Modals/DeleteMailchimpModal.tsx new file mode 100644 index 000000000..af015a9d3 --- /dev/null +++ b/src/components/Settings/integrations/Mailchimp/Modals/DeleteMailchimpModal.tsx @@ -0,0 +1,81 @@ +import React, { useState } from 'react'; +import { useTranslation } from 'react-i18next'; +import { useSnackbar } from 'notistack'; +import { styled } from '@mui/material/styles'; +import { DialogContent, DialogActions, Typography } from '@mui/material'; +import Modal from 'src/components/common/Modal/Modal'; +import { + SubmitButton, + CancelButton, +} from 'src/components/common/Modal/ActionButtons/ActionButtons'; +import { useDeleteMailchimpAccountMutation } from '../MailchimpAccount.generated'; + +interface DeleteMailchimpAccountModalProps { + handleClose: () => void; + accountListId: string; + refetchMailchimpAccount: () => void; +} + +const StyledDialogActions = styled(DialogActions)(() => ({ + justifyContent: 'space-between', +})); + +export const DeleteMailchimpAccountModal: React.FC< + DeleteMailchimpAccountModalProps +> = ({ handleClose, accountListId, refetchMailchimpAccount }) => { + const { t } = useTranslation(); + const [isSubmitting, setIsSubmitting] = useState(false); + const { enqueueSnackbar } = useSnackbar(); + + const [deleteMailchimpAccount] = useDeleteMailchimpAccountMutation(); + + const handleDelete = async () => { + setIsSubmitting(true); + + await deleteMailchimpAccount({ + variables: { + input: { + accountListId: accountListId, + }, + }, + update: () => refetchMailchimpAccount(), + onCompleted: () => { + enqueueSnackbar(t('MPDX removed your integration with MailChimp'), { + variant: 'success', + }); + handleClose(); + }, + onError: () => { + enqueueSnackbar( + t("MPDX couldn't save your configuration changes for MailChimp"), + { + variant: 'error', + }, + ); + }, + }); + setIsSubmitting(false); + }; + + return ( + + + + {t(`Are you sure you wish to disconnect your Mailchimp account?`)} + + + + + + + {t('Confirm')} + + + + ); +}; diff --git a/src/components/Settings/integrations/Organization/OrganizationAddAccountModal.tsx b/src/components/Settings/integrations/Organization/OrganizationAddAccountModal.tsx deleted file mode 100644 index b476aa8b5..000000000 --- a/src/components/Settings/integrations/Organization/OrganizationAddAccountModal.tsx +++ /dev/null @@ -1,300 +0,0 @@ -import React, { useState, ReactElement } from 'react'; -import { Formik } from 'formik'; -import * as yup from 'yup'; -import { useTranslation } from 'react-i18next'; -import { - DialogActions, - Autocomplete, - TextField, - Button, - Typography, - Link, -} from '@mui/material'; -import { styled } from '@mui/material/styles'; -import { Box } from '@mui/system'; -import Modal from 'src/components/common/Modal/Modal'; -import { - SubmitButton, - CancelButton, -} from 'src/components/common/Modal/ActionButtons/ActionButtons'; -import { FieldWrapper } from 'src/components/Shared/Forms/FieldWrapper'; -import { useGetOrganizationsQuery } from './Organizations.generated'; -import { showArticle, variables } from 'src/lib/helpScout'; -import { Organization } from '../../../../../graphql/types.generated'; -import theme from 'src/theme'; -import { - getOrganizationType, - OrganizationTypesEnum, -} from './OrganizationAccordian'; -import { oAuth } from './OrganizationService'; - -interface OrganizationAddAccountModalProps { - handleClose: () => void; -} - -const StyledBox = styled(Box)(() => ({ - padding: '0 10px', -})); - -const WarningBox = styled(Box)(() => ({ - padding: '15px', - background: theme.palette.mpdxYellow.main, - maxWidth: 'calc(100% - 20px)', - margin: '10px auto 0', -})); - -const StyledTypography = styled(Typography)(() => ({ - marginTop: '10px', - color: theme.palette.mpdxYellow.dark, -})); - -export const OrganizationAddAccountModal: React.FC< - OrganizationAddAccountModalProps -> = ({ handleClose }) => { - const { t } = useTranslation(); - const [organizationType, setOrganizationType] = - useState(); - const { data: organizations, loading } = useGetOrganizationsQuery(); - - const onSubmit = async (attributes) => { - const { apiClass, oauth, id } = attributes.selectedOrganization; - const type = getOrganizationType(apiClass, oauth); - - if (type === OrganizationTypesEnum.OAUTH) { - window.location.href = await oAuth(id); - return; - } - if (type === OrganizationTypesEnum.LOGIN) { - // TODO - Add GraphQl to Update account by Mutating organization - return; - } - - // TODO - Add GraphQl to creating an account by Mutating organization - - handleClose(); - return; - }; - - const showOrganizationHelp = () => { - showArticle(variables.HS_SETUP_FIND_ORGANIZATION); - }; - - const OrganizationSchema: yup.SchemaOf<{ - selectedOrganization: Pick< - Organization, - 'id' | 'name' | 'oauth' | 'apiClass' | 'giftAidPercentage' - >; - username: string | null | undefined; - password: string | null | undefined; - }> = yup.object({ - selectedOrganization: yup - .object({ - id: yup.string().required(), - apiClass: yup.string().required(), - name: yup.string().required(), - oauth: yup.boolean().required(), - giftAidPercentage: yup.number().nullable(), - }) - .required(), - username: yup - .string() - .when('selectedOrganization', (organization, schema) => { - if ( - getOrganizationType(organization?.apiClass, organization?.oauth) === - OrganizationTypesEnum.LOGIN - ) { - return schema.required('Must enter username'); - } - return schema; - }), - password: yup - .string() - .when('selectedOrganization', (organization, schema) => { - if ( - getOrganizationType(organization?.apiClass, organization?.oauth) === - OrganizationTypesEnum.LOGIN - ) { - return schema.required('Must enter password'); - } - return schema; - }), - }); - - return ( - - - {({ - values: { selectedOrganization, username, password }, - handleChange, - handleSubmit, - setFieldValue, - isSubmitting, - isValid, - }): ReactElement => ( -
- - { - setOrganizationType( - getOrganizationType(value?.apiClass, value?.oauth), - ); - setFieldValue('selectedOrganization', value); - }} - options={ - organizations?.organizations?.map( - (organization) => organization, - ) || [] - } - getOptionLabel={(option) => - organizations?.organizations?.find( - ({ id }) => String(id) === String(option.id), - )?.name ?? '' - } - filterSelectedOptions - fullWidth - renderInput={(params) => ( - - )} - /> - - - {!selectedOrganization && ( - - )} - - {organizationType === OrganizationTypesEnum.MINISTRY && ( - - - {t('You must log into MPDX with your ministry email')} - - - {t( - 'This organization requires you to log into MPDX with your ministry email to access it.', - )} -
    -
  1. - {t('First you need to ')} - - {t( - 'click here to log out of your personal Key account', - )} - -
    2. -
  2. - {t('Next, ')} - - {t('click here to log out of MPDX')} - - {t( - ' so you can log back in with your offical key account.', - )} -
    3. -
- - - {t( - "If you are already logged in using your ministry account, you'll need to contact your donation services team to request access.", - )} - {t( - "Once this is done you'll need to wait 24 hours for MPDX to sync your data.", - )} - - - )} - - {organizationType === OrganizationTypesEnum.OAUTH && ( - - - {t( - "You will be taken to your organization's donation services system to grant MPDX permission to access your donation data.", - )} - - - )} - - {organizationType === OrganizationTypesEnum.LOGIN && ( - <> - - - - - - - - - - - - )} - - - - - {organizationType !== OrganizationTypesEnum.OAUTH && - t('Add Account')} - {organizationType === OrganizationTypesEnum.OAUTH && - t('Connect')} - - -
- )} - - - ); -}; diff --git a/src/components/Settings/integrations/Organization/OrganizationImportDataSyncModal.tsx b/src/components/Settings/integrations/Organization/OrganizationImportDataSyncModal.tsx deleted file mode 100644 index 0995865cb..000000000 --- a/src/components/Settings/integrations/Organization/OrganizationImportDataSyncModal.tsx +++ /dev/null @@ -1,134 +0,0 @@ -import React, { useState } from 'react'; -import { useTranslation } from 'react-i18next'; -import { DialogActions, Typography, Button, Paper, Grid } from '@mui/material'; -import { styled } from '@mui/material/styles'; -import { Box } from '@mui/system'; -import { useSnackbar } from 'notistack'; -import Modal from 'src/components/common/Modal/Modal'; -import { - SubmitButton, - CancelButton, -} from 'src/components/common/Modal/ActionButtons/ActionButtons'; -import theme from 'src/theme'; -import { Organization } from '../../../../../graphql/types.generated'; -import { validateFile } from 'src/components/Shared/FileUploads/tntConnectDataSync'; - -interface OrganizationImportDataSyncModalProps { - handleClose: () => void; - organization?: Omit; -} - -const StyledBox = styled(Box)(() => ({ - padding: '0 10px', -})); - -const StyledTypography = styled(Typography)(() => ({ - marginTop: '10px', -})); - -export const OrganizationImportDataSyncModal: React.FC< - OrganizationImportDataSyncModalProps -> = ({ handleClose, organization }) => { - const { t } = useTranslation(); - const { enqueueSnackbar } = useSnackbar(); - const [isSubmitting, setIsSubmitting] = useState(false); - const [importFile, setImportFile] = useState(null); - - const handleSubmit = (attributes) => { - // TODO - setIsSubmitting(true); - setIsSubmitting(false); - return { - attributes, - organization, - }; - handleClose(); - }; - - const handleFileChange: React.ChangeEventHandler = ( - event, - ) => { - const file = event.target.files?.[0]; - if (!file) return; - - const validationResult = validateFile({ file, t }); - if (!validationResult.success) { - enqueueSnackbar(validationResult.message, { - variant: 'error', - }); - return; - } - setImportFile(file); - }; - - return ( - -
- - - {t( - 'This file should be a TntConnect DataSync file (.tntdatasync or .tntmpd) from your organization, not your local TntConnect database file (.mpddb).', - )} - - - {t( - 'To import your TntConnect database, go to Import from TntConnect', - )} - - - - - - - - - - - {importFile?.name ?? 'No File Chosen'} - - - - - - - - - - - {t('Upload File')} - - -
- - ); -}; diff --git a/src/components/Settings/integrations/Organization/Organizations.graphql b/src/components/Settings/integrations/Organization/Organizations.graphql index 26cea987e..d2e4dd865 100644 --- a/src/components/Settings/integrations/Organization/Organizations.graphql +++ b/src/components/Settings/integrations/Organization/Organizations.graphql @@ -19,5 +19,58 @@ query GetUsersOrganizations { latestDonationDate lastDownloadedAt username + id + } +} + +mutation DeleteOrganizationAccount( + $input: OrganizationAccountDeleteMutationInput! +) { + deleteOrganizationAccount(input: $input) { + clientMutationId + id + } +} + +mutation CreateOrganizationAccount( + $input: OrganizationAccountCreateMutationInput! +) { + createOrganizationAccount(input: $input) { + clientMutationId + organizationAccount { + username + password + person { + id + } + } + } +} + +mutation SyncOrganizationAccount( + $input: OrganizationAccountSyncMutationInput! +) { + syncOrganizationAccount(input: $input) { + organizationAccount { + id + } + } +} + +mutation UpdateOrganizationAccount( + $input: OrganizationAccountUpdateMutationInput! +) { + updateOrganizationAccount(input: $input) { + organizationAccount { + id + organization { + name + id + apiClass + oauth + } + lastDownloadedAt + lastDownload + } } } diff --git a/src/components/Settings/integrations/Prayerletters/Modals/DeletePrayerlettersModal.tsx b/src/components/Settings/integrations/Prayerletters/Modals/DeletePrayerlettersModal.tsx new file mode 100644 index 000000000..99b8f6b64 --- /dev/null +++ b/src/components/Settings/integrations/Prayerletters/Modals/DeletePrayerlettersModal.tsx @@ -0,0 +1,81 @@ +import React, { useState } from 'react'; +import { useTranslation } from 'react-i18next'; +import { useSnackbar } from 'notistack'; +import { styled } from '@mui/material/styles'; +import { DialogContent, DialogActions, Typography } from '@mui/material'; +import Modal from 'src/components/common/Modal/Modal'; +import { + SubmitButton, + CancelButton, +} from 'src/components/common/Modal/ActionButtons/ActionButtons'; +import { useDeletePrayerlettersAccountMutation } from '../PrayerlettersAccount.generated'; + +interface DeletePrayerlettersAccountModalProps { + handleClose: () => void; + accountListId: string; + refetchPrayerlettersAccount: () => void; +} + +const StyledDialogActions = styled(DialogActions)(() => ({ + justifyContent: 'space-between', +})); + +export const DeletePrayerlettersAccountModal: React.FC< + DeletePrayerlettersAccountModalProps +> = ({ handleClose, accountListId, refetchPrayerlettersAccount }) => { + const { t } = useTranslation(); + const [isSubmitting, setIsSubmitting] = useState(false); + const { enqueueSnackbar } = useSnackbar(); + + const [deletePrayerlettersAccount] = useDeletePrayerlettersAccountMutation(); + + const handleDelete = async () => { + setIsSubmitting(true); + try { + await deletePrayerlettersAccount({ + variables: { + input: { + accountListId: accountListId, + }, + }, + update: () => refetchPrayerlettersAccount(), + }); + enqueueSnackbar(t('MPDX removed your integration with Prayer Letters'), { + variant: 'success', + }); + } catch { + enqueueSnackbar( + t("MPDX couldn't save your configuration changes for Prayer Letters"), + { + variant: 'error', + }, + ); + } + setIsSubmitting(false); + handleClose(); + }; + + return ( + + + + {t( + `Are you sure you wish to disconnect this Prayer Letters account?`, + )} + + + + + + + {t('Confirm')} + + + + ); +}; diff --git a/src/components/Settings/integrations/Prayerletters/PrayerlettersAccordian.test.tsx b/src/components/Settings/integrations/Prayerletters/PrayerlettersAccordian.test.tsx new file mode 100644 index 000000000..d659cd765 --- /dev/null +++ b/src/components/Settings/integrations/Prayerletters/PrayerlettersAccordian.test.tsx @@ -0,0 +1,283 @@ +import { render, waitFor } from '@testing-library/react'; +import { SnackbarProvider } from 'notistack'; +import userEvent from '@testing-library/user-event'; +import { ThemeProvider } from '@mui/material/styles'; +import TestRouter from '__tests__/util/TestRouter'; +import { GqlMockedProvider } from '../../../../../__tests__/util/graphqlMocking'; +import theme from '../../../../theme'; +import { IntegrationsContextProvider } from 'pages/accountLists/[accountListId]/settings/integrations.page'; +import { PrayerlettersAccordian } from './PrayerlettersAccordian'; +import { GetPrayerlettersAccountQuery } from './PrayerlettersAccount.generated'; +import * as Types from '../../../../../graphql/types.generated'; + +jest.mock('next-auth/react'); + +const accountListId = 'account-list-1'; +const contactId = 'contact-1'; +const apiToken = 'apiToken'; +const router = { + query: { accountListId, contactId: [contactId] }, + isReady: true, +}; + +const mockEnqueue = jest.fn(); +jest.mock('notistack', () => ({ + // eslint-disable-next-line @typescript-eslint/ban-ts-comment + // @ts-ignore + ...jest.requireActual('notistack'), + useSnackbar: () => { + return { + enqueueSnackbar: mockEnqueue, + }; + }, +})); + +const handleAccordionChange = jest.fn(); + +const Components = (children: React.ReactElement) => ( + + + + + {children} + + + + +); + +const standardPrayerlettersAccount: Types.PrayerlettersAccount = { + __typename: 'PrayerlettersAccount', + validToken: true, +}; + +describe('PrayerlettersAccount', () => { + process.env.OAUTH_URL = 'https://auth.mpdx.org'; + // it('should render accordian closed', async () => { + // const { getByText, queryByRole } = render( + // Components( + // + // + // , + // ), + // ); + // expect(getByText('prayerletters.com')).toBeInTheDocument(); + // const image = queryByRole('img', { + // name: /prayerletters.com/i, + // }); + // expect(image).not.toBeInTheDocument(); + // }); + // it('should render accordian open', async () => { + // const { queryByRole } = render( + // Components( + // + // + // , + // ), + // ); + // const image = queryByRole('img', { + // name: /prayerletters.com/i, + // }); + // expect(image).toBeInTheDocument(); + // }); + + // describe('Not Connected', () => { + // it('should render PrayerLetters.com Overview', async () => { + // const { getByText } = render( + // Components( + // + // mocks={{ + // GetPrayerlettersAccount: { + // getPrayerlettersAccount: [], + // }, + // }} + // > + // + // , + // ), + // ); + + // await waitFor(() => { + // expect(getByText('PrayerLetters.com Overview')).toBeInTheDocument(); + // }); + // userEvent.click(getByText('Connect prayerletters.com Account')); + + // expect(getByText('Connect prayerletters.com Account')).toHaveAttribute( + // 'href', + // `https://auth.mpdx.org/auth/user/prayer_letters?account_list_id=account-list-1&redirect_to=http%3A%2F%2Flocalhost%2FaccountLists%2Faccount-list-1%2Fsettings%2Fintegrations%3FselectedTab%3Dprayerletters.com&access_token=apiToken`, + // ); + // }); + // }); + + describe('Connected', () => { + let prayerlettersAccount = { ...standardPrayerlettersAccount }; + + beforeEach(() => { + prayerlettersAccount = { ...standardPrayerlettersAccount }; + }); + it('is connected but token is not valid', async () => { + prayerlettersAccount.validToken = false; + const mutationSpy = jest.fn(); + const { queryByText, getByText, getByRole } = render( + Components( + + mocks={{ + GetPrayerlettersAccount: { + getPrayerlettersAccount: [prayerlettersAccount], + }, + }} + onCall={mutationSpy} + > + + , + ), + ); + + await waitFor(() => { + expect( + queryByText('Refresh prayerletters.com Account'), + ).toBeInTheDocument(); + }); + + expect(getByText('Refresh prayerletters.com Account')).toHaveAttribute( + 'href', + `https://auth.mpdx.org/auth/user/prayer_letters?account_list_id=account-list-1&redirect_to=http%3A%2F%2Flocalhost%2FaccountLists%2Faccount-list-1%2Fsettings%2Fintegrations%3FselectedTab%3Dprayerletters.com&access_token=apiToken`, + ); + + userEvent.click( + getByRole('button', { + name: /disconnect/i, + }), + ); + + await waitFor(() => { + expect( + queryByText( + 'Are you sure you wish to disconnect this Prayer Letters account?', + ), + ).toBeInTheDocument(); + }); + + userEvent.click( + getByRole('button', { + name: /confirm/i, + }), + ); + + await waitFor(() => { + expect(mockEnqueue).toHaveBeenCalledWith( + 'MPDX removed your integration with Prayer Letters', + { + variant: 'success', + }, + ); + expect(mutationSpy.mock.calls[1][0].operation.operationName).toEqual( + 'DeletePrayerlettersAccount', + ); + expect(mutationSpy.mock.calls[1][0].operation.variables.input).toEqual({ + accountListId: accountListId, + }); + }); + }); + + it('is connected but token is valid', async () => { + const mutationSpy = jest.fn(); + const { queryByText, getByRole } = render( + Components( + + mocks={{ + GetPrayerlettersAccount: { + getPrayerlettersAccount: [prayerlettersAccount], + }, + }} + onCall={mutationSpy} + > + + , + ), + ); + + await waitFor(() => { + expect( + queryByText('We strongly recommend only making changes in MPDX.'), + ).toBeInTheDocument(); + }); + + userEvent.click( + getByRole('button', { + name: /disconnect/i, + }), + ); + await waitFor(() => { + expect( + queryByText( + 'Are you sure you wish to disconnect this Prayer Letters account?', + ), + ).toBeInTheDocument(); + }); + + userEvent.click( + getByRole('button', { + name: /confirm/i, + }), + ); + + await waitFor(() => { + expect(mockEnqueue).toHaveBeenCalledWith( + 'MPDX removed your integration with Prayer Letters', + { + variant: 'success', + }, + ); + expect(mutationSpy.mock.calls[1][0].operation.operationName).toEqual( + 'DeletePrayerlettersAccount', + ); + expect(mutationSpy.mock.calls[1][0].operation.variables.input).toEqual({ + accountListId: accountListId, + }); + }); + + userEvent.click( + getByRole('button', { + name: /sync now/i, + }), + ); + + await waitFor(() => { + expect(mockEnqueue).toHaveBeenCalledWith( + 'MPDX is now syncing your newsletter recipients with Prayer Letters', + { + variant: 'success', + }, + ); + expect(mutationSpy.mock.calls[3][0].operation.operationName).toEqual( + 'SyncPrayerlettersAccount', + ); + expect(mutationSpy.mock.calls[3][0].operation.variables.input).toEqual({ + accountListId: accountListId, + }); + }); + }); + }); +}); diff --git a/src/components/Settings/integrations/Prayerletters/PrayerlettersAccordian.tsx b/src/components/Settings/integrations/Prayerletters/PrayerlettersAccordian.tsx new file mode 100644 index 000000000..bc028c32e --- /dev/null +++ b/src/components/Settings/integrations/Prayerletters/PrayerlettersAccordian.tsx @@ -0,0 +1,203 @@ +import { useState, useContext, useEffect } from 'react'; +import { useTranslation } from 'react-i18next'; +import { useSnackbar } from 'notistack'; +import { Box, Typography, Skeleton, Alert, Button } from '@mui/material'; +import { useAccountListId } from 'src/hooks/useAccountListId'; +import { StyledFormLabel } from 'src/components/Shared/Forms/Field'; +import { + IntegrationsContext, + IntegrationsContextType, +} from 'pages/accountLists/[accountListId]/settings/integrations.page'; +import { AccordionItem } from 'src/components/Shared/Forms/Accordions/AccordionItem'; +import { StyledServicesButton, AccordianProps } from '../integrationsHelper'; +import { + useGetPrayerlettersAccountQuery, + useSyncPrayerlettersAccountMutation, +} from './PrayerlettersAccount.generated'; +import { DeletePrayerlettersAccountModal } from './Modals/DeletePrayerlettersModal'; + +export const PrayerlettersAccordian: React.FC = ({ + handleAccordionChange, + expandedPanel, +}) => { + const { t } = useTranslation(); + const [oAuth, setOAuth] = useState(''); + const [isSaving, setIsSaving] = useState(false); + const [showDeleteModal, setShowDeleteModal] = useState(false); + showDeleteModal; + const { enqueueSnackbar } = useSnackbar(); + const { apiToken } = useContext( + IntegrationsContext, + ) as IntegrationsContextType; + const accountListId = useAccountListId(); + const accordianName = t('prayerletters.com'); + const [syncPrayerlettersAccount] = useSyncPrayerlettersAccountMutation(); + const { + data, + loading, + refetch: refetchPrayerlettersAccount, + } = useGetPrayerlettersAccountQuery({ + variables: { + input: { + accountListId: accountListId ?? '', + }, + }, + skip: expandedPanel !== accordianName, + }); + + const prayerlettersAccount = data?.getPrayerlettersAccount + ? data?.getPrayerlettersAccount[0] + : null; + + useEffect(() => { + setOAuth( + `${ + process.env.OAUTH_URL + }/auth/user/prayer_letters?account_list_id=${accountListId}&redirect_to=${window.encodeURIComponent( + `${window.location.origin}/accountLists/${accountListId}/settings/integrations?selectedTab=prayerletters.com`, + )}&access_token=${apiToken}`, + ); + }, []); + + const handleSync = async () => { + setIsSaving(true); + + await syncPrayerlettersAccount({ + variables: { + input: { + accountListId: accountListId ?? '', + }, + }, + onError: () => { + enqueueSnackbar( + t("MPDX couldn't save your configuration changes for Prayer Letters"), + { + variant: 'error', + }, + ); + }, + onCompleted: () => { + enqueueSnackbar( + t( + 'MPDX is now syncing your newsletter recipients with Prayer Letters', + ), + { + variant: 'success', + }, + ); + }, + }); + + setIsSaving(false); + }; + + const handleDeleteModal = () => { + setShowDeleteModal(false); + }; + + return ( + + } + > + {loading && } + {!loading && !prayerlettersAccount && ( + <> + {t('PrayerLetters.com Overview')} + + {t(`prayerletters.com is a significant way to save valuable ministry + time while more effectively connecting with your partners. Keep your + physical newsletter list up to date in MPDX and then sync it to your + prayerletters.com account with this integration.`)} + + + {t(`By clicking "Connect prayerletters.com Account" you will + replace your entire prayerletters.com list with what is in MPDX. Any + contacts or information that are in your current prayerletters.com + list that are not in MPDX will be deleted. We strongly recommend + only making changes in MPDX.`)} + + + {t('Connect prayerletters.com Account')} + + + )} + {!loading && prayerlettersAccount && !prayerlettersAccount?.validToken && ( + <> + + {t( + 'The link between MPDX and your prayerletters.com account stopped working. Click "Refresh prayerletters.com Account" to re-enable it.', + )} + + + + + + + + + )} + {!loading && prayerlettersAccount && prayerlettersAccount?.validToken && ( + <> + + + {t( + `By clicking "Sync Now" you will replace your entire prayerletters.com list with what is in MPDX. + Any contacts or information that are in your current prayerletters.com list that are not in MPDX + will be deleted.`, + )} + + + {t('We strongly recommend only making changes in MPDX.')} + + + + + + + + + + )} + {showDeleteModal && ( + + )} + + ); +}; diff --git a/src/components/Settings/integrations/Prayerletters/PrayerlettersAccount.graphql b/src/components/Settings/integrations/Prayerletters/PrayerlettersAccount.graphql new file mode 100644 index 000000000..23c367da3 --- /dev/null +++ b/src/components/Settings/integrations/Prayerletters/PrayerlettersAccount.graphql @@ -0,0 +1,13 @@ +query GetPrayerlettersAccount($input: PrayerlettersAccountInput!) { + getPrayerlettersAccount(input: $input) { + validToken + } +} + +mutation SyncPrayerlettersAccount($input: SyncPrayerlettersAccountInput!) { + syncPrayerlettersAccount(input: $input) +} + +mutation DeletePrayerlettersAccount($input: DeletePrayerlettersAccountInput!) { + deletePrayerlettersAccount(input: $input) +} diff --git a/src/components/Settings/integrations/integrationsHelper.ts b/src/components/Settings/integrations/integrationsHelper.ts new file mode 100644 index 000000000..14918131a --- /dev/null +++ b/src/components/Settings/integrations/integrationsHelper.ts @@ -0,0 +1,20 @@ +import { styled } from '@mui/material/styles'; +import { Button, List, ListItemText } from '@mui/material'; + +export const StyledListItem = styled(ListItemText)(() => ({ + display: 'list-item', +})); + +export const StyledList = styled(List)(({ theme }) => ({ + listStyleType: 'disc', + paddingLeft: theme.spacing(4), +})); + +export const StyledServicesButton = styled(Button)(({ theme }) => ({ + marginTop: theme.spacing(2), +})); + +export interface AccordianProps { + handleAccordionChange: (panel: string) => void; + expandedPanel: string; +} diff --git a/src/components/Shared/MultiPageLayout/MultiPageMenu/MultiPageMenuItems.ts b/src/components/Shared/MultiPageLayout/MultiPageMenu/MultiPageMenuItems.ts index 6a520da1f..ac884dd94 100644 --- a/src/components/Shared/MultiPageLayout/MultiPageMenu/MultiPageMenuItems.ts +++ b/src/components/Shared/MultiPageLayout/MultiPageMenu/MultiPageMenuItems.ts @@ -45,7 +45,7 @@ export const SettingsNavItems = [ title: 'Notifications', }, { - id: 'connectServices', + id: 'integrations', title: 'Connect Services', }, { diff --git a/src/lib/getErrorFromCatch.ts b/src/lib/getErrorFromCatch.ts new file mode 100644 index 000000000..65972171c --- /dev/null +++ b/src/lib/getErrorFromCatch.ts @@ -0,0 +1,6 @@ +export const getErrorMessage = (err: unknown) => { + let message; + if (err instanceof Error) message = err.message; + else message = String(err); + return message; +}; From fd3ec52d03f6d5c6e25d2b1e067165820105d45e Mon Sep 17 00:00:00 2001 From: Daniel Bisgrove Date: Fri, 1 Sep 2023 16:58:54 -0400 Subject: [PATCH 099/103] Import Data to Organization API and Chalkline components --- pages/api/uploads/tnt-data-sync.page.ts | 101 +++++ .../Chalkline/ChalklineAccordian.tsx | 84 +++++ .../Modals/OrganizationAddAccountModal.tsx | 345 ++++++++++++++++++ .../Modals/OrganizationEditAccountModal.tsx | 148 ++++++++ .../OrganizationImportDataSyncModal.tsx | 163 +++++++++ .../Organization/OrganizationAccordian.tsx | 184 ++++++---- .../Organization/Organizations.graphql | 8 - 7 files changed, 961 insertions(+), 72 deletions(-) create mode 100644 pages/api/uploads/tnt-data-sync.page.ts create mode 100644 src/components/Settings/integrations/Chalkline/ChalklineAccordian.tsx create mode 100644 src/components/Settings/integrations/Organization/Modals/OrganizationAddAccountModal.tsx create mode 100644 src/components/Settings/integrations/Organization/Modals/OrganizationEditAccountModal.tsx create mode 100644 src/components/Settings/integrations/Organization/Modals/OrganizationImportDataSyncModal.tsx diff --git a/pages/api/uploads/tnt-data-sync.page.ts b/pages/api/uploads/tnt-data-sync.page.ts new file mode 100644 index 000000000..eb5acaa69 --- /dev/null +++ b/pages/api/uploads/tnt-data-sync.page.ts @@ -0,0 +1,101 @@ +import { readFile } from 'fs/promises'; +import fetch, { File, FormData } from 'node-fetch'; +import formidable, { IncomingForm } from 'formidable'; +import { NextApiRequest, NextApiResponse } from 'next'; +import { getToken } from 'next-auth/jwt'; + +export const config = { + api: { + bodyParser: false, + responseLimit: '100MB', + }, +}; + +const parseBody = async ( + req: NextApiRequest, +): Promise<{ fields: formidable.Fields; files: formidable.Files }> => { + return new Promise((resolve, reject) => { + const form = new IncomingForm(); + form.parse(req, (err, fields, files) => { + if (err) { + reject(err); + } else { + resolve({ fields, files }); + } + }); + }); +}; + +const importTntDataSyncFile = async ( + req: NextApiRequest, + res: NextApiResponse, +): Promise => { + try { + if (req.method !== 'POST') { + res.status(405).send('Method Not Found'); + return; + } + + const jwt = await getToken({ + req, + secret: process.env.JWT_SECRET, + }); + const apiToken = (jwt as { apiToken: string } | null)?.apiToken; + if (!apiToken) { + res.status(401).send('Unauthorized'); + return; + } + + const { + fields: { accountListId, organizationId }, + files: { tntDataSync }, + } = await parseBody(req); + + if (typeof accountListId !== 'string') { + res.status(400).send('Missing accountListId'); + return; + } + if (typeof organizationId !== 'string') { + res.status(400).send('Missing organizationId'); + return; + } + if (!tntDataSync || Array.isArray(tntDataSync)) { + res.status(400).send('Missing tnt data sync file'); + return; + } + + const file = new File( + [await readFile(tntDataSync.filepath)], + tntDataSync.originalFilename ?? 'tntDataSync', + ); + + const form = new FormData(); + form.append('data[type]', 'imports'); + form.append('data[attributes][file]', file); + form.append( + 'data[relationships][source_account][data][id]', + organizationId, + ); + form.append( + 'data[relationships][source_account][data][type]', + 'organization_accounts', + ); + + const fetchRes = await fetch( + `${process.env.REST_API_URL}account_lists/${accountListId}/imports/tnt_data_sync`, + { + method: 'POST', + headers: { + authorization: `Bearer ${apiToken}`, + }, + body: form, + }, + ); + + res.status(fetchRes.status).json({ success: fetchRes.status === 200 }); + } catch (err) { + res.status(500).json({ success: false, error: err }); + } +}; + +export default importTntDataSyncFile; diff --git a/src/components/Settings/integrations/Chalkline/ChalklineAccordian.tsx b/src/components/Settings/integrations/Chalkline/ChalklineAccordian.tsx new file mode 100644 index 000000000..8a26ece57 --- /dev/null +++ b/src/components/Settings/integrations/Chalkline/ChalklineAccordian.tsx @@ -0,0 +1,84 @@ +import { useState } from 'react'; +import { useTranslation } from 'react-i18next'; +import { Typography } from '@mui/material'; +import { StyledFormLabel } from 'src/components/Shared/Forms/Field'; +import { StyledServicesButton, AccordianProps } from '../integrationsHelper'; +import { AccordionItem } from 'src/components/Shared/Forms/Accordions/AccordionItem'; +import { useSendToChalklineMutation } from './SendToChalkine.generated'; +import { useAccountListId } from 'src/hooks/useAccountListId'; +import { useSnackbar } from 'notistack'; +import { Confirmation } from 'src/components/common/Modal/Confirmation/Confirmation'; + +export const ChalklineAccordian: React.FC = ({ + handleAccordionChange, + expandedPanel, +}) => { + const { t } = useTranslation(); + const accordianName = t('Chalk Line'); + const [showModal, setShowModal] = useState(false); + const accountListId = useAccountListId(); + const [sendToChalkline] = useSendToChalklineMutation(); + const { enqueueSnackbar } = useSnackbar(); + const handleOpenModal = () => setShowModal(true); + + const handleCloseModal = () => { + setShowModal(false); + }; + + const handleSendListToChalkLine = async () => { + await sendToChalkline({ + variables: { + input: { + accountListId: accountListId ?? '', + }, + }, + onCompleted: () => { + enqueueSnackbar(t('Successfully Emailed Chalkine'), { + variant: 'success', + }); + enqueueSnackbar(t('Redirecting you to Chalkine.'), { + variant: 'success', + }); + setTimeout(() => { + window.open('https://chalkline.org/order_mpdx/', '_blank'); + }, 1000); + }, + }); + }; + + return ( + + } + > + {t('Chalkline Overview')} + + {t(`Chalkline is a significant way to save valuable ministry time while more effectively + connecting with your partners. Send physical newsletters to your current list using + Chalkline with a simple click. Chalkline is a one way send available anytime you’re + ready to send a new newsletter out.`)} + + + {t('Send my current Contacts to Chalkline')} + + + + + ); +}; diff --git a/src/components/Settings/integrations/Organization/Modals/OrganizationAddAccountModal.tsx b/src/components/Settings/integrations/Organization/Modals/OrganizationAddAccountModal.tsx new file mode 100644 index 000000000..1973e8000 --- /dev/null +++ b/src/components/Settings/integrations/Organization/Modals/OrganizationAddAccountModal.tsx @@ -0,0 +1,345 @@ +import React, { useState, ReactElement } from 'react'; +import { Formik } from 'formik'; +import * as yup from 'yup'; +import { useTranslation } from 'react-i18next'; +import { + DialogActions, + Autocomplete, + TextField, + Button, + Typography, + Link, +} from '@mui/material'; +import { styled } from '@mui/material/styles'; +import { Box } from '@mui/system'; +import Modal from 'src/components/common/Modal/Modal'; +import { + SubmitButton, + CancelButton, +} from 'src/components/common/Modal/ActionButtons/ActionButtons'; +import { FieldWrapper } from 'src/components/Shared/Forms/FieldWrapper'; +import { + useGetOrganizationsQuery, + useCreateOrganizationAccountMutation, +} from '../Organizations.generated'; +import { showArticle, variables } from 'src/lib/helpScout'; +import { Organization } from '../../../../../../graphql/types.generated'; +import theme from 'src/theme'; +import { + getOrganizationType, + OrganizationTypesEnum, +} from '../OrganizationAccordian'; +import { oAuth } from '../OrganizationService'; +import { signOut } from 'next-auth/react'; +import { clearDataDogUser } from 'src/hooks/useDataDog'; +import { useSnackbar } from 'notistack'; + +interface OrganizationAddAccountModalProps { + handleClose: () => void; + accountListId: string | undefined; + refetchOrganizations: () => void; +} + +export type OrganizationFormikSchema = { + selectedOrganization: Pick< + Organization, + 'id' | 'name' | 'oauth' | 'apiClass' | 'giftAidPercentage' + >; + username: string | null | undefined; + password: string | null | undefined; +}; + +const StyledBox = styled(Box)(() => ({ + padding: '0 10px', +})); + +const WarningBox = styled(Box)(() => ({ + padding: '15px', + background: theme.palette.mpdxYellow.main, + maxWidth: 'calc(100% - 20px)', + margin: '10px auto 0', +})); + +const StyledTypography = styled(Typography)(() => ({ + marginTop: '10px', + color: theme.palette.mpdxYellow.dark, +})); + +export const OrganizationAddAccountModal: React.FC< + OrganizationAddAccountModalProps +> = ({ handleClose, refetchOrganizations, accountListId }) => { + const { t } = useTranslation(); + const { enqueueSnackbar } = useSnackbar(); + const [organizationType, setOrganizationType] = + useState(); + const [createOrganizationAccount] = useCreateOrganizationAccountMutation(); + const { data: organizations, loading } = useGetOrganizationsQuery(); + + const onSubmit = async (attributes: OrganizationFormikSchema) => { + const { apiClass, oauth, id } = attributes.selectedOrganization; + const type = getOrganizationType(apiClass, oauth); + + if (type === OrganizationTypesEnum.OAUTH) { + window.location.href = await oAuth(id); + return; + } + + if (!accountListId) return; + + const createAccountAttributes: { + organizationId: string; + password?: string; + username?: string; + } = { + organizationId: id, + }; + if (attributes.password) { + createAccountAttributes.password = attributes.password; + } + if (attributes.username) { + createAccountAttributes.username = attributes.username; + } + + await createOrganizationAccount({ + variables: { + input: { + attributes: createAccountAttributes, + }, + }, + update: () => refetchOrganizations(), + onError: () => { + enqueueSnackbar(t('Invalid username or password.'), { + variant: 'error', + }); + }, + onCompleted: () => { + enqueueSnackbar(t('MPDX added your organization account'), { + variant: 'success', + }); + }, + }); + handleClose(); + return; + }; + + const showOrganizationHelp = () => { + showArticle(variables.HS_SETUP_FIND_ORGANIZATION); + }; + + const OrganizationSchema: yup.SchemaOf = yup.object( + { + selectedOrganization: yup + .object({ + id: yup.string().required(), + apiClass: yup.string().required(), + name: yup.string().required(), + oauth: yup.boolean().required(), + giftAidPercentage: yup.number().nullable(), + }) + .required(), + username: yup + .string() + .when('selectedOrganization', (organization, schema) => { + if ( + getOrganizationType(organization?.apiClass, organization?.oauth) === + OrganizationTypesEnum.LOGIN + ) { + return schema.required('Must enter username'); + } + return schema; + }), + password: yup + .string() + .when('selectedOrganization', (organization, schema) => { + if ( + getOrganizationType(organization?.apiClass, organization?.oauth) === + OrganizationTypesEnum.LOGIN + ) { + return schema.required('Must enter password'); + } + return schema; + }), + }, + ); + + return ( + + + {({ + values: { selectedOrganization, username, password }, + handleChange, + handleSubmit, + setFieldValue, + isSubmitting, + isValid, + }): ReactElement => ( +
+ + { + setOrganizationType( + getOrganizationType(value?.apiClass, value?.oauth), + ); + setFieldValue('selectedOrganization', value); + }} + options={ + organizations?.organizations?.map( + (organization) => organization, + ) || [] + } + getOptionLabel={(option) => + organizations?.organizations?.find( + ({ id }) => String(id) === String(option.id), + )?.name ?? '' + } + filterSelectedOptions + fullWidth + renderInput={(params) => ( + + )} + /> + + + {!selectedOrganization && ( + + )} + + {organizationType === OrganizationTypesEnum.MINISTRY && ( + + + {t('You must log into MPDX with your ministry email')} + + + {t( + 'This organization requires you to log into MPDX with your ministry email to access it.', + )} +
    +
  1. + {t('First you need to ')} + + {t( + 'click here to log out of your personal Key account', + )} + +
    2. +
  2. + {t('Next, ')} + { + signOut({ callbackUrl: 'signOut' }).then(() => { + clearDataDogUser(); + }); + }} + > + {t('click here to log out of MPDX')} + + {t( + ' so you can log back in with your offical key account.', + )} +
    3. +
+ + + {t( + "If you are already logged in using your ministry account, you'll need to contact your donation services team to request access.", + )} + {t( + "Once this is done you'll need to wait 24 hours for MPDX to sync your data.", + )} + + + )} + + {organizationType === OrganizationTypesEnum.OAUTH && ( + + + {t( + "You will be taken to your organization's donation services system to grant MPDX permission to access your donation data.", + )} + + + )} + + {organizationType === OrganizationTypesEnum.LOGIN && ( + <> + + + + + + + + + + + + )} + + + + + + {organizationType !== OrganizationTypesEnum.OAUTH && + t('Add Account')} + {organizationType === OrganizationTypesEnum.OAUTH && + t('Connect')} + + +
+ )} + + + ); +}; diff --git a/src/components/Settings/integrations/Organization/Modals/OrganizationEditAccountModal.tsx b/src/components/Settings/integrations/Organization/Modals/OrganizationEditAccountModal.tsx new file mode 100644 index 000000000..4a58d81e7 --- /dev/null +++ b/src/components/Settings/integrations/Organization/Modals/OrganizationEditAccountModal.tsx @@ -0,0 +1,148 @@ +import React, { ReactElement } from 'react'; +import { Formik } from 'formik'; +import * as yup from 'yup'; +import { useTranslation } from 'react-i18next'; +import { DialogActions, TextField, FormHelperText } from '@mui/material'; +import { styled } from '@mui/material/styles'; +import { Box } from '@mui/system'; +import Modal from 'src/components/common/Modal/Modal'; +import { + SubmitButton, + CancelButton, +} from 'src/components/common/Modal/ActionButtons/ActionButtons'; +import { FieldWrapper } from 'src/components/Shared/Forms/FieldWrapper'; +import { useUpdateOrganizationAccountMutation } from '../Organizations.generated'; +import { useSnackbar } from 'notistack'; +import { OrganizationFormikSchema } from './OrganizationAddAccountModal'; + +interface OrganizationEditAccountModalProps { + handleClose: () => void; + organizationId: string; +} + +const StyledBox = styled(Box)(() => ({ + padding: '0 10px', +})); + +export const OrganizationEditAccountModal: React.FC< + OrganizationEditAccountModalProps +> = ({ handleClose, organizationId }) => { + const { t } = useTranslation(); + const { enqueueSnackbar } = useSnackbar(); + const [updateOrganizationAccount] = useUpdateOrganizationAccountMutation(); + + const onSubmit = async ( + attributes: Omit, + ) => { + const { password, username } = attributes; + + const createAccountAttributes = { + id: organizationId, + username, + password, + }; + + await updateOrganizationAccount({ + variables: { + input: { + attributes: createAccountAttributes, + }, + }, + onError: () => { + enqueueSnackbar(t('Unable to update your organization account'), { + variant: 'error', + }); + }, + onCompleted: () => { + enqueueSnackbar(t('MPDX updated your organization account'), { + variant: 'success', + }); + }, + }); + + handleClose(); + return; + }; + + const OrganizationSchema: yup.SchemaOf< + Omit + > = yup.object({ + username: yup.string().required(), + password: yup.string().required(), + }); + + return ( + + + {({ + values: { username, password }, + handleChange, + handleSubmit, + isSubmitting, + isValid, + errors, + }): ReactElement => ( +
+ + + + {errors.username && ( + + {errors.username} + + )} + + + + + + {errors.password && ( + + {errors.password} + + )} + + + + + + + {t('Save')} + + +
+ )} + + + ); +}; diff --git a/src/components/Settings/integrations/Organization/Modals/OrganizationImportDataSyncModal.tsx b/src/components/Settings/integrations/Organization/Modals/OrganizationImportDataSyncModal.tsx new file mode 100644 index 000000000..2d708698b --- /dev/null +++ b/src/components/Settings/integrations/Organization/Modals/OrganizationImportDataSyncModal.tsx @@ -0,0 +1,163 @@ +import React, { useState } from 'react'; +import { useTranslation } from 'react-i18next'; +import { DialogActions, Typography, Button, Paper, Grid } from '@mui/material'; +import { styled } from '@mui/material/styles'; +import { Box } from '@mui/system'; +import { useSnackbar } from 'notistack'; +import Modal from 'src/components/common/Modal/Modal'; +import { + SubmitButton, + CancelButton, +} from 'src/components/common/Modal/ActionButtons/ActionButtons'; +import theme from 'src/theme'; +import { validateFile } from 'src/components/Shared/FileUploads/tntConnectDataSync'; +import { getErrorMessage } from 'src/lib/getErrorFromCatch'; + +interface OrganizationImportDataSyncModalProps { + handleClose: () => void; + organizationId: string; + organizationName: string; + accountListId: string; +} + +const StyledBox = styled(Box)(() => ({ + padding: '0 10px', +})); + +const StyledTypography = styled(Typography)(() => ({ + marginTop: '10px', +})); + +export const OrganizationImportDataSyncModal: React.FC< + OrganizationImportDataSyncModalProps +> = ({ handleClose, organizationId, organizationName, accountListId }) => { + const { t } = useTranslation(); + const { enqueueSnackbar } = useSnackbar(); + const [isSubmitting, setIsSubmitting] = useState(false); + const [importFile, setImportFile] = useState(null); + const handleSubmit = async (event) => { + event.preventDefault(); + try { + if (!importFile) throw new Error('Please select a file to upload.'); + // TODO + setIsSubmitting(true); + setIsSubmitting(false); + + const form = new FormData(); + form.append('accountListId', accountListId); + form.append('organizationId', organizationId); + form.append('tntDataSync', importFile); + + const res = await fetch(`/api/uploads/tnt-data-sync`, { + method: 'POST', + body: form, + }).catch(() => { + throw new Error(t('Cannot upload avatar: server error')); + }); + + if (res.status === 201) { + enqueueSnackbar( + `File successfully uploaded. The import to ${organizationName} will begin in the background.`, + { + variant: 'success', + }, + ); + } + + setIsSubmitting(false); + handleClose(); + } catch (err) { + enqueueSnackbar(getErrorMessage(err), { + variant: 'error', + }); + } + }; + + const handleFileChange: React.ChangeEventHandler = ( + event, + ) => { + try { + const file = event.target.files?.[0]; + if (!file) return; + + const validationResult = validateFile({ file, t }); + if (!validationResult.success) throw new Error(validationResult.message); + setImportFile(file); + } catch (err) { + enqueueSnackbar(getErrorMessage(err), { + variant: 'error', + }); + } + }; + + return ( + +
+ + + {t( + 'This file should be a TntConnect DataSync file (.tntdatasync or .tntmpd) from your organization, not your local TntConnect database file (.mpddb).', + )} + + + {t( + 'To import your TntConnect database, go to Import from TntConnect', + )} + + + + + + + + + + + {importFile?.name ?? 'No File Chosen'} + + + + + + + + + + + {t('Upload File')} + + +
+ + ); +}; diff --git a/src/components/Settings/integrations/Organization/OrganizationAccordian.tsx b/src/components/Settings/integrations/Organization/OrganizationAccordian.tsx index 20563eded..f2a40add6 100644 --- a/src/components/Settings/integrations/Organization/OrganizationAccordian.tsx +++ b/src/components/Settings/integrations/Organization/OrganizationAccordian.tsx @@ -3,7 +3,6 @@ import { useTranslation } from 'react-i18next'; import { Grid, Box, - Button, IconButton, Typography, Card, @@ -15,21 +14,25 @@ import DeleteIcon from '@mui/icons-material/Delete'; import Edit from '@mui/icons-material/Edit'; import { styled } from '@mui/material/styles'; import { AccordionItem } from 'src/components/Shared/Forms/Accordions/AccordionItem'; -import { OrganizationAddAccountModal } from './OrganizationAddAccountModal'; -import { OrganizationImportDataSyncModal } from './OrganizationImportDataSyncModal'; -import { useGetUsersOrganizationsQuery } from './Organizations.generated'; -import { Organization } from '../../../../../graphql/types.generated'; -import { oAuth, sync } from './OrganizationService'; +import { OrganizationAddAccountModal } from './Modals/OrganizationAddAccountModal'; +import { OrganizationImportDataSyncModal } from './Modals/OrganizationImportDataSyncModal'; +import { + useGetUsersOrganizationsQuery, + useDeleteOrganizationAccountMutation, + useSyncOrganizationAccountMutation, +} from './Organizations.generated'; +import { oAuth } from './OrganizationService'; +import { useSnackbar } from 'notistack'; +import { Confirmation } from 'src/components/common/Modal/Confirmation/Confirmation'; +import { useAccountListId } from 'src/hooks/useAccountListId'; +import { OrganizationEditAccountModal } from './Modals/OrganizationEditAccountModal'; +import { StyledServicesButton } from '../integrationsHelper'; interface OrganizationAccordianProps { handleAccordionChange: (panel: string) => void; expandedPanel: string; } -const StyledServicesButton = styled(Button)(({ theme }) => ({ - marginTop: theme.spacing(2), -})); - const OrganizationDeleteIconButton = styled(IconButton)(() => ({ color: theme.palette.cruGrayMedium.main, marginLeft: '10px', @@ -78,12 +81,22 @@ export const OrganizationAccordian: React.FC = ({ expandedPanel, }) => { const { t } = useTranslation(); - const [selectedOrganization, setSelectedOrganization] = - useState>(); + const accountListId = useAccountListId(); + const { enqueueSnackbar } = useSnackbar(); const [showAddAccountModal, setShowAddAccountModal] = useState(false); const [showImportDataSyncModal, setShowImportDataSyncModal] = useState(false); + const [showDeleteOrganizationModal, setShowDeleteOrganizationModal] = + useState(false); + const [showEditOrganizationModal, setShowEditOrganizationModal] = + useState(false); + const [deleteOrganizationAccount] = useDeleteOrganizationAccountMutation(); + const [syncOrganizationAccount] = useSyncOrganizationAccountMutation(); - const { data, loading } = useGetUsersOrganizationsQuery(); + const { + data, + loading, + refetch: refetchOrganizations, + } = useGetUsersOrganizationsQuery(); const organizations = data?.userOrganizationAccounts; const handleReconnect = async (organizationId) => { @@ -91,25 +104,55 @@ export const OrganizationAccordian: React.FC = ({ await oAuth(organizationId); }; - const handleSync = async ( - organization: Omit, - ) => { - // TODO - await sync(); - return organization; + const handleSync = async (accountId: string) => { + await syncOrganizationAccount({ + variables: { + input: { + id: accountId, + }, + }, + onError: () => { + enqueueSnackbar(t("MPDX couldn't sync your organization account"), { + variant: 'error', + }); + }, + onCompleted: () => { + enqueueSnackbar( + t( + 'MPDX started syncing your organization account. This will occur in the background over the next 24-hours.', + ), + { + variant: 'success', + }, + ); + }, + }); }; - const handleEdit = async ( - organization: Omit, - ) => { - // TODO - return organization; - }; - const handleDelete = async ( - organization: Omit, - ) => { - // TODO - return organization; + const handleDelete = async (accountId: string) => { + await deleteOrganizationAccount({ + variables: { + input: { + id: accountId, + }, + }, + update: () => refetchOrganizations(), + onError: () => { + enqueueSnackbar( + t( + "MPDX couldn't save your configuration changes for that organization", + ), + { + variant: 'error', + }, + ); + }, + onCompleted: () => { + enqueueSnackbar(t('MPDX removed your organization integration'), { + variant: 'success', + }); + }, + }); }; return ( @@ -143,7 +186,7 @@ export const OrganizationAccordian: React.FC = ({ {!loading && !!organizations?.length && ( {organizations.map( - ({ organization, lastDownloadedAt, latestDonationDate }) => { + ({ organization, lastDownloadedAt, latestDonationDate, id }) => { const type = getOrganizationType( organization.apiClass, organization.oauth, @@ -181,10 +224,7 @@ export const OrganizationAccordian: React.FC = ({ variant="contained" size="small" sx={{ m: '0 0 0 10px' }} - onClick={() => { - setSelectedOrganization(organization); - handleSync(organization); - }} + onClick={() => handleSync(id)} > Sync @@ -195,10 +235,7 @@ export const OrganizationAccordian: React.FC = ({ variant="contained" size="small" sx={{ m: '0 0 0 10px' }} - onClick={() => { - setSelectedOrganization(organization); - setShowImportDataSyncModal(true); - }} + onClick={() => setShowImportDataSyncModal(true)} > Import TntConnect DataSync file @@ -216,43 +253,66 @@ export const OrganizationAccordian: React.FC = ({ )} {type === OrganizationTypesEnum.LOGIN && ( handleEdit(organization)} + onClick={() => setShowEditOrganizationModal(true)} > )} handleDelete(organization)} + onClick={() => setShowDeleteOrganizationModal(true)} > - - - - Last Updated - - {lastDownloadedAt && ( + {lastDownloadedAt && ( + + + + Last Updated + {DateTime.fromISO(lastDownloadedAt).toRelative()} - )} - - - - - - Last Gift Date - {latestDonationDate && ( + + )} + {latestDonationDate && ( + + + + Last Gift Date + {DateTime.fromISO(latestDonationDate).toRelative()} - )} - - + + + )} + setShowDeleteOrganizationModal(false)} + mutation={() => handleDelete(id)} + /> + {showEditOrganizationModal && ( + setShowEditOrganizationModal(false)} + organizationId={id} + /> + )} + {showImportDataSyncModal && ( + setShowImportDataSyncModal(false)} + organizationId={id} + organizationName={organization.name} + accountListId={accountListId ?? ''} + /> + )} ); }, @@ -270,12 +330,8 @@ export const OrganizationAccordian: React.FC = ({ {showAddAccountModal && ( setShowAddAccountModal(false)} - /> - )} - {showImportDataSyncModal && ( - setShowImportDataSyncModal(false)} - organization={selectedOrganization} + accountListId={accountListId} + refetchOrganizations={refetchOrganizations} /> )} diff --git a/src/components/Settings/integrations/Organization/Organizations.graphql b/src/components/Settings/integrations/Organization/Organizations.graphql index d2e4dd865..c08998be0 100644 --- a/src/components/Settings/integrations/Organization/Organizations.graphql +++ b/src/components/Settings/integrations/Organization/Organizations.graphql @@ -63,14 +63,6 @@ mutation UpdateOrganizationAccount( updateOrganizationAccount(input: $input) { organizationAccount { id - organization { - name - id - apiClass - oauth - } - lastDownloadedAt - lastDownload } } } From c35eeedd6807f49dd87958dcd55184a9a58e2eaf Mon Sep 17 00:00:00 2001 From: Daniel Bisgrove Date: Wed, 6 Sep 2023 09:35:19 -0400 Subject: [PATCH 100/103] Organzations tests --- .../Chalkline/ChalklineAccordian.test.tsx | 119 +++++ .../Chalkline/ChalklineAccordian.tsx | 2 +- ...alkine.graphql => SendToChalkline.graphql} | 0 .../OrganizationAddAccountModal.test.tsx | 323 ++++++++++++++ .../Modals/OrganizationAddAccountModal.tsx | 16 +- .../OrganizationEditAccountModal.test.tsx | 127 ++++++ .../Modals/OrganizationEditAccountModal.tsx | 4 +- .../OrganizationImportDataSyncModal.test.tsx | 143 ++++++ .../OrganizationImportDataSyncModal.tsx | 1 + .../OrganizationAccordian.test.tsx | 412 ++++++++++++++++++ .../Organization/OrganizationAccordian.tsx | 16 +- .../PrayerlettersAccordian.test.tsx | 126 +++--- 12 files changed, 1214 insertions(+), 75 deletions(-) create mode 100644 src/components/Settings/integrations/Chalkline/ChalklineAccordian.test.tsx rename src/components/Settings/integrations/Chalkline/{SendToChalkine.graphql => SendToChalkline.graphql} (100%) create mode 100644 src/components/Settings/integrations/Organization/Modals/OrganizationAddAccountModal.test.tsx create mode 100644 src/components/Settings/integrations/Organization/Modals/OrganizationEditAccountModal.test.tsx create mode 100644 src/components/Settings/integrations/Organization/Modals/OrganizationImportDataSyncModal.test.tsx create mode 100644 src/components/Settings/integrations/Organization/OrganizationAccordian.test.tsx diff --git a/src/components/Settings/integrations/Chalkline/ChalklineAccordian.test.tsx b/src/components/Settings/integrations/Chalkline/ChalklineAccordian.test.tsx new file mode 100644 index 000000000..b19f7454d --- /dev/null +++ b/src/components/Settings/integrations/Chalkline/ChalklineAccordian.test.tsx @@ -0,0 +1,119 @@ +import { render, waitFor } from '@testing-library/react'; +import { SnackbarProvider } from 'notistack'; +import userEvent from '@testing-library/user-event'; +import { ThemeProvider } from '@mui/material/styles'; +import TestRouter from '__tests__/util/TestRouter'; +import { GqlMockedProvider } from '../../../../../__tests__/util/graphqlMocking'; +import theme from '../../../../theme'; +import { IntegrationsContextProvider } from 'pages/accountLists/[accountListId]/settings/integrations.page'; +import { ChalklineAccordian } from './ChalklineAccordian'; + +jest.mock('next-auth/react'); + +const accountListId = 'account-list-1'; +const contactId = 'contact-1'; +const apiToken = 'apiToken'; +const router = { + query: { accountListId, contactId: [contactId] }, + isReady: true, +}; + +const mockEnqueue = jest.fn(); +jest.mock('notistack', () => ({ + // eslint-disable-next-line @typescript-eslint/ban-ts-comment + // @ts-ignore + ...jest.requireActual('notistack'), + useSnackbar: () => { + return { + enqueueSnackbar: mockEnqueue, + }; + }, +})); + +const handleAccordionChange = jest.fn(); + +const Components = (children: React.ReactElement) => ( + + + + + {children} + + + + +); + +describe('PrayerlettersAccount', () => { + process.env.OAUTH_URL = 'https://auth.mpdx.org'; + it('should render accordian closed', async () => { + const { getByText, queryByRole } = render( + Components( + + + , + ), + ); + expect(getByText('Chalk Line')).toBeInTheDocument(); + const image = queryByRole('img', { + name: /Chalk Line/i, + }); + expect(image).not.toBeInTheDocument(); + }); + it('should render accordian open', async () => { + const { queryByRole } = render( + Components( + + + , + ), + ); + const image = queryByRole('img', { + name: /Chalk Line/i, + }); + expect(image).toBeInTheDocument(); + }); + + it('should send contacts to Chalkline', async () => { + const mutationSpy = jest.fn(); + const { getByText } = render( + Components( + + + , + ), + ); + await waitFor(() => { + expect(getByText('Chalkline Overview')).toBeInTheDocument(); + }); + userEvent.click(getByText('Send my current Contacts to Chalkline')); + await waitFor(() => { + expect(getByText('Confirm')).toBeInTheDocument(); + }); + userEvent.click(getByText('Yes')); + + await waitFor(() => { + expect(mockEnqueue).toHaveBeenCalledWith( + 'Successfully Emailed Chalkine', + { + variant: 'success', + }, + ); + expect(mutationSpy.mock.calls[0][0].operation.operationName).toEqual( + 'SendToChalkline', + ); + expect(mutationSpy.mock.calls[0][0].operation.variables.input).toEqual({ + accountListId: accountListId, + }); + }); + }); +}); diff --git a/src/components/Settings/integrations/Chalkline/ChalklineAccordian.tsx b/src/components/Settings/integrations/Chalkline/ChalklineAccordian.tsx index 8a26ece57..5d9fd1843 100644 --- a/src/components/Settings/integrations/Chalkline/ChalklineAccordian.tsx +++ b/src/components/Settings/integrations/Chalkline/ChalklineAccordian.tsx @@ -4,7 +4,7 @@ import { Typography } from '@mui/material'; import { StyledFormLabel } from 'src/components/Shared/Forms/Field'; import { StyledServicesButton, AccordianProps } from '../integrationsHelper'; import { AccordionItem } from 'src/components/Shared/Forms/Accordions/AccordionItem'; -import { useSendToChalklineMutation } from './SendToChalkine.generated'; +import { useSendToChalklineMutation } from './SendToChalkline.generated'; import { useAccountListId } from 'src/hooks/useAccountListId'; import { useSnackbar } from 'notistack'; import { Confirmation } from 'src/components/common/Modal/Confirmation/Confirmation'; diff --git a/src/components/Settings/integrations/Chalkline/SendToChalkine.graphql b/src/components/Settings/integrations/Chalkline/SendToChalkline.graphql similarity index 100% rename from src/components/Settings/integrations/Chalkline/SendToChalkine.graphql rename to src/components/Settings/integrations/Chalkline/SendToChalkline.graphql diff --git a/src/components/Settings/integrations/Organization/Modals/OrganizationAddAccountModal.test.tsx b/src/components/Settings/integrations/Organization/Modals/OrganizationAddAccountModal.test.tsx new file mode 100644 index 000000000..535233d83 --- /dev/null +++ b/src/components/Settings/integrations/Organization/Modals/OrganizationAddAccountModal.test.tsx @@ -0,0 +1,323 @@ +import { render, waitFor } from '@testing-library/react'; +import { SnackbarProvider } from 'notistack'; +import userEvent from '@testing-library/user-event'; +import { ThemeProvider } from '@mui/material/styles'; +import TestRouter from '__tests__/util/TestRouter'; +import { GqlMockedProvider } from '../../../../../../__tests__/util/graphqlMocking'; +import theme from '../../../../../theme'; +import { IntegrationsContextProvider } from 'pages/accountLists/[accountListId]/settings/integrations.page'; +import { OrganizationAddAccountModal } from './OrganizationAddAccountModal'; +import { GetOrganizationsQuery } from '../Organizations.generated'; +import * as Types from '../../../../../../graphql/types.generated'; + +jest.mock('next-auth/react'); + +const accountListId = 'account-list-1'; +const contactId = 'contact-1'; +const apiToken = 'apiToken'; +const router = { + query: { accountListId, contactId: [contactId] }, + isReady: true, +}; + +const mockEnqueue = jest.fn(); +jest.mock('notistack', () => ({ + // eslint-disable-next-line @typescript-eslint/ban-ts-comment + // @ts-ignore + ...jest.requireActual('notistack'), + useSnackbar: () => { + return { + enqueueSnackbar: mockEnqueue, + }; + }, +})); + +const Components = (children: React.ReactElement) => ( + + + + + {children} + + + + +); + +const GetOrganizationsMock: Pick< + Types.Organization, + 'apiClass' | 'id' | 'name' | 'oauth' | 'giftAidPercentage' +>[] = [ + { + id: 'organizationId', + name: 'organizationName', + apiClass: 'OfflineOrg', + oauth: false, + giftAidPercentage: 0, + }, + { + id: 'ministryId', + name: 'ministryName', + apiClass: 'Siebel', + oauth: false, + giftAidPercentage: 80, + }, + { + id: 'loginId', + name: 'loginName', + apiClass: 'DataServer', + oauth: false, + giftAidPercentage: 70, + }, + { + id: 'oAuthId', + name: 'oAuthName', + apiClass: 'DataServer', + oauth: true, + giftAidPercentage: 60, + }, +]; + +const standardMocks = { + GetOrganizations: { + organizations: GetOrganizationsMock, + }, +}; + +const handleClose = jest.fn(); +const refetchOrganizations = jest.fn(); + +describe('OrganizationAddAccountModal', () => { + process.env.OAUTH_URL = 'https://auth.mpdx.org'; + let mocks = { ...standardMocks }; + + beforeEach(() => { + handleClose.mockClear(); + refetchOrganizations.mockClear(); + mocks = { ...standardMocks }; + }); + it('should render modal', async () => { + const { getByText, getByTestId } = render( + Components( + + + , + ), + ); + + expect(getByText('Add Organization Account')).toBeInTheDocument(); + + userEvent.click(getByText(/cancel/i)); + expect(handleClose).toHaveBeenCalledTimes(1); + userEvent.click(getByTestId('CloseIcon')); + expect(handleClose).toHaveBeenCalledTimes(2); + }); + + it('should select offline Organization and add it', async () => { + const mutationSpy = jest.fn(); + const { getByText, getByRole } = render( + Components( + + mocks={{ + getOrganizations: { + organizations: GetOrganizationsMock, + }, + }} + onCall={mutationSpy} + > + + , + ), + ); + + userEvent.click(getByRole('combobox')); + await waitFor(() => + expect( + getByRole('option', { name: 'organizationName' }), + ).toBeInTheDocument(), + ); + + await waitFor(() => { + expect(getByText('Add Account')).not.toBeDisabled(); + userEvent.click(getByText('Add Account')); + }); + await waitFor(() => { + expect(mockEnqueue).toHaveBeenCalledWith( + 'MPDX added your organization account', + { variant: 'success' }, + ); + expect(mutationSpy.mock.calls[1][0].operation.operationName).toEqual( + 'CreateOrganizationAccount', + ); + + expect(mutationSpy.mock.calls[1][0].operation.variables.input).toEqual({ + attributes: { + organizationId: mocks.GetOrganizations.organizations[0].id, + }, + }); + }); + }); + + it('should select Ministry Organization and be unable to add it.', async () => { + const mutationSpy = jest.fn(); + const { getByText, getByRole } = render( + Components( + + mocks={{ + getOrganizations: { + organizations: GetOrganizationsMock, + }, + }} + onCall={mutationSpy} + > + + , + ), + ); + + userEvent.click(getByRole('combobox')); + await waitFor(() => + expect(getByRole('option', { name: 'ministryName' })).toBeInTheDocument(), + ); + userEvent.click(getByRole('option', { name: 'ministryName' })); + + await waitFor(() => { + expect( + getByText('You must log into MPDX with your ministry email'), + ).toBeInTheDocument(); + expect(getByText('Add Account')).toBeDisabled(); + }); + }); + + it('should select Login Organization and add it.', async () => { + const mutationSpy = jest.fn(); + const { getByText, getByRole } = render( + Components( + + mocks={{ + getOrganizations: { + organizations: GetOrganizationsMock, + }, + }} + onCall={mutationSpy} + > + + , + ), + ); + + userEvent.click(getByRole('combobox')); + await waitFor(() => + expect(getByRole('option', { name: 'loginName' })).toBeInTheDocument(), + ); + userEvent.click(getByRole('option', { name: 'loginName' })); + + await waitFor(() => { + expect(getByText('Username')).toBeInTheDocument(); + expect(getByText('Password')).toBeInTheDocument(); + expect(getByText('Add Account')).toBeDisabled(); + }); + + userEvent.type( + getByRole('textbox', { + name: /username/i, + }), + 'MyUsername', + ); + await waitFor(() => expect(getByText('Add Account')).toBeDisabled()); + + // TODO Need a way to test the password field. + // Currently React-testing-library has a bug which doesn't see password inputs. + + // await waitFor(() => expect(getByText('Add Account')).not.toBeDisabled()); + // userEvent.click(getByText('Add Account')); + + // await waitFor(() => { + // expect(mockEnqueue).toHaveBeenCalledWith( + // 'MPDX added your organization account', + // { variant: 'success' }, + // ); + // expect(mutationSpy.mock.calls[1][0].operation.operationName).toEqual( + // 'CreateOrganizationAccount', + // ); + + // expect(mutationSpy.mock.calls[1][0].operation.variables.input).toEqual({ + // attributes: { + // organizationId: mocks.GetOrganizations.organizations[2].id, + // username: 'MyUsername', + // password: 'MyPassword', + // }, + // }); + // }); + }); + + it('should select OAuth Organization and add it.', async () => { + const mutationSpy = jest.fn(); + const { getByText, getByRole } = render( + Components( + + mocks={{ + getOrganizations: { + organizations: GetOrganizationsMock, + }, + }} + onCall={mutationSpy} + > + + , + ), + ); + + userEvent.click(getByRole('combobox')); + await waitFor(() => + expect(getByRole('option', { name: 'oAuthName' })).toBeInTheDocument(), + ); + userEvent.click(getByRole('option', { name: 'oAuthName' })); + + await waitFor(() => { + expect( + getByText( + "You will be taken to your organization's donation services system to grant MPDX permission to access your donation data.", + ), + ).toBeInTheDocument(); + expect(getByText('Connect')).toBeInTheDocument(); + expect(getByText('Connect')).not.toBeDisabled(); + }); + + userEvent.click(getByText('Connect')); + await waitFor(() => { + expect(mockEnqueue).toHaveBeenCalledWith( + 'Redirecting you to complete authenication to connect.', + { variant: 'success' }, + ); + }); + }); +}); diff --git a/src/components/Settings/integrations/Organization/Modals/OrganizationAddAccountModal.tsx b/src/components/Settings/integrations/Organization/Modals/OrganizationAddAccountModal.tsx index 1973e8000..d9d0e648a 100644 --- a/src/components/Settings/integrations/Organization/Modals/OrganizationAddAccountModal.tsx +++ b/src/components/Settings/integrations/Organization/Modals/OrganizationAddAccountModal.tsx @@ -80,6 +80,10 @@ export const OrganizationAddAccountModal: React.FC< const type = getOrganizationType(apiClass, oauth); if (type === OrganizationTypesEnum.OAUTH) { + enqueueSnackbar( + t('Redirecting you to complete authenication to connect.'), + { variant: 'success' }, + ); window.location.href = await oAuth(id); return; } @@ -301,7 +305,7 @@ export const OrganizationAddAccountModal: React.FC< - + {organizationType !== OrganizationTypesEnum.OAUTH && t('Add Account')} {organizationType === OrganizationTypesEnum.OAUTH && diff --git a/src/components/Settings/integrations/Organization/Modals/OrganizationEditAccountModal.test.tsx b/src/components/Settings/integrations/Organization/Modals/OrganizationEditAccountModal.test.tsx new file mode 100644 index 000000000..b3df73244 --- /dev/null +++ b/src/components/Settings/integrations/Organization/Modals/OrganizationEditAccountModal.test.tsx @@ -0,0 +1,127 @@ +import { render, waitFor } from '@testing-library/react'; +import { SnackbarProvider } from 'notistack'; +import userEvent from '@testing-library/user-event'; +import { ThemeProvider } from '@mui/material/styles'; +import TestRouter from '__tests__/util/TestRouter'; +import { GqlMockedProvider } from '../../../../../../__tests__/util/graphqlMocking'; +import theme from '../../../../../theme'; +import { IntegrationsContextProvider } from 'pages/accountLists/[accountListId]/settings/integrations.page'; +import { OrganizationEditAccountModal } from './OrganizationEditAccountModal'; + +jest.mock('next-auth/react'); + +const accountListId = 'account-list-1'; +const organizationId = 'organization-1'; +const contactId = 'contact-1'; +const apiToken = 'apiToken'; +const router = { + query: { accountListId, contactId: [contactId] }, + isReady: true, +}; + +const mockEnqueue = jest.fn(); +jest.mock('notistack', () => ({ + // eslint-disable-next-line @typescript-eslint/ban-ts-comment + // @ts-ignore + ...jest.requireActual('notistack'), + useSnackbar: () => { + return { + enqueueSnackbar: mockEnqueue, + }; + }, +})); + +const Components = (children: React.ReactElement) => ( + + + + + {children} + + + + +); + +const handleClose = jest.fn(); +const refetchOrganizations = jest.fn(); + +describe('OrganizationEditAccountModal', () => { + process.env.OAUTH_URL = 'https://auth.mpdx.org'; + + beforeEach(() => { + handleClose.mockClear(); + refetchOrganizations.mockClear(); + }); + it('should render modal', async () => { + const { getByText, getByTestId } = render( + Components( + + + , + ), + ); + + expect(getByText('Edit Organization Account')).toBeInTheDocument(); + + userEvent.click(getByText(/cancel/i)); + expect(handleClose).toHaveBeenCalledTimes(1); + userEvent.click(getByTestId('CloseIcon')); + expect(handleClose).toHaveBeenCalledTimes(2); + }); + + it('should enter login details.', async () => { + const mutationSpy = jest.fn(); + const { getByText, getByRole } = render( + Components( + + + , + ), + ); + + await waitFor(() => { + expect(getByText('Username')).toBeInTheDocument(); + expect(getByText('Password')).toBeInTheDocument(); + }); + + userEvent.type( + getByRole('textbox', { + name: /username/i, + }), + 'MyUsername', + ); + + await waitFor(() => expect(getByText('Save')).toBeDisabled()); + + // TODO Need a way to test the password field. + // Currently React-testing-library has a bug which doesn't see password inputs. + + // await waitFor(() => expect(getByText('Add Account')).not.toBeDisabled()); + // userEvent.click(getByText('Add Account')); + + // await waitFor(() => { + // expect(mockEnqueue).toHaveBeenCalledWith( + // 'MPDX added your organization account', + // { variant: 'success' }, + // ); + // expect(mutationSpy.mock.calls[1][0].operation.operationName).toEqual( + // 'CreateOrganizationAccount', + // ); + + // expect(mutationSpy.mock.calls[1][0].operation.variables.input).toEqual({ + // attributes: { + // organizationId: mocks.GetOrganizations.organizations[2].id, + // username: 'MyUsername', + // password: 'MyPassword', + // }, + // }); + // }); + }); +}); diff --git a/src/components/Settings/integrations/Organization/Modals/OrganizationEditAccountModal.tsx b/src/components/Settings/integrations/Organization/Modals/OrganizationEditAccountModal.tsx index 4a58d81e7..1fe832b89 100644 --- a/src/components/Settings/integrations/Organization/Modals/OrganizationEditAccountModal.tsx +++ b/src/components/Settings/integrations/Organization/Modals/OrganizationEditAccountModal.tsx @@ -100,7 +100,7 @@ export const OrganizationEditAccountModal: React.FC< ({ + // eslint-disable-next-line @typescript-eslint/ban-ts-comment + // @ts-ignore + ...jest.requireActual('notistack'), + useSnackbar: () => { + return { + enqueueSnackbar: mockEnqueue, + }; + }, +})); + +const Components = (children: React.ReactElement) => ( + + + + + {children} + + + + +); + +const handleClose = jest.fn(); +const refetchOrganizations = jest.fn(); + +describe('OrganizationImportDataSyncModal', () => { + process.env.OAUTH_URL = 'https://auth.mpdx.org'; + + beforeEach(() => { + handleClose.mockClear(); + refetchOrganizations.mockClear(); + (validateFile as jest.Mock).mockReturnValue({ success: true }); + }); + it('should render modal', async () => { + const { getByText, getByTestId } = render( + Components( + + + , + ), + ); + + expect(getByText('Import TntConnect DataSync file')).toBeInTheDocument(); + + userEvent.click(getByText(/cancel/i)); + expect(handleClose).toHaveBeenCalledTimes(1); + userEvent.click(getByTestId('CloseIcon')); + expect(handleClose).toHaveBeenCalledTimes(2); + }); + + it('should return error when no file present', async () => { + const mutationSpy = jest.fn(); + const { getByText } = render( + Components( + + + , + ), + ); + userEvent.click(getByText('Upload File')); + + await waitFor(() => + expect(mockEnqueue).toHaveBeenCalledWith( + 'Please select a file to upload.', + { + variant: 'error', + }, + ), + ); + }); + + it('should inform user of the error when uploadiung file.', async () => { + (validateFile as jest.Mock).mockReturnValue({ + success: false, + message: 'Invalid file', + }); + const mutationSpy = jest.fn(); + const { getByTestId, getByText } = render( + Components( + + + , + ), + ); + + const file = new File(['contents'], 'image.png', { + type: 'image/png', + }); + userEvent.upload(getByTestId('importFileUploader'), file); + + userEvent.click(getByText('Upload File')); + + await waitFor(() => + expect(mockEnqueue).toHaveBeenCalledWith('Invalid file', { + variant: 'error', + }), + ); + }); + // TODO: Need more tests with uploading correct file. + // Issue with node-fetch. +}); diff --git a/src/components/Settings/integrations/Organization/Modals/OrganizationImportDataSyncModal.tsx b/src/components/Settings/integrations/Organization/Modals/OrganizationImportDataSyncModal.tsx index 2d708698b..cc3f15227 100644 --- a/src/components/Settings/integrations/Organization/Modals/OrganizationImportDataSyncModal.tsx +++ b/src/components/Settings/integrations/Organization/Modals/OrganizationImportDataSyncModal.tsx @@ -136,6 +136,7 @@ export const OrganizationImportDataSyncModal: React.FC< accept=".tntmpd, .tntdatasync" multiple type="file" + data-testid="importFileUploader" onChange={handleFileChange} /> diff --git a/src/components/Settings/integrations/Organization/OrganizationAccordian.test.tsx b/src/components/Settings/integrations/Organization/OrganizationAccordian.test.tsx new file mode 100644 index 000000000..9be8a796f --- /dev/null +++ b/src/components/Settings/integrations/Organization/OrganizationAccordian.test.tsx @@ -0,0 +1,412 @@ +import { render, waitFor } from '@testing-library/react'; +import { SnackbarProvider } from 'notistack'; +import userEvent from '@testing-library/user-event'; +import { ThemeProvider } from '@mui/material/styles'; +import TestRouter from '__tests__/util/TestRouter'; +import { GqlMockedProvider } from '../../../../../__tests__/util/graphqlMocking'; +import theme from '../../../../theme'; +import { IntegrationsContextProvider } from 'pages/accountLists/[accountListId]/settings/integrations.page'; +import { OrganizationAccordian } from './OrganizationAccordian'; +import { + GetUsersOrganizationsQuery, + GetOrganizationsQuery, +} from './Organizations.generated'; +import * as Types from '../../../../../graphql/types.generated'; + +jest.mock('next-auth/react'); + +const accountListId = 'account-list-1'; +const contactId = 'contact-1'; +const apiToken = 'apiToken'; +const router = { + query: { accountListId, contactId: [contactId] }, + isReady: true, +}; + +const mockEnqueue = jest.fn(); +jest.mock('notistack', () => ({ + // eslint-disable-next-line @typescript-eslint/ban-ts-comment + // @ts-ignore + ...jest.requireActual('notistack'), + useSnackbar: () => { + return { + enqueueSnackbar: mockEnqueue, + }; + }, +})); + +const handleAccordionChange = jest.fn(); + +const Components = (children: React.ReactElement) => ( + + + + + {children} + + + + +); + +const GetOrganizationsMock: Pick< + Types.Organization, + 'apiClass' | 'id' | 'name' | 'oauth' | 'giftAidPercentage' +>[] = [ + { + id: 'organizationId', + name: 'organizationName', + apiClass: 'organizationApiClass', + oauth: false, + giftAidPercentage: 0, + }, +]; + +const GetUsersOrganizationsMock: Array< + Pick< + Types.OrganizationAccount, + 'latestDonationDate' | 'lastDownloadedAt' | 'username' | 'id' + > & { + organization: Pick< + Types.Organization, + 'apiClass' | 'id' | 'name' | 'oauth' + >; + } +> = [ + { + id: 'id', + latestDonationDate: 'latestDonationDate', + lastDownloadedAt: 'lastDownloadedAt', + username: 'username', + organization: { + id: 'organizationId', + name: 'organizationName', + apiClass: 'OfflineOrg', + oauth: false, + }, + }, +]; + +const standardMocks = { + GetOrganizations: { + organizations: GetOrganizationsMock, + }, + GetUsersOrganizations: { + userOrganizationAccounts: GetUsersOrganizationsMock, + }, +}; + +describe('OrganizationAccordian', () => { + process.env.OAUTH_URL = 'https://auth.mpdx.org'; + it('should render accordian closed', async () => { + const { getByText, queryByRole } = render( + Components( + + + , + ), + ); + expect(getByText('Organization')).toBeInTheDocument(); + const image = queryByRole('img', { + name: /Organization/i, + }); + expect(image).not.toBeInTheDocument(); + }); + it('should render accordian open', async () => { + const { queryByRole } = render( + Components( + + + , + ), + ); + const image = queryByRole('img', { + name: /Organization/i, + }); + expect(image).toBeInTheDocument(); + }); + + describe('No Organizations connected', () => { + it('should render Organization Overview', async () => { + const { getByText } = render( + Components( + + mocks={{ + GetOrganizations: { + organizations: [], + }, + GetUsersOrganizations: { + userOrganizationAccounts: [], + }, + }} + > + + , + ), + ); + + await waitFor(() => { + expect( + getByText("Let's start by connecting to your first organization"), + ).toBeInTheDocument(); + }); + userEvent.click(getByText('Add Account')); + expect(getByText('Add Organization Account')).toBeInTheDocument(); + }); + }); + + describe('Organizations connected', () => { + let mocks = { ...standardMocks }; + beforeEach(() => { + mocks = { ...standardMocks }; + }); + + it('should render Offline Organization', async () => { + const { getByText, queryByText } = render( + Components( + + mocks={mocks} + > + + , + ), + ); + + expect( + queryByText("Let's start by connecting to your first organization"), + ).not.toBeInTheDocument(); + + await waitFor(() => { + expect( + getByText(GetUsersOrganizationsMock[0].organization.name), + ).toBeInTheDocument(); + + expect(getByText('Last Updated')).toBeInTheDocument(); + + expect(getByText('Last Gift Date')).toBeInTheDocument(); + }); + + userEvent.click(getByText('Import TntConnect DataSync file')); + + await waitFor(() => { + expect( + getByText( + 'To import your TntConnect database, go to Import from TntConnect', + ), + ).toBeInTheDocument(); + }); + }); + + it('should render Ministry Account Organization', async () => { + const mutationSpy = jest.fn(); + mocks.GetUsersOrganizations.userOrganizationAccounts[0].organization.apiClass = + 'Siebel'; + const { getByText, queryByText } = render( + Components( + + mocks={mocks} + onCall={mutationSpy} + > + + , + ), + ); + + await waitFor(() => { + expect(getByText('Sync')).toBeInTheDocument(); + + expect( + queryByText('Import TntConnect DataSync file'), + ).not.toBeInTheDocument(); + }); + + userEvent.click(getByText('Sync')); + + await waitFor(() => { + expect(mockEnqueue).toHaveBeenCalledWith( + 'MPDX started syncing your organization account. This will occur in the background over the next 24-hours.', + { + variant: 'success', + }, + ); + }); + + expect(mutationSpy.mock.calls[1][0].operation.operationName).toEqual( + 'SyncOrganizationAccount', + ); + expect(mutationSpy.mock.calls[1][0].operation.variables.input).toEqual({ + id: mocks.GetUsersOrganizations.userOrganizationAccounts[0].id, + }); + }); + + it('should render Login Organization', async () => { + const mutationSpy = jest.fn(); + mocks.GetUsersOrganizations.userOrganizationAccounts[0].organization.apiClass = + 'DataServer'; + const { getByText, getByTestId } = render( + Components( + + mocks={mocks} + onCall={mutationSpy} + > + + , + ), + ); + + await waitFor(() => { + expect(getByText('Sync')).toBeInTheDocument(); + expect(getByTestId('EditIcon')).toBeInTheDocument(); + }); + + userEvent.click(getByTestId('EditIcon')); + + await waitFor(() => { + expect(getByText('Edit Organization Account')).toBeInTheDocument(); + }); + }); + + it('should render OAuth Organization', async () => { + const mutationSpy = jest.fn(); + mocks.GetUsersOrganizations.userOrganizationAccounts[0].organization.apiClass = + 'DataServer'; + mocks.GetUsersOrganizations.userOrganizationAccounts[0].organization.oauth = + true; + const { getByText, queryByTestId } = render( + Components( + + mocks={mocks} + onCall={mutationSpy} + > + + , + ), + ); + + await waitFor(() => { + expect(queryByTestId('EditIcon')).not.toBeInTheDocument(); + expect(getByText('Sync')).toBeInTheDocument(); + expect(getByText('Reconnect')).toBeInTheDocument(); + }); + + userEvent.click(getByText('Reconnect')); + + await waitFor(() => { + expect(mockEnqueue).toHaveBeenCalledWith( + 'Redirecting you to complete authenication to reconnect.', + { + variant: 'success', + }, + ); + }); + }); + + it('should delete Organization', async () => { + const mutationSpy = jest.fn(); + const { getByText, getByTestId } = render( + Components( + + mocks={mocks} + onCall={mutationSpy} + > + + , + ), + ); + + await waitFor(() => { + expect(getByTestId('DeleteIcon')).toBeInTheDocument(); + }); + + userEvent.click(getByTestId('DeleteIcon')); + + await waitFor(() => { + expect( + getByText('Are you sure you wish to disconnect this organization?'), + ).toBeInTheDocument(); + }); + userEvent.click(getByText('Yes')); + + await waitFor(() => { + expect(mutationSpy.mock.calls[1][0].operation.operationName).toEqual( + 'DeleteOrganizationAccount', + ); + expect(mutationSpy.mock.calls[1][0].operation.variables.input).toEqual({ + id: mocks.GetUsersOrganizations.userOrganizationAccounts[0].id, + }); + expect(mockEnqueue).toHaveBeenCalledWith( + 'MPDX removed your organization integration', + { variant: 'success' }, + ); + }); + }); + + it("should not render Organization's download and last gift date", async () => { + mocks.GetUsersOrganizations.userOrganizationAccounts[0].lastDownloadedAt = + null; + mocks.GetUsersOrganizations.userOrganizationAccounts[0].latestDonationDate = + null; + const { queryByText } = render( + Components( + + mocks={mocks} + > + + , + ), + ); + + expect(queryByText('Last Updated')).not.toBeInTheDocument(); + + expect(queryByText('Last Gift Date')).not.toBeInTheDocument(); + }); + }); +}); diff --git a/src/components/Settings/integrations/Organization/OrganizationAccordian.tsx b/src/components/Settings/integrations/Organization/OrganizationAccordian.tsx index f2a40add6..3f1be3f34 100644 --- a/src/components/Settings/integrations/Organization/OrganizationAccordian.tsx +++ b/src/components/Settings/integrations/Organization/OrganizationAccordian.tsx @@ -9,6 +9,7 @@ import { Divider, } from '@mui/material'; import { DateTime } from 'luxon'; +import { useSnackbar } from 'notistack'; import theme from 'src/theme'; import DeleteIcon from '@mui/icons-material/Delete'; import Edit from '@mui/icons-material/Edit'; @@ -22,7 +23,6 @@ import { useSyncOrganizationAccountMutation, } from './Organizations.generated'; import { oAuth } from './OrganizationService'; -import { useSnackbar } from 'notistack'; import { Confirmation } from 'src/components/common/Modal/Confirmation/Confirmation'; import { useAccountListId } from 'src/hooks/useAccountListId'; import { OrganizationEditAccountModal } from './Modals/OrganizationEditAccountModal'; @@ -100,8 +100,12 @@ export const OrganizationAccordian: React.FC = ({ const organizations = data?.userOrganizationAccounts; const handleReconnect = async (organizationId) => { - // TODO - await oAuth(organizationId); + enqueueSnackbar( + t('Redirecting you to complete authenication to reconnect.'), + { variant: 'success' }, + ); + const oAuthUrl = await oAuth(organizationId); + window.location.href = oAuthUrl; }; const handleSync = async (accountId: string) => { @@ -172,14 +176,14 @@ export const OrganizationAccordian: React.FC = ({ } > - Add or change the organizations that sync donation information with this + {t(`Add or change the organizations that sync donation information with this MPDX account. Removing an organization will not remove past information, - but will prevent future donations and contacts from syncing. + but will prevent future donations and contacts from syncing.`)} {!loading && !organizations?.length && ( - Let's start by connecting to your first organization + {t("Let's start by connecting to your first organization")} )} diff --git a/src/components/Settings/integrations/Prayerletters/PrayerlettersAccordian.test.tsx b/src/components/Settings/integrations/Prayerletters/PrayerlettersAccordian.test.tsx index d659cd765..235a8d802 100644 --- a/src/components/Settings/integrations/Prayerletters/PrayerlettersAccordian.test.tsx +++ b/src/components/Settings/integrations/Prayerletters/PrayerlettersAccordian.test.tsx @@ -53,72 +53,72 @@ const standardPrayerlettersAccount: Types.PrayerlettersAccount = { describe('PrayerlettersAccount', () => { process.env.OAUTH_URL = 'https://auth.mpdx.org'; - // it('should render accordian closed', async () => { - // const { getByText, queryByRole } = render( - // Components( - // - // - // , - // ), - // ); - // expect(getByText('prayerletters.com')).toBeInTheDocument(); - // const image = queryByRole('img', { - // name: /prayerletters.com/i, - // }); - // expect(image).not.toBeInTheDocument(); - // }); - // it('should render accordian open', async () => { - // const { queryByRole } = render( - // Components( - // - // - // , - // ), - // ); - // const image = queryByRole('img', { - // name: /prayerletters.com/i, - // }); - // expect(image).toBeInTheDocument(); - // }); + it('should render accordian closed', async () => { + const { getByText, queryByRole } = render( + Components( + + + , + ), + ); + expect(getByText('prayerletters.com')).toBeInTheDocument(); + const image = queryByRole('img', { + name: /prayerletters.com/i, + }); + expect(image).not.toBeInTheDocument(); + }); + it('should render accordian open', async () => { + const { queryByRole } = render( + Components( + + + , + ), + ); + const image = queryByRole('img', { + name: /prayerletters.com/i, + }); + expect(image).toBeInTheDocument(); + }); - // describe('Not Connected', () => { - // it('should render PrayerLetters.com Overview', async () => { - // const { getByText } = render( - // Components( - // - // mocks={{ - // GetPrayerlettersAccount: { - // getPrayerlettersAccount: [], - // }, - // }} - // > - // - // , - // ), - // ); + describe('Not Connected', () => { + it('should render PrayerLetters.com Overview', async () => { + const { getByText } = render( + Components( + + mocks={{ + GetPrayerlettersAccount: { + getPrayerlettersAccount: [], + }, + }} + > + + , + ), + ); - // await waitFor(() => { - // expect(getByText('PrayerLetters.com Overview')).toBeInTheDocument(); - // }); - // userEvent.click(getByText('Connect prayerletters.com Account')); + await waitFor(() => { + expect(getByText('PrayerLetters.com Overview')).toBeInTheDocument(); + }); + userEvent.click(getByText('Connect prayerletters.com Account')); - // expect(getByText('Connect prayerletters.com Account')).toHaveAttribute( - // 'href', - // `https://auth.mpdx.org/auth/user/prayer_letters?account_list_id=account-list-1&redirect_to=http%3A%2F%2Flocalhost%2FaccountLists%2Faccount-list-1%2Fsettings%2Fintegrations%3FselectedTab%3Dprayerletters.com&access_token=apiToken`, - // ); - // }); - // }); + expect(getByText('Connect prayerletters.com Account')).toHaveAttribute( + 'href', + `https://auth.mpdx.org/auth/user/prayer_letters?account_list_id=account-list-1&redirect_to=http%3A%2F%2Flocalhost%2FaccountLists%2Faccount-list-1%2Fsettings%2Fintegrations%3FselectedTab%3Dprayerletters.com&access_token=apiToken`, + ); + }); + }); describe('Connected', () => { let prayerlettersAccount = { ...standardPrayerlettersAccount }; From 32756ab151e0536f44433a9404f4d8208278092a Mon Sep 17 00:00:00 2001 From: Daniel Bisgrove Date: Wed, 6 Sep 2023 16:06:29 -0400 Subject: [PATCH 101/103] Adding back yarn lint:ts on pushes --- .husky/pre-push | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.husky/pre-push b/.husky/pre-push index fb701cd46..ca39cd3dc 100755 --- a/.husky/pre-push +++ b/.husky/pre-push @@ -1,4 +1,4 @@ #!/bin/sh . "$(dirname "$0")/_/husky.sh" -#yarn lint:ts +yarn lint:ts From 58d9d2c42fe2b2c71f4b2cfa2400999bb4d21c9e Mon Sep 17 00:00:00 2001 From: Daniel Bisgrove Date: Wed, 6 Sep 2023 16:44:59 -0400 Subject: [PATCH 102/103] Fxing lint issues --- .../Organization/Modals/OrganizationAddAccountModal.tsx | 7 ++++--- .../Organization/Modals/OrganizationEditAccountModal.tsx | 1 - 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components/Settings/integrations/Organization/Modals/OrganizationAddAccountModal.tsx b/src/components/Settings/integrations/Organization/Modals/OrganizationAddAccountModal.tsx index d9d0e648a..7160cc2b4 100644 --- a/src/components/Settings/integrations/Organization/Modals/OrganizationAddAccountModal.tsx +++ b/src/components/Settings/integrations/Organization/Modals/OrganizationAddAccountModal.tsx @@ -45,8 +45,8 @@ export type OrganizationFormikSchema = { Organization, 'id' | 'name' | 'oauth' | 'apiClass' | 'giftAidPercentage' >; - username: string | null | undefined; - password: string | null | undefined; + username: string | undefined; + password: string | undefined; }; const StyledBox = styled(Box)(() => ({ @@ -75,7 +75,8 @@ export const OrganizationAddAccountModal: React.FC< const [createOrganizationAccount] = useCreateOrganizationAccountMutation(); const { data: organizations, loading } = useGetOrganizationsQuery(); - const onSubmit = async (attributes: OrganizationFormikSchema) => { + const onSubmit = async (attributes: Partial) => { + if (!attributes?.selectedOrganization) return; const { apiClass, oauth, id } = attributes.selectedOrganization; const type = getOrganizationType(apiClass, oauth); diff --git a/src/components/Settings/integrations/Organization/Modals/OrganizationEditAccountModal.tsx b/src/components/Settings/integrations/Organization/Modals/OrganizationEditAccountModal.tsx index 1fe832b89..e3e0dad76 100644 --- a/src/components/Settings/integrations/Organization/Modals/OrganizationEditAccountModal.tsx +++ b/src/components/Settings/integrations/Organization/Modals/OrganizationEditAccountModal.tsx @@ -80,7 +80,6 @@ export const OrganizationEditAccountModal: React.FC< > Date: Fri, 22 Sep 2023 17:09:12 -0400 Subject: [PATCH 103/103] REmoving password from query after mutation on change organization login info --- .../Settings/integrations/Organization/Organizations.graphql | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/Settings/integrations/Organization/Organizations.graphql b/src/components/Settings/integrations/Organization/Organizations.graphql index c08998be0..cf0ffdb84 100644 --- a/src/components/Settings/integrations/Organization/Organizations.graphql +++ b/src/components/Settings/integrations/Organization/Organizations.graphql @@ -39,7 +39,6 @@ mutation CreateOrganizationAccount( clientMutationId organizationAccount { username - password person { id }