@seamlessdocs/payment-modals 1.0.48 → 1.0.50

package/package.json

@@ -1,8 +1,11 @@
 {
   "name": "@seamlessdocs/payment-modals",
-  "version": "1.0.48",
-  "description": "",
+  "version": "1.0.50",
+  "description": "Payment modals for SeamlessDocs",
   "main": "build/payment-modals.js",
+  "repository": {
+    "url": "https://github.com/SeamlessDocsDev/PaymentModals"    
+  },
   "scripts": {
     "start": "webpack-dev-server --mode development",
     "dev": "webpack --mode development ./src/index.jsx --output ./build/payment-modals.js",
@@ -53,6 +56,6 @@
     "react-dom": "^16.10.1",
     "react-inlinesvg": "^1.1.7",
     "react-select": "^3.1.0",
-    "react-tooltip": "^4.2.9"
+    "react-tippy": "^1.4.0"
   }
 }

package/src/Components/ACHPaymentModal/Form/FieldContainer/FieldContainer.module.css

@@ -21,20 +21,11 @@
   line-height: 13px;
 }
 
-.validationIcon {
-  position: absolute;
-  top: 0;
-  right: 0;
-
-  margin: 8px;
-}
-
 .invalidField {
   background: #fbf3f2;
 }
 
-.tooltip{
-    padding: 8px;
-
-    text-align: center;
+.fieldHeader {
+  display: flex;
+  justify-content: space-between;
 }

package/src/Components/ACHPaymentModal/Form/FieldContainer/index.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
-import ReactTooltip from 'react-tooltip';
+import { Tooltip } from 'react-tippy';
 
 import { Field } from 'formik';
 
@@ -10,6 +10,8 @@ import validIcon from '../../../../assets/img/valid-icon.svg';
 
 import styles from './FieldContainer.module.css';
 
+import 'react-tippy/dist/tippy.css';
+
 const FieldContainer = ({ name, label, children }) => {
   return (
     <Field name={name}>
@@ -19,30 +21,17 @@ const FieldContainer = ({ name, label, children }) => {
             [styles.invalidField]: meta.touched && meta.error
           })}
         >
-          <div className={styles.fieldName}>{label}</div>
-          {meta.touched && meta.error && (
-            <>
-              <img
-                data-tip
-                data-for={name}
-                className={styles.validationIcon}
-                src={errorIcon}
-                alt="error"
-              />
-              <ReactTooltip
-                className={styles.tooltip}
-                id={name}
-                place="top"
-                type="dark"
-                effect="solid"
-              >
-                <span>{meta.error}</span>
-              </ReactTooltip>
-            </>
-          )}
-          {meta.touched && !meta.error && (
-            <img className={styles.validationIcon} src={validIcon} alt="valid" />
-          )}
+          <div className={styles.fieldHeader}>
+            <div className={styles.fieldName}>{label}</div>
+            {meta.touched && meta.error && (
+              <Tooltip title={meta.error} arrow>
+                <img src={errorIcon} alt="error" />
+              </Tooltip>
+            )}
+            {meta.touched && !meta.error && (
+              <img className={styles.validationIcon} src={validIcon} alt="valid" />
+            )}
+          </div>
 
           {children(field)}
         </div>

package/webpack.config.js

@@ -1,78 +1,81 @@
 const path = require('path');
 
-module.exports = {
-  entry: {
-    main: './src/index.jsx'
-  },
-  output: {
-    filename: 'payment-modals.js',
-    path: '/build',
-    library: 'payment-modals',
-    libraryTarget: 'umd',
-    umdNamedDefine: true
-  },
-  module: {
-    rules: [
-      {
-        test: /\.(js|jsx)$/,
-        exclude: /node_modules/,
-        use: {
-          loader: 'babel-loader'
-        }
-      },
-      {
-        test: /\.css$/,
-        use: [
-          'style-loader',
-          {
-            loader: 'css-loader',
+module.exports = (_env, argv) => {
+  const isProduction = argv.mode === 'production';
+  return {
+    entry: {
+      main: './src/index.jsx'
+    },
+    output: {
+      filename: 'payment-modals.js',
+      path: '/build',
+      library: 'payment-modals',
+      libraryTarget: 'umd',
+      umdNamedDefine: true
+    },
+    module: {
+      rules: [
+        {
+          test: /\.(js|jsx)$/,
+          exclude: /node_modules/,
+          use: {
+            loader: 'babel-loader'
+          }
+        },
+        {
+          test: /\.css$/,
+          use: [
+            'style-loader',
+            {
+              loader: 'css-loader',
+              options: {
+                importLoaders: 1,
+                modules: true
+              }
+            }
+          ],
+          include: /\.module\.css$/
+        },
+        {
+          test: /\.css$/,
+          use: ['style-loader', 'css-loader'],
+          exclude: /\.module\.css$/
+        },
+        {
+          test: /\.(svg|png|jpg|jpeg|gif)$/,
+          use: {
+            loader: 'url-loader',
             options: {
-              importLoaders: 1,
-              modules: true
+              name: '[path][name].[ext]'
             }
           }
-        ],
-        include: /\.module\.css$/
-      },
-      {
-        test: /\.css$/,
-        use: ['style-loader', 'css-loader'],
-        exclude: /\.module\.css$/
-      },
-      {
-        test: /\.(svg|png|jpg|jpeg|gif)$/,
-        use: {
-          loader: 'url-loader',
-          options: {
-            name: '[path][name].[ext]'
-          }
-        }
-      },
-      {
-        test: /\.(html)$/,
-        use: {
-          loader: 'html-loader',
-          options: {
-            attrs: ['img:src', 'link:href']
+        },
+        {
+          test: /\.(html)$/,
+          use: {
+            loader: 'html-loader',
+            options: {
+              attrs: ['img:src', 'link:href']
+            }
           }
         }
+      ]
+    },
+    devServer: {
+      port: 9000,
+      compress: true,
+      open: true,
+      publicPath: '/build/',
+      contentBase: path.join(__dirname, 'build'),
+      historyApiFallback: true
+    },
+    devtool: isProduction ? false : 'inline-source-map',
+    resolve: {
+      modules: [path.join(__dirname, 'src'), 'node_modules'],
+      extensions: ['.js', '.jsx', '.scss'],
+      alias: {
+        'react-virtualized/List': 'react-virtualized/dist/es/List'
       }
-    ]
-  },
-  devServer: {
-    port: 9000,
-    compress: true,
-    open: true,
-    publicPath: '/build/',
-    contentBase: path.join(__dirname, 'build'),
-    historyApiFallback: true
-  },
-  devtool: 'inline-source-map',
-  resolve: {
-    modules: [path.join(__dirname, 'src'), 'node_modules'],
-    extensions: ['.js', '.jsx', '.scss'],
-    alias: {
-      'react-virtualized/List': 'react-virtualized/dist/es/List'
     }
-  }
+  };
 };