@comicrelief/component-library 7.7.0 → 7.9.0

package/src/components/Organisms/MarketingPreferencesDS/_MarketingPreferencesDS.js

@@ -1,16 +1,13 @@
-/* eslint-disable camelcase */
 import React from 'react';
 import PropTypes from 'prop-types';
 import { useWatch } from 'react-hook-form';
 import _ from 'lodash';
-import Text from '../../Atoms/Text/Text';
-import TextInput from './_TextInput';
 import CheckAnswer from './_CheckAnswer';
-import NoMessage from './_NoMessage';
 
 import { defaultCopyTop, defaultCopyBottom } from './_DefaultCopy';
 import {
-  TopCopyWrapper, BottomCopyWrapper, Head, FormField, ShowHideInputWrapper
+  TopCopyWrapper, BottomCopyWrapper, Head, FormField,
+  ShowHideInputWrapper, ExtraInfo, OuterWrapper, MPTextInput
 } from './MarketingPreferencesDS.style';
 
 import {
@@ -27,27 +24,24 @@ const MarketingPreferencesDS = ({
   const { errors, control } = formContext;
 
   // For brevity
-  const emailChoice = useWatch({ control, name: 'mp_permissionEmail', defaultValue: [] });
-  const postChoice = useWatch({ control, name: 'mp_permissionPost', defaultValue: [] });
-  const phoneChoice = useWatch({ control, name: 'mp_permissionPhone', defaultValue: [] });
-  const smsChoice = useWatch({ control, name: 'mp_permissionSMS', defaultValue: [] });
+  const emailChoice = useWatch({ control, name: 'mp_permissionEmail', defaultValue: null });
+  const postChoice = useWatch({ control, name: 'mp_permissionPost', defaultValue: null });
+  const phoneChoice = useWatch({ control, name: 'mp_permissionPhone', defaultValue: null });
+  const smsChoice = useWatch({ control, name: 'mp_permissionSMS', defaultValue: null });
 
   const {
+    // eslint-disable-next-line camelcase
     mp_permissionEmail, mp_permissionSMS, mp_permissionPhone, mp_permissionPost
   } = mpValidationOptions;
 
   // If the field is not required for each No/Yes choice, remove it from the DOM entirely
-  const disableEmailInput = (mp_permissionEmail.yes === false && emailChoice.includes('yes'))
-  || (mp_permissionEmail.no === false && emailChoice.includes('no'));
+  const disableEmailInput = (mp_permissionEmail.yes === false && emailChoice.includes('yes'));
 
-  const disableSMSInput = (mp_permissionSMS.yes === false && smsChoice.includes('yes'))
-  || (mp_permissionSMS.no === false && smsChoice.includes('no'));
+  const disableSMSInput = (mp_permissionSMS.yes === false && smsChoice.includes('yes'));
 
-  const disablePhoneInput = (mp_permissionPhone.yes === false && phoneChoice.includes('yes'))
-  || (mp_permissionPhone.no === false && phoneChoice.includes('no'));
+  const disablePhoneInput = (mp_permissionPhone.yes === false && phoneChoice.includes('yes'));
 
-  const disablePostInput = (mp_permissionPost.yes === false && postChoice.includes('yes'))
-  || (mp_permissionPost.no === false && postChoice.includes('no'));
+  const disablePostInput = (mp_permissionPost.yes === false && postChoice.includes('yes'));
 
   // Required to track multiple errors to determine whether to show/hide the fieldset
   const isAddressErroring = () => {
@@ -59,42 +53,43 @@ const MarketingPreferencesDS = ({
   };
   /* Only show the field if config hasn't hidden it (to pass in parent values)
     or if a choice has been made */
-  const showEmailField = !mp_permissionEmail.hideInput && (emailChoice.length || errors.mp_email);
-  const showSMSField = !mp_permissionSMS.hideInput && (smsChoice.length || errors.mp_mobile);
-  const showPhoneField = !mp_permissionPhone.hideInput && (phoneChoice.length || errors.mp_phone);
-  const showPostFields = !mp_permissionPost.hideInput && (postChoice.length || isAddressErroring());
+  const showEmailField = !mp_permissionEmail.hideInput && (emailChoice || errors.mp_email);
+  const showSMSField = !mp_permissionSMS.hideInput && (smsChoice || errors.mp_mobile);
+  const showPhoneField = !mp_permissionPhone.hideInput && (phoneChoice || errors.mp_phone);
+  const showPostFields = !mp_permissionPost.hideInput && (postChoice || isAddressErroring());
 
   const customId = id ? `marketing-preferences--${id}` : 'marketing-preferences';
 
   return (
-    <div id={customId}>
+    <OuterWrapper id={customId}>
       {copyTop && <TopCopyWrapper>{copyTop}</TopCopyWrapper>}
 
       {/* Render Email checkboxes and input if not removed in config */}
       {!mp_permissionEmail.disableOption && (
       <FormField className="field-email">
         <Head>
-          <Text tag="h3" size="l" family="Anton" uppercase weight="400" color="grey_dark">
-            Email Me
-          </Text>
           <CheckAnswer
             mpValidationOptions={mpValidationOptions}
             name="mp_permissionEmail"
             id="mp_permissionEmail"
-            userSelection={emailChoice[0]}
+            userSelection={emailChoice}
             formContext={formContext}
           />
         </Head>
 
         <MaybeDisabled disabled={disableEmailInput}>
           <ShowHideInputWrapper show={showEmailField}>
-            {emailChoice[0] === 'no' && <NoMessage askingFor="an email" optInType="email" /> }
-            <TextInput
+            <ExtraInfo>
+              Please confirm the email address we will use to
+              <b> email </b>
+              you:
+            </ExtraInfo>
+            <MPTextInput
               placeholder=""
               fieldName="mp_email"
               label="Please enter your email address"
               // Dynamically update the field attr based on config for current choice
-              optional={!mp_permissionEmail[emailChoice[0]]}
+              optional={!mp_permissionEmail[emailChoice]}
               type="email"
               id="mp_email"
               formContext={formContext}
@@ -104,95 +99,34 @@ const MarketingPreferencesDS = ({
       </FormField>
       )}
 
-      {/* Render SMS checkboxes and inputs if not removed in config */}
-      {!mp_permissionSMS.disableOption && (
-      <FormField className="field-sms">
-        <Head>
-          <Text tag="h3" size="l" family="Anton" uppercase weight="400" color="grey_dark">
-            Text me
-          </Text>
-          <CheckAnswer
-            name="mp_permissionSMS"
-            id="mp_permissionSMS"
-            mpValidationOptions={mpValidationOptions}
-            userSelection={smsChoice[0]}
-            formContext={formContext}
-          />
-        </Head>
-        <MaybeDisabled disabled={disableSMSInput}>
-          <ShowHideInputWrapper show={showSMSField}>
-            {smsChoice[0] === 'no' && <NoMessage askingFor="a mobile number" optInType="SMS" />}
-            <TextInput
-              placeholder=""
-              fieldName="mp_mobile"
-              label="Please enter your mobile no."
-              optional={!mp_permissionSMS[smsChoice[0]]}
-              id="mp_mobile"
-              formContext={formContext}
-            />
-          </ShowHideInputWrapper>
-        </MaybeDisabled>
-      </FormField>
-      )}
-
-      {/* Render Phone checkboxes and input if not removed in config */}
-      {!mp_permissionPhone.disableOption && (
-      <FormField className="field-phone">
-        <Head>
-          <Text tag="h3" size="l" family="Anton" uppercase weight="400" color="grey_dark">
-            Phone me
-          </Text>
-          <CheckAnswer
-            name="mp_permissionPhone"
-            mpValidationOptions={mpValidationOptions}
-            id="mp_permissionPhone"
-            userSelection={phoneChoice[0]}
-            formContext={formContext}
-          />
-        </Head>
-        <MaybeDisabled disabled={disablePhoneInput}>
-          <ShowHideInputWrapper show={showPhoneField}>
-            {phoneChoice[0] === 'no' ? <NoMessage askingFor="a phone number" optInType="phone" /> : ''}
-            <TextInput
-              placeholder=""
-              fieldName="mp_phone"
-              label="Please enter your phone no."
-              optional={!mp_permissionPhone[phoneChoice[0]]}
-              id="mp_phone"
-              formContext={formContext}
-            />
-          </ShowHideInputWrapper>
-        </MaybeDisabled>
-      </FormField>
-      )}
-
       {/* Render Post checkboxes and inputs if not removed in config */}
       {!mp_permissionPost.disableOption && (
       <FormField className="field-post">
         <Head>
-          <Text tag="h3" size="l" family="Anton" uppercase weight="400" color="grey_dark">
-            Send me post
-          </Text>
           <CheckAnswer
             name="mp_permissionPost"
             mpValidationOptions={mpValidationOptions}
             id="mp_permissionPost"
-            userSelection={postChoice[0]}
+            userSelection={postChoice}
             formContext={formContext}
           />
         </Head>
         <MaybeDisabled disabled={disablePostInput}>
           <ShowHideInputWrapper show={showPostFields}>
-            {postChoice[0] === 'no' ? <NoMessage askingFor="an address" optInType="postal" /> : ''}
-            <TextInput
+            <ExtraInfo>
+              Please confirm the address we will use to
+              <b> post </b>
+              to you:
+            </ExtraInfo>
+            <MPTextInput
               placeholder=""
               fieldName="mp_address1"
               label="Address Line 1"
-              optional={!mp_permissionPost[postChoice[0]]}
+              optional={!mp_permissionPost[postChoice]}
               id="mp_address1"
               formContext={formContext}
             />
-            <TextInput
+            <MPTextInput
               placeholder=""
               fieldName="mp_address2"
               label="Address Line 2"
@@ -200,7 +134,7 @@ const MarketingPreferencesDS = ({
               id="mp_address2"
               formContext={formContext}
             />
-            <TextInput
+            <MPTextInput
               placeholder=""
               fieldName="mp_address3"
               label="Address Line 3"
@@ -208,27 +142,27 @@ const MarketingPreferencesDS = ({
               id="mp_address3"
               formContext={formContext}
             />
-            <TextInput
+            <MPTextInput
               placeholder=""
               fieldName="mp_town"
               label="Town/City"
-              optional={!mp_permissionPost[postChoice[0]]}
+              optional={!mp_permissionPost[postChoice]}
               id="mp_town"
               formContext={formContext}
             />
-            <TextInput
+            <MPTextInput
               placeholder=""
               fieldName="mp_postcode"
               label="Postcode"
-              optional={!mp_permissionPost[postChoice[0]]}
+              optional={!mp_permissionPost[postChoice]}
               id="mp_postcode"
               formContext={formContext}
             />
-            <TextInput
+            <MPTextInput
               placeholder=""
               fieldName="mp_country"
               label="Country"
-              optional={!mp_permissionPost[postChoice[0]]}
+              optional={!mp_permissionPost[postChoice]}
               id="mp_country"
               formContext={formContext}
             />
@@ -237,8 +171,72 @@ const MarketingPreferencesDS = ({
       </FormField>
       )}
 
+      {/* Render SMS checkboxes and inputs if not removed in config */}
+      {!mp_permissionSMS.disableOption && (
+      <FormField className="field-sms">
+        <Head>
+          <CheckAnswer
+            name="mp_permissionSMS"
+            id="mp_permissionSMS"
+            mpValidationOptions={mpValidationOptions}
+            userSelection={smsChoice}
+            formContext={formContext}
+          />
+        </Head>
+        <MaybeDisabled disabled={disableSMSInput}>
+          <ShowHideInputWrapper show={showSMSField}>
+            <ExtraInfo>
+              Please confirm the mobile number we will use to
+              <b> text </b>
+              you on:
+            </ExtraInfo>
+            <MPTextInput
+              placeholder=""
+              fieldName="mp_mobile"
+              label="Please enter your mobile no."
+              optional={!mp_permissionSMS[smsChoice]}
+              id="mp_mobile"
+              formContext={formContext}
+            />
+          </ShowHideInputWrapper>
+        </MaybeDisabled>
+      </FormField>
+      )}
+
+      {/* Render Phone checkboxes and input if not removed in config */}
+      {!mp_permissionPhone.disableOption && (
+      <FormField className="field-phone">
+        <Head>
+          <CheckAnswer
+            name="mp_permissionPhone"
+            mpValidationOptions={mpValidationOptions}
+            id="mp_permissionPhone"
+            userSelection={phoneChoice}
+            formContext={formContext}
+          />
+        </Head>
+        <MaybeDisabled disabled={disablePhoneInput}>
+          <ShowHideInputWrapper show={showPhoneField}>
+            <ExtraInfo>
+              Please confirm the telephone number we will use to
+              <b> phone </b>
+              you on:
+            </ExtraInfo>
+            <MPTextInput
+              placeholder=""
+              fieldName="mp_phone"
+              label="Please enter your phone no."
+              optional={!mp_permissionPhone[phoneChoice]}
+              id="mp_phone"
+              formContext={formContext}
+            />
+          </ShowHideInputWrapper>
+        </MaybeDisabled>
+      </FormField>
+      )}
+
       {copyBottom && <BottomCopyWrapper>{copyBottom}</BottomCopyWrapper>}
-    </div>
+    </OuterWrapper>
   );
 };
 

package/src/components/Organisms/MarketingPreferencesDS/_MarketingPrefsConfig.js

@@ -12,10 +12,10 @@ const setInitialValues = overrideValues => {
     mp_town: '',
     mp_country: '',
     mp_postcode: '',
-    mp_permissionEmail: [],
-    mp_permissionPost: [],
-    mp_permissionPhone: [],
-    mp_permissionSMS: []
+    mp_permissionEmail: false,
+    mp_permissionPost: false,
+    mp_permissionPhone: false,
+    mp_permissionSMS: false
   };
 
   // Override with any custom options supplied
@@ -29,12 +29,12 @@ const buildValidationSchema = overrideOptions => {
     mp_permissionEmail: {
       /**
         * As per react-hook-form's validation requirements, sets the fields' required attribute
-        * for each checkbox option (Yes & No), a non-required field isn't rendered or included
-        * in the validation. As the backend *currently* needs values to formalise a user's opt-out,
-        * we'll set all fields to 'required' by default (once the option is chosen).
+        * for each checkbox option (now only 'Yes' as of 2023), a non-required field isn't rendered
+        * or included in the validation. As the backend *currently* needs values to formalise
+        * a user's opt-out, we'll set all fields to 'required' by default
+        * (once the option is chosen).
         */
       yes: true,
-      no: true,
       // Hide the input from user interaction, but keep it in the DOM so we can pass values to it
       hideInput: false,
       // Allows complete removal of the option (checkboxes & fields) from both render & validation.
@@ -43,19 +43,16 @@ const buildValidationSchema = overrideOptions => {
     },
     mp_permissionSMS: {
       yes: true,
-      no: true,
       hideInput: false,
       disableOption: false
     },
     mp_permissionPhone: {
       yes: true,
-      no: true,
       hideInput: false,
       disableOption: false
     },
     mp_permissionPost: {
       yes: true,
-      no: true,
       hideInput: false,
       disableOption: false
     }

package/src/components/Organisms/MarketingPreferencesDS/assets/CR_Tick_black.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><path d="M36.121 15.879a2.998 2.998 0 0 0-4.242 0L21 26.757l-4.879-4.878a2.998 2.998 0 0 0-4.242 0 2.998 2.998 0 0 0 0 4.242l7 7c.586.586 1.353.879 2.121.879s1.535-.293 2.121-.879l13-13a2.998 2.998 0 0 0 0-4.242z" fill="#000"/></svg>

package/src/theme/crTheme/colors.js

@@ -38,6 +38,10 @@ const colors = {
   purple_light: '#DFC6F6',
   red: '#E52630',
   red_dark: '#890B11',
+  rnd_23_teal: '#3EB1AA',
+  rnd_23_yellow: '#FFE300',
+  rnd_23_pink: '#EDB4D3',
+  rnd_23_black: '#2B3737',
   teal: '#4ECDBE',
   teal_dark: '#13767C',
   teal_light: '#86E4E9',

package/dist/components/Organisms/MarketingPreferencesDS/_NoMessage.js

@@ -1,40 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _react = _interopRequireDefault(require("react"));
-
-var _styledComponents = _interopRequireWildcard(require("styled-components"));
-
-var _Text = _interopRequireDefault(require("../../Atoms/Text/Text"));
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
-var NoMessageWrapper = _styledComponents.default.div.withConfig({
-  displayName: "_NoMessage__NoMessageWrapper",
-  componentId: "sc-2h3k46-0"
-})(["", ""], function (_ref) {
-  var theme = _ref.theme;
-  return (0, _styledComponents.css)(["background-color:", ";padding:15px;margin-bottom:15px;"], theme.color('red'));
-});
-
-var NoMessage = function NoMessage(_ref2) {
-  var askingFor = _ref2.askingFor,
-      optInType = _ref2.optInType;
-  var message = "This will remove the supplied ".concat(askingFor, " from any *previous* ").concat(optInType, " opt-in from our database; otherwise, you can leave this unchecked.");
-  return /*#__PURE__*/_react.default.createElement(NoMessageWrapper, null, /*#__PURE__*/_react.default.createElement(_Text.default, {
-    tag: "p",
-    size: "s",
-    color: "white"
-  }, message));
-};
-
-var _default = NoMessage;
-exports.default = _default;

package/src/components/Organisms/MarketingPreferencesDS/_NoMessage.js

@@ -1,27 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import styled, { css } from 'styled-components';
-import Text from '../../Atoms/Text/Text';
-
-const NoMessageWrapper = styled.div`${({ theme }) => css`
-  background-color: ${theme.color('red')};
-  padding: 15px;
-  margin-bottom: 15px;
-`}`;
-
-const NoMessage = ({ askingFor, optInType }) => {
-  const message = `This will remove the supplied ${askingFor} from any *previous* ${optInType} opt-in from our database; otherwise, you can leave this unchecked.`;
-
-  return (
-    <NoMessageWrapper>
-      <Text tag="p" size="s" color="white">{message}</Text>
-    </NoMessageWrapper>
-  );
-};
-
-NoMessage.propTypes = {
-  askingFor: PropTypes.string.isRequired,
-  optInType: PropTypes.string.isRequired
-};
-
-export default NoMessage;