@homefile/components-v2 2.7.26 → 2.7.27

package/dist/components/myProfile/ProfilePaymentTab.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { MyProfileReceipts, CreditCardContainer } from '..';
 export const ProfilePaymentTab = ({ paymentMethod, receipts, handleDelete, handleNewCard, }) => {
+    var _a, _b;
     const hasReceipts = receipts.length > 0;
-    return (_jsxs(_Fragment, { children: [(paymentMethod === null || paymentMethod === void 0 ? void 0 : paymentMethod.isPaymentMethodValid) && (_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 })] }));
+    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 })] }));
 };

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

@@ -16,5 +16,6 @@ import { CreditCard, CreditCardError, LeftButtonAnimated, PaymentFormProvider, }
 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"]);
     const formAttributes = Object.assign({ cardNumber }, props);
-    return (_jsxs(_Fragment, { children: [hasError && _jsx(CreditCardError, {}), _jsxs(Box, { bg: hasError ? '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: _jsx(CreditCard, { brand, cardNumber, hasError, showEdition, onClick: onDeleteCard, children: showEdition && (_jsx(PaymentFormProvider, Object.assign({}, formAttributes, { onSubmit: onSubmit }))) }) })] })] }));
+    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 }))) })) })] })] }));
 };

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

@@ -1,14 +1,17 @@
 import { Meta } from '@storybook/react';
-import { PaymentMethodI, ProfilePaymentTabI } from '../../interfaces';
+import { ProfilePaymentTabI } from '../../interfaces';
 declare const _default: Meta<ProfilePaymentTabI>;
 export default _default;
 export declare const ProfilePaymentTabComponent: {
     (props: ProfilePaymentTabI): import("react/jsx-runtime").JSX.Element;
     args: {
-        paymentMethod: PaymentMethodI;
         receipts: never[];
-        isStandAlone: boolean;
-        buttonLabel: string;
-        handleAddCard: import("@storybook/addon-actions").HandlerFunction;
+        handleNewCard: import("@storybook/addon-actions").HandlerFunction;
+        handleDelete: import("@storybook/addon-actions").HandlerFunction;
+        paymentMethod: {
+            brand: string;
+            number: string;
+            isPaymentMethodValid: boolean;
+        };
     };
 };

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

@@ -10,9 +10,12 @@ export const ProfilePaymentTabComponent = (props) => {
     return (_jsx(Box, { w: ['full', 'md'], bg: "white", p: "base", children: _jsx(ProfilePaymentTab, Object.assign({}, props)) }));
 };
 ProfilePaymentTabComponent.args = {
-    paymentMethod: {},
     receipts: [],
-    isStandAlone: true,
-    buttonLabel: 'Save',
-    handleAddCard: action('handleAddCard'),
+    handleNewCard: action('handleAddCard'),
+    handleDelete: action('handleDeleteCard'),
+    paymentMethod: {
+        brand: 'visa',
+        number: '1234',
+        isPaymentMethodValid: true,
+    },
 };

package/package.json

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

package/src/components/myProfile/ProfilePaymentTab.tsx

@@ -11,20 +11,19 @@ export const ProfilePaymentTab = ({
 
   return (
     <>
-      {paymentMethod?.isPaymentMethodValid && (
-        <CreditCardContainer
-          brand={paymentMethod.brand}
-          cardNumber={paymentMethod.number}
-          hasError={!paymentMethod.isPaymentMethodValid}
-          onAddCard={handleNewCard}
-          onDeleteCard={handleDelete}
-          onSubmit={() => null}
-          cardHolder={''}
-          cvv={''}
-          expirationMonth={''}
-          expirationYear={''}
-        />
-      )}
+      <CreditCardContainer
+        brand={paymentMethod?.brand ?? ''}
+        cardNumber={paymentMethod?.number ?? ''}
+        hasError={!paymentMethod?.isPaymentMethodValid}
+        onAddCard={handleNewCard}
+        onDeleteCard={handleDelete}
+        onSubmit={() => null}
+        cardHolder={''}
+        cvv={''}
+        expirationMonth={''}
+        expirationYear={''}
+      />
+
       {hasReceipts && <MyProfileReceipts {...{ receipts }} />}
     </>
   )

package/src/components/myProfile/payment/CreditCardContainer.tsx

@@ -19,11 +19,12 @@ export const CreditCardContainer = ({
   ...props
 }: CreditCardContainerI) => {
   const formAttributes = { cardNumber, ...props }
+  const error = hasError && cardNumber
 
   return (
     <>
-      {hasError && <CreditCardError />}
-      <Box bg={hasError ? 'error.1' : 'lightGreen.1'} w="100%">
+      {error && <CreditCardError />}
+      <Box bg={error ? 'error.1' : 'lightGreen.1'} w="100%">
         <Flex justify="space-between" w="full" pt="base" align="center">
           <Text variant="home" textTransform="uppercase" pl="base">
             {t('myProfile.payment.activePayment')}
@@ -37,14 +38,16 @@ export const CreditCardContainer = ({
           />
         </Flex>
         <Box py="6" px="base">
-          <CreditCard
-            {...{ brand, cardNumber, hasError, showEdition }}
-            onClick={onDeleteCard}
-          >
-            {showEdition && (
-              <PaymentFormProvider {...formAttributes} onSubmit={onSubmit} />
-            )}
-          </CreditCard>
+          {cardNumber && (
+            <CreditCard
+              {...{ brand, cardNumber, hasError, showEdition }}
+              onClick={onDeleteCard}
+            >
+              {showEdition && (
+                <PaymentFormProvider {...formAttributes} onSubmit={onSubmit} />
+              )}
+            </CreditCard>
+          )}
         </Box>
       </Box>
     </>

package/src/stories/myProfile/ProfilePaymentTab.stories.tsx

@@ -1,7 +1,7 @@
 import { Meta } from '@storybook/react'
 import { Box } from '@chakra-ui/react'
 import { ProfilePaymentTab } from '@/components'
-import { PaymentMethodI, ProfilePaymentTabI } from '@/interfaces'
+import { ProfilePaymentTabI } from '@/interfaces'
 import { action } from '@storybook/addon-actions'
 
 export default {
@@ -18,9 +18,12 @@ export const ProfilePaymentTabComponent = (props: ProfilePaymentTabI) => {
 }
 
 ProfilePaymentTabComponent.args = {
-  paymentMethod: {} as PaymentMethodI,
   receipts: [],
-  isStandAlone: true,
-  buttonLabel: 'Save',
-  handleAddCard: action('handleAddCard'),
+  handleNewCard: action('handleAddCard'),
+  handleDelete: action('handleDeleteCard'),
+  paymentMethod: {
+    brand: 'visa',
+    number: '1234',
+    isPaymentMethodValid: true,
+  },
 }