@comicrelief/component-library 7.7.0 → 7.9.0

package/cypress/integration/components/Atoms/MarketingPreferencesDSForm.spec.js

@@ -28,7 +28,7 @@ describe('MarketingPreferencesDSForm component', () => {
       cy.get('@default')
         .should('exist')
         .find('h3')
-        .contains('How can we contact you?');
+        .contains('Stay up to date with Comic Relief?');
     });
 
     it('should render correct Default example options', () => {
@@ -53,7 +53,7 @@ describe('MarketingPreferencesDSForm component', () => {
       cy.get('@customised')
         .should('exist')
         .find('h3')
-        .contains('How can we contact you?');
+        .contains('Stay up to date with Comic Relief?');
     });
 
     it('should render correct Customised example options', () => {

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

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.ShowHideInputWrapper = exports.CheckContainer = exports.CheckInput = exports.CheckLabel = exports.FormField = exports.Head = exports.BottomCopyWrapper = exports.TopCopyWrapper = void 0;
+exports.MPTextInput = exports.OuterWrapper = exports.ExtraInfo = exports.ShowHideInputWrapper = exports.CheckContainer = exports.CheckInput = exports.CheckLabel = exports.FormField = exports.Head = exports.BottomCopyWrapper = exports.TopCopyWrapper = void 0;
 
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
@@ -13,103 +13,121 @@ var _spacing = _interopRequireDefault(require("../../../theme/shared/spacing"));
 
 var _size = require("../../../theme/shared/size");
 
-var _CR_Tick = _interopRequireDefault(require("./assets/CR_Tick.svg"));
+var _CR_Tick_black = _interopRequireDefault(require("./assets/CR_Tick_black.svg"));
 
-var _CR_ = _interopRequireDefault(require("./assets/CR_@.svg"));
-
-var _CR_Mail = _interopRequireDefault(require("./assets/CR_Mail.svg"));
-
-var _CR_Phone = _interopRequireDefault(require("./assets/CR_Phone.svg"));
-
-var _CR_SMS = _interopRequireDefault(require("./assets/CR_SMS.svg"));
+var _TextInput = _interopRequireDefault(require("./_TextInput"));
 
 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 OuterWrapper = _styledComponents.default.div.withConfig({
+  displayName: "MarketingPreferencesDSstyle__OuterWrapper",
+  componentId: "sc-68n85q-0"
+})(["display:flex;flex-direction:column;", "{flex-direction:row;flex-wrap:wrap;}"], (0, _size.media)('small'));
+
+exports.OuterWrapper = OuterWrapper;
+
 var TopCopyWrapper = _styledComponents.default.div.withConfig({
   displayName: "MarketingPreferencesDSstyle__TopCopyWrapper",
-  componentId: "sc-68n85q-0"
-})(["margin:", " 0;"], (0, _spacing.default)('l'));
+  componentId: "sc-68n85q-1"
+})(["margin:", " 0;display:flex;width:100%;@media ", "{padding:10px;}"], (0, _spacing.default)('l'), function (_ref) {
+  var theme = _ref.theme;
+  return theme.breakpoint('small');
+});
 
 exports.TopCopyWrapper = TopCopyWrapper;
 
 var BottomCopyWrapper = _styledComponents.default.div.withConfig({
   displayName: "MarketingPreferencesDSstyle__BottomCopyWrapper",
-  componentId: "sc-68n85q-1"
+  componentId: "sc-68n85q-2"
 })(["margin:", " 0;"], (0, _spacing.default)('md'));
 
 exports.BottomCopyWrapper = BottomCopyWrapper;
 
 var Head = _styledComponents.default.div.withConfig({
   displayName: "MarketingPreferencesDSstyle__Head",
-  componentId: "sc-68n85q-2"
+  componentId: "sc-68n85q-3"
 })(["display:flex;justify-content:space-between;flex-direction:column;"]);
 
 exports.Head = Head;
 
 var FormField = _styledComponents.default.div.withConfig({
   displayName: "MarketingPreferencesDSstyle__FormField",
-  componentId: "sc-68n85q-3"
-})(["", ""], function (_ref) {
-  var theme = _ref.theme;
-  return (0, _styledComponents.css)(["position:relative;margin-bottom:", ";label{position:relative;margin-bottom:", ";width:48%;padding:10px;border:1px solid ", ";box-sizing:border-box;border-radius:8px;color:", ";@media ", "{padding:12px 16px;}}h3{position:relative;padding-left:35px;margin-bottom:", ";&:before{position:absolute;top:0;left:0;width:24px;height:24px;content:'';}}&.field-email h3:before{background:url(", ") top left/contain no-repeat;}&.field-sms h3:before{background:url(", ") top left/contain no-repeat;}&.field-phone h3:before{background:url(", ") top left/contain no-repeat;}&.field-post h3:before{background:url(", ") top left/contain no-repeat;}"], (0, _spacing.default)('md'), (0, _spacing.default)('md'), theme.color('grey'), theme.color('grey_dark'), theme.breakpoint('small'), (0, _spacing.default)('md'), _CR_.default, _CR_SMS.default, _CR_Phone.default, _CR_Mail.default);
+  componentId: "sc-68n85q-4"
+})(["", ""], function (_ref2) {
+  var theme = _ref2.theme;
+  return (0, _styledComponents.css)(["position:relative;margin-bottom:", ";width:100%;display:flex;flex-direction:column;@media ", "{width:50%;padding:10px;}label{position:relative;margin-bottom:", ";width:100%;color:", ";}h3{position:relative;margin-bottom:", ";&:before{position:absolute;top:0;left:0;width:24px;height:24px;content:'';}}"], (0, _spacing.default)('md'), theme.breakpoint('small'), (0, _spacing.default)('md'), theme.color('grey_dark'), (0, _spacing.default)('md'));
 });
 
 exports.FormField = FormField;
 
 var CheckContainer = _styledComponents.default.div.withConfig({
   displayName: "MarketingPreferencesDSstyle__CheckContainer",
-  componentId: "sc-68n85q-4"
-})(["", ""], function (_ref2) {
-  var theme = _ref2.theme;
-  return (0, _styledComponents.css)(["width:100%;display:flex;justify-content:space-between;font-size:", ";font-family:", ";", "{width:380px;}"], theme.fontSize('md'), theme.fontFamilies(theme.font.regular), (0, _size.media)('small'));
+  componentId: "sc-68n85q-5"
+})(["", ""], function (_ref3) {
+  var theme = _ref3.theme;
+  return (0, _styledComponents.css)(["width:100%;display:flex;justify-content:space-between;font-size:", ";font-family:", ";"], theme.fontSize('md'), theme.fontFamilies(theme.font.regular));
 });
 
 exports.CheckContainer = CheckContainer;
 
 var CheckLabel = _styledComponents.default.label.withConfig({
   displayName: "MarketingPreferencesDSstyle__CheckLabel",
-  componentId: "sc-68n85q-5"
-})(["", ""], function (_ref3) {
-  var theme = _ref3.theme,
-      userSelection = _ref3.userSelection;
-  return (0, _styledComponents.css)(["display:flex;align-items:center;font-size:", ";padding:10px;@media ", "{font-size:", ";padding:12px 16px;}&:hover,&:focus{border:2px solid ", ";padding:9px;@media ", "{padding:11px 15px;}}", ""], theme.fontSize('xs'), theme.breakpoint('small'), theme.fontSize('s'), theme.color('grey'), theme.breakpoint('small'), userSelection && "\n    &[for$=\"".concat(userSelection, "\"] {\n      background: ").concat(theme.color('grey_medium'), ";\n      padding: 9px;\n      border: 2px solid ").concat(theme.color('grey'), ";\n\n      @media ").concat(theme.breakpoint('small'), " {\n        padding: 11px 15px;\n      }\n    }\n  "));
+  componentId: "sc-68n85q-6"
+})(["", ""], function (_ref4) {
+  var theme = _ref4.theme;
+  return (0, _styledComponents.css)(["display:flex;align-items:center;font-size:", ";@media ", "{font-size:", ";}"], theme.fontSize('xs'), theme.breakpoint('small'), theme.fontSize('s'));
 });
 
 exports.CheckLabel = CheckLabel;
 
 var CheckInput = _styledComponents.default.input.withConfig({
   displayName: "MarketingPreferencesDSstyle__CheckInput",
-  componentId: "sc-68n85q-6"
-})(["font-size:", ";display:block;box-sizing:border-box;opacity:0;position:absolute;width:100%;height:100%;left:0;top:0;margin:0;border:1px solid ", ";+ span{margin-right:10px;width:30px;height:30px;background-color:", ";border:1px solid ", ";float:left;border-radius:8px;@media ", "{margin-right:15px;}}:checked + span{background:url(", ") no-repeat center;background-color:", ";background-size:contain;}"], function (_ref4) {
-  var theme = _ref4.theme;
-  return theme.fontSize('sm');
-}, function (_ref5) {
+  componentId: "sc-68n85q-7"
+})(["font-size:", ";display:block;box-sizing:border-box;opacity:0;position:absolute;width:100%;height:100%;left:0;top:0;margin:0;border:1px solid ", ";+ span{margin-right:10px;width:30px;height:30px;background-color:", ";border:1px solid ", ";float:left;border-radius:8px;@media ", "{margin-right:15px;}}:checked + span{background:url(", ") no-repeat center;background-color:", ";background-size:contain;}"], function (_ref5) {
   var theme = _ref5.theme;
-  return theme.color('grey_for_forms');
+  return theme.fontSize('sm');
 }, function (_ref6) {
   var theme = _ref6.theme;
-  return theme.color('grey_light');
+  return theme.color('grey_for_forms');
 }, function (_ref7) {
   var theme = _ref7.theme;
-  return theme.color('grey');
+  return theme.color('grey_light');
 }, function (_ref8) {
   var theme = _ref8.theme;
-  return theme.breakpoint('small');
-}, _CR_Tick.default, function (_ref9) {
+  return theme.color('black');
+}, function (_ref9) {
   var theme = _ref9.theme;
-  return theme.color('red');
+  return theme.breakpoint('small');
+}, _CR_Tick_black.default, function (_ref10) {
+  var theme = _ref10.theme;
+  return theme.color('grey_light');
 });
 
 exports.CheckInput = CheckInput;
 
 var ShowHideInputWrapper = _styledComponents.default.div.withConfig({
   displayName: "MarketingPreferencesDSstyle__ShowHideInputWrapper",
-  componentId: "sc-68n85q-7"
-})(["display:", ";margin-bottom:", ";width:100%;", "{max-width:290px;}label{width:100%;border:none;padding:0;}"], function (_ref10) {
-  var show = _ref10.show;
+  componentId: "sc-68n85q-8"
+})(["display:", ";width:100%;label{width:100%;border:none;padding:0;}"], function (_ref11) {
+  var show = _ref11.show;
   return show ? 'block' : 'none';
-}, (0, _spacing.default)('lg'), (0, _size.media)('small'));
+});
 
-exports.ShowHideInputWrapper = ShowHideInputWrapper;
+exports.ShowHideInputWrapper = ShowHideInputWrapper;
+
+var ExtraInfo = _styledComponents.default.span.withConfig({
+  displayName: "MarketingPreferencesDSstyle__ExtraInfo",
+  componentId: "sc-68n85q-9"
+})(["display:block;width:100%;font-size:1rem;text-transform:inherit;font-weight:normal;line-height:normal;font-family:'Montserrat',Helvetica,Arial,sans-serif;margin-bottom:0.5rem;+ label{margin-top:20px;&[for=\"mp_email\"],&[for=\"mp_mobile\"],&[for=\"mp_phone\"]{> span:first-child{position:absolute;margin:-1px;padding:0;width:1px;height:1px;border:0;overflow:hidden;clip:rect(1px 1px 1px 1px);word-wrap:normal;}}"]);
+
+exports.ExtraInfo = ExtraInfo;
+var MPTextInput = (0, _styledComponents.default)(_TextInput.default).withConfig({
+  displayName: "MarketingPreferencesDSstyle__MPTextInput",
+  componentId: "sc-68n85q-10"
+})(["input{border:1px solid  ", ";;", "{max-width:none;}}"], function (_ref12) {
+  var theme = _ref12.theme;
+  return theme.color('black');
+}, (0, _size.media)('small'));
+exports.MPTextInput = MPTextInput;

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

@@ -5,10 +5,22 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var AssociatedFields = {
-  mp_permissionSMS: ['mp_mobile'],
-  mp_permissionPhone: ['mp_phone'],
-  mp_permissionEmail: ['mp_email'],
-  mp_permissionPost: ['mp_address1', 'mp_address2', 'mp_address3', 'mp_town', 'mp_postcode', 'mp_country']
+  mp_permissionSMS: {
+    fieldNames: ['mp_mobile'],
+    label: 'Text'
+  },
+  mp_permissionPhone: {
+    fieldNames: ['mp_phone'],
+    label: 'Phone'
+  },
+  mp_permissionEmail: {
+    fieldNames: ['mp_email'],
+    label: 'Email'
+  },
+  mp_permissionPost: {
+    fieldNames: ['mp_address1', 'mp_address2', 'mp_address3', 'mp_town', 'mp_postcode', 'mp_country'],
+    label: 'Post'
+  }
 };
 var _default = AssociatedFields;
 exports.default = _default;

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

@@ -26,25 +26,25 @@ var CheckAnswer = function CheckAnswer(_ref) {
     var newVal;
 
     if (e.target.checked) {
-      newVal = e.target.value === 'yes' ? e.target.value : 'no';
+      newVal = e.target.value;
     } else {
       newVal = ''; // To ensure we're not letting invalid values get passed, reset any associated fields:
 
-      var theseFields = _AssociatedFields.default[name];
+      var theseFields = _AssociatedFields.default[name].fieldNames;
       theseFields.forEach(function (fieldName) {
         setValue(fieldName, '');
       });
     } // Update the checkbox field itself
 
 
-    setValue(name, [newVal]);
+    setValue(name, newVal);
     /* If the click represents either a 'none selected' or a 'not required' option
       (set in config), reset errors for all fields associated with this checkbox */
 
     var reValidate = !mpValidationOptions[name][newVal];
 
     if (reValidate) {
-      var _theseFields = _AssociatedFields.default[name];
+      var _theseFields = _AssociatedFields.default[name].fieldNames;
 
       _theseFields.forEach(function (fieldName) {
         clearErrors(fieldName);
@@ -62,17 +62,7 @@ var CheckAnswer = function CheckAnswer(_ref) {
     value: "yes",
     ref: register,
     onChange: onChange
-  }), /*#__PURE__*/_react.default.createElement("span", null), "Yes, please"), /*#__PURE__*/_react.default.createElement(_MarketingPreferencesDS.CheckLabel, {
-    htmlFor: "".concat(name, "-no"),
-    userSelection: userSelection
-  }, /*#__PURE__*/_react.default.createElement(_MarketingPreferencesDS.CheckInput, {
-    type: "checkbox",
-    id: "".concat(name, "-no"),
-    name: name,
-    value: "no",
-    ref: register,
-    onChange: onChange
-  }), /*#__PURE__*/_react.default.createElement("span", null), "No, thanks"));
+  }), /*#__PURE__*/_react.default.createElement("span", null), _AssociatedFields.default[name].label));
 };
 
 CheckAnswer.defaultProps = {

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

@@ -20,27 +20,27 @@ var defaultCopyTop = /*#__PURE__*/_react.default.createElement("div", null, /*#_
   uppercase: true,
   weight: "400",
   color: "grey_dark"
-}, "How can we contact you?"), /*#__PURE__*/_react.default.createElement(_Text.default, {
+}, "Stay up to date with Comic Relief?"), /*#__PURE__*/_react.default.createElement(_Text.default, {
   tag: "p",
   size: "md",
   color: "grey_dark"
-}, "We\u2019d love to stay in touch and provide you with fundraising tips, news updates and more goodies."), /*#__PURE__*/_react.default.createElement(_Text.default, {
+}, "We\u2019d like to send you updates on the work we\u2019re funding and how your support makes a difference in the UK and around the world."), /*#__PURE__*/_react.default.createElement(_Text.default, {
   tag: "p",
   size: "md",
   color: "grey_dark"
-}, "Please select your preferred contact options below."));
+}, "Please tick the relevant boxes below if you would like to hear from us."));
 
 exports.defaultCopyTop = defaultCopyTop;
 
 var defaultCopyBottom = /*#__PURE__*/_react.default.createElement(_Text.default, {
   tag: "p",
   color: "grey_dark"
-}, "You can update your communication preferences at any time at", ' ', /*#__PURE__*/_react.default.createElement(_Link.default, {
+}, "Update your preferences at any time by visiting our", ' ', /*#__PURE__*/_react.default.createElement(_Link.default, {
   type: "standard",
   href: "https://www.comicrelief.com/update-your-preferences"
-}, "update your preferences"), ". Your details will be kept safe, check out our", ' ', /*#__PURE__*/_react.default.createElement(_Link.default, {
+}, "preferences centre"), ". Your details will be kept safe, see our", ' ', /*#__PURE__*/_react.default.createElement(_Link.default, {
   type: "standard",
   href: "https://www.comicrelief.com/privacy-policy"
-}, "privacy policy"), ' ', "for more details.");
+}, "privacy policy"), ' ', "for more information.");
 
 exports.defaultCopyBottom = defaultCopyBottom;

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

@@ -25,21 +25,14 @@ var _reactHookForm = require("react-hook-form");
 
 var _lodash = _interopRequireDefault(require("lodash"));
 
-var _Text = _interopRequireDefault(require("../../Atoms/Text/Text"));
-
-var _TextInput = _interopRequireDefault(require("./_TextInput"));
-
 var _CheckAnswer = _interopRequireDefault(require("./_CheckAnswer"));
 
-var _NoMessage = _interopRequireDefault(require("./_NoMessage"));
-
 var _DefaultCopy = require("./_DefaultCopy");
 
 var _MarketingPreferencesDS = require("./MarketingPreferencesDS.style");
 
 var _MarketingPrefsConfig = require("./_MarketingPrefsConfig");
 
-/* eslint-disable camelcase */
 var MarketingPreferencesDS = function MarketingPreferencesDS(_ref) {
   var copyTop = _ref.copyTop,
       copyBottom = _ref.copyBottom,
@@ -52,32 +45,32 @@ var MarketingPreferencesDS = function MarketingPreferencesDS(_ref) {
   var emailChoice = (0, _reactHookForm.useWatch)({
     control: control,
     name: 'mp_permissionEmail',
-    defaultValue: []
+    defaultValue: null
   });
   var postChoice = (0, _reactHookForm.useWatch)({
     control: control,
     name: 'mp_permissionPost',
-    defaultValue: []
+    defaultValue: null
   });
   var phoneChoice = (0, _reactHookForm.useWatch)({
     control: control,
     name: 'mp_permissionPhone',
-    defaultValue: []
+    defaultValue: null
   });
   var smsChoice = (0, _reactHookForm.useWatch)({
     control: control,
     name: 'mp_permissionSMS',
-    defaultValue: []
+    defaultValue: null
   });
   var mp_permissionEmail = mpValidationOptions.mp_permissionEmail,
       mp_permissionSMS = mpValidationOptions.mp_permissionSMS,
       mp_permissionPhone = mpValidationOptions.mp_permissionPhone,
       mp_permissionPost = mpValidationOptions.mp_permissionPost; // If the field is not required for each No/Yes choice, remove it from the DOM entirely
 
-  var disableEmailInput = mp_permissionEmail.yes === false && emailChoice.includes('yes') || mp_permissionEmail.no === false && emailChoice.includes('no');
-  var disableSMSInput = mp_permissionSMS.yes === false && smsChoice.includes('yes') || mp_permissionSMS.no === false && smsChoice.includes('no');
-  var disablePhoneInput = mp_permissionPhone.yes === false && phoneChoice.includes('yes') || mp_permissionPhone.no === false && phoneChoice.includes('no');
-  var disablePostInput = mp_permissionPost.yes === false && postChoice.includes('yes') || mp_permissionPost.no === false && postChoice.includes('no'); // Required to track multiple errors to determine whether to show/hide the fieldset
+  var disableEmailInput = mp_permissionEmail.yes === false && emailChoice.includes('yes');
+  var disableSMSInput = mp_permissionSMS.yes === false && smsChoice.includes('yes');
+  var disablePhoneInput = mp_permissionPhone.yes === false && phoneChoice.includes('yes');
+  var disablePostInput = mp_permissionPost.yes === false && postChoice.includes('yes'); // Required to track multiple errors to determine whether to show/hide the fieldset
 
   var isAddressErroring = function isAddressErroring() {
     if (_lodash.default.isEmpty(errors)) {
@@ -90,166 +83,126 @@ var MarketingPreferencesDS = function MarketingPreferencesDS(_ref) {
     or if a choice has been made */
 
 
-  var showEmailField = !mp_permissionEmail.hideInput && (emailChoice.length || errors.mp_email);
-  var showSMSField = !mp_permissionSMS.hideInput && (smsChoice.length || errors.mp_mobile);
-  var showPhoneField = !mp_permissionPhone.hideInput && (phoneChoice.length || errors.mp_phone);
-  var showPostFields = !mp_permissionPost.hideInput && (postChoice.length || isAddressErroring());
+  var showEmailField = !mp_permissionEmail.hideInput && (emailChoice || errors.mp_email);
+  var showSMSField = !mp_permissionSMS.hideInput && (smsChoice || errors.mp_mobile);
+  var showPhoneField = !mp_permissionPhone.hideInput && (phoneChoice || errors.mp_phone);
+  var showPostFields = !mp_permissionPost.hideInput && (postChoice || isAddressErroring());
   var customId = id ? "marketing-preferences--".concat(id) : 'marketing-preferences';
-  return /*#__PURE__*/_react.default.createElement("div", {
+  return /*#__PURE__*/_react.default.createElement(_MarketingPreferencesDS.OuterWrapper, {
     id: customId
   }, copyTop && /*#__PURE__*/_react.default.createElement(_MarketingPreferencesDS.TopCopyWrapper, null, copyTop), !mp_permissionEmail.disableOption && /*#__PURE__*/_react.default.createElement(_MarketingPreferencesDS.FormField, {
     className: "field-email"
-  }, /*#__PURE__*/_react.default.createElement(_MarketingPreferencesDS.Head, null, /*#__PURE__*/_react.default.createElement(_Text.default, {
-    tag: "h3",
-    size: "l",
-    family: "Anton",
-    uppercase: true,
-    weight: "400",
-    color: "grey_dark"
-  }, "Email Me"), /*#__PURE__*/_react.default.createElement(_CheckAnswer.default, {
+  }, /*#__PURE__*/_react.default.createElement(_MarketingPreferencesDS.Head, null, /*#__PURE__*/_react.default.createElement(_CheckAnswer.default, {
     mpValidationOptions: mpValidationOptions,
     name: "mp_permissionEmail",
     id: "mp_permissionEmail",
-    userSelection: emailChoice[0],
+    userSelection: emailChoice,
     formContext: formContext
   })), /*#__PURE__*/_react.default.createElement(MaybeDisabled, {
     disabled: disableEmailInput
   }, /*#__PURE__*/_react.default.createElement(_MarketingPreferencesDS.ShowHideInputWrapper, {
     show: showEmailField
-  }, emailChoice[0] === 'no' && /*#__PURE__*/_react.default.createElement(_NoMessage.default, {
-    askingFor: "an email",
-    optInType: "email"
-  }), /*#__PURE__*/_react.default.createElement(_TextInput.default, {
+  }, /*#__PURE__*/_react.default.createElement(_MarketingPreferencesDS.ExtraInfo, null, "Please confirm the email address we will use to", /*#__PURE__*/_react.default.createElement("b", null, " email "), "you:"), /*#__PURE__*/_react.default.createElement(_MarketingPreferencesDS.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
-  })))), !mp_permissionSMS.disableOption && /*#__PURE__*/_react.default.createElement(_MarketingPreferencesDS.FormField, {
-    className: "field-sms"
-  }, /*#__PURE__*/_react.default.createElement(_MarketingPreferencesDS.Head, null, /*#__PURE__*/_react.default.createElement(_Text.default, {
-    tag: "h3",
-    size: "l",
-    family: "Anton",
-    uppercase: true,
-    weight: "400",
-    color: "grey_dark"
-  }, "Text me"), /*#__PURE__*/_react.default.createElement(_CheckAnswer.default, {
-    name: "mp_permissionSMS",
-    id: "mp_permissionSMS",
-    mpValidationOptions: mpValidationOptions,
-    userSelection: smsChoice[0],
-    formContext: formContext
-  })), /*#__PURE__*/_react.default.createElement(MaybeDisabled, {
-    disabled: disableSMSInput
-  }, /*#__PURE__*/_react.default.createElement(_MarketingPreferencesDS.ShowHideInputWrapper, {
-    show: showSMSField
-  }, smsChoice[0] === 'no' && /*#__PURE__*/_react.default.createElement(_NoMessage.default, {
-    askingFor: "a mobile number",
-    optInType: "SMS"
-  }), /*#__PURE__*/_react.default.createElement(_TextInput.default, {
-    placeholder: "",
-    fieldName: "mp_mobile",
-    label: "Please enter your mobile no.",
-    optional: !mp_permissionSMS[smsChoice[0]],
-    id: "mp_mobile",
-    formContext: formContext
-  })))), !mp_permissionPhone.disableOption && /*#__PURE__*/_react.default.createElement(_MarketingPreferencesDS.FormField, {
-    className: "field-phone"
-  }, /*#__PURE__*/_react.default.createElement(_MarketingPreferencesDS.Head, null, /*#__PURE__*/_react.default.createElement(_Text.default, {
-    tag: "h3",
-    size: "l",
-    family: "Anton",
-    uppercase: true,
-    weight: "400",
-    color: "grey_dark"
-  }, "Phone me"), /*#__PURE__*/_react.default.createElement(_CheckAnswer.default, {
-    name: "mp_permissionPhone",
-    mpValidationOptions: mpValidationOptions,
-    id: "mp_permissionPhone",
-    userSelection: phoneChoice[0],
-    formContext: formContext
-  })), /*#__PURE__*/_react.default.createElement(MaybeDisabled, {
-    disabled: disablePhoneInput
-  }, /*#__PURE__*/_react.default.createElement(_MarketingPreferencesDS.ShowHideInputWrapper, {
-    show: showPhoneField
-  }, phoneChoice[0] === 'no' ? /*#__PURE__*/_react.default.createElement(_NoMessage.default, {
-    askingFor: "a phone number",
-    optInType: "phone"
-  }) : '', /*#__PURE__*/_react.default.createElement(_TextInput.default, {
-    placeholder: "",
-    fieldName: "mp_phone",
-    label: "Please enter your phone no.",
-    optional: !mp_permissionPhone[phoneChoice[0]],
-    id: "mp_phone",
-    formContext: formContext
   })))), !mp_permissionPost.disableOption && /*#__PURE__*/_react.default.createElement(_MarketingPreferencesDS.FormField, {
     className: "field-post"
-  }, /*#__PURE__*/_react.default.createElement(_MarketingPreferencesDS.Head, null, /*#__PURE__*/_react.default.createElement(_Text.default, {
-    tag: "h3",
-    size: "l",
-    family: "Anton",
-    uppercase: true,
-    weight: "400",
-    color: "grey_dark"
-  }, "Send me post"), /*#__PURE__*/_react.default.createElement(_CheckAnswer.default, {
+  }, /*#__PURE__*/_react.default.createElement(_MarketingPreferencesDS.Head, null, /*#__PURE__*/_react.default.createElement(_CheckAnswer.default, {
     name: "mp_permissionPost",
     mpValidationOptions: mpValidationOptions,
     id: "mp_permissionPost",
-    userSelection: postChoice[0],
+    userSelection: postChoice,
     formContext: formContext
   })), /*#__PURE__*/_react.default.createElement(MaybeDisabled, {
     disabled: disablePostInput
   }, /*#__PURE__*/_react.default.createElement(_MarketingPreferencesDS.ShowHideInputWrapper, {
     show: showPostFields
-  }, postChoice[0] === 'no' ? /*#__PURE__*/_react.default.createElement(_NoMessage.default, {
-    askingFor: "an address",
-    optInType: "postal"
-  }) : '', /*#__PURE__*/_react.default.createElement(_TextInput.default, {
+  }, /*#__PURE__*/_react.default.createElement(_MarketingPreferencesDS.ExtraInfo, null, "Please confirm the address we will use to", /*#__PURE__*/_react.default.createElement("b", null, " post "), "to you:"), /*#__PURE__*/_react.default.createElement(_MarketingPreferencesDS.MPTextInput, {
     placeholder: "",
     fieldName: "mp_address1",
     label: "Address Line 1",
-    optional: !mp_permissionPost[postChoice[0]],
+    optional: !mp_permissionPost[postChoice],
     id: "mp_address1",
     formContext: formContext
-  }), /*#__PURE__*/_react.default.createElement(_TextInput.default, {
+  }), /*#__PURE__*/_react.default.createElement(_MarketingPreferencesDS.MPTextInput, {
     placeholder: "",
     fieldName: "mp_address2",
     label: "Address Line 2",
     optional: true,
     id: "mp_address2",
     formContext: formContext
-  }), /*#__PURE__*/_react.default.createElement(_TextInput.default, {
+  }), /*#__PURE__*/_react.default.createElement(_MarketingPreferencesDS.MPTextInput, {
     placeholder: "",
     fieldName: "mp_address3",
     label: "Address Line 3",
     optional: true,
     id: "mp_address3",
     formContext: formContext
-  }), /*#__PURE__*/_react.default.createElement(_TextInput.default, {
+  }), /*#__PURE__*/_react.default.createElement(_MarketingPreferencesDS.MPTextInput, {
     placeholder: "",
     fieldName: "mp_town",
     label: "Town/City",
-    optional: !mp_permissionPost[postChoice[0]],
+    optional: !mp_permissionPost[postChoice],
     id: "mp_town",
     formContext: formContext
-  }), /*#__PURE__*/_react.default.createElement(_TextInput.default, {
+  }), /*#__PURE__*/_react.default.createElement(_MarketingPreferencesDS.MPTextInput, {
     placeholder: "",
     fieldName: "mp_postcode",
     label: "Postcode",
-    optional: !mp_permissionPost[postChoice[0]],
+    optional: !mp_permissionPost[postChoice],
     id: "mp_postcode",
     formContext: formContext
-  }), /*#__PURE__*/_react.default.createElement(_TextInput.default, {
+  }), /*#__PURE__*/_react.default.createElement(_MarketingPreferencesDS.MPTextInput, {
     placeholder: "",
     fieldName: "mp_country",
     label: "Country",
-    optional: !mp_permissionPost[postChoice[0]],
+    optional: !mp_permissionPost[postChoice],
     id: "mp_country",
     formContext: formContext
+  })))), !mp_permissionSMS.disableOption && /*#__PURE__*/_react.default.createElement(_MarketingPreferencesDS.FormField, {
+    className: "field-sms"
+  }, /*#__PURE__*/_react.default.createElement(_MarketingPreferencesDS.Head, null, /*#__PURE__*/_react.default.createElement(_CheckAnswer.default, {
+    name: "mp_permissionSMS",
+    id: "mp_permissionSMS",
+    mpValidationOptions: mpValidationOptions,
+    userSelection: smsChoice,
+    formContext: formContext
+  })), /*#__PURE__*/_react.default.createElement(MaybeDisabled, {
+    disabled: disableSMSInput
+  }, /*#__PURE__*/_react.default.createElement(_MarketingPreferencesDS.ShowHideInputWrapper, {
+    show: showSMSField
+  }, /*#__PURE__*/_react.default.createElement(_MarketingPreferencesDS.ExtraInfo, null, "Please confirm the mobile number we will use to", /*#__PURE__*/_react.default.createElement("b", null, " text "), "you on:"), /*#__PURE__*/_react.default.createElement(_MarketingPreferencesDS.MPTextInput, {
+    placeholder: "",
+    fieldName: "mp_mobile",
+    label: "Please enter your mobile no.",
+    optional: !mp_permissionSMS[smsChoice],
+    id: "mp_mobile",
+    formContext: formContext
+  })))), !mp_permissionPhone.disableOption && /*#__PURE__*/_react.default.createElement(_MarketingPreferencesDS.FormField, {
+    className: "field-phone"
+  }, /*#__PURE__*/_react.default.createElement(_MarketingPreferencesDS.Head, null, /*#__PURE__*/_react.default.createElement(_CheckAnswer.default, {
+    name: "mp_permissionPhone",
+    mpValidationOptions: mpValidationOptions,
+    id: "mp_permissionPhone",
+    userSelection: phoneChoice,
+    formContext: formContext
+  })), /*#__PURE__*/_react.default.createElement(MaybeDisabled, {
+    disabled: disablePhoneInput
+  }, /*#__PURE__*/_react.default.createElement(_MarketingPreferencesDS.ShowHideInputWrapper, {
+    show: showPhoneField
+  }, /*#__PURE__*/_react.default.createElement(_MarketingPreferencesDS.ExtraInfo, null, "Please confirm the telephone number we will use to", /*#__PURE__*/_react.default.createElement("b", null, " phone "), "you on:"), /*#__PURE__*/_react.default.createElement(_MarketingPreferencesDS.MPTextInput, {
+    placeholder: "",
+    fieldName: "mp_phone",
+    label: "Please enter your phone no.",
+    optional: !mp_permissionPhone[phoneChoice],
+    id: "mp_phone",
+    formContext: formContext
   })))), copyBottom && /*#__PURE__*/_react.default.createElement(_MarketingPreferencesDS.BottomCopyWrapper, null, copyBottom));
 }; // removes from DOM completely