Generated by XState Viz: https://xstate.js.org/viz

machine.js

function paymentStatusWaitingForMoreInformation() { return true; }
function paymentStatusWaitingForReconciliation() {
  return false; 
}

return Machine({
        id: 'clientPaymentDrawer',
        initial: 'idle',
        context: {
          payment: {},
          temporaryClient:{},
        },
        states: {
          idle: {
            on: {
              OPEN: [{
                cond: "paymentStatusWaitingForMoreInformation",
                target: "choose_a_client_screen"
              }, {
                cond: "paymentStatusWaitingForReconciliation",
                target: "waiting_for_reconciliation_screen"
              },
              ]
            }
          },
          choose_a_client_screen: {
            on: {
              CHOOSE_THE_CLIENT: {
                target: 'validate_the_client_screen',
                actions: assign((context, event) => {
                  return {
                    temporaryClient: event.client,
                  }
                }),
              },
              CANCEL: {
                target: "idle",
                actions: "closeDrawer"
              },
            }
          },
          validate_the_client_screen: {
            on: {
              CLICK_ON_VALIDATE: {
                target: "validate_the_client_loading",
              },
              CANCEL: {
                target: "choose_a_client_screen",
                actions: assign((context, event) => {
                  let {client, ...paymentWithoutClient} = context.payment;
                  return {
                    payment: {
                      ...paymentWithoutClient
                    }
                  }
                }),
              }
            }
          },
          validate_the_client_loading: {
            invoke: {
              id: "associatePaymentToClient",
              src: (context, event) => clientPaymentService.associateWithAClient(context.payment, context.temporaryClient),
              onDone: {
                target: "waiting_for_reconciliation_screen",
                actions: assign((context, event) => {
                  return {
                    payment: event.data
                  }
                }),
              },
              onError: {
                target: "error_during_process_of_association_payment_with_client"
              }
            }
          },
          error_during_process_of_association_payment_with_client: {
            on: {
              RETRY: "choose_a_client_screen",
            }
          },
          waiting_for_reconciliation_screen: {
            on: {
              EDIT_THE_CLIENT: 'choose_a_client_screen'
            }
          },
        }
      },
  );