Agreement

In a Form, Agreement stands in the submit and return region with the payment it governs.

In a Stepped flow whose commit it authorises, Agreement stands around the commit, and the way back follows it.

CompleteDetails
Card
Not startedConfirmation

By saving this card, you allow Oakmere Village Hall to charge it for this booking and for later invoices on their due date. You can remove the card from your account at any time. Read the card terms.

Back to details

In a Dialog, Agreement wraps the Dialog’s Primary action, and its closing action follows it.

Change card

Change card while the current card is being checked

After the action, the words agreed to stay with the record and go to the person who agreed.

Card terms, accepted

Version: 1

Accepted by: Aisha Khan

Accepted: 3 February 2025 at 11:40

History

Messages

You 3 February 2025 at 11:40

By paying, you agree to the card terms and privacy statement.

Delivered to aisha@oakmereprimary.org

Card terms

Oakmere Village Hall keeps your card to charge the invoices you owe for your bookings. Each charge is taken on the invoice’s due date and is never more than the invoice’s amount due.

We email you the invoice before its due date. You can remove your card from your account at any time; invoices after that are paid by bank transfer.

Return to payment

Privacy statement

Your payment details are kept with your invoice.

Return to payment

After the action

Each task above submits here. The page shows its own success.

Source

<p>In a Form, Agreement stands in the submit and return region with the payment it governs.</p>
<Kit.Phoenix.Layouts.Form.form id="role-agreement-form" subject_state={Kit.Phoenix.State.none()} action="#role-agreement-result" method="get">
  <:task_context heading="Pay invoice"><Kit.Phoenix.Roles.FactGroup.fact_group><Kit.Phoenix.Roles.LabelledFact.labelled_fact><:name>Hirer</:name><:value>Oakmere Primary School</:value></Kit.Phoenix.Roles.LabelledFact.labelled_fact><Kit.Phoenix.Roles.LabelledFact.labelled_fact><:name>Invoice</:name><:value><Kit.Phoenix.Identifier.identifier value="OH-INV-003" /></:value></Kit.Phoenix.Roles.LabelledFact.labelled_fact></Kit.Phoenix.Roles.FactGroup.fact_group></:task_context>
  <:form_groups>
    <Kit.Phoenix.Roles.FormGroup.form_group id="role-agreement-form-name-form-group" kind={Kit.Phoenix.Roles.FormGroup.Kind.text(:medium)}

      control_rest={%{id: "role-agreement-form-name", name: "name", autocomplete: "cc-name", value: "Aisha Khan"}}
    ><:printed_value>Aisha Khan</:printed_value>
      <:label rest={%{for: "role-agreement-form-name"}}>Name on card</:label>
    </Kit.Phoenix.Roles.FormGroup.form_group>
  </:form_groups>
  <:consequence>
    <Kit.Phoenix.Roles.InlineConsequence.inline_consequence aria-label="Pay invoice OH-INV-003">
      <:subject>Invoice OH-INV-003</:subject>
      <:consequence>Paying takes £84.00 from this card.</:consequence>
      <:effective_time>The payment is taken as soon as you pay.</:effective_time>
      <:correction_path>A payment made in error is refunded from <a href="#role-agreement">the invoice</a>.</:correction_path>
    </Kit.Phoenix.Roles.InlineConsequence.inline_consequence>
  </:consequence>
  <:refusal>
    <Kit.Phoenix.Roles.Refusal.refusal id="role-agreement-declined">
      <:line>The payment was declined. Use another card.</:line>
    </Kit.Phoenix.Roles.Refusal.refusal>
  </:refusal>
  <:submit_return>
    <Kit.Phoenix.Roles.Agreement.agreement>
      <:text>By paying, you agree to the <a href="#role-agreement-terms">card terms</a> and <a href="#role-agreement-privacy">privacy statement</a>.</:text>
      <:signature>
        <Kit.Phoenix.Roles.FormGroup.form_group id="role-agreement-signature-form-group" kind={Kit.Phoenix.Roles.FormGroup.Kind.text(:medium)}

          control_rest={%{id: "role-agreement-signature", name: "signature", autocomplete: "name"}}
        ><:printed_value>Not signed</:printed_value>
          <:label rest={%{for: "role-agreement-signature"}}>Your full name, to sign</:label>
        </Kit.Phoenix.Roles.FormGroup.form_group>
      </:signature>
      <:action><Kit.Phoenix.Roles.PrimaryAction.primary_action type="submit">Pay £84.00</Kit.Phoenix.Roles.PrimaryAction.primary_action></:action>
    </Kit.Phoenix.Roles.Agreement.agreement>
    <Kit.Phoenix.Roles.WayBack.way_back href="#role-agreement">Return to invoice</Kit.Phoenix.Roles.WayBack.way_back>
  </:submit_return>
</Kit.Phoenix.Layouts.Form.form>
<p>In a Stepped flow whose commit it authorises, Agreement stands around the commit, and the way back follows it.</p>
<Kit.Phoenix.Layouts.SteppedFlow.stepped_flow id="role-agreement-stepped-flow" subject_state={Kit.Phoenix.State.none()} progress_rest={%{"aria-label": "Booking progress"}}>
  <:progress name="Details" state="done" />
  <:progress name="Card" state="current" />
  <:progress name="Confirmation" state="upcoming" />
  <:current_step id="role-agreement-commit-step" rest={%{"aria-labelledby": "role-agreement-commit-step-title", action: "#role-agreement-result", method: "get"}} heading="Save a card" heading_rest={%{id: "role-agreement-commit-step-title"}}>
    <Kit.Phoenix.Roles.FormGroup.form_group id="role-agreement-commit-name-form-group" kind={Kit.Phoenix.Roles.FormGroup.Kind.text(:medium)}

      control_rest={%{id: "role-agreement-commit-name", name: "name", autocomplete: "cc-name", value: "Aisha Khan"}}
    ><:printed_value>Aisha Khan</:printed_value>
      <:label rest={%{for: "role-agreement-commit-name"}}>Name on card</:label>
    </Kit.Phoenix.Roles.FormGroup.form_group>
  </:current_step>
  <:agreement>By saving this card, you allow Oakmere Village Hall to charge it for this booking and for later invoices on their due date. You can remove the card from your account at any time. <a href="#role-agreement-terms">Read the card terms</a>.</:agreement>
  <:continue_or_commit>Save card</:continue_or_commit>
  <:back><Kit.Phoenix.Roles.WayBack.way_back href="#role-agreement">Back to details</Kit.Phoenix.Roles.WayBack.way_back></:back>
</Kit.Phoenix.Layouts.SteppedFlow.stepped_flow>
<p>In a Dialog, Agreement wraps the Dialog’s Primary action, and its closing action follows it.</p>
<details>
  <summary>Change card</summary>
  <Kit.Phoenix.Roles.SecondaryAction.secondary_action id="role-agreement-dialog-opener">Change card</Kit.Phoenix.Roles.SecondaryAction.secondary_action>
  <Kit.Phoenix.Roles.Dialog.dialog open id="role-agreement-dialog" return_focus="role-agreement-dialog-opener" aria-labelledby="role-agreement-dialog-title">
    <:heading rest={%{id: "role-agreement-dialog-title"}}>Change card</:heading>
    <:form_groups>
      <form id="role-agreement-dialog-card" action="#role-agreement-result" method="get">
        <Kit.Phoenix.Roles.FormGroup.form_group id="role-agreement-dialog-name-form-group" kind={Kit.Phoenix.Roles.FormGroup.Kind.text(:medium)}

          control_rest={%{id: "role-agreement-dialog-name", name: "name", autocomplete: "cc-name", value: "Aisha Khan"}}
        ><:printed_value>Aisha Khan</:printed_value>
          <:label rest={%{for: "role-agreement-dialog-name"}}>Name on card</:label>
        </Kit.Phoenix.Roles.FormGroup.form_group>
      </form>
    </:form_groups>
    <:agreement>By saving this card, you allow Oakmere Village Hall to charge it for later invoices on their due date. You can remove the card from your account at any time. <a href="#role-agreement-terms" target="_blank" rel="noopener">Read the card terms</a>.</:agreement>
    <:primary_action rest={%{type: "submit", form: "role-agreement-dialog-card"}}>Save card</:primary_action>
    <:secondary_action>Keep current card</:secondary_action>
  </Kit.Phoenix.Roles.Dialog.dialog>
</details>
<details>
  <summary>Change card while the current card is being checked</summary>
  <Kit.Phoenix.Roles.SecondaryAction.secondary_action id="role-agreement-inert-dialog-opener">Change card</Kit.Phoenix.Roles.SecondaryAction.secondary_action>
  <Kit.Phoenix.Roles.Dialog.dialog open id="role-agreement-inert-dialog" return_focus="role-agreement-inert-dialog-opener" aria-labelledby="role-agreement-inert-dialog-title">
    <:heading rest={%{id: "role-agreement-inert-dialog-title"}}>Change card</:heading>
    <:form_groups>
      <form id="role-agreement-inert-dialog-card" action="#role-agreement-result" method="get">
        <Kit.Phoenix.Roles.FormGroup.form_group id="role-agreement-inert-dialog-name-form-group" kind={Kit.Phoenix.Roles.FormGroup.Kind.text(:medium)}
          control_rest={%{id: "role-agreement-inert-dialog-name", name: "name", autocomplete: "cc-name", value: "Aisha Khan"}}
        ><:printed_value>Aisha Khan</:printed_value>
          <:label rest={%{for: "role-agreement-inert-dialog-name"}}>Name on card</:label>
        </Kit.Phoenix.Roles.FormGroup.form_group>
      </form>
    </:form_groups>
    <:agreement>By saving this card, you allow Oakmere Village Hall to charge it for later invoices on their due date. You can remove the card from your account at any time. <a href="#role-agreement-terms" target="_blank" rel="noopener">Read the card terms</a>.</:agreement>
    <:primary_action state={Kit.Phoenix.ActionState.inert("role-agreement-save-card", "Wait for the current card to be checked before saving.")} rest={%{type: "submit", form: "role-agreement-inert-dialog-card"}}>Save card</:primary_action>
    <:secondary_action>Keep current card</:secondary_action>
  </Kit.Phoenix.Roles.Dialog.dialog>
</details>
<p>After the action, the words agreed to stay with the record and go to the person who agreed.</p>
<Kit.Phoenix.Layouts.Record.record subject_state={Kit.Phoenix.State.none()} density="desk">
  <:facts_related_records rest={%{"aria-labelledby": "role-agreement-accepted-title"}} heading="Card terms, accepted" heading_rest={%{id: "role-agreement-accepted-title"}}>
    <Kit.Phoenix.Roles.FactGroup.fact_group>
      <Kit.Phoenix.Roles.LabelledFact.labelled_fact>
        <:name>Version</:name>
        <:value>1</:value>
      </Kit.Phoenix.Roles.LabelledFact.labelled_fact>
      <Kit.Phoenix.Roles.LabelledFact.labelled_fact>
        <:name>Accepted by</:name>
        <:value>Aisha Khan</:value>
      </Kit.Phoenix.Roles.LabelledFact.labelled_fact>
      <Kit.Phoenix.Roles.LabelledFact.labelled_fact>
        <:name>Accepted</:name>
        <:value><Kit.Phoenix.Roles.Time.time value={Kit.Phoenix.Time.moment(reader(), ~U[2025-02-03 11:40:00Z])} /></:value>
      </Kit.Phoenix.Roles.LabelledFact.labelled_fact>
    </Kit.Phoenix.Roles.FactGroup.fact_group>
  </:facts_related_records>
  <:notes_files_history rest={%{"aria-labelledby": "role-agreement-accepted-history-title"}} heading="History" heading_rest={%{id: "role-agreement-accepted-history-title"}}>
    <Kit.Phoenix.Roles.HeadedRegion.headed_region heading="Messages">
      <:content>
        <Kit.Phoenix.Roles.MessageEntry.message_entry body={%Kit.Phoenix.AuthoredText.Shown{value: %Kit.Phoenix.AuthoredText{content: [{:paragraph, [{:text, "By paying, you agree to the card terms and privacy statement.", []}]}]}, reader: reader(), mention_link: fn _kind, _id -> nil end, file_link: fn _id -> nil end}} own time={Kit.Phoenix.Time.moment(reader(), ~U[2025-02-03 11:40:00Z])}>
          <:author avatar={Kit.Phoenix.Roles.Avatar.person("Oakmere Village Hall", "OH")}>Oakmere Village Hall</:author>
          <:delivery><Kit.Phoenix.Roles.Stamp.stamp state="settled">Delivered</Kit.Phoenix.Roles.Stamp.stamp></:delivery>
          <:destination>to aisha@oakmereprimary.org</:destination>
        </Kit.Phoenix.Roles.MessageEntry.message_entry>
      </:content>
    </Kit.Phoenix.Roles.HeadedRegion.headed_region>
  </:notes_files_history>
</Kit.Phoenix.Layouts.Record.record>
<section id="role-agreement-terms" aria-labelledby="role-agreement-terms-title">
  <h3 id="role-agreement-terms-title">Card terms</h3>
  <p>Oakmere Village Hall keeps your card to charge the invoices you owe for your bookings. Each charge is taken on the invoice’s due date and is never more than the invoice’s amount due.</p>
  <p>We email you the invoice before its due date. You can remove your card from your account at any time; invoices after that are paid by bank transfer.</p>
  <p><Kit.Phoenix.Roles.WayBack.way_back href="#role-agreement">Return to payment</Kit.Phoenix.Roles.WayBack.way_back></p>
</section>
<section id="role-agreement-privacy" aria-labelledby="role-agreement-privacy-title">
  <h3 id="role-agreement-privacy-title">Privacy statement</h3>
  <p>Your payment details are kept with your invoice.</p>
  <p><Kit.Phoenix.Roles.WayBack.way_back href="#role-agreement">Return to payment</Kit.Phoenix.Roles.WayBack.way_back></p>
</section>
<section id="role-agreement-result" aria-labelledby="role-agreement-result-title">
  <h3 id="role-agreement-result-title">After the action</h3>
  <p>Each task above submits here. The page shows its own success.</p>
</section>

Previous, Attention item Next, Refusal

Human support