v0.4.14

.github/workflows/build.yml

@@ -17,7 +17,9 @@ jobs:
       - name: Install Node.js, NPM and Yarn
         uses: actions/setup-node@v1
         with:
-          node-version: 10
+          node-version: 14
+          cache: 'npm'
+      - run: npm install
 
       - name: Build/release Electron app
         uses: samuelmeuli/action-electron-builder@v1

.gitignore

@@ -22,9 +22,11 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+package-lock.json
 public/print.pdf
 electron-builder.yml
 .env
 .vscode/
 
 dev-app-update.yml
+package-lock.json

package.json

@@ -1,6 +1,6 @@
 {
   "name": "invoicify",
-  "version": "0.4.13",
+  "version": "0.4.14",
   "author": "2AM Devs",
   "description": "Digitalizes your billing process",
   "private": true,
@@ -65,6 +65,7 @@
     "build": "npm run react-build && npm run electron-build",
     "ship": "npm run react-build && npm run electron-deploy",
     "lint": "node_modules/eslint/bin/eslint.js src/**/*.js --fix",
+    "lint-win": "node_modules/.bin/eslint src/**/*.js --fix",
     "start": "concurrently \"cross-env BROWSER=none npm run react-start\" \"wait-on http://localhost:3000 && electron .\""
   },
   "eslintConfig": {
@@ -88,10 +89,11 @@
   "devDependencies": {
     "concurrently": "^5.2.0",
     "electron": "^9.0.5",
-    "electron-builder": "^22.7.0",
+    "electron-builder": "^22.10.5",
     "electron-reload": "^1.5.0",
     "eslint": "^6.6.0",
     "eslint-config-airbnb": "^18.2.0",
+    "eslint-plugin-import": "^2.23.4",
     "wait-on": "^5.2.1"
   },
   "peerDependencies": {

src/components/CustomizationComponents/LeftPanel/index.js

@@ -0,0 +1,23 @@
+import React from 'react'
+
+import './index.scss'
+
+const LeftPanel = ({ items, setSelectedItem }) => (
+  <div className="left-panel">
+    <ul>
+      {items.map((item, idx) => (
+        <button
+          className="left-panel__item"
+          key={item.name}
+          title={item.name}
+          type="button"
+          onClick={() => setSelectedItem(item, idx)}
+        >
+          <p>{item.name}</p>
+        </button>
+      ))}
+    </ul>
+  </div>
+)
+
+export default LeftPanel

src/components/CustomizationComponents/LeftPanel/index.scss

@@ -0,0 +1,49 @@
+.left-panel {
+  display: flex;
+  flex-direction: column;
+  background-color: var(--color-dark);
+  box-shadow: 0 0.3rem 0.6rem 0
+    var(--color-black-op-20);
+  width: 22%;
+  overflow: hidden scroll;
+  scrollbar-width: none;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+
+  &__item {
+    background: transparent;
+    border: none;
+    display: block;
+    width: 100%;
+    text-align: left;
+    font-size: 1.8rem;
+    font-weight: 600;
+    line-height: 1.36;
+    letter-spacing: 0.048rem;
+    color: var(--ice-white);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    border: none;
+    border-bottom: solid 0.1rem
+      var(--color-darker);
+    will-change: background-color;
+    transition: background-color 0.2s ease-out;
+    cursor: pointer;
+
+    &:focus {
+      background-color: var(--color-darker);
+      outline: none;
+    }
+
+    p {
+      padding: 3rem 3.2rem;
+      white-space: nowrap;
+      overflow: hidden;
+      max-width: 100%;
+      text-overflow: ellipsis;
+    }
+  }
+}

src/components/CustomizationComponents/MiddleSection/index.js

@@ -0,0 +1,88 @@
+import React from 'react'
+
+import { TextField, Toggle, Dropdown } from 'office-ui-fabric-react'
+
+import {
+  fieldTypes, MASKED,
+} from '../../../utils/constants'
+
+import './index.scss'
+import { round } from '../../../utils/utils'
+
+const MiddleSection = ({
+  setting, handleChange, idx,
+}) => {
+  if (!setting) {
+    return (
+      <div className="middle-section__not-selected">
+        Select a field from left panel to start customizing the invoice.
+      </div>
+    )
+  }
+
+  return (
+    <div className="middle-section">
+      <div className="middle-section__row">
+        <TextField
+          label="Field Name"
+          onChange={(_, val) => handleChange(idx, 'name', val)}
+          value={setting.name}
+          disabled={setting.disableNameChange}
+        />
+        <TextField
+          label="Row Number"
+          onChange={(_, val) => handleChange(idx, 'row', val)}
+          value={setting.row}
+        />
+      </div>
+      <div className="middle-section__row">
+        <Toggle
+          label="Required?"
+          checked={setting.required}
+          onChange={(_, val) => handleChange(idx, 'required', val)}
+        />
+        <Toggle
+          label="Disabled?"
+          checked={setting.disabled}
+          onChange={(_, val) => handleChange(idx, 'disabled', val)}
+        />
+      </div>
+      <div className="middle-section__row">
+        <TextField
+          label="X Co-ordinate"
+          onChange={(_, val) => handleChange(idx, 'x', val)}
+          value={round(setting.x, 2)}
+        />
+        <TextField
+          label="Y Co-ordinate"
+          onChange={(_, val) => handleChange(idx, 'y', val)}
+          value={round(setting.y, 2)}
+        />
+      </div>
+
+      <Dropdown
+        label="Type"
+        options={fieldTypes}
+        value={setting.type}
+        selectedKey={setting.type}
+        onChange={(_, val) => handleChange(idx, 'type', val.key)}
+      />
+      <TextField
+        label="Font Size"
+        onChange={(_, val) => handleChange(idx, 'size', val)}
+        value={setting.size}
+      />
+
+      {setting.type === MASKED
+        ? (
+          <TextField
+            label="Mask"
+            value={setting.mask}
+            onChange={(_, val) => handleChange(idx, 'mask', val)}
+          />
+        ) : ''}
+    </div>
+  )
+}
+
+export default MiddleSection

src/components/CustomizationComponents/MiddleSection/index.scss

@@ -0,0 +1,27 @@
+.middle-section {
+  padding: 5rem;
+  color: var(--ice-white);
+
+  &__not-selected {
+    padding: 5rem;
+    text-align: center;
+    font-size: 2rem;
+    letter-spacing: 0.1rem;
+    font-weight: 300;
+    opacity: 0.5;
+    margin-top: 20rem;
+    margin-left: 20rem;
+  }
+
+  &__row {
+    display: flex;
+    align-items: center;
+    margin-bottom: 2.4rem;
+
+    & > div {
+      &:not(:last-child) {
+        margin-right: 1rem;
+      }
+    }
+  }
+}

src/components/CustomizationComponents/RightPanel/index.js

@@ -0,0 +1,126 @@
+import React, { useState, useEffect } from 'react'
+
+import cn from 'classnames'
+import { Icon } from 'office-ui-fabric-react'
+import { Spinner, SpinnerSize } from 'office-ui-fabric-react/lib/Spinner'
+import { Document, Page } from 'react-pdf'
+
+import { getPdf } from '../../../services/pdfService'
+import { defaultPageSettings, PREVIEW } from '../../../utils/constants'
+import './index.scss'
+
+const scale = 0.75
+const offsets = {
+  x: 8,
+  y: defaultPageSettings.height - 66,
+}
+
+const RightPanel = ({ selectedItem, idx, handleChange }) => {
+  const [pos, setPos] = useState({ x: 0, y: 0, changeRoot: false })
+  const [pdfData, setPdfBytes] = useState('')
+
+  const previewPDF = () => {
+    getPdf({}, PREVIEW)
+      .then((pdfBytes) => {
+        if (pdfBytes?.error) {
+          return
+        }
+        setPdfBytes(pdfBytes)
+      })
+  }
+
+  useEffect(() => {
+    previewPDF()
+  }, [])
+
+  const heightDragHandle = selectedItem?.size ?? 30
+  const widthDragHandle = 60
+
+  useEffect(() => {
+    setPos({
+      x: selectedItem ? (selectedItem.x * scale) - offsets.x : 0,
+      y: selectedItem ? ((offsets.y - selectedItem.y) * scale) : 0,
+      changeRoot: false,
+    })
+  }, [selectedItem, idx])
+
+  useEffect(() => {
+    if (idx !== undefined && pos.changeRoot) {
+      handleChange(idx, 'x', offsets.x + (pos.x / scale))
+      handleChange(idx, 'y', (offsets.y - (pos.y / scale)))
+    }
+    // eslint-disable-next-line
+  }, [pos])
+
+  const dragOver = (e) => {
+    e.preventDefault()
+    e.dataTransfer.dropEffect = 'move'
+  }
+
+  const handleDragEnd = (e) => {
+    const rect = document.getElementById('drop-target').getBoundingClientRect()
+    const posX = e.clientX - rect.left
+    const posY = e.clientY - rect.top - (heightDragHandle / 2)
+    const x = posX < 0 ? 0 : posX
+    const y = posY < 0 ? 0 : posY
+    setPos({
+      x: Math.min(x, rect.width - widthDragHandle),
+      y: Math.min(y, rect.height - heightDragHandle),
+      changeRoot: true,
+    })
+  }
+
+  return (
+    <div
+      className={cn('right-panel', {
+        'right-panel--active': selectedItem,
+      })}
+    >
+      <h1 className="right-panel__header">
+        Set position of the Field on invoice
+      </h1>
+      <div
+        className="right-panel__preview"
+        id="drop-target"
+        onDragOver={dragOver}
+      >
+        {pdfData?.length > 0 && (
+          <Document
+            file={{ data: pdfData }}
+            loading={(
+              <Spinner
+                size={SpinnerSize.large}
+                styles={{ verticalAlign: 'center' }}
+              />
+            )}
+          >
+            <Page
+              pageNumber={1}
+              scale={scale}
+            />
+          </Document>
+        )}
+        <div
+          className="right-panel__preview__handle"
+          draggable
+          style={{
+            top: `${pos.y}px`,
+            left: `${pos.x}px`,
+            width: `${widthDragHandle}px`,
+            height: `${heightDragHandle}px`,
+          }}
+          id="drag-target"
+          role="presentation"
+          onDragEnd={handleDragEnd}
+        >
+          <Icon
+            className="right-panel__preview__handle--icn"
+            iconName="DragObject"
+          />
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default RightPanel