Copy billing address to shipping address

Define a PostalAddress component shared for billing and shipping. Use the JavaScript spread operator (...) to copy the billing section of the form's data to the shipping section.

<Component name="PostalAddress">
    <FormItem
      label="Address"
      type="text"
      bindTo="{$props.type}.address"
      width="100%"
      placeholder="Street address" />

    <FormItem
      label="City"
      type="text"
      bindTo="{$props.type}.city"
      width="100%"
      placeholder="City" />

    <FormItem
      label="State/Province"
      type="text"
      bindTo="{$props.type}.state"
      width="100%"
      placeholder="State/Province" />

    <FormItem
      label="Postal code"
      type="text"
      bindTo="{$props.type}.postal_code"
      width="100%"
      placeholder="Postal code" />

    <FormItem
      label="Country"
      type="text"
      bindTo="{$props.type}.country"
      width="100%"
      placeholder="Country" />
  </Component>
  <App>
    <Form
      id="addresses"
      data="{{
        billing: { address: '123 W. 57th', city: 'New York', state: 'NY', country: 'USA', postal_code: '10019' },
        shipping: {}
      }}"
      onSubmit="(toSave) => toast(JSON.stringify(toSave))"
    >
      <Button
        label="Copy Billing to Shipping"
        onClick="() => addresses.update({ shipping: { ...$data.billing } })" />
      <Tabs>
        <TabItem label="billing">
          <PostalAddress type="billing" />
        </TabItem>
        <TabItem label="shipping">
          <PostalAddress type="shipping" />
        </TabItem>
      </Tabs>
    </Form>
  </App>
<Component name="PostalAddress">
    <FormItem
      label="Address"
      type="text"
      bindTo="{$props.type}.address"
      width="100%"
      placeholder="Street address" />

    <FormItem
      label="City"
      type="text"
      bindTo="{$props.type}.city"
      width="100%"
      placeholder="City" />

    <FormItem
      label="State/Province"
      type="text"
      bindTo="{$props.type}.state"
      width="100%"
      placeholder="State/Province" />

    <FormItem
      label="Postal code"
      type="text"
      bindTo="{$props.type}.postal_code"
      width="100%"
      placeholder="Postal code" />

    <FormItem
      label="Country"
      type="text"
      bindTo="{$props.type}.country"
      width="100%"
      placeholder="Country" />
  </Component>
  <App>
    <Form
      id="addresses"
      data="{{
        billing: { address: '123 W. 57th', city: 'New York', state: 'NY', country: 'USA', postal_code: '10019' },
        shipping: {}
      }}"
      onSubmit="(toSave) => toast(JSON.stringify(toSave))"
    >
      <Button
        label="Copy Billing to Shipping"
        onClick="() => addresses.update({ shipping: { ...$data.billing } })" />
      <Tabs>
        <TabItem label="billing">
          <PostalAddress type="billing" />
        </TabItem>
        <TabItem label="shipping">
          <PostalAddress type="shipping" />
        </TabItem>
      </Tabs>
    </Form>
  </App>