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

machine.js

// Available variables:
// - Machine
// - interpret
// - assign
// - send
// - sendParent
// - spawn
// - raise
// - actions
// - XState (all XState exports)

const associateInvite = (
  accountCreationIntent,
  accountInviteClientID,
  inviteCode
) =>
  Promise.resolve({
    data: {
      associateInvite: {
        confirmationScreen: {
          body: "",
          buttonText: "Continue",
          entityProfile: {
            url: "https://invite.spruce-dev.com/e/18M23V27KJ800"
          },
          imageURL:
            "https://msg-media.spruce-dev.com/media/e867db5a-ba30-9dba-7cc0-38cb-f9887032?mimetype=image%2Fpng",
          photoStyle: "BORDERED_CIRCLE",
          title: "You're joining Sara Brown, PsyD"
        },
        errorCode: null,
        errorMessage: null,
        inviteType: "ORGANIZATION_CODE",
        phoneNumberVerificationText: null,
        values: [
          {
            key: "client_data",
            value:
              '{"patient_invite":{"greeting":{"title":"You\'re Joining Sara Brown, PsyD","message":"Let\'s create your account so you can start securely messaging with Sara Brown, PsyD.","button_text":"Get Started"},"org_id":"entity_18M23V27KJ800","org_name":"Sara Brown, PsyD"},"practice_invite":{"greeting":{"title":"You\'re Joining Sara Brown, PsyD","message":"Let\'s create your account so you can start securely messaging with Sara Brown, PsyD.","button_text":"Get Started"},"org_id":"entity_18M23V27KJ800","org_name":"Sara Brown, PsyD","join_as_teammate":false}}'
          },
          {
            key: "invite_type",
            value: "ORGANIZATION_CODE"
          },
          {
            key: "$desktop_url",
            value: "https://app.spruce-dev.com/?invite=sara-brown"
          },
          {
            key: "invite_token",
            value: "sara-brown"
          }
        ],
        verifyPhoneNumber: true
      }
    }
  });

const verifyPhoneNumber = phoneNumber =>
  Promise.resolve({
    data: {
      checkVerificationCode: {
        __typename: "CheckVerificationCodePayload",
        confirmationScreen: {
          __typename: "AssociateInviteConfirmationScreen",
          body:
            "Before you can join the conversation you'll need to create an account or log in.",
          buttonText: "Continue",
          entityProfile: {
            __typename: "EntityProfile",
            codes: ["entity_0CLR47QS01800"],
            createdTimestamp: 1499724524,
            default: true,
            header: {
              __typename: "EntityProfileHeader",
              imageURL:
                "https://msg-media.spruce-dev.com/media/2a406dad-b148-e067-8a7a-bd04-691c73cd?mimetype=image%2Fpng",
              initials: "T",
              name: "Join The Dewabi Corp on Spruce",
              subtitle: null
            },
            id: "profile_0MT66MFQ04800",
            managed: true,
            modifiedTimestamp: 1499724632,
            sections: [],
            url: "https://invite.spruce-dev.com/e/0CLR47QS01800"
          },
          imageURL:
            "https://msg-media.spruce-dev.com/media/2a406dad-b148-e067-8a7a-bd04-691c73cd?mimetype=image%2Fpng",
          photoStyle: "BORDERED_CIRCLE",
          title: "You're joining The Dewabi Corp"
        },
        errorCode: null,
        errorMessage: null,
        inviteType: "SECURE_MESSAGE",
        success: true,
        verifiedEntityInfo: null
      }
    }
  });

const fetchMachine = Machine({
  id: "account-creation",
  initial: "checkingForInviteCode",
  context: {
    inviteCode: "",
    accountCreationIntent: "PROVIDER",
    phoneVerificationToken: "",
    inviteConfirmationScreen: null,
    accountInviteClientID: ""
  },
  states: {
    error: {
      type: "final"
    },
    checkingForInviteCode: {
      invoke: {
        id: "associateInvite",
        src: (context, event) =>
          associateInvite(
            context.accountCreationIntent,
            context.accountInviteClientID,
            context.inviteCode
          ),
        onDone: {
          target: "enterPhoneNumber",
          actions: assign({
            inviteCode: (context, event) => {},
            token: (context, event) => {
              event.data.verifyPhoneNumberForAccountCreation.token;
            }
          })
        },
        onError: {
          target: "error",
          actions: assign({
            error: (context, event) => {
              console.error(event);
            }
          })
        }
      }
    },
    choosePatientOrProvider: {
      on: {
        PATIENT: {
          target: "enterPhoneNumber",
          actions: "markAsPatient"
        },
        PROVIDER: {
          target: "enterPhoneNumber",
          actions: "markAsProvider"
        }
      }
    },
    enterPhoneNumber: {
      on: {
        VALID: "enterPhoneVerificationCode",
        INVALID: "enterPhoneNumber"
      },
      initial: "entry",
      states: {
        loading: {},
        failure: {}
      }
    },
    sendingPhoneVerificationCode: {
      invoke: {
        id: "verifyPhoneNumber",
        src: (context, event) => verifyPhoneNumber(context.phoneNumber),
        onDone: {
          target: "enterPhoneVerificationCode"
        },
        onError: {
          target: "error",
          actions: assign({
            error: (context, event) => {
              console.error(event);
            }
          })
        }
      }
    },
    enterPhoneVerificationCode: {
      on: {
        VALID: [
          {
            target: "confirmPracticeBeingJoined",
            cond: ctx => ctx.inviteCode && ctx.inviteConfirmationScreen
          },
          {
            target: "enterPatientDemographics",
            cond: ctx => ctx.accountCreationIntent === "PATIENT"
          },
          {
            target: "enterProviderDemographics",
            cond: ctx => ctx.accountCreationIntent === "PROVIDER"
          }
        ],
        INVALID: "enterPhoneVerificationCode"
      }
    },
    confirmPracticeBeingJoined: {
      on: {
        CONFIRM: [
          {
            target: "enterProviderDemographics",
            cond: ctx => ctx.accountCreationIntent === "PROVIDER"
          },
          {
            target: "enterPatientDemographics",
            cond: ctx => ctx.accountCreationIntent === "PATIENT"
          }
        ]
      }
    },
    enterPatientDemographics: {
      type: "final"
    },
    enterProviderDemographics: {
      type: "final"
    },
    patientAccountCreated: {
      type: "final"
    },
    providerAccountCreated: {
      type: "final"
    }
  },
  actions: {
    markAsProvider: assign({
      accountCreationIntent: "PROVIDER"
    }),
    markAsPatient: assign({
      accountCreationIntent: "PATIENT"
    })
  }
});