@comicrelief/component-library 7.12.2 → 7.14.0

package/dist/components/Molecules/SchoolLookup/__snapshots__/SchoolLookup.test.js.snap

@@ -92,13 +92,13 @@ exports[`renders correctly 1`] = `
         aria-describedby="school-lookup"
         autoComplete="off"
         className="c5"
+        defaultValue=""
         id="school-lookup"
         name="school-lookup"
         onChange={[Function]}
         placeholder="Type to start search"
         required={false}
         type="text"
-        value=""
       />
     </div>
     

package/dist/components/Molecules/Typeahead/Typeahead.js

@@ -43,20 +43,15 @@ var Typeahead = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
       fetchErrorHandler = _ref.fetchErrorHandler,
       rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
 
-  var _useState = (0, _react.useState)(''),
+  var _useState = (0, _react.useState)([]),
       _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-      value = _useState2[0],
-      setValue = _useState2[1];
+      options = _useState2[0],
+      setOptions = _useState2[1];
 
-  var _useState3 = (0, _react.useState)([]),
+  var _useState3 = (0, _react.useState)(''),
       _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
-      options = _useState4[0],
-      setOptions = _useState4[1];
-
-  var _useState5 = (0, _react.useState)(''),
-      _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
-      errorMsg = _useState6[0],
-      setErrorMsg = _useState6[1];
+      errorMsg = _useState4[0],
+      setErrorMsg = _useState4[1];
 
   var handleChange = /*#__PURE__*/function () {
     var _ref2 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(query) {
@@ -119,12 +114,11 @@ var Typeahead = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
 
   var debouncedHandleChange = (0, _react.useCallback)((0, _lodash.debounce)(handleChange, DELAY_DURATION), []);
   return /*#__PURE__*/_react.default.createElement(_TextInputWithDropdown.default, Object.assign({
-    value: value,
+    defaultValue: "",
     options: optionParser ? options.map(optionParser) : options,
     errorMsg: errorMsg,
     onChange: function onChange(e) {
       var newValue = e.currentTarget.value;
-      setValue(newValue);
       debouncedHandleChange(newValue);
     },
     onSelect: function onSelect(parsedOption, optionIndex) {
@@ -136,7 +130,6 @@ var Typeahead = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
 
       setOptions([]);
       setErrorMsg('');
-      setValue('');
     },
     id: id,
     label: label,

package/dist/components/Molecules/Typeahead/__snapshots__/Typeahead.test.js.snap

@@ -92,13 +92,13 @@ exports[`renders correctly 1`] = `
         aria-describedby="typeahead-test"
         autoComplete="off"
         className="c5"
+        defaultValue=""
         id="typeahead-test"
         name="q"
         onChange={[Function]}
         placeholder="Type to start searching..."
         required={false}
         type="text"
-        value=""
       />
     </div>
     

package/dist/components/Organisms/Donate/Donate.js

@@ -52,7 +52,8 @@ var Donate = function Donate(_ref) {
       noMoneyBuys = _ref.noMoneyBuys,
       PopUpText = _ref.PopUpText,
       chooseAmountText = _ref.chooseAmountText,
-      isDesktopOverride = _ref.isDesktopOverride;
+      isDesktopOverride = _ref.isDesktopOverride,
+      otherAmountValue = _ref.otherAmountValue;
   var isDesktop = (0, _reactResponsive.useMediaQuery)({
     query: "(min-width: ".concat(_size.screen.medium, ")")
   }); // To let us store any updated override, and force a re-render
@@ -63,11 +64,10 @@ var Donate = function Donate(_ref) {
       setOverrideValue = _useState2[1]; // Store the updated override value
 
 
-  _react.default.useEffect(function () {
+  (0, _react.useEffect)(function () {
     setOverrideValue(isDesktopOverride);
   }, [isDesktopOverride]); // If a boolean value has been passed, let it replace our 'internal' value
 
-
   isDesktop = overrideValue !== null ? overrideValue : isDesktop;
   return /*#__PURE__*/_react.default.createElement(_Donate.Container, {
     mobileBackgroundColor: mobileBackgroundColor,
@@ -119,7 +119,8 @@ var Donate = function Donate(_ref) {
     noMoneyBuys: noMoneyBuys,
     PopUpText: PopUpText,
     chooseAmountText: chooseAmountText,
-    submitButtonColor: submitButtonColor
+    submitButtonColor: submitButtonColor,
+    otherAmountValue: otherAmountValue
   })));
 };
 
@@ -144,7 +145,8 @@ Donate.defaultProps = {
   noMoneyBuys: false,
   PopUpText: 'Help us deliver long-term impact by converting your single donation into a monthly gift.',
   chooseAmountText: '',
-  isDesktopOverride: null
+  isDesktopOverride: null,
+  otherAmountValue: null
 };
 var _default = Donate;
 exports.default = _default;

package/dist/components/Organisms/Donate/Donate.md

@@ -103,6 +103,102 @@ const desktopPictures = require('../../../styleguide/data/data').defaultData;
 />;
 ```
 
+## Single Giving "No Money Buys" with overridden manual input value
+
+```js
+import data from './dev-data/data-single';
+const mobilePictures = require('../../../styleguide/data/data').mobileImages;
+const desktopPictures = require('../../../styleguide/data/data').defaultData;
+import { useState } from 'react';
+
+// Simulating default state of a parent componenet
+const [amountDonate, setAmountDonate] = useState(123.45);
+
+// Simulating state update of a parent componenet
+setTimeout(()=>{
+  setAmountDonate(567.89);
+}, 3000);
+
+<Donate
+  mobileBackgroundColor="blue_dark"
+  desktopOverlayColor="blue_dark"
+  formAlignRight={false}
+  imageLow={desktopPictures.imageLow}
+  images={desktopPictures.images}
+  mobileImageLow={mobilePictures.imageLow}
+  mobileImages={mobilePictures.images}
+  data={data}
+  mbshipID="mship-4"
+  donateLink="https://donation.comicrelief.com/"
+  clientID="donate"
+  cartID="default-comicrelief"
+  title="Donate Now"
+  noMoneyBuys
+  subtitle="Please help us fund life-changing projects in the UK and around the world."
+  otherAmountValue={amountDonate}
+/>;
+```
+
+## Form align right, with red desktop overlay and purple mobile background colour, with a blue submit button, with overridden manual input value
+
+```js
+import data from './dev-data/data';
+const mobilePictures = require('../../../styleguide/data/data').mobileImages;
+const desktopPictures = require('../../../styleguide/data/data').defaultData;
+import { useState } from 'react';
+
+// Simulating default state of a parent componenet
+const [amountDonate, setAmountDonate] = useState(111.22);
+
+// Simulating state update of a parent componenet
+setTimeout(()=>{
+  setAmountDonate(333.44);
+}, 3000);
+
+<Donate
+  alt="Background image"
+  formAlignRight={true}
+  imageLow={desktopPictures.imageLow}
+  images={desktopPictures.images}
+  mobileImageLow={mobilePictures.imageLow}
+  mobileImages={mobilePictures.images}
+  data={data}
+  mbshipID="mship-1"
+  donateLink="https://donation.comicrelief.com/"
+  clientID="donate"
+  cartID="default-comicrelief"
+  title="Donate Now"
+  subtitle="Please help us fund life-changing projects in the UK and around the world."
+  otherAmountValue={amountDonate}
+/>;
+```
+
+## Form align left, with custom message after choosing an "Other amount" to donate, high value cart.
+```js
+import data from './dev-data/data-high-value';
+const mobilePictures = require('../../../styleguide/data/data').mobileImages;
+const desktopPictures = require('../../../styleguide/data/data').defaultData;
+
+<Donate
+  mobileBackgroundColor="blue_dark"
+  desktopOverlayColor="blue_dark"
+  formAlignRight={false}
+  imageLow={desktopPictures.imageLow}
+  images={desktopPictures.images}
+  mobileImageLow={mobilePictures.imageLow}
+  mobileImages={mobilePictures.images}
+  data={data}
+  mbshipID="mship-2"
+  donateLink="https://donation.comicrelief.com/"
+  clientID="donate"
+  cartID="default-comicrelief"
+  title="Donate Now"
+  subtitle="Please help us fund life-changing projects in the UK and around the world."
+  otherAmountText="Overridden via the 'Other amount text' prop"
+/>;
+```
+
+
 ## Form align right - no subtitle
 
 ```js

package/dist/components/Organisms/Donate/Donate.test.js

@@ -69,4 +69,23 @@ it('Single donation with no Money Buys renders correctly', function () {
     chooseAmountText: "Overridden via the 'choose amount text' props"
   })).toJSON();
   expect(tree).toMatchSnapshot();
+});
+it('"Single Giving, No Money Buys, with overridden manual input value" renders correctly', function () {
+  var tree = (0, _shallowWithTheme.default)( /*#__PURE__*/_react.default.createElement(_Donate.default, {
+    mobileBackgroundColor: "blue_dark",
+    desktopOverlayColor: "blue_dark",
+    formAlignRight: false,
+    imageLow: defaultData.pictures.imageLow,
+    images: defaultData.pictures.images,
+    data: _data.default,
+    mbshipID: "mship-4",
+    donateLink: "https://donation.comicrelief.com/",
+    clientID: "donate",
+    cartID: "default-comicrelief",
+    title: "Donate Now",
+    noMoneyBuys: true,
+    subtitle: "Please help us fund life-changing projects in the UK and around the world.",
+    otherAmountValue: 345.67
+  })).toJSON();
+  expect(tree).toMatchSnapshot();
 });

package/dist/components/Organisms/Donate/Form/Form.js

@@ -25,7 +25,7 @@ var _Donate = require("../Donate.style");
 
 var _GivingSelector = _interopRequireDefault(require("../GivingSelector/GivingSelector"));
 
-var _excluded = ["data", "donateLink", "otherAmountText", "clientID", "cartID", "mbshipID", "noMoneyBuys", "PopUpText", "chooseAmountText", "submitButtonColor"];
+var _excluded = ["data", "donateLink", "otherAmountText", "clientID", "cartID", "mbshipID", "noMoneyBuys", "PopUpText", "chooseAmountText", "submitButtonColor", "otherAmountValue"];
 
 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); }
 
@@ -44,6 +44,7 @@ var Signup = function Signup(_ref) {
       PopUpText = _ref.PopUpText,
       chooseAmountText = _ref.chooseAmountText,
       submitButtonColor = _ref.submitButtonColor,
+      otherAmountValue = _ref.otherAmountValue,
       rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
 
   var _useState = (0, _react.useState)('single'),
@@ -78,13 +79,20 @@ var Signup = function Signup(_ref) {
       setPopUpShown = _useState12[1];
 
   (0, _react.useEffect)(function () {
-    var givingData = givingType === 'single' ? singleGiving : regularGiving; // Check the 2nd moneybuy exists before using it;
-    // 'philantrophy' carts have been set up to use a single moneybuy.
-    // See ENG-1685 for more details
+    // If a specific 'other amount' has been passed down, use it,
+    // otherwise assign based on the associated moneybuys:
+    if (otherAmountValue) {
+      setAmountDonate(parseFloat(otherAmountValue));
+    } else {
+      var _givingData = givingType === 'single' ? singleGiving : regularGiving; // Check the 2nd moneybuy exists before using it;
+      // 'philantrophy' carts have been set up to use a single moneybuy.
+      // See ENG-1685 for more details
+
 
-    var thisAmount = givingData.moneybuys[1] ? givingData.moneybuys[1].value : givingData.moneybuys[0].value;
-    setAmountDonate(parseFloat(thisAmount));
-  }, [givingType, singleGiving, regularGiving]);
+      var thisAmount = _givingData.moneybuys[1] ? _givingData.moneybuys[1].value : _givingData.moneybuys[0].value;
+      setAmountDonate(parseFloat(thisAmount));
+    }
+  }, [givingType, singleGiving, regularGiving, otherAmountValue]);
   (0, _react.useEffect)(function () {
     var givingData = givingType === 'single' ? singleGiving : regularGiving;
     var moneyBuyNewDescription = otherAmountText;
@@ -119,9 +127,15 @@ var Signup = function Signup(_ref) {
       setErrorMsg(true);
       setMoneyBuyCopy(false);
     }
-  }; // Create money buy boxes
+  }; // Update the local state if the prop has been set and changed
 
 
+  (0, _react.useEffect)(function () {
+    if (otherAmountValue) {
+      setAmountDonate(parseFloat(otherAmountValue));
+    }
+  }, [otherAmountValue, setAmountDonate]); // Create money buy boxes
+
   var givingData = givingType === 'single' ? singleGiving : regularGiving;
   var showGivingSelector = singleGiving !== null && regularGiving !== null;
   return /*#__PURE__*/_react.default.createElement(_Donate.FormWrapper, null, showGivingSelector && /*#__PURE__*/_react.default.createElement(_GivingSelector.default, {