@comicrelief/component-library 7.10.0 → 7.11.1

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

@@ -17,7 +17,7 @@ var _PopUpComponent = _interopRequireDefault(require("./PopUpComponent"));
 
 var _Text = _interopRequireDefault(require("../../../Atoms/Text/Text"));
 
-var _MoneyBox = _interopRequireDefault(require("../MoneyBox/MoneyBox"));
+var _MoneyBuy = _interopRequireDefault(require("../MoneyBuy/MoneyBuy"));
 
 var _Membership = require("../../../../utils/Membership");
 
@@ -56,7 +56,7 @@ var Signup = function Signup(_ref) {
       errorMsg = _useState4[0],
       setErrorMsg = _useState4[1];
 
-  var _useState5 = (0, _react.useState)(' '),
+  var _useState5 = (0, _react.useState)(null),
       _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
       amountDonate = _useState6[0],
       setAmountDonate = _useState6[1];
@@ -144,10 +144,10 @@ var Signup = function Signup(_ref) {
     weight: "bold"
   }, chooseAmountText || "".concat(noMoneyBuys ? 'Enter' : 'Choose', " an amount to give"))), !noMoneyBuys && /*#__PURE__*/_react.default.createElement(_Donate.MoneyBuys, null, givingData.moneybuys.map(function (_ref2, index) {
     var value = _ref2.value;
-    return /*#__PURE__*/_react.default.createElement(_MoneyBox.default, {
+    return /*#__PURE__*/_react.default.createElement(_MoneyBuy.default, {
       isSelected: amountDonate === value,
-      amount: value,
-      description: "\xA3".concat(value),
+      amount: (0, _Membership.amountFormatter)(value),
+      description: "\xA3".concat((0, _Membership.amountFormatter)(value)),
       setOtherAmount: function setOtherAmount() {
         return setAmountDonate(parseFloat(value));
       },
@@ -170,7 +170,7 @@ var Signup = function Signup(_ref) {
   }, rest, {
     max: "25000",
     min: "1",
-    value: amountDonate,
+    value: (0, _Membership.amountFormatter)(amountDonate),
     pattern: "[^[0-9]+([,.][0-9]+)?$]",
     placeholder: "0.00",
     onChange: function onChange(e) {

package/dist/components/Organisms/Donate/{MoneyBox/MoneyBox.js → MoneyBuy/MoneyBuy.js}

@@ -25,9 +25,9 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 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 MoneyBox = (0, _styledComponents.default)(_Input.default).withConfig({
-  displayName: "MoneyBox",
-  componentId: "sc-1d9rl92-0"
+var MoneyBuyButton = (0, _styledComponents.default)(_Input.default).withConfig({
+  displayName: "MoneyBuy__MoneyBuyButton",
+  componentId: "sc-38g5hn-0"
 })(["display:block;input{border:none;background-color:", ";color:", ";font-size:", ";font-family:", ";font-weight:normal;border-radius:10px;padding:", ";box-shadow:0px 0px 16px rgba(0,0,0,0.15);height:auto;", "{font-size:", ";padding:", ";}&:focus{border:none;outline:none;box-shadow:inset 0 0 0 4px ", ";}&:active:focus{box-shadow:0px 0px 16px rgba(0,0,0,0.3);}", "}"], function (_ref) {
   var theme = _ref.theme;
   return theme.color('blue_light');
@@ -63,7 +63,7 @@ var MoneyBuy = function MoneyBuy(_ref10) {
       currency = _ref10.currency,
       description = _ref10.description,
       rest = (0, _objectWithoutProperties2.default)(_ref10, _excluded);
-  return /*#__PURE__*/_react.default.createElement(MoneyBox, Object.assign({}, rest, {
+  return /*#__PURE__*/_react.default.createElement(MoneyBuyButton, Object.assign({}, rest, {
     "aria-label": description,
     value: "".concat(currency, " ").concat(amount),
     type: "button",

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

@@ -705,7 +705,7 @@ exports[`Monthly donation renders correctly 1`] = `
                 
                 <input
                   aria-describedby="mship-1--moneyBuy-box1"
-                  aria-label="£10"
+                  aria-label="£10.10"
                   className="c23"
                   id="mship-1--moneyBuy-box1"
                   name="mship-1--moneyBuy1"
@@ -713,7 +713,7 @@ exports[`Monthly donation renders correctly 1`] = `
                   placeholder=""
                   required={false}
                   type="button"
-                  value="£ 10"
+                  value="£ 10.10"
                 />
               </div>
               
@@ -1531,7 +1531,7 @@ exports[`Single donation renders correctly 1`] = `
                   required={false}
                   step="0.01"
                   type="number"
-                  value={20}
+                  value="20"
                 />
               </div>
               

package/dist/components/Organisms/Donate/dev-data/data.js

@@ -9,7 +9,7 @@ var _default = {
   singleGiving: {
     moneybuys: [{
       description: 'a pregnant woman in Uganda to have access to a birth kit so she can have a clean, safe delivery.',
-      value: 10
+      value: 10.1
     }, {
       description: 'a support worker to visit 10 isolated young mums with postnatal depression in the UK.',
       value: 20

package/dist/utils/Membership.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.handleDonateSubmission = exports.isInputMatchBoxValue = exports.isAmountValid = exports.onKeyPress = void 0;
+exports.amountFormatter = exports.handleDonateSubmission = exports.isInputMatchBoxValue = exports.isAmountValid = exports.onKeyPress = void 0;
 
 // this function prevent keyboard characters like  e, + , - to be passed on the input
 var onKeyPress = function onKeyPress(event) {
@@ -14,6 +14,15 @@ var onKeyPress = function onKeyPress(event) {
 
 exports.onKeyPress = onKeyPress;
 
+var amountFormatter = function amountFormatter(amount) {
+  if (!amount) return ' '; // Determine how many places to fix the number to before passing
+
+  var decPoint = !Number.isInteger(amount) ? 2 : 0;
+  return parseFloat(amount).toFixed(decPoint);
+};
+
+exports.amountFormatter = amountFormatter;
+
 var isAmountValid = function isAmountValid(input) {
   var reg = /^\s*(?=.*[1-9])\d*(?:\.\d{1,2})?\s*$/g;
   var isValid = input * 1 >= 1 && input * 1 <= 25000 && reg.test(input);

package/dist/utils/whiteListed.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var whiteList = ['https://giftaid.comicrelief.com', 'https://donation.comicrelief.com', 'https://www.comicrelief.com', 'https://www.sportrelief.com', 'https://app.beapplied.com/org/comic-relief', 'http://stories.comicrelief.com'];
+var whiteList = ['https://giftaid.comicrelief.com', 'https://donation.comicrelief.com', 'https://www.comicrelief.com', 'https://www.sportrelief.com', 'https://app.beapplied.com/org/comic-relief', 'stories.comicrelief.com'];
 
 var whiteListed = function whiteListed(url) {
   if (url !== undefined && url !== null && whiteList.some(function (v) {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@comicrelief/component-library",
   "author": "Comic Relief Engineering Team",
-  "version": "7.10.0",
+  "version": "7.11.1",
   "main": "dist/index.js",
   "license": "ISC",
   "jest": {

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

@@ -3,10 +3,11 @@ import PropTypes from 'prop-types';
 
 import PopUpComponent from './PopUpComponent';
 import Text from '../../../Atoms/Text/Text';
-import MoneyBox from '../MoneyBox/MoneyBox';
+import MoneyBuy from '../MoneyBuy/MoneyBuy';
 import {
   handleDonateSubmission,
-  isAmountValid
+  isAmountValid,
+  amountFormatter
 } from '../../../../utils/Membership';
 import {
   Button,
@@ -38,7 +39,7 @@ const Signup = ({
 }) => {
   const [givingType, setGivingType] = useState('single');
   const [errorMsg, setErrorMsg] = useState(false);
-  const [amountDonate, setAmountDonate] = useState(' ');
+  const [amountDonate, setAmountDonate] = useState(null);
   const [moneyBuyCopy, setMoneyBuyCopy] = useState(true);
   const [popOpen, setPopOpen] = useState(false);
   // In order to keep track of whether the user has ever been shown the popup
@@ -160,10 +161,10 @@ const Signup = ({
           {!noMoneyBuys && (
             <MoneyBuys>
               {givingData.moneybuys.map(({ value }, index) => (
-                <MoneyBox
+                <MoneyBuy
                   isSelected={amountDonate === value}
-                  amount={value}
-                  description={`£${value}`}
+                  amount={amountFormatter(value)}
+                  description={`£${amountFormatter(value)}`}
                   setOtherAmount={() => setAmountDonate(parseFloat(value))}
                   key={value}
                   name={`${mbshipID}--moneyBuy${index + 1}`}
@@ -190,7 +191,7 @@ const Signup = ({
               {...rest}
               max="25000"
               min="1"
-              value={amountDonate}
+              value={amountFormatter(amountDonate)}
               pattern="[^[0-9]+([,.][0-9]+)?$]"
               placeholder="0.00"
               onChange={e => setAmountDonate(parseFloat(e.target.value))}

package/src/components/Organisms/Donate/{MoneyBox/MoneyBox.js → MoneyBuy/MoneyBuy.js}

@@ -6,7 +6,7 @@ import Input from '../../../Atoms/Input/Input';
 import spacing from '../../../../theme/shared/spacing';
 import { media } from '../../../../theme/shared/size';
 
-const MoneyBox = styled(Input)`
+const MoneyBuyButton = styled(Input)`
   display: block;
   input {
     border: none;
@@ -51,7 +51,7 @@ const MoneyBuy = ({
   description,
   ...rest
 }) => (
-  <MoneyBox
+  <MoneyBuyButton
     {...rest}
     aria-label={description}
     value={`${currency} ${amount}`}
@@ -63,10 +63,10 @@ const MoneyBuy = ({
 );
 
 MoneyBuy.propTypes = {
-  amount: PropTypes.number,
+  amount: PropTypes.string,
   currency: PropTypes.string,
   description: PropTypes.string,
-  // Function already set does'nt need to be passed as props
+  // Function already set doesn't need to be passed as props
   setOtherAmount: PropTypes.func.isRequired
 };
 

package/src/components/Organisms/Donate/__snapshots__/Donate.test.js.snap

@@ -705,7 +705,7 @@ exports[`Monthly donation renders correctly 1`] = `
                 
                 <input
                   aria-describedby="mship-1--moneyBuy-box1"
-                  aria-label="£10"
+                  aria-label="£10.10"
                   className="c23"
                   id="mship-1--moneyBuy-box1"
                   name="mship-1--moneyBuy1"
@@ -713,7 +713,7 @@ exports[`Monthly donation renders correctly 1`] = `
                   placeholder=""
                   required={false}
                   type="button"
-                  value="£ 10"
+                  value="£ 10.10"
                 />
               </div>
               
@@ -1531,7 +1531,7 @@ exports[`Single donation renders correctly 1`] = `
                   required={false}
                   step="0.01"
                   type="number"
-                  value={20}
+                  value="20"
                 />
               </div>
               

package/src/components/Organisms/Donate/dev-data/data.js

@@ -5,7 +5,7 @@ export default {
       {
         description:
           'a pregnant woman in Uganda to have access to a birth kit so she can have a clean, safe delivery.',
-        value: 10
+        value: 10.1
       },
       {
         description:

package/src/utils/Membership.js

@@ -5,6 +5,13 @@ const onKeyPress = event => {
   if (/\+|-|e/.test(keyValue)) event.preventDefault();
 };
 
+const amountFormatter = amount => {
+  if (!amount) return ' ';
+  // Determine how many places to fix the number to before passing
+  const decPoint = (!Number.isInteger(amount)) ? 2 : 0;
+  return parseFloat(amount).toFixed(decPoint);
+};
+
 const isAmountValid = input => {
   const reg = /^\s*(?=.*[1-9])\d*(?:\.\d{1,2})?\s*$/g;
   const isValid = input * 1 >= 1 && input * 1 <= 25000 && reg.test(input);
@@ -64,5 +71,6 @@ export {
   onKeyPress,
   isAmountValid,
   isInputMatchBoxValue,
-  handleDonateSubmission
+  handleDonateSubmission,
+  amountFormatter
 };

package/src/utils/whiteListed.js

@@ -4,7 +4,7 @@ const whiteList = [
   'https://www.comicrelief.com',
   'https://www.sportrelief.com',
   'https://app.beapplied.com/org/comic-relief',
-  'http://stories.comicrelief.com'
+  'stories.comicrelief.com'
 ];
 
 const whiteListed = url => {