@homefile/components-v2 2.7.23 → 2.7.25

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

@@ -1,2 +1,2 @@
 import { MyProfileContentI } from '../../interfaces';
-export declare const MyProfileContent: ({ user, payment, plans, onSubmit, handleClose, isLoading }: MyProfileContentI) => import("react/jsx-runtime").JSX.Element;
+export declare const MyProfileContent: ({ user, payment, plans, onSubmit, handleClose, isLoading, }: MyProfileContentI) => import("react/jsx-runtime").JSX.Element;

package/dist/components/myProfile/MyProfileContent.js

@@ -1,12 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { t } from 'i18next';
-import { DrawerBody, DrawerContent, DrawerFooter, DrawerHeader, } from '@chakra-ui/react';
+import { DrawerBody, DrawerContent, DrawerFooter, DrawerHeader, Center, } from '@chakra-ui/react';
 import { Profile } from '../../assets/images';
 import { PanelHeader, TabsHeader, ProfileDetailsTab, ProfileAccountTab, ProfilePaymentTab, FooterDrawer, FooterButtons, } from '..';
 import { useMyProfileContent } from '../../hooks';
-import BeatLoader from "react-spinners/BeatLoader";
-import { Center } from "@chakra-ui/react";
-export const MyProfileContent = ({ user, payment, plans, onSubmit, handleClose, isLoading }) => {
+import BeatLoader from 'react-spinners/BeatLoader';
+export const MyProfileContent = ({ user, payment, plans, onSubmit, handleClose, isLoading, }) => {
     const { handlePlanChange, handleSubmit } = useMyProfileContent({
         user,
         plans,
@@ -19,17 +18,17 @@ export const MyProfileContent = ({ user, payment, plans, onSubmit, handleClose,
         },
         {
             label: t('myProfile.tabs.tab3'),
-            component: _jsx(ProfilePaymentTab, Object.assign({}, payment, { isStandAlone: false, handleAddCard: () => { } })),
+            component: _jsx(ProfilePaymentTab, Object.assign({}, payment)),
         },
         {
             label: t('myProfile.tabs.tab2'),
             component: _jsx(ProfileAccountTab, Object.assign({}, plans, { onChange: handlePlanChange })),
-        }
+        },
     ];
-    return (_jsxs(DrawerContent, { bg: "lightBlue.1", p: "0", children: [_jsx(DrawerHeader, { p: "0", children: _jsx(PanelHeader, { handleCloseButton: handleClose, icon: Profile, title: t('myProfile.title') }) }), _jsx(DrawerBody, { p: "0", mb: "104px", children: isLoading ? (_jsx(Center, { h: "4rem", bg: "neutral.white", children: _jsx(BeatLoader, { color: "gray", size: 8 }) })) : (_jsx(TabsHeader, { tabList: tabs })) }), _jsx(DrawerFooter, { p: "0", zIndex: "dropdown", children: _jsx(FooterDrawer, { children: _jsx(FooterButtons, { button1: {
+    return (_jsxs(DrawerContent, { bg: "lightBlue.1", p: "0", children: [_jsx(DrawerHeader, { p: "0", children: _jsx(PanelHeader, { handleCloseButton: handleClose, icon: Profile, title: t('myProfile.title') }) }), _jsx(DrawerBody, { p: "0", mb: "104px", children: isLoading ? (_jsx(Center, { h: "4rem", bg: "neutral.white", children: _jsx(BeatLoader, { color: "gray", size: 8 }) })) : (_jsx(TabsHeader, { tabList: tabs })) }), _jsx(DrawerFooter, { p: "0", zIndex: "dropdown", children: _jsx(FooterDrawer, { isOpen: true, children: _jsx(FooterButtons, { button1: {
                             buttonStyle: 'primaryFooter',
                             isDisabled: false,
                             label: 'save',
                             onClick: handleSubmit,
-                        } }), isOpen: true }) })] }));
+                        } }) }) })] }));
 };

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

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

package/dist/components/myProfile/ProfilePaymentTab.js

@@ -1,24 +1,6 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState, useEffect } from 'react';
-import { AddCreditCard, MyProfileReceipts, CreditCardContainer, } from '..';
-import { usePaymentMethod } from '../../hooks';
-import { Button, Flex } from '@chakra-ui/react';
-export const ProfilePaymentTab = ({ paymentMethod, receipts, handleDelete, isStandAlone, handleAddCard, handleNewCard, buttonLabel, }) => {
-    const [hasSavedCreditCard, updateSavedCard] = useState(false);
-    const { handleSubmit } = usePaymentMethod(handleAddCard);
-    useEffect(() => {
-        if (paymentMethod.number) {
-            updateSavedCard(true);
-        }
-        else {
-            updateSavedCard(false);
-        }
-    }, [paymentMethod]);
+import { MyProfileReceipts, CreditCardContainer } from '..';
+export const ProfilePaymentTab = ({ paymentMethod, receipts, handleDelete, handleNewCard, }) => {
     const hasReceipts = receipts.length > 0;
-    const { brand, number, isPaymentMethodValid } = paymentMethod || {
-        brand: '',
-        number: '',
-        isPaymentMethodValid: false,
-    };
-    return hasSavedCreditCard ? (_jsxs(_Fragment, { children: [_jsx(CreditCardContainer, { brand: brand, cardNumber: number, hasError: !isPaymentMethodValid, onAddCard: handleNewCard, onDeleteCard: handleDelete, onSubmit: () => null, cardHolder: '', cvv: '', expirationMonth: '', expirationYear: '' }), hasReceipts && _jsx(MyProfileReceipts, { receipts })] })) : (_jsxs(Flex, { flexDir: 'column', w: "100%", alignItems: 'center', children: [_jsx(AddCreditCard, {}), isStandAlone && (_jsx(Flex, { justifyContent: 'center', alignItems: "center", mt: '1rem', children: _jsx(Button, { variant: 'primaryFooter', onClick: handleSubmit, w: 'fit-content', children: buttonLabel }) }))] }));
+    return (_jsxs(_Fragment, { children: [paymentMethod && (_jsx(CreditCardContainer, { brand: paymentMethod.brand, cardNumber: paymentMethod.number, hasError: !paymentMethod.isPaymentMethodValid, onAddCard: handleNewCard, onDeleteCard: handleDelete, onSubmit: () => null, cardHolder: '', cvv: '', expirationMonth: '', expirationYear: '' })), hasReceipts && _jsx(MyProfileReceipts, { receipts })] }));
 };

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

@@ -8,11 +8,8 @@ export interface MyProfileReceiptsI {
     id: string;
 }
 export interface ProfilePaymentTabI {
-    paymentMethod: PaymentMethodI;
+    paymentMethod?: PaymentMethodI;
     receipts: MyProfileReceiptsI[];
     handleDelete: () => void;
-    isStandAlone: boolean;
-    handleAddCard: (form: any) => void;
     handleNewCard: () => void;
-    buttonLabel: string;
 }

package/package.json

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

package/src/components/myProfile/MyProfileContent.tsx

@@ -4,6 +4,7 @@ import {
   DrawerContent,
   DrawerFooter,
   DrawerHeader,
+  Center,
 } from '@chakra-ui/react'
 import { Profile } from '@/assets/images'
 import {
@@ -17,8 +18,7 @@ import {
 } from '@/components'
 import { MyProfileContentI } from '@/interfaces'
 import { useMyProfileContent } from '@/hooks'
-import BeatLoader from "react-spinners/BeatLoader";
-import { Center } from "@chakra-ui/react";
+import BeatLoader from 'react-spinners/BeatLoader'
 
 export const MyProfileContent = ({
   user,
@@ -26,9 +26,9 @@ export const MyProfileContent = ({
   plans,
   onSubmit,
   handleClose,
-  isLoading
+  isLoading,
 }: MyProfileContentI) => {
-  const { handlePlanChange,handleSubmit } = useMyProfileContent({
+  const { handlePlanChange, handleSubmit } = useMyProfileContent({
     user,
     plans,
     onSubmit,
@@ -41,12 +41,12 @@ export const MyProfileContent = ({
     },
     {
       label: t('myProfile.tabs.tab3'),
-      component: <ProfilePaymentTab {...payment} isStandAlone={false} handleAddCard={() => {}} />,
+      component: <ProfilePaymentTab {...payment} />,
     },
     {
       label: t('myProfile.tabs.tab2'),
       component: <ProfileAccountTab {...plans} onChange={handlePlanChange} />,
-    }
+    },
   ]
 
   return (
@@ -59,30 +59,25 @@ export const MyProfileContent = ({
         />
       </DrawerHeader>
       <DrawerBody p="0" mb="104px">
-        {
-          isLoading ? (
-            <Center h="4rem" bg="neutral.white">
-                <BeatLoader color="gray" size={8} />
-            </Center>
-          ) : (
-            <TabsHeader tabList={tabs} />
-          )
-        }
+        {isLoading ? (
+          <Center h="4rem" bg="neutral.white">
+            <BeatLoader color="gray" size={8} />
+          </Center>
+        ) : (
+          <TabsHeader tabList={tabs} />
+        )}
       </DrawerBody>
       <DrawerFooter p="0" zIndex="dropdown">
-        <FooterDrawer
-          children={
-            <FooterButtons
-              button1={{
-                buttonStyle: 'primaryFooter',
-                isDisabled: false,
-                label: 'save',
-                onClick: handleSubmit,
-              }}
-            />
-          }
-          isOpen
-        />
+        <FooterDrawer isOpen>
+          <FooterButtons
+            button1={{
+              buttonStyle: 'primaryFooter',
+              isDisabled: false,
+              label: 'save',
+              onClick: handleSubmit,
+            }}
+          />
+        </FooterDrawer>
       </DrawerFooter>
     </DrawerContent>
   )

package/src/components/myProfile/ProfilePaymentTab.tsx

@@ -1,71 +1,31 @@
-import { useState, useEffect } from 'react'
-import {
-  AddCreditCard,
-  MyProfileReceipts,
-  CreditCardContainer,
-} from '@/components'
+import { MyProfileReceipts, CreditCardContainer } from '@/components'
 import { ProfilePaymentTabI } from '@/interfaces'
-import { usePaymentMethod } from '@/hooks'
-import { Button, Flex } from '@chakra-ui/react'
 
 export const ProfilePaymentTab = ({
   paymentMethod,
   receipts,
   handleDelete,
-  isStandAlone,
-  handleAddCard,
   handleNewCard,
-  buttonLabel,
 }: ProfilePaymentTabI) => {
-  const [hasSavedCreditCard, updateSavedCard] = useState(false)
-
-  const { handleSubmit } = usePaymentMethod(handleAddCard)
-
-  useEffect(() => {
-    if (paymentMethod.number) {
-      updateSavedCard(true)
-    } else {
-      updateSavedCard(false)
-    }
-  }, [paymentMethod])
-
   const hasReceipts = receipts.length > 0
-  const { brand, number, isPaymentMethodValid } = paymentMethod || {
-    brand: '',
-    number: '',
-    isPaymentMethodValid: false,
-  }
 
-  return hasSavedCreditCard ? (
+  return (
     <>
-      <CreditCardContainer
-        brand={brand}
-        cardNumber={number}
-        hasError={!isPaymentMethodValid}
-        onAddCard={handleNewCard}
-        onDeleteCard={handleDelete}
-        onSubmit={() => null}
-        cardHolder={''}
-        cvv={''}
-        expirationMonth={''}
-        expirationYear={''}
-      />
+      {paymentMethod && (
+        <CreditCardContainer
+          brand={paymentMethod.brand}
+          cardNumber={paymentMethod.number}
+          hasError={!paymentMethod.isPaymentMethodValid}
+          onAddCard={handleNewCard}
+          onDeleteCard={handleDelete}
+          onSubmit={() => null}
+          cardHolder={''}
+          cvv={''}
+          expirationMonth={''}
+          expirationYear={''}
+        />
+      )}
       {hasReceipts && <MyProfileReceipts {...{ receipts }} />}
     </>
-  ) : (
-    <Flex flexDir={'column'} w="100%" alignItems={'center'}>
-      <AddCreditCard />
-      {isStandAlone && (
-        <Flex justifyContent={'center'} alignItems="center" mt={'1rem'}>
-          <Button
-            variant={'primaryFooter'}
-            onClick={handleSubmit}
-            w={'fit-content'}
-          >
-            {buttonLabel}
-          </Button>
-        </Flex>
-      )}
-    </Flex>
   )
 }

package/src/interfaces/myProfile/ProfilePaymentTab.interface.ts

@@ -10,11 +10,8 @@ export interface MyProfileReceiptsI {
 }
 
 export interface ProfilePaymentTabI {
-  paymentMethod: PaymentMethodI
+  paymentMethod?: PaymentMethodI
   receipts: MyProfileReceiptsI[]
   handleDelete: () => void
-  isStandAlone: boolean
-  handleAddCard: (form: any) => void
   handleNewCard: () => void
-  buttonLabel: string
 }