Merge pull request #2537 from bcgov/feature/DESENG-629-add-new-engage…

…ment-fields

[To Main] Feature - DESENG-629: Add new engagement fields

CHANGELOG.MD

@@ -1,11 +1,16 @@
+## June 10, 2024
+
+- **Feature** Add new fields for use in "new look" design [🎟️ DESENG-629](https://apps.itsm.gov.bc.ca/jira/browse/DESENG-629)
+  - Added the fields `sponsor_name`, `cta_message`, and `cta_url` to the engagement model
+  - Added Sponsor Name, Call To Action, and CTA URL to the engagement form
+  - Added basic validation for the new fields
+
 ## June 6, 2024
 
 - **Feature** Add a new engagement view page [🎟️ DESENG-636](https://apps.itsm.gov.bc.ca/jira/browse/DESENG-636)
-
   - Added a new page to view engagements using the new look for MET
   - The page is available at `/gdx/new-look/[name]/[language]`
   - The page is a work in progress and will be updated in the future
-
 - **Feature** Use createBrowserRouter insead of \<BrowserRouter> in the App component [🎟️ DESENG-627](https://apps.itsm.gov.bc.ca/jira/browse/DESENG-627)
   - Updated the App component to use the more flexible createBrowserRouter function instead of the <BrowserRouter> component
   - This enables the use of [data router](https://reactrouter.com/en/6.23.0/routers/picking-a-router) functionality and other advanced features in the future, most notably the Blocker component
@@ -24,57 +29,45 @@
 ## May 30, 2024
 
 - **Feature** Remove web components [🎟️ DESENG-616](https://apps.itsm.gov.bc.ca/jira/browse/DESENG-616)
-
   - Removed web components and all code that references it
-
 - **Feature** Remove EAO process widget [🎟️ DESENG-626](https://apps.itsm.gov.bc.ca/jira/browse/DESENG-626)
   - Removed EAO process widget
   - Added migration file to remove EAO process widget attached to any existing engagement
 
 ## May 29, 2024
 
 - **Bugfix** Null in the public URL [🎟️ DESENG-625](https://apps.itsm.gov.bc.ca/jira/browse/DESENG-625)
-
   - Removed language from URLs other than engagement/survey links
   - Fixed the issue of null appearing in public URLs
-
 - **Feature** MET split out tenant specific variables from locale files [🎟️ DESENG-612](https://apps.itsm.gov.bc.ca/jira/browse/DESENG-612)
   - Replaced tenant based values with data from tenant detail API
 
 ## May 27, 2024
 
 - **Feature** MET translation file keys used on pages needing translation [🎟️ DESENG-611](https://apps.itsm.gov.bc.ca/jira/browse/DESENG-611)
-
   - Removed Tenant based translations from langauge files
   - Set TODO statements to replace tenant related values from backend
   - Splitting translations based on language files and added a common translation file for items common across all languages
-
 - **Bugfix** Global Focus State (UXD) [🎟️ DESENG-583](https://apps.itsm.gov.bc.ca/jira/browse/DESENG-583)
   - Worked on components to match the design system and support new colors
   - Implemented focus states across public pages and components
 
 ## May 23, 2024
 
 - **Feature** Finish tenant management UX [🎟️ DESENG-605](https://apps.itsm.gov.bc.ca/jira/browse/DESENG-605), [🎟️ DESENG-606](https://apps.itsm.gov.bc.ca/jira/browse/DESENG-606)
-
   - Added a new tenant detail page
   - Added a form for filling out tenant details
   - Added a new tenant creation page
   - Added a new tenant edit page
-
 - **Feature** Add design system components to common components
-
   - Added Table components, DetailsContainer, and Detail for layout
   - Reworked button components to match the design system and support new colors
   - Reworked modal components to match the design system
   - Reworked image upload component to match the design system
   - Added new form components that align with the design system
-
 - **Bugfix** Security issue with email verification [🎟️ DESENG-618](https://apps.itsm.gov.bc.ca/jira/browse/DESENG-618)
-
   - Removed verification token from the response object
   - Updated the test to reflect the change
-
 - **Bugfix** Add try catch block around snowplow call [🎟️ DESENG-621](https://apps.itsm.gov.bc.ca/jira/browse/DESENG-621)
   - Added a try catch block to all snowplow calls
 
@@ -102,10 +95,8 @@
 ## May 13, 2024
 
 - **Bugfix** Date shown on rejection email preview is incorrect [🎟️ DESENG-597](https://apps.itsm.gov.bc.ca/jira/browse/DESENG-597)
-
   - Fixed the date formatting issue and using the end_date in the email preview
   - Updated unit tests
-
 - **Feature** Create role for metadata management [🎟️ DESENG-603](https://apps.itsm.gov.bc.ca/jira/browse/DESENG-603)
   - Implemented a new role named "manage_metadata" within the Admin group to restrci access for metadata management
   - Updated the frontend to restrict access to the "metadata management" link in the menu for users without the newly added role
@@ -241,7 +232,6 @@
 ## April 04, 2024
 
 - **Feature** Engagement filtering - Add filtering by taxon [🎟️DESENG-445](https://apps.itsm.gov.bc.ca/jira/browse/DESENG-445)
-
   - Added properties to metadata taxa to allow them to be marked as filterable.
   - Added a new file `filter_types.py` where additional filters can be added as subquery factory functions.
   - Added a new endpoint to the API to retrieve filterable taxa.
@@ -255,7 +245,6 @@
   - Updated the public-facing engagement list to allow filtering by metadata taxa. This makes use of the new API endpoint to retrieve filterable taxa.
   - Added a new filter "drawer" to the listing page to hold these and any future filter types.
   - (Out of scope, but related to UX work for this ticket) Fixed a display issue with the public engagements page where engagements would not take up the full width of their grid cell.
-
 - **Task**: Keycloak Unit Tests for New CSS API Integration [DESENG-508](https://apps.itsm.gov.bc.ca/jira/browse/DESENG-508)
   - Updated Keycloak Unit Tests for New CSS API Integration.
 
@@ -502,13 +491,11 @@
 ## January 9, 2024
 
 - **Task** Improvements from Epic [🎟️DESENG-468](https://apps.itsm.gov.bc.ca/jira/browse/DESENG-468)
-
   - Improvements to Survey Result Tracking analytics
   - New Rejection Email Template for Closed Engagements
   - Export Format for Proponent updated to be in excel format
   - Formio Version Update
   - Enable Survey Editing for Open Engagements
-
 - **Bug Fix**: Fixing timezone issue while publishing using met cron [🎟️DESENG-437](https://apps.itsm.gov.bc.ca/jira/browse/DESENG-437)
 
 ## December 28, 2023
@@ -551,15 +538,13 @@
 ## November 6, 2023
 
 - **Feature**: Switch MET to use Keycloak SSO service [🎟️DESENG-408](https://apps.itsm.gov.bc.ca/jira/browse/DESENG-408)
-
   - Switch all role-based checks on the API to use a single callback function (`current_app.config['JWT_ROLE_CALLBACK']`)
   - Added a configurable path `JWT_ROLE_CLAIM` to indicate where your SSO instance places role information in the JWT token. If your access token looks like:
     `{ ..., "realm_access": { "roles": [ "role1", "role2"]}}` you would set `JWT_ROLE_CLAIM=realm_access.roles`
   - Explicitly disable single tenant mode by default to ensure correct multi-tenancy behaviour
   - Remove local Keycloak instances and configuration
   - Default to the "standard" realm for Keycloak
   - Use tenancy information from DB rather than Keycloak
-
 - **Feature**: .env var audit and cleanup [🎟️DESENG-414](https://apps.itsm.gov.bc.ca/jira/browse/DESENG-414)
 
 ## October 26, 2023

met-api/migrations/versions/33ae368765fc_add_engmt_sponsor_and_cta.py

@@ -0,0 +1,36 @@
+"""Add sponsor_name and cta_message to engagement and engagement_translation
+
+Revision ID: 33ae368765fc
+Revises: f0f7eadf3a40
+Create Date: 2024-06-10 10:30:11.057813
+
+"""
+from alembic import op
+import sqlalchemy as sa
+
+
+# revision identifiers, used by Alembic.
+revision = '33ae368765fc'
+down_revision = 'f0f7eadf3a40'
+branch_labels = None
+depends_on = None
+
+
+def upgrade():
+    # ### commands auto generated by Alembic - please adjust! ###
+    op.add_column('engagement', sa.Column('sponsor_name', sa.String(length=50), nullable=True))
+    op.add_column('engagement', sa.Column('cta_message', sa.String(length=50), nullable=True))
+    op.add_column('engagement', sa.Column('cta_url', sa.String(length=500), nullable=True))
+    op.add_column('engagement_translation', sa.Column('sponsor_name', sa.String(length=50), nullable=True))
+    op.add_column('engagement_translation', sa.Column('cta_message', sa.String(length=50), nullable=True))
+    # ### end Alembic commands ###
+
+
+def downgrade():
+    # ### commands auto generated by Alembic - please adjust! ###
+    op.drop_column('engagement_translation', 'cta_message')
+    op.drop_column('engagement_translation', 'sponsor_name')
+    op.drop_column('engagement', 'cta_url')
+    op.drop_column('engagement', 'cta_message')
+    op.drop_column('engagement', 'sponsor_name')
+    # ### end Alembic commands ###

met-api/src/met_api/models/engagement.py

@@ -55,6 +55,9 @@ class Engagement(BaseModel):
     tenant = db.relationship('Tenant', backref='engagements')
     is_internal = db.Column(db.Boolean, nullable=False)
     consent_message = db.Column(JSON, unique=False, nullable=True)
+    sponsor_name = db.Column(db.String(50), nullable=True)
+    cta_message = db.Column(db.String(50), nullable=True)
+    cta_url = db.Column(db.String(500), nullable=True)
 
     @classmethod
     def get_engagements_paginated(
@@ -143,6 +146,9 @@ def update_engagement(cls, engagement: EngagementSchema) -> Engagement:
             'is_internal': engagement.get('is_internal', record.is_internal),
             'consent_message': engagement.get(
                 'consent_message', record.consent_message),
+            'sponsor_name': engagement.get('sponsor_name', record.sponsor_name),
+            'cta_message': engagement.get('cta_message', record.cta_message),
+            'cta_url': engagement.get('cta_url', record.cta_url),
         }
         query.update(update_fields)
         db.session.commit()

met-api/src/met_api/models/engagement_translation.py

@@ -29,6 +29,8 @@ class EngagementTranslation(BaseModel):
     upcoming_status_block_text = db.Column(JSON, unique=False, nullable=True)
     open_status_block_text = db.Column(JSON, unique=False, nullable=True)
     closed_status_block_text = db.Column(JSON, unique=False, nullable=True)
+    sponsor_name = db.Column(db.String(50))
+    cta_message = db.Column(db.String(50))
 
     # Add a unique constraint on engagement_id and language_id
     # A engagement has only one version in a particular language
@@ -76,6 +78,8 @@ def __create_new_engagement_translation_entity(data):
             upcoming_status_block_text=data.get('upcoming_status_block_text', None),
             open_status_block_text=data.get('open_status_block_text', None),
             closed_status_block_text=data.get('closed_status_block_text', None),
+            sponsor_name=data.get('sponsor_name', None),
+            cta_message=data.get('cta_message', None),
         )
 
     @staticmethod

met-api/src/met_api/schemas/engagement.py

@@ -47,6 +47,9 @@ class Meta:  # pylint: disable=too-few-public-methods
     tenant_id = fields.Str(data_key='tenant_id')
     is_internal = fields.Bool(data_key='is_internal')
     consent_message = fields.Str(data_key='consent_message')
+    sponsor_name = fields.Str(data_key='sponsor_name')
+    cta_message = fields.Str(data_key='cta_message')
+    cta_url = fields.Str(data_key='cta_url')
 
     def get_submissions_meta_data(self, obj):
         """Get the meta data of the submissions made in the survey."""

met-api/src/met_api/schemas/engagement_translation.py

@@ -24,3 +24,5 @@ class Meta:  # pylint: disable=too-few-public-methods
     upcoming_status_block_text = fields.Str(data_key='upcoming_status_block_text')
     open_status_block_text = fields.Str(data_key='open_status_block_text')
     closed_status_block_text = fields.Str(data_key='closed_status_block_text')
+    sponsor_name = fields.Str(data_key='sponsor_name')
+    cta_message = fields.Str(data_key='cta_message')

met-api/src/met_api/services/engagement_service.py

@@ -188,7 +188,10 @@ def _create_engagement_model(engagement_data: dict) -> EngagementModel:
             scheduled_date=None,
             banner_filename=engagement_data.get('banner_filename', None),
             is_internal=engagement_data.get('is_internal', False),
-            consent_message=engagement_data.get('consent_message', None)
+            consent_message=engagement_data.get('consent_message', None),
+            sponsor_name=engagement_data.get('sponsor_name', None),
+            cta_message=engagement_data.get('cta_message', None),
+            cta_url=engagement_data.get('cta_url', None),
         )
         new_engagement.save()
         return new_engagement

met-api/src/met_api/services/engagement_translation_service.py

@@ -140,6 +140,8 @@ def _get_default_language_values(engagement, summary_content, translation_data):
         translation_data['content'] = summary_content.content
         translation_data['rich_content'] = summary_content.rich_content
         translation_data['consent_message'] = engagement.consent_message
+        translation_data['sponsor_name'] = engagement.sponsor_name
+        translation_data['cta_message'] = engagement.cta_message
 
         engagement_slug = EngagementSlugModel.find_by_engagement_id(engagement_id)
         if engagement_slug:

met-web/src/components/common/Input/TextInput.tsx

@@ -10,7 +10,7 @@ import { SxProps, Theme } from '@mui/system';
 
 type TextInputProps = {
     value?: string;
-    onChange?: (value: string) => void;
+    onChange?: (value: string, name?: string) => void;
     placeholder?: string;
     disabled?: boolean;
 } & Omit<InputProps, 'value' | 'onChange' | 'placeholder' | 'disabled'>;
@@ -33,7 +33,7 @@ export const TextInput: React.FC<TextInputProps> = ({
             disableUnderline
             type="text"
             value={value}
-            onChange={(e) => onChange?.(e.target.value)}
+            onChange={(e) => onChange?.(e.target.value, e.target.name)}
             placeholder={placeholder}
             disabled={disabled}
             sx={{
@@ -122,13 +122,15 @@ export type TextFieldProps = {
     counter?: boolean;
     maxLength?: number;
     clearable?: boolean;
-} & Omit<FormFieldProps, 'children'> &
-    Omit<TextInputProps, 'fullWidth' | 'error'>;
+    onChange: (value: string, name?: string) => void;
+} & Omit<FormFieldProps, 'children' | 'onChange'> &
+    Omit<TextInputProps, 'fullWidth' | 'error' | 'onChange'>;
 
 export const TextField = ({
     title,
     instructions,
     error,
+    name,
     required,
     optional,
     clearable,
@@ -143,7 +145,8 @@ export const TextField = ({
     }, [textInputProps.value]);
 
     const handleSetValue = (newValue: string) => {
-        onChange?.(newValue) ?? setValue(newValue);
+        if (onChange === undefined) return setValue(newValue);
+        onChange?.(newValue, name);
     };
 
     const isError = !!error;
@@ -162,6 +165,7 @@ export const TextField = ({
                 fullWidth
                 error={isError}
                 value={value}
+                name={name}
                 required={required}
                 disabled={disabled}
                 endAdornment={clearable && value ? clearInputButton(() => handleSetValue('')) : undefined}

met-web/src/components/engagement/form/ActionContext.tsx

@@ -14,6 +14,7 @@ import { USER_ROLES } from 'services/userService/constants';
 import { EngagementStatus } from 'constants/engagementStatus';
 import { EngagementContent, createDefaultEngagementContent } from 'models/engagementContent';
 import { getEngagementContent } from 'services/engagementContentService';
+import { TenantState } from 'reduxSlices/tenantSlice';
 
 const CREATE = 'create';
 export const ActionContext = createContext<EngagementContext>({
@@ -63,6 +64,7 @@ export const ActionContext = createContext<EngagementContext>({
 });
 
 export const ActionProvider = ({ children }: { children: JSX.Element }) => {
+    const { name: tenantName }: TenantState = useAppSelector((state) => state.tenant);
     const { engagementId } = useParams<EngagementParams>();
     const navigate = useNavigate();
     const dispatch = useAppDispatch();
@@ -74,7 +76,7 @@ export const ActionProvider = ({ children }: { children: JSX.Element }) => {
     const [loadingAuthorization, setLoadingAuthorization] = useState(true);
 
     const [tenantTaxa, setTenantTaxa] = useState<MetadataTaxon[]>([]);
-    const [savedEngagement, setSavedEngagement] = useState<Engagement>(createDefaultEngagement());
+    const [savedEngagement, setSavedEngagement] = useState<Engagement>(createDefaultEngagement(tenantName));
     const [isNewEngagement, setIsNewEngagement] = useState(!savedEngagement.id);
     const [engagementMetadata, setEngagementMetadata] = useState<EngagementMetadata[]>([]);
     const [bannerImage, setBannerImage] = useState<File | null>();

met-web/src/components/engagement/form/EngagementFormTabs/EngagementContent/SummaryTabContent.tsx

@@ -1,10 +1,10 @@
 import React, { useEffect, useState, useContext } from 'react';
 import { Grid } from '@mui/material';
 import { SurveyBlock } from '../SurveyBlock';
-import { MetDescription, MetLabel } from 'components/common';
 import RichTextEditor from 'components/common/RichTextEditor';
 import { EngagementTabsContext } from '../EngagementTabsContext';
 import { ActionContext } from '../../ActionContext';
+import { BodyText } from 'components/common/Typography';
 
 const SummaryTabContent = () => {
     const { savedEngagement } = useContext(ActionContext);
@@ -42,9 +42,10 @@ const SummaryTabContent = () => {
             columnSpacing={2}
         >
             <Grid item xs={12}>
-                <MetLabel>Engagement - Page Content</MetLabel>
-
-                <MetDescription>This is the main content of the engagement page.</MetDescription>
+                <BodyText bold size="large">
+                    Engagement - Page Content
+                </BodyText>
+                <BodyText size="small">This is the main content of the engagement page.</BodyText>
 
                 <div style={{ position: 'relative' }}>
                     <RichTextEditor