From 87dc7e01f725c47ef15315a818b700c794a23f7b Mon Sep 17 00:00:00 2001 From: Mohit Kumar Yadav Date: Wed, 2 Sep 2020 11:07:28 +0530 Subject: [PATCH] Release v0.4.7 (#166) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ### Release Notes 💄 styles: Update Lockscreen UI ✨ feat: Add Clock on Lockscreen 🖨️ fix: Fix all print settings as per new Bill ✨ feat: Add option to change the Date format 🐛 fix: Disable Old Purchase Date column --- package.json | 2 +- src/components/Invoice/index.js | 1 + src/components/LockScreen/index.js | 44 ++++++++++++---- src/components/LockScreen/index.scss | 63 +++++++++++++++++++--- src/components/Settings/index.js | 11 ++++ src/index.scss | 36 +++++++++++++ src/utils/constants.js | 22 ++++---- src/utils/helper.js | 78 +++++++++++++++++----------- 8 files changed, 199 insertions(+), 58 deletions(-) diff --git a/package.json b/package.json index cd8c879..46f778b 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "invoicify", - "version": "0.4.6", + "version": "0.4.7", "author": "2AM Devs", "description": "Digitalizes your billing process", "private": true, diff --git a/src/components/Invoice/index.js b/src/components/Invoice/index.js index d628c8f..223d208 100644 --- a/src/components/Invoice/index.js +++ b/src/components/Invoice/index.js @@ -415,6 +415,7 @@ const Invoice = ({ showPdfPreview }) => { { updateInvoiceFooter({ oldPurchase: value }) diff --git a/src/components/LockScreen/index.js b/src/components/LockScreen/index.js index 718f0f7..df5bd48 100644 --- a/src/components/LockScreen/index.js +++ b/src/components/LockScreen/index.js @@ -1,18 +1,26 @@ -import './index.scss' -import React, { useState } from 'react' +import React, { useState, useEffect } from 'react' -import { Stack } from 'office-ui-fabric-react/lib/Stack' +import { FontIcon } from 'office-ui-fabric-react/lib/Icon' import { TextField } from 'office-ui-fabric-react/lib/TextField' import { useAuthContext } from '../../contexts' import { getFromStorage } from '../../utils/helper' +import './index.scss' + const LockScreen = () => { const [authState, updateAuthState] = useAuthContext() const [time, setTime] = useState(new Date()) const [userInput, setUserInput] = useState('') const [errorMessage, setError] = useState('') + useEffect(() => { + const interval = setInterval(() => { + setTime(new Date()) + }, 1000) + return () => clearInterval(interval) + }, []) + const unlock = (event) => { if (event.key === 'Enter') { if (userInput === getFromStorage('password')) updateAuthState({ isAuthenticated: !authState.isAuthenticated }) @@ -24,11 +32,17 @@ const LockScreen = () => { return (
- -

{time.toDateString()}

- {/*

{time.toLocaleTimeString()}

*/} +
+ +
+
+ {/*

{time.toDateString()}

+

{time.toLocaleTimeString()}

*/}

Hey! @@ -44,7 +58,6 @@ const LockScreen = () => {
{ @@ -54,8 +67,19 @@ const LockScreen = () => { onKeyPress={unlock} errorMessage={errorMessage} /> - - +

+
+ + +

{time.toDateString()}

+ + +

{time.toLocaleTimeString()}

+ +
) } diff --git a/src/components/LockScreen/index.scss b/src/components/LockScreen/index.scss index df2c0db..620cf41 100644 --- a/src/components/LockScreen/index.scss +++ b/src/components/LockScreen/index.scss @@ -1,16 +1,67 @@ .lock-screen { + position: relative; display: flex; - flex-direction: row; - justify-content: center; - height: calc(100% - 40rem); - padding: 20rem; + flex-direction: column; + align-items: center; + height: 100%; color: white; + + background-color: #3056ff; + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25'%3E%3Cdefs%3E%3ClinearGradient id='a' gradientUnits='userSpaceOnUse' x1='0' x2='0' y1='0' y2='100%25' gradientTransform='rotate(240)'%3E%3Cstop offset='0' stop-color='%233056ff'/%3E%3Cstop offset='1' stop-color='%23e972ff'/%3E%3C/linearGradient%3E%3Cpattern patternUnits='userSpaceOnUse' id='b' width='540' height='450' x='0' y='0' viewBox='0 0 1080 900'%3E%3Cg fill-opacity='0.1'%3E%3Cpolygon fill='%23444' points='90 150 0 300 180 300'/%3E%3Cpolygon points='90 150 180 0 0 0'/%3E%3Cpolygon fill='%23AAA' points='270 150 360 0 180 0'/%3E%3Cpolygon fill='%23DDD' points='450 150 360 300 540 300'/%3E%3Cpolygon fill='%23999' points='450 150 540 0 360 0'/%3E%3Cpolygon points='630 150 540 300 720 300'/%3E%3Cpolygon fill='%23DDD' points='630 150 720 0 540 0'/%3E%3Cpolygon fill='%23444' points='810 150 720 300 900 300'/%3E%3Cpolygon fill='%23FFF' points='810 150 900 0 720 0'/%3E%3Cpolygon fill='%23DDD' points='990 150 900 300 1080 300'/%3E%3Cpolygon fill='%23444' points='990 150 1080 0 900 0'/%3E%3Cpolygon fill='%23DDD' points='90 450 0 600 180 600'/%3E%3Cpolygon points='90 450 180 300 0 300'/%3E%3Cpolygon fill='%23666' points='270 450 180 600 360 600'/%3E%3Cpolygon fill='%23AAA' points='270 450 360 300 180 300'/%3E%3Cpolygon fill='%23DDD' points='450 450 360 600 540 600'/%3E%3Cpolygon fill='%23999' points='450 450 540 300 360 300'/%3E%3Cpolygon fill='%23999' points='630 450 540 600 720 600'/%3E%3Cpolygon fill='%23FFF' points='630 450 720 300 540 300'/%3E%3Cpolygon points='810 450 720 600 900 600'/%3E%3Cpolygon fill='%23DDD' points='810 450 900 300 720 300'/%3E%3Cpolygon fill='%23AAA' points='990 450 900 600 1080 600'/%3E%3Cpolygon fill='%23444' points='990 450 1080 300 900 300'/%3E%3Cpolygon fill='%23222' points='90 750 0 900 180 900'/%3E%3Cpolygon points='270 750 180 900 360 900'/%3E%3Cpolygon fill='%23DDD' points='270 750 360 600 180 600'/%3E%3Cpolygon points='450 750 540 600 360 600'/%3E%3Cpolygon points='630 750 540 900 720 900'/%3E%3Cpolygon fill='%23444' points='630 750 720 600 540 600'/%3E%3Cpolygon fill='%23AAA' points='810 750 720 900 900 900'/%3E%3Cpolygon fill='%23666' points='810 750 900 600 720 600'/%3E%3Cpolygon fill='%23999' points='990 750 900 900 1080 900'/%3E%3Cpolygon fill='%23999' points='180 0 90 150 270 150'/%3E%3Cpolygon fill='%23444' points='360 0 270 150 450 150'/%3E%3Cpolygon fill='%23FFF' points='540 0 450 150 630 150'/%3E%3Cpolygon points='900 0 810 150 990 150'/%3E%3Cpolygon fill='%23222' points='0 300 -90 450 90 450'/%3E%3Cpolygon fill='%23FFF' points='0 300 90 150 -90 150'/%3E%3Cpolygon fill='%23FFF' points='180 300 90 450 270 450'/%3E%3Cpolygon fill='%23666' points='180 300 270 150 90 150'/%3E%3Cpolygon fill='%23222' points='360 300 270 450 450 450'/%3E%3Cpolygon fill='%23FFF' points='360 300 450 150 270 150'/%3E%3Cpolygon fill='%23444' points='540 300 450 450 630 450'/%3E%3Cpolygon fill='%23222' points='540 300 630 150 450 150'/%3E%3Cpolygon fill='%23AAA' points='720 300 630 450 810 450'/%3E%3Cpolygon fill='%23666' points='720 300 810 150 630 150'/%3E%3Cpolygon fill='%23FFF' points='900 300 810 450 990 450'/%3E%3Cpolygon fill='%23999' points='900 300 990 150 810 150'/%3E%3Cpolygon points='0 600 -90 750 90 750'/%3E%3Cpolygon fill='%23666' points='0 600 90 450 -90 450'/%3E%3Cpolygon fill='%23AAA' points='180 600 90 750 270 750'/%3E%3Cpolygon fill='%23444' points='180 600 270 450 90 450'/%3E%3Cpolygon fill='%23444' points='360 600 270 750 450 750'/%3E%3Cpolygon fill='%23999' points='360 600 450 450 270 450'/%3E%3Cpolygon fill='%23666' points='540 600 630 450 450 450'/%3E%3Cpolygon fill='%23222' points='720 600 630 750 810 750'/%3E%3Cpolygon fill='%23FFF' points='900 600 810 750 990 750'/%3E%3Cpolygon fill='%23222' points='900 600 990 450 810 450'/%3E%3Cpolygon fill='%23DDD' points='0 900 90 750 -90 750'/%3E%3Cpolygon fill='%23444' points='180 900 270 750 90 750'/%3E%3Cpolygon fill='%23FFF' points='360 900 450 750 270 750'/%3E%3Cpolygon fill='%23AAA' points='540 900 630 750 450 750'/%3E%3Cpolygon fill='%23FFF' points='720 900 810 750 630 750'/%3E%3Cpolygon fill='%23222' points='900 900 990 750 810 750'/%3E%3Cpolygon fill='%23222' points='1080 300 990 450 1170 450'/%3E%3Cpolygon fill='%23FFF' points='1080 300 1170 150 990 150'/%3E%3Cpolygon points='1080 600 990 750 1170 750'/%3E%3Cpolygon fill='%23666' points='1080 600 1170 450 990 450'/%3E%3Cpolygon fill='%23DDD' points='1080 900 1170 750 990 750'/%3E%3C/g%3E%3C/pattern%3E%3C/defs%3E%3Crect x='0' y='0' fill='url(%23a)' width='100%25' height='100%25'/%3E%3Crect x='0' y='0' fill='url(%23b)' width='100%25' height='100%25'/%3E%3C/svg%3E"); + background-attachment: fixed; + background-size: cover; + + &__clock { + position: absolute; + bottom: 3rem; + left: 3rem; + padding: 4rem; + -webkit-backdrop-filter: blur(8px); + backdrop-filter: blur(8px); + background-color: var(--color-black-op-20); + border-radius: 1rem; + + &__icn { + font-size: 3rem; + margin-right: 2rem; + margin-top: 0.5rem; + align-self: center; + } + } + + &__hero-icn { + -webkit-backdrop-filter: blur(8px); + backdrop-filter: blur(8px); + background-color: var(--color-black-op-20); + margin: 6rem 0; + padding: 2.5rem; + border-radius: 50%; + } + + &__items { + display: flex; + flex-direction: column; + align-items: center; + padding: 5rem; + -webkit-backdrop-filter: blur(8px); + backdrop-filter: blur(8px); + background-color: var(--color-black-op-20); + border-radius: 1rem; + } +} + +.pretty-huge { + font-size: 10rem; } .huge { - font-size: 5rem; + font-size: 6rem; +} + +.not-so-huge { + font-size: 3rem; } .okayish { - font-size: 2.5rem; + font-size: 4.5rem; } diff --git a/src/components/Settings/index.js b/src/components/Settings/index.js index 9e6ed51..4f8b3a9 100644 --- a/src/components/Settings/index.js +++ b/src/components/Settings/index.js @@ -29,6 +29,7 @@ const Settings = ({ refreshCompanyName }) => { const [invoiceNumber, setInvoiceNumber] = useState(getFromStorage('invoiceNumber')) const [companyName, setCompanyName] = useState(getFromStorage('companyName')) const [hindiDate, setHindiDate] = useState(getFromStorage('hindiDate')) + const [showFullMonth, setShowFullMonth] = useState(getFromStorage('showFullMonth')) const [font, setFont] = useState(getFromStorage('customFont')) const [gstinPrefix, setGstinPrefix] = useState(getFromStorage('nativeGstinPrefix')) const [currency, setCurrency] = useState(getFromStorage('currency')) @@ -47,6 +48,11 @@ const Settings = ({ refreshCompanyName }) => { setHindiDate(checked) } + const onMonthShowChange = (_, checked) => { + localStorage.showFullMonth = checked + setShowFullMonth(checked) + } + const onCurrencyChange = (_, val) => { localStorage.currency = val setCurrency(val) @@ -159,6 +165,11 @@ const Settings = ({ refreshCompanyName }) => { offText="English" onChange={onDateLangChange} /> + { localStorage.invoiceNumber = localStorage.invoiceNumber ?? 1 localStorage.products = localStorage.products ?? '[]' localStorage.password = localStorage.password ?? '' + localStorage.showFullMonth = localStorage.showFullMonth ?? true localStorage.productType = localStorage.productType ?? 'G, S' localStorage.customFont = localStorage.customFont ?? CUSTOM_FONT localStorage.currency = localStorage.currency ?? '₹' @@ -113,7 +114,10 @@ const getInvoiceDate = (date) => { year: 'numeric', month: 'long', day: 'numeric', } const hindiDate = getFromStorage('hindiDate') - return date.toLocaleDateString(`${hindiDate ? 'hi' : 'en'}-IN`, options) + const showFullMonth = getFromStorage('showFullMonth') + return showFullMonth + ? date.toLocaleDateString(`${hindiDate ? 'hi' : 'en'}-IN`, options) + : `${date.getDate()}-${date.getMonth() + 1}-${date.getFullYear()}` } const setProduct = (product) => { @@ -259,7 +263,7 @@ const getPdf = async (invoiceDetails, mode = PRINT) => { // Print Footer const footerCommonParts = (y, key, x) => { - const text = `${currency(footer[key], true)}/-` + const text = `${currency(footer[key])}/-` return [ text, { @@ -270,21 +274,22 @@ const getPdf = async (invoiceDetails, mode = PRINT) => { ] } - page.drawText(...footerCommonParts(210, 'grossTotal')) - page.drawText(...footerCommonParts(190, 'cgst')) - page.drawText(...footerCommonParts(170, 'sgst')) - page.drawText(...footerCommonParts(148, 'igst')) - page.drawText(...footerCommonParts(128, 'totalAmount')) - page.drawText(...footerCommonParts(108, 'oldPurchase')) - page.drawText(...footerCommonParts(88, 'grandTotal')) + page.drawText(...footerCommonParts(230, 'grossTotal')) + page.drawText(...footerCommonParts(210, 'cgst')) + page.drawText(...footerCommonParts(190, 'sgst')) + page.drawText(...footerCommonParts(170, 'igst')) + page.drawText(...footerCommonParts(148, 'totalAmount')) + page.drawText(...footerCommonParts(128, 'oldPurchase')) + page.drawText(...footerCommonParts(108, 'grandTotal')) const calcSettings = getInvoiceSettings(ISET.CALC) const towWordsText = getBoolFromString(calcSettings.roundOffToWords) - ? Math.round(footer.grandTotal) : footer.grandTotal - page.drawText(toWords(towWordsText), { - x: 85, - y: 87, + ? Math.round(Math.abs(footer.grandTotal)) : Math.abs(footer.grandTotal) + + page.drawText(`${footer.grandTotal < 0 ? 'Minus ' : ''}${toWords(towWordsText)}`, { + x: 92, + y: 88, ...commonFont, }) @@ -302,50 +307,63 @@ const getPdf = async (invoiceDetails, mode = PRINT) => { if (oldItemList.length) { page.drawText(oldItems.names, { - x: 60, - y: 137, + x: 67, + y: 150, ...commonFont, }) page.drawText(oldItems.purity, { - x: 65, - y: 122, + x: 73, + y: 130, ...commonFont, }) page.drawText(oldItems.price, { - x: 200, - y: 122, + x: 216, + y: 130, ...commonFont, }) page.drawText(oldItems.gWeight, { - x: 105, - y: 107, + x: 110, + y: 109, ...commonFont, }) page.drawText(oldItems.weight, { - x: 233, - y: 107, + x: 248, + y: 109, ...commonFont, }) page.drawText(oldItems.totalPrice, { - x: 326, - y: 107, + x: 348, + y: 109, ...commonFont, }) } // Print Distribution - page.drawText(...footerCommonParts(190, PAY_METHOD.CASH, 245)) - page.drawText(...footerCommonParts(190, PAY_METHOD.CHEQUE, 356)) - page.drawText(...footerCommonParts(170, PAY_METHOD.UPI, 330)) - page.drawText(...footerCommonParts(170, PAY_METHOD.CARD, 245)) + page.drawText(...footerCommonParts(219, PAY_METHOD.CASH, 255)) + page.drawText(...footerCommonParts(219, PAY_METHOD.CHEQUE, 356)) + page.drawText(...footerCommonParts(190, PAY_METHOD.UPI, 330)) + page.drawText(...footerCommonParts(190, PAY_METHOD.CARD, 255)) + // Currently things are coded for Cheque number Object.keys(getInvoiceSettings(ISET.FOOTER)).forEach((item) => { if (footer[item]) { - page.drawText(footer[item], { + page.drawText(`Cheque No.: ${footer[item]}`, { ...getInvoiceSettings(ISET.FOOTER)[item], ...commonFont, }) + page.drawLine({ + start: { + ...getInvoiceSettings(ISET.FOOTER)[item], + y: getInvoiceSettings(ISET.FOOTER)[item].y - 2.3, + }, + end: { + y: getInvoiceSettings(ISET.FOOTER)[item].y - 2.3, + x: getInvoiceSettings(ISET.FOOTER)[item].x + 55, + }, + thickness: 2, + opacity: 0.75, + }) } })