@comicrelief/component-library 5.8.1 → 5.8.4

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

@@ -154,13 +154,13 @@ describe('MarketingPreferencesDSForm component', () => {
       cy.get('@default')
         .find('.field-sms span[data-test=error-message] span')
         .should('exist')
-        .contains('Please enter a valid mobile number');
+        .contains('Please enter a valid UK mobile number');
 
       // Phone
       cy.get('@default')
         .find('.field-phone span[data-test=error-message] span')
         .should('exist')
-        .contains('Please enter a valid phone number');
+        .contains('Please enter a valid UK phone number');
 
       // Address1
       cy.get('@default')
@@ -424,7 +424,7 @@ describe('MarketingPreferencesDSForm component', () => {
       cy.get('@customised')
         .find('.field-phone span[data-test=error-message] span')
         .should('exist')
-        .contains('Please enter a valid phone number');
+        .contains('Please enter a valid UK phone number');
 
       // Address1
       cy.get('@customised')

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

@@ -28,7 +28,12 @@ var CheckAnswer = function CheckAnswer(_ref) {
     if (e.target.checked) {
       newVal = e.target.value === 'yes' ? e.target.value : 'no';
     } else {
-      newVal = '';
+      newVal = ''; // To ensure we're not letting invalid values get passed, reset any associated fields:
+
+      var theseFields = _AssociatedFields.default[name];
+      theseFields.forEach(function (fieldName) {
+        setValue(fieldName, '');
+      });
     } // Update the checkbox field itself
 
 
@@ -39,8 +44,9 @@ var CheckAnswer = function CheckAnswer(_ref) {
     var reValidate = !mpValidationOptions[name][newVal];
 
     if (reValidate) {
-      var theseFields = _AssociatedFields.default[name];
-      theseFields.forEach(function (fieldName) {
+      var _theseFields = _AssociatedFields.default[name];
+
+      _theseFields.forEach(function (fieldName) {
         clearErrors(fieldName);
       });
     }

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

@@ -117,7 +117,8 @@ var MarketingPreferencesDS = function MarketingPreferencesDS(_ref) {
   }, /*#__PURE__*/_react.default.createElement(_MarketingPreferencesDS.ShowHideInputWrapper, {
     show: showEmailField
   }, emailChoice[0] === 'no' && /*#__PURE__*/_react.default.createElement(_NoMessage.default, {
-    askingFor: "an email"
+    askingFor: "an email",
+    optInType: "email"
   }), /*#__PURE__*/_react.default.createElement(_TextInput.default, {
     placeholder: "",
     fieldName: "mp_email",
@@ -147,7 +148,8 @@ var MarketingPreferencesDS = function MarketingPreferencesDS(_ref) {
   }, /*#__PURE__*/_react.default.createElement(_MarketingPreferencesDS.ShowHideInputWrapper, {
     show: showSMSField
   }, smsChoice[0] === 'no' && /*#__PURE__*/_react.default.createElement(_NoMessage.default, {
-    askingFor: "a mobile number"
+    askingFor: "a mobile number",
+    optInType: "SMS"
   }), /*#__PURE__*/_react.default.createElement(_TextInput.default, {
     placeholder: "",
     fieldName: "mp_mobile",
@@ -175,7 +177,8 @@ var MarketingPreferencesDS = function MarketingPreferencesDS(_ref) {
   }, /*#__PURE__*/_react.default.createElement(_MarketingPreferencesDS.ShowHideInputWrapper, {
     show: showPhoneField
   }, phoneChoice[0] === 'no' ? /*#__PURE__*/_react.default.createElement(_NoMessage.default, {
-    askingFor: "a phone number"
+    askingFor: "a phone number",
+    optInType: "phone"
   }) : '', /*#__PURE__*/_react.default.createElement(_TextInput.default, {
     placeholder: "",
     fieldName: "mp_phone",
@@ -203,7 +206,8 @@ var MarketingPreferencesDS = function MarketingPreferencesDS(_ref) {
   }, /*#__PURE__*/_react.default.createElement(_MarketingPreferencesDS.ShowHideInputWrapper, {
     show: showPostFields
   }, postChoice[0] === 'no' ? /*#__PURE__*/_react.default.createElement(_NoMessage.default, {
-    askingFor: "an address"
+    askingFor: "an address",
+    optInType: "postal"
   }) : '', /*#__PURE__*/_react.default.createElement(_TextInput.default, {
     placeholder: "",
     fieldName: "mp_address1",

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

@@ -7,8 +7,6 @@ exports.buildValidationSchema = exports.setInitialValues = void 0;
 
 var yup = _interopRequireWildcard(require("yup"));
 
-require("yup-phone");
-
 var _lodash = require("lodash");
 
 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); }
@@ -75,6 +73,7 @@ var buildValidationSchema = function buildValidationSchema(overrideOptions) {
   }; // Override with any custom options supplied
 
   var mpValidationOptions = (0, _lodash.merge)(defaultOptions, overrideOptions);
+  var phoneRegex = /^(((((\+44)|(0044))\s?\d{4}|\(?0\d{4}\)?)\s?\d{3}\s?\d{3})|((((\+44)|(0044))\s?\d{3}|\(?0\d{3}\)?)\s?\d{3}\s?\d{4})|((((\+44)|(0044))\s?\d{2}|\(?0\d{2}\)?)\s?\d{4}\s?\d{4}))(\s?\\#(\d{4}|\d{3}))?$/;
   var mpValidationSchema = yup.object({
     mp_email: yup.string().when('mp_permissionEmail', {
       is: function is(val) {
@@ -86,13 +85,13 @@ var buildValidationSchema = function buildValidationSchema(overrideOptions) {
       is: function is(val) {
         return !mpValidationOptions.mp_permissionSMS.disableOption && mpValidationOptions.mp_permissionSMS[val];
       },
-      then: yup.string().required('Please enter your mobile number').phone('GB', false, 'Please enter a valid mobile number')
+      then: yup.string().required('Please enter your mobile number').matches(phoneRegex, 'Please enter a valid UK mobile number')
     }),
     mp_phone: yup.string().when('mp_permissionPhone', {
       is: function is(val) {
         return !mpValidationOptions.mp_permissionPhone.disableOption && mpValidationOptions.mp_permissionPhone[val];
       },
-      then: yup.string().required('Please enter your phone number').phone('GB', false, 'Please enter a valid phone number')
+      then: yup.string().required('Please enter your phone number').matches(phoneRegex, 'Please enter a valid UK phone number')
     }),
     mp_address1: yup.string().when('mp_permissionPost', {
       is: function is(val) {

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

@@ -9,16 +9,31 @@ exports.default = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+
 var _Text = _interopRequireDefault(require("../../Atoms/Text/Text"));
 
-var NoMessage = function NoMessage(_ref) {
-  var askingFor = _ref.askingFor;
-  var message = "Please provide ".concat(askingFor, " so we can remove it from our database, otherwise untick this option.");
-  return /*#__PURE__*/_react.default.createElement(_Text.default, {
+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: "grey_dark"
-  }, message);
+    color: "white"
+  }, message));
 };
 
 var _default = NoMessage;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@comicrelief/component-library",
   "author": "Comic Relief Engineering Team",
-  "version": "5.8.1",
+  "version": "5.8.4",
   "main": "dist/index.js",
   "license": "ISC",
   "jest": {
@@ -41,8 +41,7 @@
     "react-uid": "^2.2.0",
     "styled-components": "^5.3.1",
     "youtube-player": "^5.5.2",
-    "yup": "^0.32.9",
-    "yup-phone": "^1.2.19"
+    "yup": "^0.32.9"
   },
   "resolutions": {
     "react-scripts/workbox-webpack-plugin/workbox-build/@surma/rollup-plugin-off-main-thread/ejs": "3.1.6"

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

@@ -19,6 +19,12 @@ const CheckAnswer = ({
       newVal = e.target.value === 'yes' ? e.target.value : 'no';
     } else {
       newVal = '';
+
+      // To ensure we're not letting invalid values get passed, reset any associated fields:
+      const theseFields = AssociatedFields[name];
+      theseFields.forEach(fieldName => {
+        setValue(fieldName, '');
+      });
     }
 
     // Update the checkbox field itself

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

@@ -87,9 +87,8 @@ const MarketingPreferencesDS = ({
         </Head>
 
         <MaybeDisabled disabled={disableEmailInput}>
-          {/* DEBUG */}
           <ShowHideInputWrapper show={showEmailField}>
-            {emailChoice[0] === 'no' && <NoMessage askingFor="an email" /> }
+            {emailChoice[0] === 'no' && <NoMessage askingFor="an email" optInType="email" /> }
             <TextInput
               placeholder=""
               fieldName="mp_email"
@@ -122,7 +121,7 @@ const MarketingPreferencesDS = ({
         </Head>
         <MaybeDisabled disabled={disableSMSInput}>
           <ShowHideInputWrapper show={showSMSField}>
-            {smsChoice[0] === 'no' && <NoMessage askingFor="a mobile number" />}
+            {smsChoice[0] === 'no' && <NoMessage askingFor="a mobile number" optInType="SMS" />}
             <TextInput
               placeholder=""
               fieldName="mp_mobile"
@@ -153,7 +152,7 @@ const MarketingPreferencesDS = ({
         </Head>
         <MaybeDisabled disabled={disablePhoneInput}>
           <ShowHideInputWrapper show={showPhoneField}>
-            {phoneChoice[0] === 'no' ? <NoMessage askingFor="a phone number" /> : ''}
+            {phoneChoice[0] === 'no' ? <NoMessage askingFor="a phone number" optInType="phone" /> : ''}
             <TextInput
               placeholder=""
               fieldName="mp_phone"
@@ -184,7 +183,7 @@ const MarketingPreferencesDS = ({
         </Head>
         <MaybeDisabled disabled={disablePostInput}>
           <ShowHideInputWrapper show={showPostFields}>
-            {postChoice[0] === 'no' ? <NoMessage askingFor="an address" /> : ''}
+            {postChoice[0] === 'no' ? <NoMessage askingFor="an address" optInType="postal" /> : ''}
             <TextInput
               placeholder=""
               fieldName="mp_address1"

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

@@ -1,5 +1,4 @@
 import * as yup from 'yup';
-import 'yup-phone';
 import { merge } from 'lodash';
 
 const setInitialValues = overrideValues => {
@@ -65,6 +64,8 @@ const buildValidationSchema = overrideOptions => {
   // Override with any custom options supplied
   const mpValidationOptions = merge(defaultOptions, overrideOptions);
 
+  const phoneRegex = /^(((((\+44)|(0044))\s?\d{4}|\(?0\d{4}\)?)\s?\d{3}\s?\d{3})|((((\+44)|(0044))\s?\d{3}|\(?0\d{3}\)?)\s?\d{3}\s?\d{4})|((((\+44)|(0044))\s?\d{2}|\(?0\d{2}\)?)\s?\d{4}\s?\d{4}))(\s?\\#(\d{4}|\d{3}))?$/;
+
   const mpValidationSchema = yup.object({
     mp_email: yup.string()
       .when('mp_permissionEmail', {
@@ -77,14 +78,16 @@ const buildValidationSchema = overrideOptions => {
       .when('mp_permissionSMS', {
         is: val => (!(mpValidationOptions.mp_permissionSMS.disableOption)
         && mpValidationOptions.mp_permissionSMS[val]),
-        then: yup.string().required('Please enter your mobile number').phone('GB', false, 'Please enter a valid mobile number')
+        then: yup.string().required('Please enter your mobile number')
+          .matches(phoneRegex, 'Please enter a valid UK mobile number')
       }),
 
     mp_phone: yup.string()
       .when('mp_permissionPhone', {
         is: val => (!(mpValidationOptions.mp_permissionPhone.disableOption)
         && mpValidationOptions.mp_permissionPhone[val]),
-        then: yup.string().required('Please enter your phone number').phone('GB', false, 'Please enter a valid phone number')
+        then: yup.string().required('Please enter your phone number')
+          .matches(phoneRegex, 'Please enter a valid UK phone number')
       }),
 
     mp_address1: yup.string()

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

@@ -1,17 +1,27 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import styled, { css } from 'styled-components';
 import Text from '../../Atoms/Text/Text';
 
-const NoMessage = ({ askingFor }) => {
-  const message = `Please provide ${askingFor} so we can remove it from our database, otherwise untick this option.`;
+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 (
-    <Text tag="p" size="s" color="grey_dark">{message}</Text>
+    <NoMessageWrapper>
+      <Text tag="p" size="s" color="white">{message}</Text>
+    </NoMessageWrapper>
   );
 };
 
 NoMessage.propTypes = {
-  askingFor: PropTypes.string.isRequired
+  askingFor: PropTypes.string.isRequired,
+  optInType: PropTypes.string.isRequired
 };
 
 export default NoMessage;