@homefile/components-v2 2.39.7 → 2.39.9

package/dist/assets/locales/en/index.json

@@ -620,16 +620,18 @@
       "unsubscribe": "Unsubscribe from all Homefile email"
     },
     "payment": {
-      "activePayment": "Active Payment Method",
+      "activePayment": "Payment Method",
       "addCard": "Please add a card for future purchases.",
       "addCrediCard": "Payment Method",
       "addNew": "Add New Payment Type",
       "billingTitle": "Billing address",
       "creditCardErrorMessage": "There is a problem with your payment. Please check all fields are filled out properly.",
       "expiration": "Expiration",
+      "makePayment": "Make Payment",
       "methodTitle": "Add payment method",
       "newCard": "New Card",
       "notBeCharged": "You will not be charged anything today.",
+      "onFile": "Below is the payment method we have on file.",
       "receiptName": "Homefile Reciept",
       "receiptsTitle": "Receipts",
       "toDelete": "To delete a card, you must first add a new card."
@@ -1000,7 +1002,7 @@
     "storage": "of storage",
     "subscribe": "Subscribe",
     "table": {
-      "subscription": "Annual Homefile Subscription",
+      "subscription": "Annual Homefile Cloud Subscription",
       "subtotal": "Subtotal",
       "tax": "Sales Tax",
       "total": "Total Charged Today"

package/dist/components/appBar/PeopleConnected.js

@@ -1,12 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { t } from 'i18next';
 import { Flex, Img, Tooltip } from '@chakra-ui/react';
-import { SharePeople } from '../../assets/images';
+import { ShareHome } from '../../assets/images';
 import { NumberBadge } from '../../components';
 import { useWindowDimensions } from '../../hooks';
 import { MOBILE_WIDTH } from '../../utils';
 export const PeopleConnected = ({ onClick, total }) => {
     const { windowDimensions: { width }, } = useWindowDimensions();
     const isMobile = width < MOBILE_WIDTH;
-    return (_jsx(Tooltip, { label: t('tooltips.shareHome'), children: _jsxs(Flex, { gap: "1", as: "button", onClick: onClick, id: "shareWithOthers", "data-testid": "people-connected", children: [_jsx(Img, { src: SharePeople, "aria-label": t('tooltips.shareHome'), h: "26px", w: "auto" }), !isMobile && _jsx(NumberBadge, { total: total })] }) }));
+    return (_jsx(Tooltip, { label: t('tooltips.shareHome'), children: _jsxs(Flex, { gap: "1", as: "button", onClick: onClick, id: "shareWithOthers", "data-testid": "people-connected", children: [_jsx(Img, { src: ShareHome, "aria-label": t('tooltips.shareHome'), h: "26px", w: "auto" }), !isMobile && _jsx(NumberBadge, { total: total })] }) }));
 };

package/dist/components/myProfile/ProfilePaymentTab.d.ts

@@ -1,2 +1,2 @@
 import { ProfilePaymentTabI } from '../../interfaces';
-export declare const ProfilePaymentTab: ({ paymentMethod, receipts, handleDelete, handleNewCard, }: ProfilePaymentTabI) => import("react/jsx-runtime").JSX.Element;
+export declare const ProfilePaymentTab: ({ paymentMethod, receipts, handleDelete, handleNewCard, handleSubmitPayment }: ProfilePaymentTabI) => import("react/jsx-runtime").JSX.Element;

package/dist/components/myProfile/ProfilePaymentTab.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { MyProfileReceipts, CreditCardContainer } from '../../components';
-export const ProfilePaymentTab = ({ paymentMethod, receipts, handleDelete, handleNewCard, }) => {
+export const ProfilePaymentTab = ({ paymentMethod, receipts, handleDelete, handleNewCard, handleSubmitPayment }) => {
     var _a, _b;
     const hasReceipts = receipts.length > 0;
-    return (_jsxs(_Fragment, { children: [_jsx(CreditCardContainer, { brand: (_a = paymentMethod === null || paymentMethod === void 0 ? void 0 : paymentMethod.brand) !== null && _a !== void 0 ? _a : '', cardNumber: (_b = paymentMethod === null || paymentMethod === void 0 ? void 0 : paymentMethod.number) !== null && _b !== void 0 ? _b : '', hasError: !(paymentMethod === null || paymentMethod === void 0 ? void 0 : paymentMethod.isPaymentMethodValid), onAddCard: handleNewCard, onDeleteCard: handleDelete, onSubmit: () => null, cardHolder: '', cvv: '', expirationMonth: '', expirationYear: '' }), hasReceipts && _jsx(MyProfileReceipts, { receipts })] }));
+    return (_jsxs(_Fragment, { children: [_jsx(CreditCardContainer, { brand: (_a = paymentMethod === null || paymentMethod === void 0 ? void 0 : paymentMethod.brand) !== null && _a !== void 0 ? _a : '', cardNumber: (_b = paymentMethod === null || paymentMethod === void 0 ? void 0 : paymentMethod.number) !== null && _b !== void 0 ? _b : '', hasError: !(paymentMethod === null || paymentMethod === void 0 ? void 0 : paymentMethod.isPaymentMethodValid), onAddCard: handleNewCard, onDeleteCard: handleDelete, onSubmit: () => null, cardHolder: '', cvv: '', expirationMonth: '', expirationYear: '', handleSubmitPayment: handleSubmitPayment }), hasReceipts && _jsx(MyProfileReceipts, { receipts })] }));
 };

package/dist/components/myProfile/payment/CreditCardContainer.d.ts

@@ -1,2 +1,2 @@
 import { CreditCardContainerI } from '../../../interfaces';
-export declare const CreditCardContainer: ({ brand, hasError, onAddCard, onDeleteCard, onSubmit, cardNumber, showEdition, ...props }: CreditCardContainerI) => import("react/jsx-runtime").JSX.Element;
+export declare const CreditCardContainer: ({ brand, hasError, onAddCard, onDeleteCard, onSubmit, cardNumber, showEdition, handleSubmitPayment, ...props }: CreditCardContainerI) => import("react/jsx-runtime").JSX.Element;

package/dist/components/myProfile/payment/CreditCardContainer.js

@@ -11,11 +11,12 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { t } from 'i18next';
-import { Box, Flex, Text } from '@chakra-ui/react';
-import { CreditCard, CreditCardError, LeftButtonAnimated, PaymentFormProvider, } from '../../../components';
+import { Box, Flex, Text, Button, Circle } from '@chakra-ui/react';
+import { CreditCard, CreditCardError, LeftButtonAnimated, PaymentFormProvider, ChevronRight } from '../../../components';
+import { colors } from '../../../theme/colors';
 export const CreditCardContainer = (_a) => {
-    var { brand, hasError = false, onAddCard, onDeleteCard, onSubmit = () => null, cardNumber, showEdition = false } = _a, props = __rest(_a, ["brand", "hasError", "onAddCard", "onDeleteCard", "onSubmit", "cardNumber", "showEdition"]);
+    var { brand, hasError = false, onAddCard, onDeleteCard, onSubmit = () => null, cardNumber, showEdition = false, handleSubmitPayment } = _a, props = __rest(_a, ["brand", "hasError", "onAddCard", "onDeleteCard", "onSubmit", "cardNumber", "showEdition", "handleSubmitPayment"]);
     const formAttributes = Object.assign({ cardNumber }, props);
     const error = hasError && cardNumber;
-    return (_jsxs(_Fragment, { children: [error && _jsx(CreditCardError, {}), _jsxs(Box, { bg: error ? 'error.1' : 'lightGreen.1', w: "100%", children: [_jsxs(Flex, { justify: "space-between", w: "full", pt: "base", align: "center", children: [_jsx(Text, { variant: "home", textTransform: "uppercase", pl: "base", children: t('myProfile.payment.activePayment') }), _jsx(LeftButtonAnimated, { onClick: onAddCard, label: t('myProfile.payment.addCrediCard'), marginLeft: "auto", fontSize: "sm", width: "11" })] }), _jsx(Box, { py: "6", px: "base", children: cardNumber && (_jsx(CreditCard, { brand, cardNumber, hasError, showEdition, onClick: onDeleteCard, children: showEdition && (_jsx(PaymentFormProvider, Object.assign({}, formAttributes, { onSubmit: onSubmit }))) })) })] })] }));
+    return (_jsxs(_Fragment, { children: [error && _jsx(CreditCardError, {}), _jsxs(Box, { bg: error ? 'error.1' : 'lightBlue.2', w: "100%", children: [_jsxs(Flex, { justify: "space-between", w: "full", pt: "base", align: "center", children: [_jsxs(Flex, { flexDir: 'column', children: [_jsx(Text, { variant: "home", textTransform: "uppercase", pl: "base", fontSize: "1rem", children: t('myProfile.payment.activePayment') }), _jsx(Text, { variant: "home", pl: "base", pt: "base", children: t('myProfile.payment.onFile') })] }), _jsx(LeftButtonAnimated, { onClick: onAddCard, label: t('myProfile.payment.addCrediCard'), marginLeft: "auto", fontSize: "sm", width: "11" })] }), _jsx(Box, { py: "6", px: "base", children: cardNumber && (_jsx(CreditCard, { brand, cardNumber, hasError, showEdition, onClick: onDeleteCard, children: showEdition && (_jsx(PaymentFormProvider, Object.assign({}, formAttributes, { onSubmit: onSubmit }))) })) }), handleSubmitPayment && (_jsx(Flex, { justifyContent: 'flex-end', px: "base", pb: "6", children: _jsx(Button, { w: 'auto', minW: "300px", onClick: handleSubmitPayment, children: _jsxs(Flex, { w: "full", alignItems: "center", justifyContent: "space-between", px: "4", children: [_jsx(Text, { mr: "2rem", textTransform: 'none', color: "white", children: t('myProfile.payment.makePayment') }), _jsx(Circle, { size: "40px", bg: "blue.1", color: "neutral.white", transition: "all 0.2s ease-in-out", children: _jsx(ChevronRight, { size: 26, stroke: colors.neutral.white }) })] }) }) }))] })] }));
 };

package/dist/components/sharedHomePanel/SharedHomeHeader.js

@@ -3,9 +3,9 @@ import { useState } from 'react';
 import { t } from 'i18next';
 import { Box, DrawerHeader } from '@chakra-ui/react';
 import { HelpButton, PanelHeader, RolesHelpModal } from '../../components';
-import { SharePeople } from '../../assets/images';
+import { ShareHome } from '../../assets/images';
 export const SharedHomeHeader = ({ children, onClose }) => {
     const [showChildren, setShowChildren] = useState(false);
     const handleHelpClick = () => setShowChildren(!showChildren);
-    return (_jsxs(DrawerHeader, { p: "0", children: [_jsx(PanelHeader, { handleCloseButton: onClose, icon: SharePeople, title: t('shareHome.title'), children: _jsx(Box, { mr: "base", position: "relative", children: _jsx(HelpButton, { onClick: handleHelpClick, children: showChildren && (_jsx(RolesHelpModal, { top: "40px", right: "0", onClose: handleHelpClick })) }) }) }), children] }));
+    return (_jsxs(DrawerHeader, { p: "0", children: [_jsx(PanelHeader, { handleCloseButton: onClose, icon: ShareHome, title: t('shareHome.title'), children: _jsx(Box, { mr: "base", position: "relative", children: _jsx(HelpButton, { onClick: handleHelpClick, children: showChildren && (_jsx(RolesHelpModal, { top: "40px", right: "0", onClose: handleHelpClick })) }) }) }), children] }));
 };

package/dist/components/subscription/PaymentBanner.js

@@ -2,5 +2,5 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { t } from 'i18next';
 import { Flex, Text } from '@chakra-ui/react';
 export const PaymentBanner = () => {
-    return (_jsx(Flex, { bg: "violet.1", py: "1.5rem", px: "4", justify: "center", align: "center", children: _jsx(Text, { fontSize: "1.5rem", variant: "title", color: "neutral.white", children: `${t('subscription.paymentBanner')}` }) }));
+    return (_jsx(Flex, { bg: "violet.1", py: "1.5rem", px: "4", justify: "center", align: "center", width: '100%', children: _jsx(Text, { fontSize: "1.5rem", variant: "title", color: "neutral.white", children: `${t('subscription.paymentBanner')}` }) }));
 };

package/dist/hooks/propertyTiles/useRecordsInputs.js

@@ -5,12 +5,19 @@ export const useRecordsInputs = ({ data = {}, session = '' }) => {
     const proxy = recordsInputsProxy;
     const proxyToDB = recordsInputsToDBProxy;
     const handleChange = (e) => {
-        var _a;
+        var _a, _b, _c;
         const { name, value } = e.target;
         proxy.data[name] = value;
+        // dirty tracking
+        const initial = (_b = (_a = proxy.initialData) === null || _a === void 0 ? void 0 : _a[name]) !== null && _b !== void 0 ? _b : '';
+        const next = value !== null && value !== void 0 ? value : '';
+        const isFieldDirty = next !== (initial !== null && initial !== void 0 ? initial : '');
+        proxy.dirtyFields[name] = isFieldDirty;
+        // recompute global dirty (cheap)
+        proxy.isDirty = Object.values(proxy.dirtyFields).some(Boolean);
         const dbProp = propertyRecordsToDB[session][name];
         if (session === 'community') {
-            proxyToDB.data = Object.assign(Object.assign({}, proxyToDB.data), { neighborhood: Object.assign(Object.assign({}, ((_a = proxyToDB.data.neighborhood) !== null && _a !== void 0 ? _a : {})), { [dbProp]: value }) });
+            proxyToDB.data = Object.assign(Object.assign({}, proxyToDB.data), { neighborhood: Object.assign(Object.assign({}, ((_c = proxyToDB.data.neighborhood) !== null && _c !== void 0 ? _c : {})), { [dbProp]: value }) });
             return;
         }
         proxyToDB.data[dbProp] = dbDataParser(dbProp, value);
@@ -18,7 +25,11 @@ export const useRecordsInputs = ({ data = {}, session = '' }) => {
     useEffect(() => {
         proxy.session = session;
         proxy.data = data;
-    }, [session]);
+        // new for dirty fields
+        proxy.initialData = data;
+        proxy.dirtyFields = {};
+        proxy.isDirty = false;
+    }, [session, data]);
     return {
         handleChange,
     };

package/dist/interfaces/myProfile/ProfilePaymentTab.interface.d.ts

@@ -12,4 +12,5 @@ export interface ProfilePaymentTabI {
     receipts: MyProfileReceiptsI[];
     handleDelete: () => void;
     handleNewCard: () => void;
+    handleSubmitPayment?: () => void;
 }

package/dist/interfaces/myProfile/payment/CreditCardContainer.interface.d.ts

@@ -13,4 +13,5 @@ export interface CreditCardContainerI extends CreditCardFormI {
     onDeleteCard: () => void;
     onSubmit?: (data: PostCreditCardFormI) => void;
     showEdition?: boolean;
+    handleSubmitPayment?: () => void;
 }

package/dist/interfaces/propertyTiles/RecordsInputs.interface.d.ts

@@ -5,6 +5,9 @@ export interface RecordsInputsI extends EditCallbackI {
 export interface RecordsInputsProxyI {
     data: EditCallbackI['data'];
     session: EditCallbackI['session'];
+    initialData: EditCallbackI['data'];
+    dirtyFields: Record<string, boolean>;
+    isDirty: boolean;
 }
 type DBData = string | number | boolean | Record<string, string>;
 export interface recordsInputsToDBProxyI {

package/dist/proxies/propertyTiles/recordsInputs.proxy.js

@@ -2,6 +2,9 @@ import { proxy } from 'valtio';
 export const recordsInputsProxy = proxy({
     data: {},
     session: '',
+    initialData: {},
+    dirtyFields: {},
+    isDirty: false
 });
 export const recordsInputsToDBProxy = proxy({
     data: {},

package/dist/stories/myProfile/ProfilePaymentTab.stories.d.ts

@@ -8,6 +8,7 @@ export declare const ProfilePaymentTabComponent: {
         receipts: never[];
         handleNewCard: import("@storybook/addon-actions").HandlerFunction;
         handleDelete: import("@storybook/addon-actions").HandlerFunction;
+        handleSubmitPayment: import("@storybook/addon-actions").HandlerFunction;
         paymentMethod: {
             brand: string;
             number: string;

package/dist/stories/myProfile/ProfilePaymentTab.stories.js

@@ -13,6 +13,7 @@ ProfilePaymentTabComponent.args = {
     receipts: [],
     handleNewCard: action('handleAddCard'),
     handleDelete: action('handleDeleteCard'),
+    handleSubmitPayment: action('submitPayment'),
     paymentMethod: {
         brand: 'visa',
         number: '1234',

package/dist/stories/subscription/SubscriptionTable.stories.js

@@ -6,7 +6,6 @@ export default {
     component: SubscriptionTable,
     args: {
         nextCharge: '01/12/2024',
-        subscriptionLabel: 'Annual Homefile Subscription',
         subscriptionPrice: 36,
         subtotal: 36.0,
         taxPercentage: 8.5,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@homefile/components-v2",
-  "version": "2.39.7",
+  "version": "2.39.9",
   "author": "Homefile",
   "license": "UNLICENSED",
   "typings": "dist/index.d.ts",