@comicrelief/component-library 7.12.2 → 7.13.0

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, {