Merge pull request #1008 from City-of-Helsinki/UHF-10101

UHF-10101: configurable TOS for hakuvahti

hdbt.theme

@@ -78,6 +78,12 @@ function hdbt_preprocess(&$variables): void {
   $hakuvahtiUrl = getenv('HAKUVAHTI_URL');
   $variables['#attached']['drupalSettings']['helfi_react_search']['hakuvahti_url_set'] = !empty($hakuvahtiUrl);
 
+  // Hakuvahti TOS settings.
+  $config = \Drupal::config('helfi_rekry_content.job_listings');
+  $variables['#attached']['drupalSettings']['helfi_rekry_job_search']['hakuvahti_tos_checkbox_label'] = $config->get('hakuvahti_tos_checkbox_label') ?: 'undefined';
+  $variables['#attached']['drupalSettings']['helfi_rekry_job_search']['hakuvahti_tos_link_text'] = $config->get('hakuvahti_tos_link_text') ?: 'undefined';
+  $variables['#attached']['drupalSettings']['helfi_rekry_job_search']['hakuvahti_tos_link_url'] = $config->get('hakuvahti_tos_link_url') ?: 'undefined';
+
   // Required for allowing subtheming for HDBT theme.
   $variables['active_theme'] = $active_theme = \Drupal::theme()->getActiveTheme()->getName();
   $variables['theme_prefix'] = $active_theme !== 'hdbt' ? $active_theme : '';

src/js/react/apps/job-search/containers/SearchMonitorContainer.tsx

@@ -130,16 +130,19 @@ const SearchMonitorContainer = () => {
   const descriptionFirstPart: string = Drupal.t('Save the search you make so that you can receive an email notification of new results matching your search criteria.', {}, { context: 'Search monitor content' });
   const descriptionSecondPart: string = Drupal.t('You can save as many searches as you like. You can delete the saved search via the link in the email messages.', {}, { context: 'Search monitor content' });
   const emailLabel: string = Drupal.t('Email address', {}, { context: 'Search monitor email label' });
-  const acceptTermsLabel: string = Drupal.t('Accept the terms and conditions.', {}, { context: 'Search monitor terms label' });
   const buttonLabel: string = Drupal.t('Save your search', {}, { context: 'Search monitor submit button label' });
   const thankYouHeader: string = Drupal.t('Your search has been saved', {}, { context: 'Search monitor thank you header' });
   const thankYouMessage: string = Drupal.t('You will receive a confirmation link by email. You can activate the saved search via the link.', {}, { context: 'Search monitor thank you message' });
   const errorLabel: string = Drupal.t('Please check these selections', {}, { context: 'Search monitor error label' });
+  const tosCheckboxLabel: string = window.drupalSettings.helfi_rekry_job_search.hakuvahti_tos_checkbox_label;
+  const tosLinkLabel: string = window.drupalSettings.helfi_rekry_job_search.hakuvahti_tos_link_text;
+  const tosLinkUrl: string = window.drupalSettings.helfi_rekry_job_search.hakuvahti_tos_link_url;
+  const tosLinkSuffix: string = Drupal.t('The link opens in a new tab', {}, {context: 'Explanation for users that the link opens in a new tab instead of the expected current tab'});
 
   const customCheckboxStyles = {
     '--background-unselected': 'var(--color-white)',
     '--background-selected': 'var(--color-black)',
-    marginTop: 'var(--spacing-m)',
+    marginTop: 'var(--spacing-2-xs)',
   };
 
   return (
@@ -164,7 +167,8 @@ const SearchMonitorContainer = () => {
             {isFormVisible ? closeLabel : openLabel}
           </Button>
 
-          <div id='job-search-form__search-monitor__content' className='job-search-form__search-monitor__content' aria-hidden={!isFormVisible}>
+          <div id='job-search-form__search-monitor__content' className='job-search-form__search-monitor__content'
+               aria-hidden={!isFormVisible}>
             <h4 className='job-search-form__search-monitor__content__heading'>{descriptionHeader}</h4>
             <p>{descriptionFirstPart}</p>
             <p>{descriptionSecondPart}</p>
@@ -194,9 +198,10 @@ const SearchMonitorContainer = () => {
               }}
             />
 
+            <p><a href={tosLinkUrl} target='_blank' rel="noreferrer"  className='job-search-form__search-monitor__terms-link'>{tosLinkLabel} ({tosLinkSuffix})</a></p>
             <Checkbox
               className='job-search-form__search-monitor__terms'
-              label={acceptTermsLabel}
+              label={tosCheckboxLabel}
               id='job-search-form__search_monitor__terms'
               onChange={(event) => setTermsAgreed(event.target.checked)}
               checked={termsAgreed}

src/js/types/drupalSettings.d.ts

@@ -39,6 +39,9 @@ declare namespace drupalSettings {
   };
   const helfi_rekry_job_search: {
     results_page_path: string;
+    hakuvahti_tos_checkbox_label: string;
+    hakuvahti_tos_link_text: string;
+    hakuvahti_tos_link_url: string;
   };
   const helfi_news_archive: {
     elastic_proxy_url: string;