update: responsive layout stepper

package-lock.json

@@ -14836,6 +14836,60 @@
         }
       }
     },
+    "react-html-parser": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/react-html-parser/-/react-html-parser-2.0.2.tgz",
+      "integrity": "sha512-XeerLwCVjTs3njZcgCOeDUqLgNIt/t+6Jgi5/qPsO/krUWl76kWKXMeVs2LhY2gwM6X378DkhLjur0zUQdpz0g==",
+      "requires": {
+        "htmlparser2": "^3.9.0"
+      },
+      "dependencies": {
+        "domelementtype": {
+          "version": "1.3.1",
+          "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-1.3.1.tgz",
+          "integrity": "sha512-BSKB+TSpMpFI/HOxCNr1O8aMOTZ8hT3pM3GQ0w/mWRmkhEDSFJkkyzz4XQsBV44BChwGkrDfMyjVD0eA2aFV3w=="
+        },
+        "domhandler": {
+          "version": "2.4.2",
+          "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-2.4.2.tgz",
+          "integrity": "sha512-JiK04h0Ht5u/80fdLMCEmV4zkNh2BcoMFBmZ/91WtYZ8qVXSKjiw7fXMgFPnHcSZgOo3XdinHvmnDUeMf5R4wA==",
+          "requires": {
+            "domelementtype": "1"
+          }
+        },
+        "htmlparser2": {
+          "version": "3.10.0",
+          "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-3.10.0.tgz",
+          "integrity": "sha512-J1nEUGv+MkXS0weHNWVKJJ+UrLfePxRWpN3C9bEi9fLxL2+ggW94DQvgYVXsaT30PGwYRIZKNZXuyMhp3Di4bQ==",
+          "requires": {
+            "domelementtype": "^1.3.0",
+            "domhandler": "^2.3.0",
+            "domutils": "^1.5.1",
+            "entities": "^1.1.1",
+            "inherits": "^2.0.1",
+            "readable-stream": "^3.0.6"
+          }
+        },
+        "readable-stream": {
+          "version": "3.1.1",
+          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.1.1.tgz",
+          "integrity": "sha512-DkN66hPyqDhnIQ6Jcsvx9bFjhw214O4poMBcIMgPVpQvNy9a0e0Uhg5SqySyDKAmUlwt8LonTBz1ezOnM8pUdA==",
+          "requires": {
+            "inherits": "^2.0.3",
+            "string_decoder": "^1.1.1",
+            "util-deprecate": "^1.0.1"
+          }
+        },
+        "string_decoder": {
+          "version": "1.2.0",
+          "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.2.0.tgz",
+          "integrity": "sha512-6YqyX6ZWEYguAxgZzHGL7SsCeGx3V2TtOTqZz1xSTSWnqsbWwbptafNyvf/ACquZUXV3DANr5BDIwNYe1mN42w==",
+          "requires": {
+            "safe-buffer": "~5.1.0"
+          }
+        }
+      }
+    },
     "react-images": {
       "version": "0.5.19",
       "resolved": "https://registry.npmjs.org/react-images/-/react-images-0.5.19.tgz",

package.json

@@ -114,6 +114,7 @@
     "react-handsontable": "^0.3.1",
     "react-helmet": "^5.2.0",
     "react-hot-loader": "^4.6.3",
+    "react-html-parser": "^2.0.2",
     "react-images": "^0.5.13",
     "react-infinite-scroller": "^1.2.4",
     "react-intl": "^2.8.0",

src/common/pages/Vouchers/Modal/index.js

@@ -7,6 +7,7 @@ import { Route } from 'react-router-dom'
 import {LINKS} from "../../../routes";
 import NumberFormat from 'react-number-format';
 import get from 'lodash.get';
+import ReactHtmlParser from "react-html-parser";
 
 const Option = Select.Option;
 
@@ -83,7 +84,7 @@ export default class ModalVouchersComponent extends React.Component {
           flex: 0.7,
           padding: 30
         }}>
-          <p className={'descriptionModal'} >{data.description}</p>
+          <p className={'descriptionModal'} >{ReactHtmlParser(data.description)}</p>
 
           {(additional_data.information != null) && <Alert className={'informationAlertModal'} message={
             <div className={'informationContainerModal'}>

src/common/pages/Vouchers/Payment/index.js

@@ -15,6 +15,7 @@ import NavigationArrowBack from 'material-ui/svg-icons/navigation/arrow-back';
 import {LINKS} from "../../../routes";
 import {APP_TYPE} from "../../../config/app";
 import get from "lodash.get";
+import ReactHtmlParser, { processNodes, convertNodeToElement, htmlparser2 } from 'react-html-parser';
 
 const Panel = Collapse.Panel;
 
@@ -35,7 +36,7 @@ export default class PaymentVouchers extends React.Component {
   }
 
   componentDidMount() {
-
+    console.log(this.props.vouchersStore, 'this.props.vouchersStore this.props.vouchersStore this.props.vouchersStore')
   }
 
   render() {
@@ -115,13 +116,14 @@ export default class PaymentVouchers extends React.Component {
             <img className={'image-logo'} src={image} />
           </div>}>
             <div className="row">
-              <Alert message="Pastikan data anda sudah terverivikasi dan vouchers anda yang pilih sudah benar sebelum melakukan transaksi" type="warning" />
+              <Alert message="Pastikan data anda sudah terverifikasi dan vouchers yang anda pilih sudah benar sebelum melakukan konfirmasi transaksi ini" type="warning" />
             </div>
             <div>
-              <ul>
+              <div>
-                <li style={{margin:10}}>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</li>
+                {ReactHtmlParser(this.props.vouchersStore.dataItems.description)}
-                <li style={{margin:10}}>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</li>
+                {/*<li style={{margin:10}}>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</li>*/}
-              </ul>
+                {/*<li style={{margin:10}}>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</li>*/}
+              </div>
             </div>
           </Card>
         </div>