@comicrelief/component-library 7.18.0 → 7.18.1

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

@@ -82,7 +82,7 @@ var Signup = function Signup(_ref) {
     // If a specific 'other amount' has been passed down, use it,
     // otherwise assign based on the associated moneybuys:
     if (otherAmountValue) {
-      setAmountDonate(parseFloat(otherAmountValue));
+      setAmountDonate(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.
@@ -90,7 +90,7 @@ var Signup = function Signup(_ref) {
 
 
       var thisAmount = _givingData.moneybuys[1] ? _givingData.moneybuys[1].value : _givingData.moneybuys[0].value;
-      setAmountDonate(parseFloat(thisAmount));
+      setAmountDonate(thisAmount);
     }
   }, [givingType, singleGiving, regularGiving, otherAmountValue]);
   (0, _react.useEffect)(function () {
@@ -101,7 +101,7 @@ var Signup = function Signup(_ref) {
         moneyBuyNewDescription = moneyBuy.description;
       }
 
-      return index === 1 && amountDonate === ' ' && (setMoneyBuyCopy(moneyBuy.description), setAmountDonate(parseFloat(moneyBuy.value)));
+      return index === 1 && amountDonate === undefined && (setMoneyBuyCopy(moneyBuy.description), setAmountDonate(moneyBuy.value));
     });
 
     if (!(0, _Membership.isAmountValid)(amountDonate)) {
@@ -132,7 +132,7 @@ var Signup = function Signup(_ref) {
 
   (0, _react.useEffect)(function () {
     if (otherAmountValue) {
-      setAmountDonate(parseFloat(otherAmountValue));
+      setAmountDonate(otherAmountValue);
     }
   }, [otherAmountValue, setAmountDonate]); // Create money buy boxes
 
@@ -156,7 +156,7 @@ var Signup = function Signup(_ref) {
       // '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));
+      setAmountDonate(thisAmount);
     }
   }, [errorMsg, givingData.moneybuys]); // Listen for click outside custom amount input if there is no value entered.
 
@@ -175,10 +175,10 @@ var Signup = function Signup(_ref) {
     }
 
     if (givingType === 'single') {
-      return "Donate \xA3".concat((0, _Membership.amountFormatter)(amountDonate), " now");
+      return "Donate \xA3".concat(amountDonate, " now");
     }
 
-    return "Donate \xA3".concat((0, _Membership.amountFormatter)(amountDonate), " monthly");
+    return "Donate \xA3".concat(amountDonate, " monthly");
   };
 
   return /*#__PURE__*/_react.default.createElement(_Donate.FormWrapper, null, showGivingSelector && /*#__PURE__*/_react.default.createElement(_GivingSelector.default, {
@@ -203,10 +203,10 @@ var Signup = function Signup(_ref) {
     var value = _ref2.value;
     return /*#__PURE__*/_react.default.createElement(_MoneyBuy.default, {
       isSelected: amountDonate === value,
-      amount: (0, _Membership.amountFormatter)(value),
+      amount: value.toString(),
       description: "\xA3".concat((0, _Membership.amountFormatter)(value)),
       setOtherAmount: function setOtherAmount() {
-        return setAmountDonate(parseFloat(value));
+        return setAmountDonate(value);
       },
       key: value,
       name: "".concat(mbshipID, "--moneyBuy").concat(index + 1),
@@ -218,7 +218,7 @@ var Signup = function Signup(_ref) {
   }, "Other amount"), /*#__PURE__*/_react.default.createElement(_Donate.AmountField, Object.assign({
     step: "0.01",
     name: "membership_amount",
-    type: "number",
+    type: "string",
     inputBorderColor: (0, _Membership.isAmountValid)(amountDonate) === false,
     label: "\xA3",
     errorMsg: "",
@@ -227,23 +227,24 @@ var Signup = function Signup(_ref) {
   }, rest, {
     max: "25000",
     min: "1",
-    value: (0, _Membership.amountFormatter)(amountDonate),
-    pattern: "[^[0-9]+([,.][0-9]+)?$]",
+    value: amountDonate,
+    pattern: "[^[0-9]+([,.][0-9]+)?$]" // this only applies on submit
+    ,
     placeholder: "0.00",
     onChange: function onChange(e) {
-      return setAmountDonate(parseFloat(e.target.value));
+      return setAmountDonate(e.target.value.trim());
     },
     "aria-label": "Input a different amount",
     ref: amountRef
   }))), amountDonate >= 1 && !noMoneyBuys && moneyBuyCopy && /*#__PURE__*/_react.default.createElement(_Donate.Copy, {
     as: "p"
-  }, /*#__PURE__*/_react.default.createElement("strong", null, "\xA3".concat(amountDonate.toFixed(2), " ")), moneyBuyCopy), errorMsg && /*#__PURE__*/_react.default.createElement(_Donate.Error, {
+  }, /*#__PURE__*/_react.default.createElement("strong", null, "\xA3".concat(amountDonate, " ")), moneyBuyCopy), errorMsg && /*#__PURE__*/_react.default.createElement(_Donate.Error, {
     className: "error--amount",
     tag: "p"
   }, "Please enter an amount between \xA31 and \xA325000 and up to 2 decimal places"), noMoneyBuys ? /*#__PURE__*/_react.default.createElement(_Donate.Button, {
     type: "submit",
     color: submitButtonColor
-  }, errorMsg ? 'Donate' : "Donate \xA3".concat((0, _Membership.amountFormatter)(amountDonate))) : /*#__PURE__*/_react.default.createElement(_Donate.Button, {
+  }, errorMsg ? 'Donate' : "Donate \xA3".concat(amountDonate)) : /*#__PURE__*/_react.default.createElement(_Donate.Button, {
     type: "submit",
     color: submitButtonColor,
     ref: buttonRef
@@ -252,8 +253,8 @@ var Signup = function Signup(_ref) {
 
 Signup.defaultProps = {
   noMoneyBuys: false,
-  data: {},
-  otherAmountValue: null
+  otherAmountValue: null,
+  data: {}
 };
 var _default = Signup;
 exports.default = _default;

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

@@ -628,8 +628,8 @@ exports[`"Single Giving, No Money Buys, with overridden manual input value" rend
                   placeholder="0.00"
                   required={false}
                   step="0.01"
-                  type="number"
-                  value="345.67"
+                  type="string"
+                  value={345.67}
                 />
               </div>
               
@@ -1358,7 +1358,7 @@ exports[`Monthly donation renders correctly 1`] = `
                 
                 <input
                   aria-describedby="mship-1--moneyBuy-box1"
-                  aria-label="£10.10"
+                  aria-label="£12.10"
                   className="c23"
                   id="mship-1--moneyBuy-box1"
                   name="mship-1--moneyBuy1"
@@ -1366,7 +1366,7 @@ exports[`Monthly donation renders correctly 1`] = `
                   placeholder=""
                   required={false}
                   type="button"
-                  value="£ 10.10"
+                  value="£ 12.10"
                 />
               </div>
               
@@ -1391,7 +1391,7 @@ exports[`Monthly donation renders correctly 1`] = `
                 
                 <input
                   aria-describedby="mship-1--moneyBuy-box2"
-                  aria-label="£20"
+                  aria-label="£20.00"
                   className="c23"
                   id="mship-1--moneyBuy-box2"
                   name="mship-1--moneyBuy2"
@@ -1424,7 +1424,7 @@ exports[`Monthly donation renders correctly 1`] = `
                 
                 <input
                   aria-describedby="mship-1--moneyBuy-box3"
-                  aria-label="£30"
+                  aria-label="£30.00"
                   className="c23"
                   id="mship-1--moneyBuy-box3"
                   name="mship-1--moneyBuy3"
@@ -1479,8 +1479,8 @@ exports[`Monthly donation renders correctly 1`] = `
                   placeholder="0.00"
                   required={false}
                   step="0.01"
-                  type="number"
-                  value="10"
+                  type="string"
+                  value={10}
                 />
               </div>
               
@@ -1490,7 +1490,7 @@ exports[`Monthly donation renders correctly 1`] = `
             className="c28"
           >
             <strong>
-              £10.00 
+              £10 
             </strong>
           </p>
           <button
@@ -2192,8 +2192,8 @@ exports[`Single donation renders correctly 1`] = `
                   placeholder="0.00"
                   required={false}
                   step="0.01"
-                  type="number"
-                  value="20"
+                  type="string"
+                  value={20}
                 />
               </div>
               
@@ -2203,7 +2203,7 @@ exports[`Single donation renders correctly 1`] = `
             className="c23"
           >
             <strong>
-              £20.00 
+              £20 
             </strong>
             a support worker to visit 10 isolated young mums with postnatal depression in the UK.
           </p>
@@ -2660,8 +2660,8 @@ exports[`Single donation with no Money Buys renders correctly 1`] = `
                   placeholder="0.00"
                   required={false}
                   step="0.01"
-                  type="number"
-                  value="10"
+                  type="string"
+                  value={10}
                 />
               </div>
               

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

@@ -9,25 +9,25 @@ 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.1
+      value: '12.10'
     }, {
       description: 'a support worker to visit 10 isolated young mums with postnatal depression in the UK.',
-      value: 20
+      value: '20'
     }, {
       description: 'clothes for a child who has had to leave their possessions behind while escaping domestic abuse.',
-      value: 30
+      value: '30'
     }]
   },
   regularGiving: {
     moneybuys: [{
       description: 'a regular supply of toiletries for someone living in a refugee camp in Serbia.',
-      value: 5
+      value: '5.50'
     }, {
       description: 'a potentially lifesaving call for a man at risk of suicide in the UK.',
-      value: 10
+      value: '10'
     }, {
       description: 'the distribution of enough surplus food for a school breakfast club to feed 80 children.',
-      value: 20
+      value: '20'
     }]
   }
 };

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

@@ -197,7 +197,8 @@ var Signup = function Signup(_ref) {
     max: "25000",
     min: "1",
     value: userInput,
-    pattern: "[^[0-9]+([,.][0-9]+)?$]",
+    pattern: "[^[0-9]+([,.][0-9]+)?$]" // this only applies on submit
+    ,
     placeholder: "0.00",
     onChange: function onChange(e) {
       return handleChange(e.target.value, otherDescription);

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

@@ -9,13 +9,13 @@ var _default = {
   regularGiving: {
     moneybuys: [{
       description: 'a regular supply of toiletries for someone living in a refugee camp in Serbia.',
-      value: 5
+      value: '5'
     }, {
       description: 'a potentially lifesaving call for a man at risk of suicide in the UK.',
-      value: 10
+      value: '10'
     }, {
       description: 'the distribution of enough surplus food for a school breakfast club to feed 80 children.',
-      value: 20
+      value: '20'
     }]
   }
 };

package/package.json

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

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

@@ -52,7 +52,7 @@ const Signup = ({
     // If a specific 'other amount' has been passed down, use it,
     // otherwise assign based on the associated moneybuys:
     if (otherAmountValue) {
-      setAmountDonate(parseFloat(otherAmountValue));
+      setAmountDonate(otherAmountValue);
     } else {
       const givingData = givingType === 'single' ? singleGiving : regularGiving;
 
@@ -63,7 +63,7 @@ const Signup = ({
         ? givingData.moneybuys[1].value
         : givingData.moneybuys[0].value;
 
-      setAmountDonate(parseFloat(thisAmount));
+      setAmountDonate(thisAmount);
     }
   }, [givingType, singleGiving, regularGiving, otherAmountValue]);
 
@@ -79,9 +79,9 @@ const Signup = ({
 
       return (
         index === 1
-        && amountDonate === ' '
+        && amountDonate === undefined
         && (setMoneyBuyCopy(moneyBuy.description),
-        setAmountDonate(parseFloat(moneyBuy.value)))
+        setAmountDonate(moneyBuy.value))
       );
     });
 
@@ -136,7 +136,7 @@ const Signup = ({
   // Update the local state if the prop has been set and changed
   useEffect(() => {
     if (otherAmountValue) {
-      setAmountDonate(parseFloat(otherAmountValue));
+      setAmountDonate(otherAmountValue);
     }
   }, [otherAmountValue, setAmountDonate]);
 
@@ -166,7 +166,7 @@ const Signup = ({
         ? givingData.moneybuys[1].value
         : givingData.moneybuys[0].value;
 
-      setAmountDonate(parseFloat(thisAmount));
+      setAmountDonate(thisAmount);
     }
   }, [errorMsg, givingData.moneybuys]);
 
@@ -186,9 +186,9 @@ const Signup = ({
       return 'Donate';
     }
     if (givingType === 'single') {
-      return `Donate £${amountFormatter(amountDonate)} now`;
+      return `Donate £${amountDonate} now`;
     }
-    return `Donate £${amountFormatter(amountDonate)} monthly`;
+    return `Donate £${amountDonate} monthly`;
   };
 
   return (
@@ -226,9 +226,9 @@ const Signup = ({
               {givingData.moneybuys.map(({ value }, index) => (
                 <MoneyBuy
                   isSelected={amountDonate === value}
-                  amount={amountFormatter(value)}
+                  amount={value.toString()}
                   description={`£${amountFormatter(value)}`}
-                  setOtherAmount={() => setAmountDonate(parseFloat(value))}
+                  setOtherAmount={() => setAmountDonate(value)}
                   key={value}
                   name={`${mbshipID}--moneyBuy${index + 1}`}
                   id={`${mbshipID}--moneyBuy-box${index + 1}`}
@@ -245,7 +245,7 @@ const Signup = ({
             <AmountField
               step="0.01"
               name="membership_amount"
-              type="number"
+              type="string"
               inputBorderColor={isAmountValid(amountDonate) === false}
               label="£"
               errorMsg=""
@@ -254,17 +254,17 @@ const Signup = ({
               {...rest}
               max="25000"
               min="1"
-              value={amountFormatter(amountDonate)}
-              pattern="[^[0-9]+([,.][0-9]+)?$]"
+              value={amountDonate}
+              pattern="[^[0-9]+([,.][0-9]+)?$]" // this only applies on submit
               placeholder="0.00"
-              onChange={e => setAmountDonate(parseFloat(e.target.value))}
+              onChange={e => setAmountDonate(e.target.value.trim())}
               aria-label="Input a different amount"
               ref={amountRef}
             />
           </FormFieldset>
           {amountDonate >= 1 && !noMoneyBuys && moneyBuyCopy && (
             <Copy as="p">
-              <strong>{`£${amountDonate.toFixed(2)} `}</strong>
+              <strong>{`£${amountDonate} `}</strong>
               {moneyBuyCopy}
             </Copy>
           )}
@@ -283,7 +283,7 @@ const Signup = ({
             >
               {errorMsg
                 ? 'Donate'
-                : `Donate £${amountFormatter(amountDonate)}`}
+                : `Donate £${amountDonate}`}
             </Button>
           ) : (
             <Button
@@ -318,8 +318,8 @@ Signup.propTypes = {
 
 Signup.defaultProps = {
   noMoneyBuys: false,
-  data: {},
-  otherAmountValue: null
+  otherAmountValue: null,
+  data: {}
 };
 
 export default Signup;

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

@@ -628,8 +628,8 @@ exports[`"Single Giving, No Money Buys, with overridden manual input value" rend
                   placeholder="0.00"
                   required={false}
                   step="0.01"
-                  type="number"
-                  value="345.67"
+                  type="string"
+                  value={345.67}
                 />
               </div>
               
@@ -1358,7 +1358,7 @@ exports[`Monthly donation renders correctly 1`] = `
                 
                 <input
                   aria-describedby="mship-1--moneyBuy-box1"
-                  aria-label="£10.10"
+                  aria-label="£12.10"
                   className="c23"
                   id="mship-1--moneyBuy-box1"
                   name="mship-1--moneyBuy1"
@@ -1366,7 +1366,7 @@ exports[`Monthly donation renders correctly 1`] = `
                   placeholder=""
                   required={false}
                   type="button"
-                  value="£ 10.10"
+                  value="£ 12.10"
                 />
               </div>
               
@@ -1391,7 +1391,7 @@ exports[`Monthly donation renders correctly 1`] = `
                 
                 <input
                   aria-describedby="mship-1--moneyBuy-box2"
-                  aria-label="£20"
+                  aria-label="£20.00"
                   className="c23"
                   id="mship-1--moneyBuy-box2"
                   name="mship-1--moneyBuy2"
@@ -1424,7 +1424,7 @@ exports[`Monthly donation renders correctly 1`] = `
                 
                 <input
                   aria-describedby="mship-1--moneyBuy-box3"
-                  aria-label="£30"
+                  aria-label="£30.00"
                   className="c23"
                   id="mship-1--moneyBuy-box3"
                   name="mship-1--moneyBuy3"
@@ -1479,8 +1479,8 @@ exports[`Monthly donation renders correctly 1`] = `
                   placeholder="0.00"
                   required={false}
                   step="0.01"
-                  type="number"
-                  value="10"
+                  type="string"
+                  value={10}
                 />
               </div>
               
@@ -1490,7 +1490,7 @@ exports[`Monthly donation renders correctly 1`] = `
             className="c28"
           >
             <strong>
-              £10.00 
+              £10 
             </strong>
           </p>
           <button
@@ -2192,8 +2192,8 @@ exports[`Single donation renders correctly 1`] = `
                   placeholder="0.00"
                   required={false}
                   step="0.01"
-                  type="number"
-                  value="20"
+                  type="string"
+                  value={20}
                 />
               </div>
               
@@ -2203,7 +2203,7 @@ exports[`Single donation renders correctly 1`] = `
             className="c23"
           >
             <strong>
-              £20.00 
+              £20 
             </strong>
             a support worker to visit 10 isolated young mums with postnatal depression in the UK.
           </p>
@@ -2660,8 +2660,8 @@ exports[`Single donation with no Money Buys renders correctly 1`] = `
                   placeholder="0.00"
                   required={false}
                   step="0.01"
-                  type="number"
-                  value="10"
+                  type="string"
+                  value={10}
                 />
               </div>
               

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

@@ -5,17 +5,17 @@ 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.1
+        value: '12.10'
       },
       {
         description:
           'a support worker to visit 10 isolated young mums with postnatal depression in the UK.',
-        value: 20
+        value: '20'
       },
       {
         description:
           'clothes for a child who has had to leave their possessions behind while escaping domestic abuse.',
-        value: 30
+        value: '30'
       }
     ]
   },
@@ -24,17 +24,17 @@ export default {
       {
         description:
           'a regular supply of toiletries for someone living in a refugee camp in Serbia.',
-        value: 5
+        value: '5.50'
       },
       {
         description:
           'a potentially lifesaving call for a man at risk of suicide in the UK.',
-        value: 10
+        value: '10'
       },
       {
         description:
           'the distribution of enough surplus food for a school breakfast club to feed 80 children.',
-        value: 20
+        value: '20'
       }
     ]
   }

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

@@ -173,7 +173,7 @@ const Signup = ({
               max="25000"
               min="1"
               value={userInput}
-              pattern="[^[0-9]+([,.][0-9]+)?$]"
+              pattern="[^[0-9]+([,.][0-9]+)?$]" // this only applies on submit
               placeholder="0.00"
               onChange={e => handleChange(e.target.value, otherDescription)}
               onClick={e => hightlightInput(e.target.value, otherDescription)}

package/src/components/Organisms/Membership/MoneyBox/MoneyBox.js

@@ -41,7 +41,7 @@ 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

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

@@ -5,17 +5,17 @@ export default {
       {
         description:
           'a regular supply of toiletries for someone living in a refugee camp in Serbia.',
-        value: 5
+        value: '5'
       },
       {
         description:
           'a potentially lifesaving call for a man at risk of suicide in the UK.',
-        value: 10
+        value: '10'
       },
       {
         description:
           'the distribution of enough surplus food for a school breakfast club to feed 80 children.',
-        value: 20
+        value: '20'
       }
     ]
   }