@visns-studio/visns-components 4.10.44 → 4.10.45

package/package.json

@@ -1,7 +1,7 @@
 {
     "dependencies": {
         "@emotion/is-prop-valid": "^1.3.1",
-        "@fontsource/barlow": "^5.1.0",
+        "@fontsource/barlow": "^5.1.1",
         "@inovua/reactdatagrid-community": "^5.10.2",
         "@inovua/reactdatagrid-enterprise": "^5.10.2",
         "@nivo/bar": "^0.88.0",
@@ -14,45 +14,45 @@
         "akar-icons": "^1.9.31",
         "array-move": "^4.0.0",
         "awesome-debounce-promise": "^2.1.0",
-        "axios": "^1.7.8",
+        "axios": "^1.7.9",
         "browser-image-compression": "^2.0.2",
         "dayjs": "^1.11.13",
-        "fabric": "^6.5.1",
+        "fabric": "^6.5.4",
         "file-saver": "^2.0.5",
-        "framer-motion": "^11.12.0",
-        "html-react-parser": "^5.1.18",
+        "framer-motion": "^11.16.0",
+        "html-react-parser": "^5.2.2",
         "lodash": "^4.17.21",
         "lodash.debounce": "^4.0.8",
         "moment": "^2.30.1",
-        "motion": "^11.12.0",
+        "motion": "^11.16.0",
         "numeral": "^2.0.6",
         "pluralize": "^8.0.0",
         "quill-image-uploader": "^1.3.0",
         "react-color": "^2.19.3",
         "react-confirm-alert": "^3.0.6",
         "react-copy-to-clipboard": "^5.1.0",
-        "react-datepicker": "^7.5.0",
+        "react-datepicker": "^7.6.0",
         "react-dropzone": "^14.3.5",
         "react-grid-gallery": "^1.0.1",
-        "react-number-format": "^5.4.2",
+        "react-number-format": "^5.4.3",
         "react-password-strength-bar": "^0.4.1",
         "react-promise-tracker": "^2.1.1",
         "react-quill": "^2.0.0",
         "react-reveal": "^1.2.2",
-        "react-router-dom": "^6.27.0",
-        "react-select": "^5.8.3",
-        "react-signature-pad-wrapper": "^4.0.4",
+        "react-router-dom": "^6.28.1",
+        "react-select": "^5.9.0",
+        "react-signature-pad-wrapper": "^4.1.0",
         "react-slugify": "^4.0.1",
         "react-sortable-hoc": "^2.0.0",
-        "react-to-print": "^3.0.2",
+        "react-to-print": "^3.0.4",
         "react-toastify": "^10.0.6",
         "react-toggle": "^4.1.3",
         "react-tooltip": "^5.28.0",
-        "react-window": "^1.8.10",
+        "react-window": "^1.8.11",
         "reactjs-popup": "^2.0.6",
         "style-loader": "^4.0.0",
         "truncate": "^3.0.0",
-        "uuid": "^11.0.3",
+        "uuid": "^11.0.4",
         "validator": "^13.12.0",
         "vite": "^5.4.11",
         "yarn": "^1.22.22"
@@ -61,7 +61,7 @@
         "@babel/core": "^7.26.0",
         "@babel/plugin-transform-runtime": "^7.25.9",
         "@babel/preset-env": "^7.26.0",
-        "@babel/preset-react": "^7.25.9",
+        "@babel/preset-react": "^7.26.3",
         "babel-loader": "^9.2.1",
         "copy-webpack-plugin": "^12.0.2",
         "css-loader": "^7.1.2",
@@ -69,15 +69,15 @@
         "mini-css-extract-plugin": "^2.9.2",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
-        "sass": "^1.81.0",
-        "sass-loader": "^16.0.3"
+        "sass": "^1.83.1",
+        "sass-loader": "^16.0.4"
     },
     "peerDependencies": {
         "react": "^17.0.0 || ^18.0.0",
         "react-dom": "^17.0.0 || ^18.0.0"
     },
     "name": "@visns-studio/visns-components",
-    "version": "4.10.44",
+    "version": "4.10.45",
     "description": "Various packages to assist in the development of our Custom Applications.",
     "main": "src/index.js",
     "files": [

package/src/components/crm/QrCode.jsx

@@ -1,11 +1,12 @@
 import { useEffect, useRef, useState } from 'react';
-import ReactToPrint from 'react-to-print';
+import { useReactToPrint } from 'react-to-print';
 
 import CustomFetch from './Fetch';
 import styles from './styles/QrCode.module.scss';
 
 const QrCode = ({ config, dataId }) => {
-    const printComponentRef = useRef();
+    const contentRef = useRef(null);
+    const reactToPrintFn = useReactToPrint({ contentRef });
     const [qrCodeData, setQrCodeData] = useState({
         logo: '',
         qrCode: '',
@@ -26,9 +27,13 @@ const QrCode = ({ config, dataId }) => {
         fetchQrCode(config);
     }, []);
 
+    useEffect(() => {
+        console.info(qrCodeData);
+    }, [qrCodeData]);
+
     return (
         <>
-            <div className={styles.gridtxt} ref={printComponentRef}>
+            <div className={styles.gridtxt} ref={contentRef}>
                 {qrCodeData.logo && qrCodeData.logo !== '' && (
                     <ul className={styles.customer__overview}>
                         <li
@@ -52,7 +57,7 @@ const QrCode = ({ config, dataId }) => {
                             textAlign: 'center',
                         }}
                     >
-                        {qrCodeData.title}
+                        {qrCodeData.title || ''}
                     </li>
                 </ul>
                 <ul className={styles.customer__overview}>
@@ -71,10 +76,9 @@ const QrCode = ({ config, dataId }) => {
                 </ul>
             </div>
             <div className={styles.polActions}>
-                <ReactToPrint
-                    trigger={() => <button className="btn">Print</button>}
-                    content={() => printComponentRef.current}
-                />
+                <button className={styles.btn} onClick={() => reactToPrintFn()}>
+                    Print
+                </button>
             </div>
         </>
     );

package/src/components/crm/styles/QrCode.module.scss

@@ -85,3 +85,21 @@
         margin: 0 0.15em;
     }
 }
+
+.btn {
+    width: max-content;
+    display: inline-block;
+    position: relative;
+    padding: 0.65rem 1rem;
+    cursor: pointer;
+    font-size: 1rem;
+    color: var(--tertiary-color);
+    text-decoration: none;
+    overflow: hidden;
+    background: var(--primary-color);
+    border: 1px solid rgba(var(--primary-color--rgb), 1.1);
+    border-radius: var(--br);
+    outline: none;
+    transition: all 0.2s cubic-bezier(0.85, 0, 0.15, 1) 0s;
+    font-size: 1.25em;
+}