fix: solve visibility issues when user requiresParentalConsent

Author: bra-i-am

src/profile/ProfilePage.jsx

@@ -217,8 +217,8 @@ class ProfilePage extends React.Component {
     const isCertificatesBlockVisible = isBlockVisible(courseCertificates.length);
     const isNameBlockVisible = isBlockVisible(name);
     const isLocationBlockVisible = isBlockVisible(country);
-    // TODO: modify /api/user/v1/accounts/{{username}} to return extended profile fields
-    // So this can be shown for no-authenticated user profiles
+    // TODO: modify /api/user/v1/accounts/{{username}} to return extended profile field values
+    // So these fields can be shown for no-authenticated user profiles
     const isExtendedProfileFieldsVisible = isBlockVisible(
       extendedProfileFields.length > 0 && this.isAuthenticatedUserProfile(),
     );

src/profile/data/sagas.js

@@ -97,7 +97,7 @@ export function* handleFetchProfile(action) {
 
     yield put(fetchProfileReset());
   } catch (e) {
-    if (e.response.status === 404) {
+    if (e.response?.status === 404) {
       if (e.processedData && e.processedData.fieldErrors) {
         yield put(saveProfileFailure(e.processedData.fieldErrors));
       } else {

src/profile/data/services.js

@@ -90,10 +90,11 @@ export async function getPreferences(username) {
   const { data } = await getHttpClient().get(`${getConfig().LMS_BASE_URL}/api/user/v1/preferences/${username}`);
 
   const processedData = camelCaseObject(data);
+  const visibilityExtendedProfile = Object.prototype.hasOwnProperty.call(data, 'visibilityExtendedProfile');
 
   return {
     ...processedData,
-    visibilityExtendedProfile: JSON.parse(data['visibility.extended_profile']),
+    visibilityExtendedProfile: visibilityExtendedProfile ? JSON.parse(data['visibility.extended_profile']) : {},
   };
 }
 

src/profile/forms/ExtendedProfileFields.jsx

@@ -66,15 +66,9 @@ const ExtendedProfileFields = (props) => {
             className="mb-5"
             expression={field.type}
             cases={{
-              checkbox: (
-                <CheckboxField {...commonProps} />
-              ),
-              text: (
-                <TextField {...commonProps} />
-              ),
-              select: (
-                <SelectField {...commonProps} />
-              ),
+              checkbox: <CheckboxField {...commonProps} />,
+              text: <TextField {...commonProps} />,
+              select: <SelectField {...commonProps} />,
             }}
           />
         );

src/profile/forms/elements/CheckboxField.jsx

@@ -113,9 +113,20 @@ const CheckboxField = ({
             </small>
           </>
         ),
-        static: (
+        static: value && (
           <>
-            <EditableItemHeader content={label} />
+            <EditableItemHeader
+              content={(
+                <Form.Checkbox
+                  id={formId}
+                  name={formId}
+                  checked={value}
+                >
+                  <div dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(label) }} />
+                </Form.Checkbox>
+              )}
+              showVisibility={false}
+            />
             <p data-hj-suppress className="h5">{value}</p>
           </>
         ),

src/profile/forms/elements/SelectField.jsx

@@ -109,7 +109,7 @@ const SelectField = ({
             </EmptyContent>
           </>
         ),
-        static: (
+        static: value && (
           <>
             <EditableItemHeader
               content={label}

src/profile/forms/elements/TextField.jsx

@@ -104,7 +104,7 @@ const TextField = ({
             </small>
           </>
         ),
-        static: (
+        static: value && (
           <>
             <EditableItemHeader content={label} />
             <p data-hj-suppress className="h5">{value}</p>