SmartFlex Onboarding V2

In order to onboard a customer to SmartFlex, they must be directed to register a device with Kraken and, if relevant, switch to an appropriate tariff.

📣 Note: SmartFlex Onboarding does not handle tariff switching. If you want the customer to be on a specific tariff, you will need to handle this separately.

Device selection

The first question for the customer is typically what device they want to register. Kraken supports registering many types of devices, including electric vehicles (EVs), charge points, heat pumps, thermostats, storage heaters and batteries (depending on enabled SmartFlex plugins). We begin by querying SelectDeviceType

Storybook

The rest of this documentation assumes that the customer is registering an EV. Other device types have a similar process. In the case of an EV or charge point, the next thing the customer should be asked to do is select the make (company/brand) of their EV.

Storybook

The way these queries work is the next step in the dynamic process is determined by looking at current onboarding step of the wizard. For our example flow, we'd next choose the vehicle make.

Storybook

Next step in this example is to select the charger make

Storybook

Next step in this example is to select the charger model/variant

Storybook

Authentication

If we are required to complete an auth flow, we use completeAuthFlow

mutation completeAuthFlow($wizardId: ID!, $stepId: ID!, $continuationUri: String!) {
	completeAuthFlowForSmartFlexOnboarding(input:{wizardId: $wizardId, stepId: $stepId, continuationUri: $continuationUri}) {
    wizard {
      currentStep {
        ...onboardingStep
      }
    }
  }
}

This may also result in use needing to set up a virtual key - use completeVirtualKeySetup to do this.

mutation completeVirtualKeySetup($wizardId: ID!, $stepId: ID!) {
  completeTeslaSetupVirtualKeyForSmartFlexOnboarding(input:{wizardId: $wizardId, stepId: $stepId}) {
    wizard {
      currentStep {
        ...onboardingStep
      }
    }
  }
}

Test charge

For EV registration we will need to complete a test charge. To do this, we use startTestCharge.

mutation startTestCharge($wizardId: ID!, $stepId: ID!) {
	startTestChargeForSmartFlexOnboarding(input:{wizardId: $wizardId, stepId: $stepId}) {
    wizard {
      currentStep {
        ...onboardingStep
      }
    }
  }
}

Checking for completion

Once null is returned as the currentStep, that means onboarding is complete. If you want to get a list of active onboarding wizards at any point, you can use the following query. This is useful for:

• polling the current step, e.g. in the case of waiting for DeviceRegistration to complete.
• returning a user to an onboarding wizard if they leave it

query onboardingWizards($accountNumber: String!, $propertyId: Int!) {
  smartFlexOnboardingWizards(accountNumber:$accountNumber, propertyId:$propertyId) {
    id
    currentStep {
      ...onboardingStep
    }
    completedSteps {
      ...onboardingStep
    }
  }
}

Cancellation

If you want to cancel an onboarding process, you can use the following mutation:

mutation cancelSmartFlexOnboarding($wizardId: ID!) {
  cancelSmartFlexOnboarding(input:{wizardId: $wizardId}) {
    wizard {
      id
    }
  }
}

Demo

Here is a demo of how we can put these together to create a dynamic wizard which will load the appropriate options from the result of the previous step. This shows the UI up to the point where you would be redirected to the OAuth process of the vehicle manufacturer. The mocks are hard-coded for values for a Tesla vehicle and charger. Choosing the third option for the charger model shows a loader to indicate a redirect to OAuth would be performed.

Storybook