P20-119: Add pre-lockdown parental permission banner

apps/i18n/common/en_us.json

@@ -1996,6 +1996,9 @@
   "plugged": "Plugged",
   "pluggedLessonsNote": "*Online or ‘plugged’ lessons are automatically marked as complete on your behalf once 80% of your class has completed 60% of the available lesson.",
   "picturePassword": "Picture password",
+  "policyCompliance_parentalPermissionBanner_title": "Heads up!",
+  "policyCompliance_parentalPermissionBanner_desc": "You will need your parent or guardian’s permission by {lockoutDate} to keep using your Code.org account.",
+  "policyCompliance_parentalPermissionBanner_button": "Get permission",
   "policyCompliance_parentalPermissionModal_newRequestForm_title": "Heads up! Your account may soon be locked.",
   "policyCompliance_parentalPermissionModal_newRequestForm_text1": "Starting on {lockoutDate}, **you will need your parent or guardian’s permission to keep your personal login** with Code.org.",
   "policyCompliance_parentalPermissionModal_newRequestForm_text2": "To avoid having your account locked, please share your parent or guardian’s email address so they can grant you permission.",

apps/src/lib/util/AnalyticsConstants.js

@@ -36,6 +36,17 @@ const EVENTS = {
   CAP_STATE_FORM_SHOW: 'CAP State Form Shown',
   CAP_STATE_FORM_PROVIDED: 'CAP State Form Submitted',
   CAP_STATE_FORM_DISMISSED: 'CAP State Form Sign Out Button Clicked',
+  CPA_PARENT_EMAIL_BANNER_SHOWN: 'cpa_parent_email_banner_shown',
+  CPA_PARENT_EMAIL_BANNER_CLICKED: 'cpa_parent_email_banner_clicked',
+  CPA_PARENT_EMAIL_BANNER_SUBMITTED: 'cpa_parent_email_banner_submitted',
+  CPA_PARENT_EMAIL_BANNER_UPDATED: 'cpa_parent_email_banner_updated',
+  CPA_PARENT_EMAIL_BANNER_RESEND: 'cpa_parent_email_banner_resend',
+  CPA_PARENT_EMAIL_BANNER_CLOSED: 'cpa_parent_email_banner_closed',
+  CPA_PARENT_EMAIL_MODAL_SHOWN: 'cpa_parent_email_modal_shown',
+  CPA_PARENT_EMAIL_MODAL_SUBMITTED: 'cpa_parent_email_modal_submitted',
+  CPA_PARENT_EMAIL_MODAL_UPDATED: 'cpa_parent_email_modal_updated',
+  CPA_PARENT_EMAIL_MODAL_RESEND: 'cpa_parent_email_modal_resend',
+  CPA_PARENT_EMAIL_MODAL_CLOSED: 'cpa_parent_email_modal_closed',
 
   // School Selection Component
   COUNTRY_SELECTED: 'User Selects Country',
@@ -273,13 +284,6 @@ const EVENTS = {
   CHAT_ACTION: 'Student takes a chat action',
   SAVE_MODEL_CARD_INFO: 'Student saves their model card info',
   PUBLISH_MODEL_CARD_INFO: 'Student publishes their model card info',
-
-  // CPA
-  CPA_PARENT_EMAIL_MODAL_SHOWN: 'cpa_parent_email_modal_shown',
-  CPA_PARENT_EMAIL_MODAL_SUBMITTED: 'cpa_parent_email_modal_submitted',
-  CPA_PARENT_EMAIL_MODAL_UPDATED: 'cpa_parent_email_modal_updated',
-  CPA_PARENT_EMAIL_MODAL_RESEND: 'cpa_parent_email_modal_resend',
-  CPA_PARENT_EMAIL_MODAL_CLOSED: 'cpa_parent_email_modal_closed',
 };
 
 const EVENT_GROUP_NAMES = {

apps/src/redux/parentalPermissionRequestReducer.ts

@@ -19,14 +19,19 @@ export const REQUEST_PARENTAL_PERMISSION_SUCCESS =
   'requestParentalPermission/success';
 const REQUEST_PARENTAL_PERMISSION_FAILURE = 'requestParentalPermission/failure';
 
-interface ParentalPermissionRequest {
+const RESET_PARENTAL_PERMISSION_REQUEST = 'resetParentalPermissionRequest';
+
+export interface ParentalPermissionRequest {
   parent_email: string;
   requested_at: string;
   resends_sent: number;
   consent_status: string;
 }
 
 type ParentalPermissionRequestAction =
+  | {
+      type: typeof RESET_PARENTAL_PERMISSION_REQUEST;
+    }
   | {
       type: typeof FETCH_PENDING_PERMISSION_REQUEST_PERFORM;
     }
@@ -62,6 +67,10 @@ export default function parentalPermissionRequestReducer(
   action: ParentalPermissionRequestAction
 ): ParentalPermissionRequestState {
   switch (action.type) {
+    case RESET_PARENTAL_PERMISSION_REQUEST:
+      return {
+        isLoading: false,
+      };
     case FETCH_PENDING_PERMISSION_REQUEST_PERFORM:
       return {
         ...state,
@@ -169,3 +178,7 @@ export const requestParentalPermission = async (
     });
   }
 };
+
+export const resetParentalPermissionRequest = (
+  dispatch: Dispatch<ParentalPermissionRequestAction>
+) => dispatch({type: RESET_PARENTAL_PERMISSION_REQUEST});

apps/src/sites/studio/pages/home/_homepage.js

@@ -19,6 +19,7 @@ import {initializeHiddenScripts} from '@cdo/apps/code-studio/hiddenLessonRedux';
 import {queryParams, updateQueryParam} from '@cdo/apps/code-studio/utils';
 import locales, {setLocaleCode} from '@cdo/apps/redux/localesRedux';
 import mapboxReducer, {setMapboxAccessToken} from '@cdo/apps/redux/mapbox';
+import ParentalPermissionBanner from '@cdo/apps/templates/policy_compliance/ParentalPermissionBanner';
 
 $(document).ready(showHomepage);
 
@@ -80,6 +81,12 @@ function showHomepage() {
   }
 
   const announcement = getTeacherAnnouncement(announcementOverride);
+  const parentalPermissionBanner = homepageData.parentalPermissionBanner && (
+    <ParentalPermissionBanner
+      key="parentla-permission-bnner"
+      {...homepageData.parentalPermissionBanner}
+    />
+  );
 
   ReactDOM.render(
     <Provider store={store}>
@@ -130,6 +137,7 @@ function showHomepage() {
               homepageData.showStudentAsVerifiedTeacherWarning
             }
             specialAnnouncement={studentSpecialAnnouncement}
+            topComponents={[parentalPermissionBanner]}
           />
         )}
       </div>

apps/src/sites/studio/pages/policy_compliance/parental_permission/_banner.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import {Provider} from 'react-redux';
+
+import {getStore} from '@cdo/apps/redux';
+import getScriptData from '@cdo/apps/util/getScriptData';
+import ParentalPermissionBanner from '@cdo/apps/templates/policy_compliance/ParentalPermissionBanner';
+
+document.addEventListener('DOMContentLoaded', () => {
+  ReactDOM.render(
+    <Provider store={getStore()}>
+      <ParentalPermissionBanner lockoutDate={getScriptData('lockoutDate')} />
+    </Provider>,
+    document.getElementById('parental-permission-banner-container')
+  );
+});

apps/src/sites/studio/pages/policy_compliance/parental_permission/_modal.js

@@ -1,20 +1,60 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import moment from 'moment';
+
 import {tryGetLocalStorage, trySetLocalStorage} from '@cdo/apps/utils';
 import getScriptData from '@cdo/apps/util/getScriptData';
 import ParentalPermissionModal from '@cdo/apps/templates/policy_compliance/ParentalPermissionModal';
+import analyticsReporter from '@cdo/apps/lib/util/AnalyticsReporter';
+import {EVENTS, PLATFORMS} from '@cdo/apps/lib/util/AnalyticsConstants';
 
 const SHOW_DELAY = 86400; // 1 day
 
 document.addEventListener('DOMContentLoaded', () => {
   const renderModal = () => {
-    const lockoutDate = new Date(getScriptData('lockoutDate'));
+    const inSection = getScriptData('inSection');
+
+    const reportEvent = (eventName, payload = {}) => {
+      payload.isSection = inSection;
+      analyticsReporter.sendEvent(eventName, payload, PLATFORMS.AMPLITUDE);
+    };
+
+    const handleClose = () => {
+      reportEvent(EVENTS.CPA_PARENT_EMAIL_MODAL_CLOSED);
+    };
+
+    const handleSubmit = parentalPermissionRequest => {
+      reportEvent(EVENTS.CPA_PARENT_EMAIL_MODAL_SUBMITTED, {
+        consentStatus: parentalPermissionRequest.consent_status,
+      });
+    };
 
-    return ReactDOM.render(
-      <ParentalPermissionModal lockoutDate={lockoutDate} />,
+    const handleResend = (prevPPR, PPR) => {
+      reportEvent(EVENTS.CPA_PARENT_EMAIL_MODAL_RESEND, {
+        oldConsentStatus: prevPPR.consent_status,
+        newConsentStatus: PPR.consent_status,
+      });
+    };
+
+    const handleUpdate = (prevPPR, PPR) => {
+      reportEvent(EVENTS.CPA_PARENT_EMAIL_MODAL_UPDATED, {
+        oldConsentStatus: prevPPR.consent_status,
+        newConsentStatus: PPR.consent_status,
+      });
+    };
+
+    ReactDOM.render(
+      <ParentalPermissionModal
+        lockoutDate={getScriptData('lockoutDate')}
+        onClose={handleClose}
+        onSubmit={handleSubmit}
+        onResend={handleResend}
+        onUpdate={handleUpdate}
+      />,
       document.getElementById('parental-permission-modal-container')
     );
+
+    reportEvent(EVENTS.CPA_PARENT_EMAIL_MODAL_SHOWN);
   };
 
   if (getScriptData('forceDisplay')) {

apps/src/sites/studio/pages/scripts/show.js

@@ -30,6 +30,7 @@ import progress from '@cdo/apps/code-studio/progress';
 import UnitOverview from '@cdo/apps/code-studio/components/progress/UnitOverview.jsx';
 import {setStudentDefaultsSummaryView} from '@cdo/apps/code-studio/progressRedux';
 import {updateQueryParam, queryParams} from '@cdo/apps/code-studio/utils';
+import ParentalPermissionBanner from '@cdo/apps/templates/policy_compliance/ParentalPermissionBanner';
 
 import locales, {setLocaleCode} from '../../../../redux/localesRedux';
 
@@ -38,6 +39,9 @@ $(document).ready(initPage);
 function initPage() {
   const script = document.querySelector('script[data-scriptoverview]');
   const config = JSON.parse(script.dataset.scriptoverview);
+  const parentalPermissionBannerData =
+    script.dataset.parentalPermissionBanner &&
+    JSON.parse(script.dataset.parentalPermissionBanner);
 
   const {scriptData, plcBreadcrumb} = config;
   const store = getStore();
@@ -104,6 +108,10 @@ function initPage() {
 
   ReactDOM.render(
     <Provider store={store}>
+      {parentalPermissionBannerData && (
+        <ParentalPermissionBanner {...parentalPermissionBannerData} />
+      )}
+
       <UnitOverview
         id={scriptData.id}
         courseId={scriptData.course_id}

apps/src/templates/CurrentUserState.ts

@@ -25,4 +25,6 @@ export interface CurrentUserState {
   over21: boolean;
   showProgressTableV2: boolean;
   progressTableV2ClosedBeta: boolean;
+  childAccountComplianceState: string | null;
+  inSection: boolean | null;
 }

apps/src/templates/Notification.jsx

@@ -14,6 +14,7 @@ import trackEvent from '../util/trackEvent';
 import Button from './Button';
 
 export const NotificationType = {
+  default: 'default',
   information: 'information',
   success: 'success',
   failure: 'failure',
@@ -50,6 +51,7 @@ const Notification = ({
   type,
   tooltipText,
   width,
+  colors,
 }) => {
   const [open, setOpen] = useState(true);
 
@@ -127,7 +129,7 @@ const Notification = ({
     return null;
   }
 
-  const colorStyles = styles.colors[type];
+  const colorStyles = {...styles.colors[type], ...colors};
 
   const tooltipId = _.uniqueId();
 
@@ -136,7 +138,9 @@ const Notification = ({
       <div style={{...colorStyles, ...mainStyle}}>
         {type !== NotificationType.course && (
           <div style={{...styles.iconBox, ...colorStyles, ...iconStyles}}>
-            <FontAwesome icon={icons[type]} style={styles.icon} />
+            {icons[type] && (
+              <FontAwesome icon={icons[type]} style={styles.icon} />
+            )}
           </div>
         )}
         <div style={styles.contentBox}>
@@ -258,6 +262,17 @@ Notification.propTypes = {
 
   // Can be specified to override default width
   width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+
+  colors: PropTypes.shape({
+    backgroundColor: PropTypes.string,
+    borderColor: PropTypes.string,
+    color: PropTypes.string,
+  }),
+};
+
+Notification.defaultProps = {
+  type: NotificationType.default,
+  colors: {},
 };
 
 const styles = {
@@ -333,6 +348,10 @@ const styles = {
     marginBottom: 18,
   },
   colors: {
+    [NotificationType.default]: {
+      borderColor: color.teal,
+      backgroundColor: color.teal,
+    },
     [NotificationType.information]: {
       borderColor: color.teal,
       color: color.teal,

apps/src/templates/currentUserRedux.js

@@ -114,6 +114,7 @@ const initialState = {
   under13: true,
   over21: false,
   childAccountComplianceState: null,
+  inSection: null,
 };
 
 export default function currentUser(state = initialState, action) {
@@ -230,6 +231,7 @@ export default function currentUser(state = initialState, action) {
       date_progress_table_invitation_last_delayed,
       has_seen_progress_table_v2_invitation,
       child_account_compliance_state,
+      in_section,
     } = action.serverUser;
     analyticsReport.setUserProperties(
       id,
@@ -262,6 +264,7 @@ export default function currentUser(state = initialState, action) {
         date_progress_table_invitation_last_delayed,
       hasSeenProgressTableInvite: has_seen_progress_table_v2_invitation,
       childAccountComplianceState: child_account_compliance_state,
+      inSection: in_section,
     };
   }
 

apps/src/templates/policy_compliance/ParentalPermissionBanner/index.story.tsx

@@ -0,0 +1,44 @@
+import {Meta, StoryFn} from '@storybook/react';
+import React from 'react';
+import {Provider} from 'react-redux';
+import sinon from 'sinon';
+
+import {getStore, registerReducers} from '@cdo/apps/redux';
+import currentUser, {
+  setInitialData,
+} from '@cdo/apps/templates/currentUserRedux';
+
+import ParentalPermissionBanner from '.';
+
+const store = getStore();
+registerReducers({currentUser});
+store.dispatch(
+  setInitialData({
+    id: 1,
+    childAccountComplianceState: 's',
+  })
+);
+
+export default {
+  component: ParentalPermissionBanner,
+  decorators: [
+    (Story: StoryFn) => (
+      <Provider store={store}>
+        <Story />
+      </Provider>
+    ),
+  ],
+} as Meta;
+
+const spy = sinon.spy();
+export const Default = () => {
+  const state = {
+    parentalPermissionRequest: null,
+  };
+
+  // @ts-expect-error eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  React.useReducer.restore && React.useReducer.restore();
+  sinon.stub(React, 'useReducer').returns([state, spy]);
+
+  return <ParentalPermissionBanner lockoutDate={new Date().toISOString()} />;
+};