fix: social links to use react hook form

cypress/e2e/account/settings/publicProfile.cy.ts

@@ -1,17 +1,12 @@
 import { ACCOUNT_SETTINGS_PATH } from '../../../../src/config/paths';
 import {
   PUBLIC_PROFILE_BIO_ID,
+  PUBLIC_PROFILE_CONFIGURE_BUTTON_ID,
   PUBLIC_PROFILE_EDIT_BUTTON_ID,
-  PUBLIC_PROFILE_FACEBOOK_ID,
-  PUBLIC_PROFILE_LINKEDIN_ID,
+  PUBLIC_PROFILE_NOT_CONFIGURED_CONTAINER_ID,
   PUBLIC_PROFILE_SAVE_BUTTON_ID,
-  PUBLIC_PROFILE_TWITTER_ID,
 } from '../../../../src/config/selectors';
-import {
-  MEMBERS,
-  MEMBER_EMPTY_PUBLIC_PROFILE,
-  MEMBER_PUBLIC_PROFILE,
-} from '../../../fixtures/members';
+import { MEMBERS, MEMBER_PUBLIC_PROFILE } from '../../../fixtures/members';
 
 const SocialProfile = {
   Linkedin: 'linkedinID',
@@ -38,36 +33,27 @@ describe('Display public profile', () => {
       );
 
       // displays the correct member linkedIn
-      cy.get(`#${PUBLIC_PROFILE_LINKEDIN_ID}`).should(
-        'contain',
-        MEMBER_PUBLIC_PROFILE.linkedinID,
-      );
+      cy.get(`#linkedinID`).should('contain', MEMBER_PUBLIC_PROFILE.linkedinID);
       // displays the correct member linkedIn link
-      cy.get(`#${PUBLIC_PROFILE_LINKEDIN_ID} a`).should(
+      cy.get(`#linkedinID a`).should(
         'have.attr',
         'href',
         `https://linkedin.com/in/${MEMBER_PUBLIC_PROFILE.linkedinID}`,
       );
 
       // displays the correct member twitter
-      cy.get(`#${PUBLIC_PROFILE_TWITTER_ID}`).should(
-        'contain',
-        MEMBER_PUBLIC_PROFILE.twitterID,
-      );
+      cy.get(`#twitterID`).should('contain', MEMBER_PUBLIC_PROFILE.twitterID);
       // displays the correct member twitter link
-      cy.get(`#${PUBLIC_PROFILE_TWITTER_ID} a`).should(
+      cy.get(`#twitterID a`).should(
         'have.attr',
         'href',
         `https://twitter.com/${MEMBER_PUBLIC_PROFILE.twitterID}`,
       );
 
       // displays the correct member facebook
-      cy.get(`#${PUBLIC_PROFILE_FACEBOOK_ID}`).should(
-        'contain',
-        MEMBER_PUBLIC_PROFILE.facebookID,
-      );
+      cy.get(`#facebookID`).should('contain', MEMBER_PUBLIC_PROFILE.facebookID);
       // displays the correct member facebook link
-      cy.get(`#${PUBLIC_PROFILE_FACEBOOK_ID} a`).should(
+      cy.get(`#facebookID a`).should(
         'have.attr',
         'href',
         `https://facebook.com/${MEMBER_PUBLIC_PROFILE.facebookID}`,
@@ -79,35 +65,23 @@ describe('Display public profile', () => {
     beforeEach(() => {
       cy.setUpApi({
         currentMember: MEMBERS.BOB,
-        currentProfile: MEMBER_EMPTY_PUBLIC_PROFILE,
+        currentProfile: null,
       });
       cy.visit(ACCOUNT_SETTINGS_PATH);
       cy.wait('@getOwnProfile');
     });
 
     it('display public profile when empty', () => {
       // displays a message indicating no bio is available
-      cy.get(`#${PUBLIC_PROFILE_BIO_ID}`).should(
+      cy.get(`#${PUBLIC_PROFILE_CONFIGURE_BUTTON_ID}`).should(
         'contain',
-        'No biography has been specified',
+        'Configure',
       );
 
       // displays a message indicating no LinkedIn ID is available
-      cy.get(`#${PUBLIC_PROFILE_LINKEDIN_ID}`).should(
+      cy.get(`#${PUBLIC_PROFILE_NOT_CONFIGURED_CONTAINER_ID}`).should(
         'contain',
-        'No LinkedIn username has been specified',
-      );
-
-      // displays a message indicating no Twitter ID is available
-      cy.get(`#${PUBLIC_PROFILE_TWITTER_ID}`).should(
-        'contain',
-        'No Twitter username has been specified',
-      );
-
-      // displays a message indicating no Facebook ID is available
-      cy.get(`#${PUBLIC_PROFILE_FACEBOOK_ID}`).should(
-        'contain',
-        'No Facebook username has been specified',
+        "You haven't configured your public profile yet. Add a description and social links to personalize your profile for other users.",
       );
     });
   });
@@ -132,25 +106,22 @@ describe('Edit public profile', () => {
       MEMBER_PUBLIC_PROFILE.bio,
     );
     // displays the correct member linkedin value
-    cy.get(`#${PUBLIC_PROFILE_LINKEDIN_ID}`).should(
+    cy.get(`#linkedinID`).should(
       'have.value',
-      `https://linkedin.com/in/${MEMBER_PUBLIC_PROFILE.linkedinID}`,
+      MEMBER_PUBLIC_PROFILE.linkedinID,
     );
     // displays the correct member twitter value
-    cy.get(`#${PUBLIC_PROFILE_TWITTER_ID}`).should(
-      'have.value',
-      `https://twitter.com/${MEMBER_PUBLIC_PROFILE.twitterID}`,
-    );
+    cy.get(`#twitterID`).should('have.value', MEMBER_PUBLIC_PROFILE.twitterID);
     // displays the correct member facebook value
-    cy.get(`#${PUBLIC_PROFILE_FACEBOOK_ID}`).should(
+    cy.get(`#facebookID`).should(
       'have.value',
-      `https://facebook.com/${MEMBER_PUBLIC_PROFILE.facebookID}`,
+      MEMBER_PUBLIC_PROFILE.facebookID,
     );
   });
 
-  it('bio field cannot be empty ', () => {
+  it('bio field can be empty ', () => {
     cy.get(`#${PUBLIC_PROFILE_BIO_ID}`).clear();
-    cy.get(`#${PUBLIC_PROFILE_SAVE_BUTTON_ID}`).should('be.disabled');
+    cy.get(`#${PUBLIC_PROFILE_SAVE_BUTTON_ID}`).should('be.enabled');
   });
 
   [

cypress/fixtures/members.ts

@@ -30,16 +30,6 @@ export const MEMBER_PUBLIC_PROFILE: PublicProfile = {
   updatedAt: '2021-04-13 14:56:34.749946',
   visibility: false,
 };
-export const MEMBER_EMPTY_PUBLIC_PROFILE: PublicProfile = {
-  id: 'ecafbd2a-5642-31fb-ae93-0242ac130004',
-  bio: '',
-  twitterID: '',
-  facebookID: '',
-  linkedinID: '',
-  createdAt: '2021-04-13 14:56:34.749946',
-  updatedAt: '2021-04-13 14:56:34.749946',
-  visibility: false,
-};
 
 export const MEMBERS = {
   ANNA: MemberFactory({

cypress/support/commands.ts

@@ -72,7 +72,7 @@ declare global {
       setUpApi(args: {
         currentMember?: MemberForTest | null;
         hasPassword?: boolean;
-        currentProfile?: PublicProfile;
+        currentProfile?: PublicProfile | null;
         storageAmountInBytes?: number;
         getCurrentMemberError?: boolean;
         getCurrentProfileError?: boolean;

src/components/layout/BorderedSection.tsx

@@ -5,13 +5,13 @@ import { Stack, Typography } from '@mui/material';
 type BorderedSectionProps = {
   id?: string;
   title: string;
-  topActions?: ReactNode[];
+  topAction?: ReactNode;
   children: ReactNode;
 };
 export function BorderedSection({
   id,
   title,
-  topActions,
+  topAction,
   children,
 }: Readonly<BorderedSectionProps>): JSX.Element {
   return (
@@ -25,9 +25,7 @@ export function BorderedSection({
     >
       <Stack direction="row" justifyContent="space-between">
         <Typography variant="h5">{title}</Typography>
-        <Stack direction="row" gap={1}>
-          {topActions}
-        </Stack>
+        {topAction}
       </Stack>
       {children}
     </Stack>

src/config/selectors.ts

@@ -52,12 +52,13 @@ export const PERSONAL_INFO_INPUT_EMAIL_ID = 'personal-info-input-email';
 
 export const PUBLIC_PROFILE_BIO_ID = 'public-profile-bio';
 export const PUBLIC_PROFILE_EDIT_BUTTON_ID = 'public-profile-edit-button';
+export const PUBLIC_PROFILE_CONFIGURE_BUTTON_ID =
+  'public-profile-configure-button';
 export const PUBLIC_PROFILE_SAVE_BUTTON_ID = 'public-profile-save-button';
-export const PUBLIC_PROFILE_LINKEDIN_ID = 'public-profile-linkedIn';
-export const PUBLIC_PROFILE_TWITTER_ID = 'public-profile-twitter';
-export const PUBLIC_PROFILE_FACEBOOK_ID = 'public-profile-facebook';
 export const PUBLIC_PROFILE_DISPLAY_CONTAINER_ID =
   'public-profile-display-container';
+export const PUBLIC_PROFILE_NOT_CONFIGURED_CONTAINER_ID =
+  'public-profile-not-configured-container';
 export const PUBLIC_PROFILE_EDIT_CONTAINER_ID = 'public-profile-edit-container';
 
 export const PASSWORD_DISPLAY_CONTAINER_ID = 'password-display-container';

src/locales/en/account.json

@@ -42,22 +42,22 @@
   "PASSWORD_SETTINGS_NEW_LABEL": "New Password",
   "PASSWORD_SETTINGS_NEW_CONFIRM_LABEL": "Confirm Password",
   "PASSWORD_SETTINGS_CONFIRM_INFORMATION": "Make sure it is at least 8 characters including a number, a lowercase letter and an uppercase letter.",
-  "PUBLIC_PROFILE_TITLE": "Public Profile",
-  "PUBLIC_PROFILE_DESCRIPTION": "Personalize your public profile to let other users interested in your work know a bit more about you. You can make it private anytime.",
-  "PUBLIC_PROFILE_LINKEDIN_LINK": "LinkedIn ID",
-  "PUBLIC_PROFILE_LINKEDIN_LINK_ERROR_MSG": "LinkedIn Link is not a valid url",
-  "PUBLIC_PROFILE_LINKEDIN_EMPTY_MSG": "No LinkedIn username has been specified",
-  "PUBLIC_PROFILE_TWITTER_LINK": "Twitter ID",
-  "PUBLIC_PROFILE_TWITTER_LINK_ERROR_MSG": "Twitter Link is not a valid url",
-  "PUBLIC_PROFILE_TWITTER_EMPTY_MSG": "No Twitter username has been specified",
-  "PUBLIC_PROFILE_FACEBOOK_LINK": "Facebook ID",
-  "PUBLIC_PROFILE_FACEBOOK_LINK_ERROR_MSG": "Facebook Link is not a valid url",
-  "PUBLIC_PROFILE_FACEBOOK_EMPTY_MSG": "No Facebook username has been specified",
-  "PUBLIC_PROFILE_BIO": "Bio",
-  "PUBLIC_PROFILE_BIO_ERROR_MSG": "Bio is a required field",
-  "PUBLIC_PROFILE_BIO_EMPTY_MSG": "No biography has been specified",
-  "PUBLIC_PROFILE_VISIBILITY": "Make this profile public",
-  "PUBLIC_PROFILE_CHECK_TEXT": "Check Profile",
+  "PUBLIC_PROFILE": {
+    "TITLE": "Public Profile",
+    "DESCRIPTION": "Personalize your public profile to let other users interested in your work know a bit more about you. You can make it private anytime.",
+    "CONFIGURE": "Configure",
+    "NOT_CONFIGURED_DESCRIPTION": "You haven't configured your public profile yet. Add a description and social links to personalize your profile for other users.",
+    "LINKEDIN_LINK": "LinkedIn ID",
+    "TWITTER_LINK": "Twitter ID",
+    "FACEBOOK_LINK": "Facebook ID",
+    "INVALID_LINK_ERROR": "This does not look like a valid social url",
+    "EMPTY_LINK_ERROR": "No social url specified",
+    "BIO_LABEL": "Bio",
+    "BIO_ERROR_MSG": "Bio is a required field",
+    "BIO_EMPTY_MSG": "No biography has been specified",
+    "VISIBILITY_LABEL": "Make this profile public",
+    "CHECK_TEXT": "Check Profile"
+  },
   "ALWAYS_RECEIVE_EMAILS": "Always receive email notifications",
   "DISABLE_EMAILS": "Disable email notifications",
   "GENERAL_PAGE_WELCOME_TEXT": "Welcome {{name}}",

src/modules/account/settings/password/Password.tsx

@@ -45,7 +45,7 @@ export function Password(): JSX.Element {
       <BorderedSection
         id={PASSWORD_DISPLAY_CONTAINER_ID}
         title={t('PASSWORD_TITLE')}
-        topActions={[
+        topAction={
           <Button
             key="edit"
             variant="contained"
@@ -57,8 +57,8 @@ export function Password(): JSX.Element {
             {passwordStatus?.hasPassword
               ? t('EDIT_BUTTON_LABEL')
               : t('CONFIGURE_BUTTON_LABEL')}
-          </Button>,
-        ]}
+          </Button>
+        }
       >
         <Typography
           id={PASSWORD_DISPLAY_INFORMATION_ID}

src/modules/account/settings/preferences/Preferences.tsx

@@ -50,7 +50,7 @@ export const Preferences = (): JSX.Element | null => {
   return (
     <BorderedSection
       title={t('PROFILE_PREFERENCES_TITLE')}
-      topActions={[
+      topAction={
         <Button
           key="edit"
           variant="contained"
@@ -59,8 +59,8 @@ export const Preferences = (): JSX.Element | null => {
           size="small"
         >
           {t('EDIT_BUTTON_LABEL')}
-        </Button>,
-      ]}
+        </Button>
+      }
     >
       <SettingItem
         title={t('PROFILE_LANGUAGE_TITLE')}

src/modules/account/settings/profile/PersonalInformation.tsx

@@ -46,7 +46,7 @@ export function PersonalInformation(): JSX.Element | null {
     <BorderedSection
       title={t('PERSONAL_INFORMATION_TITLE')}
       id={PERSONAL_INFO_DISPLAY_CONTAINER_ID}
-      topActions={[
+      topAction={
         <Button
           key="edit"
           id={PERSONAL_INFO_EDIT_BUTTON_ID}
@@ -55,8 +55,8 @@ export function PersonalInformation(): JSX.Element | null {
           size="small"
         >
           {t('EDIT_BUTTON_LABEL')}
-        </Button>,
-      ]}
+        </Button>
+      }
     >
       <SettingItem
         key="name"