States / Nested states

Nested states is kind of a syntax sugar to hide some repetition and make state declarations more readable. This is how you create a nested state declaration:

this.states = [
  // ...
  [{ country: "not_null()" }, "countryEntered", [
    [{ country_of_origin: () => this.get("country") }, "bornAndRaisedGreeting"]
  ]];
];

and then Webface's StateManager code will automatically expand this into this flat structure:
this.states = [
  // ...
  [{ country: "not_null()" }, "countryEntered"],
  [{ country: "not_null()", country_of_origin: () => this.get("country") }, "bornAndRaisedGreeting"]
];

This expanded version of the nested declaration is not something you'd see in your code. The expansion is done under the hood by a StateManager instance and the code above in the second code listing is only for illustration purposes, so you can better understand the logic behind nested declarations.

To formalize the syntax of nested declarations: if you have a third element to a state declaration array and this element is itself an array of state declarations, then StateManager will expand those declarations for you into a flat structure shown in the second code listing. You can have as many nested levels as you wish.

IMPORTANT! By default a state that has the longest matching definition is considered the matched one, while states that have the same argument/value pairs as the longest definition while lacking some additional ones (and are, thus, shorter) are disregarded. For instance, that given that user has entered their country and entered the same country as country of origin in one go, UserComponent.countryEntered() will NOT be invoked. If you want them both invoked, you need to set the pick_states_with_longest_definition_only option for the state manager to false:
this.states = [
  "action", { pick_states_with_longest_definition_only: false } // default is true
  //...
];

Read more about this on the common options page.

If you don't have any transitions to list for a state that nests other states, you just leave the transition element of the array (second one) blank:

this.states = [
  // ...
  [{ country: "not_null()" }, "", [
    [{ country_of_origin: () => this.get("country") }, "bornAndRaisedGreeting"]
  ]];
];