Merge pull request #288 from mineralsfree/ME-393

fix(gui): fixed card details update functionality

frontend/src/js/components/settings/PlanExpanded.tsx

@@ -23,7 +23,7 @@ import { Plan } from '@northern.tech/store/constants';
 import { Organization } from '@northern.tech/store/organizationSlice/types';
 import { getCurrentUser } from '@northern.tech/store/selectors';
 import { useAppDispatch } from '@northern.tech/store/store';
-import { completeUpgrade } from '@northern.tech/store/thunks';
+import { completeUpgrade, startUpgrade } from '@northern.tech/store/thunks';
 
 import { PlanExpandedForm } from './PlanExpandedForm';
 import CardSection from './cardsection';
@@ -84,12 +84,7 @@ export const PlanExpanded = (props: PlanExpandedProps) => {
       {isValid && (
         <>
           <h4>Card Details</h4>
-          <CardSection
-            organization={organization}
-            onComplete={handleUpgrade}
-            setSnackbar={(message: string) => dispatch(setSnackbar(message))}
-            isSignUp={true}
-          />
+          <CardSection organization={organization} onCardConfirmed={handleUpgrade} onSubmit={() => dispatch(startUpgrade(organization.id)).unwrap()} isSignUp />
         </>
       )}
     </Drawer>

frontend/src/js/components/settings/cardsection.js

@@ -12,27 +12,35 @@
 //    See the License for the specific language governing permissions and
 //    limitations under the License.
 import React, { useState } from 'react';
-import { useDispatch } from 'react-redux';
 
 import { Button } from '@mui/material';
 
 import InfoText from '@northern.tech/common-ui/infotext';
 import Loader from '@northern.tech/common-ui/loader';
-import { cancelUpgrade, startUpgrade } from '@northern.tech/store/thunks';
+import storeActions from '@northern.tech/store/actions';
+import { useAppDispatch } from '@northern.tech/store/store';
+import { cancelUpgrade } from '@northern.tech/store/thunks';
 import { CardElement, useElements, useStripe } from '@stripe/react-stripe-js';
 
 import stripeImage from '../../../assets/img/powered_by_stripe.png';
 
-const CardSection = ({ isSignUp, organization, onComplete, setSnackbar }) => {
+const { setSnackbar } = storeActions;
+
+const CardSection = ({ isSignUp, onClose, organization, onSubmit, onCardConfirmed }) => {
   const stripe = useStripe();
   const elements = useElements();
   const [errors, setErrors] = useState(false);
   const [loading, setLoading] = useState(false);
   const [empty, setEmpty] = useState(true);
 
-  const dispatch = useDispatch();
-
-  const onCancel = () => dispatch(cancelUpgrade(organization.id));
+  const dispatch = useAppDispatch();
+  const setSnackbarMessage = message => dispatch(setSnackbar(message));
+  const onCancel = () => {
+    dispatch(cancelUpgrade(organization.id));
+    if (onClose) {
+      onClose();
+    }
+  };
 
   const confirmCard = async secret => {
     // Use elements.getElement to get a reference to the mounted Element.
@@ -47,24 +55,23 @@ const CardSection = ({ isSignUp, organization, onComplete, setSnackbar }) => {
       });
 
       if (result.error) {
-        setSnackbar(`Error while confirming card: ${result.error.message}`);
+        setSnackbarMessage(`Error while confirming card: ${result.error.message}`);
         onCancel();
       } else {
-        setSnackbar(`Card confirmed. Updating your account...`);
-        onComplete();
+        setSnackbarMessage(`Card confirmed. Updating your account...`);
+        onCardConfirmed();
       }
     } catch (error) {
       console.error(error);
-      setSnackbar(`Something went wrong while submitting the form. Please contact support.`);
+      setSnackbarMessage(`Something went wrong while submitting the form. Please contact support.`);
       onCancel();
     }
   };
 
   const handleSubmit = async event => {
     event.preventDefault();
     setLoading(true);
-    return dispatch(startUpgrade(organization.id))
-      .unwrap()
+    return onSubmit()
       .then(confirmCard)
       .finally(() => setLoading(false));
   };

frontend/src/js/components/settings/organization/organizationpaymentsettings.js

@@ -17,19 +17,18 @@ import { useDispatch, useSelector } from 'react-redux';
 // material ui
 import { Error as ErrorIcon } from '@mui/icons-material';
 
-import storeActions from '@northern.tech/store/actions';
+import { getOrganization } from '@northern.tech/store/selectors';
 import { confirmCardUpdate, getCurrentCard, startCardUpdate } from '@northern.tech/store/thunks';
 
 import CardSection from '../cardsection';
 import OrganizationSettingsItem from './organizationsettingsitem';
 
-const { setSnackbar } = storeActions;
-
 export const OrganizationPaymentSettings = () => {
   const [isUpdatingPaymentDetails, setIsUpdatingPaymentDetails] = useState(false);
   const card = useSelector(state => state.organization.card);
   const hasUnpaid = useSelector(state => state.organization.billing);
   const dispatch = useDispatch();
+  const organization = useSelector(getOrganization);
 
   useEffect(() => {
     dispatch(getCurrentCard());
@@ -66,10 +65,12 @@ export const OrganizationPaymentSettings = () => {
       secondary={
         isUpdatingPaymentDetails && (
           <CardSection
-            onCancel={() => setIsUpdatingPaymentDetails(false)}
-            onComplete={onCardConfirm}
-            onSubmit={() => dispatch(startCardUpdate())}
-            setSnackbar={text => dispatch(setSnackbar(text))}
+            isSignUp={false}
+            organization={organization}
+            onClose={() => setIsUpdatingPaymentDetails(false)}
+            onCardConfirmed={onCardConfirm}
+            onSubmit={() => dispatch(startCardUpdate()).unwrap()}
+            beforeCardSubmit={() => dispatch(startCardUpdate()).unwrap()}
           />
         )
       }