Merge branch 'stage' into 'master'

Release 2.5.0

See merge request cleeng/gummybear-2!250

package.json

@@ -43,6 +43,7 @@
     "jest-environment-jsdom-fourteen": "0.1.0",
     "jest-resolve": "24.8.0",
     "jest-watch-typeahead": "0.3.1",
+    "js-base64": "^3.7.2",
     "jwt-decode": "^2.2.0",
     "lodash.merge": "^4.6.2",
     "mini-css-extract-plugin": "0.5.0",

src/api/Customer/getTransactionReceipt.js

@@ -0,0 +1,13 @@
+import fetchWithJWT from 'util/fetchHelper';
+
+const getTransactionReceipt = transactionId => {
+  const url = `${ENVIRONMENT_CONFIGURATION.API_URL}/receipt/${transactionId}`;
+
+  return fetchWithJWT(url, {
+    method: 'GET'
+  }).then(res => {
+    return res.json();
+  });
+};
+
+export default getTransactionReceipt;

src/api/index.js

@@ -18,6 +18,7 @@ import applyCoupon from './Customer/applyCoupon';
 import getCaptureStatus from './Customer/getCaptureStatus';
 import updateCaptureAnswers from './Customer/updateCaptureAnswers';
 import submitConsents from './Customer/submitConsents';
+import getTransactionReceipt from './Customer/getTransactionReceipt';
 import getPaymentMethods from './Publisher/getPaymentMethods';
 import getConsents from './Publisher/getConsents';
 
@@ -43,5 +44,6 @@ export {
   applyCoupon,
   submitConsents,
   getPaymentMethods,
-  getConsents
+  getConsents,
+  getTransactionReceipt
 };

src/components/Transactions/Transactions.js

@@ -5,11 +5,14 @@ import { withTranslation } from 'react-i18next';
 import labeling from 'containers/labeling';
 import Card from 'components/Card';
 import { dateFormat } from 'util/planHelper';
+import roundNumber from 'util/roundNumber';
 import MyAccountError from 'components/MyAccountError';
 import Button from 'components/Button';
 import { ReactComponent as noTransactionsIcon } from 'assets/images/errors/transaction_icon.svg';
 import SkeletonWrapper from 'components/SkeletonWrapper';
 import Loader from 'components/Loader';
+import getTransactionReceipt from 'api/Customer/getTransactionReceipt';
+import { Base64 } from 'js-base64';
 import {
   WrapStyled,
   InsideWrapperStyled,
@@ -18,6 +21,7 @@ import {
   SubTitleStyled,
   RightBoxStyled,
   IdStyled,
+  PriceStyled,
   DateStyled,
   ButtonTextStyled,
   TransactionListStyled
@@ -49,6 +53,15 @@ const TransactionsSkeleton = () => (
   </Card>
 );
 
+const showReceipt = transactionId => {
+  getTransactionReceipt(transactionId).then(resp => {
+    const decodedReceipt = Base64.decode(resp.responseData);
+    const newWindow = window.open('', 'Receipt', '');
+    newWindow.document.write(decodedReceipt);
+    newWindow.document.close();
+  });
+};
+
 const Transactions = ({
   transactions,
   toggleTransactionsList,
@@ -94,7 +107,11 @@ const Transactions = ({
                   </SubTitleStyled>
                 </LeftBoxStyled>
                 <RightBoxStyled>
-                  <IdStyled>{subItem.transactionId}</IdStyled>
+                  <PriceStyled
+                    onClick={() => showReceipt(subItem.transactionId)}
+                  >
+                    {roundNumber(subItem.transactionPriceInclTax, 2)}
+                  </PriceStyled>
                   <DateStyled>{dateFormat(subItem.transactionDate)}</DateStyled>
                 </RightBoxStyled>
               </InsideWrapperStyled>

src/components/Transactions/TransactionsStyled.js

@@ -95,6 +95,17 @@ export const IdStyled = styled.div`
 
   font-size: 13px;
 `;
+export const PriceStyled = styled.div`
+  color: ${MainColor};
+
+  font-size: 13px;
+  font-weight: 700;
+  text-decoration: underline;
+
+  &:hover {
+    cursor: pointer;
+  }
+`;
 export const DateStyled = styled.div`
   margin-top: 6px;
 

yarn.lock

@@ -9150,6 +9150,11 @@ js-base64@^2.1.8:
   resolved "https://registry.yarnpkg.com/js-base64/-/js-base64-2.6.4.tgz#f4e686c5de1ea1f867dbcad3d46d969428df98c4"
   integrity sha512-pZe//GGmwJndub7ZghVHz7vjb2LgC1m8B07Au3eYqeqv9emhESByMXxaEgkUkEqJe87oBbSniGYoQNIBklc7IQ==
 
+js-base64@^3.7.2:
+  version "3.7.2"
+  resolved "https://registry.yarnpkg.com/js-base64/-/js-base64-3.7.2.tgz#816d11d81a8aff241603d19ce5761e13e41d7745"
+  integrity sha512-NnRs6dsyqUXejqk/yv2aiXlAvOs56sLkX6nUdeaNezI5LFFLlsZjOThmwnrcwh5ZZRwZlCMnVAY3CvhIhoVEKQ==
+
 js-beautify@^1.8.8:
   version "1.13.0"
   resolved "https://registry.yarnpkg.com/js-beautify/-/js-beautify-1.13.0.tgz#a056d5d3acfd4918549aae3ab039f9f3c51eebb2"