Confirm a change

const [open, setOpen] = useState(false);
const [effectiveDate, setEffectiveDate] = useState<Date | undefined>(new Date());

const onChangeEffectiveDate = (detail: GoabDatePickerOnChangeDetail) => {
  setEffectiveDate(detail.value as Date);
};

<GoabButton onClick={() => setOpen(true)}>Save and continue</GoabButton>

<GoabModal
  heading="Address has changed"
  open={open}
  onClose={() => setOpen(false)}
  actions={
    <GoabButtonGroup alignment="end">
      <GoabButton type="secondary" size="compact" onClick={() => setOpen(false)}>
        Undo address change
      </GoabButton>
      <GoabButton type="primary" size="compact" onClick={() => setOpen(false)}>
        Confirm
      </GoabButton>
    </GoabButtonGroup>
  }
>
  <GoabContainer
    type="non-interactive"
    accent="filled"
    padding="compact"
    width="full"
  >
    <GoabText tag="h4" mt="none" mb="s">
      Before
    </GoabText>
    <GoabText mt="none">123456 78 Ave NW, Edmonton, Alberta</GoabText>
    <GoabText tag="h4" mt="none" mb="s">
      After
    </GoabText>
    <GoabText mt="none" mb="none">
      881 12 Ave NW, Edmonton, Alberta
    </GoabText>
  </GoabContainer>
  <GoabFormItem label="Effective date" mt="l">
    <GoabDatePicker
      onChange={onChangeEffectiveDate}
      name="effectiveDate"
      value={effectiveDate}
    />
  </GoabFormItem>
</GoabModal>

open = false;
effectiveDate = new Date();

toggleModal(): void {
  this.open = !this.open;
}

onChangeEffectiveDate(event: GoabDatePickerOnChangeDetail): void {
  this.effectiveDate = event.value as Date;
}

<goab-button (onClick)="toggleModal()">Save and continue</goab-button>

<goab-modal
  [open]="open"
  (onClose)="toggleModal()"
  heading="Address has changed"
  [actions]="actions"
>
  <goab-container type="non-interactive" accent="filled" padding="compact" width="full">
    <goab-text tag="h4" mt="none" mb="s">Before</goab-text>
    <goab-text mt="none">123456 78 Ave NW, Edmonton, Alberta</goab-text>
    <goab-text tag="h4" mt="none" mb="s">After</goab-text>
    <goab-text mt="none" mb="none">881 12 Ave NW, Edmonton, Alberta</goab-text>
  </goab-container>
  <goab-form-item label="Effective date" mt="l">
    <goab-date-picker
      (onChange)="onChangeEffectiveDate($event)"
      name="effectiveDate"
      [value]="effectiveDate"
    ></goab-date-picker>
  </goab-form-item>
  <ng-template #actions>
    <goab-button-group alignment="end">
      <goab-button type="secondary" size="compact" (onClick)="toggleModal()">
        Undo address change
      </goab-button>
      <goab-button type="primary" size="compact" (onClick)="toggleModal()">
        Confirm
      </goab-button>
    </goab-button-group>
  </ng-template>
</goab-modal>

const modal = document.getElementById("change-modal");
const openBtn = document.getElementById("open-modal-btn");
const undoBtn = document.getElementById("undo-btn");
const confirmBtn = document.getElementById("confirm-btn");
const datePicker = document.getElementById("effective-date");

let effectiveDate = new Date();
datePicker.setAttribute("value", effectiveDate.toISOString());

openBtn.addEventListener("_click", () => {
  modal.setAttribute("open", "true");
});

undoBtn.addEventListener("_click", () => {
  modal.removeAttribute("open");
});

confirmBtn.addEventListener("_click", () => {
  modal.removeAttribute("open");
});

modal.addEventListener("_close", () => {
  modal.removeAttribute("open");
});

datePicker.addEventListener("_change", (e) => {
  effectiveDate = e.detail.value;
});

<goa-button version="2" id="open-modal-btn">Save and continue</goa-button>

<goa-modal version="2" id="change-modal" heading="Address has changed">
  <goa-container type="non-interactive" accent="filled" padding="compact" width="full">
    <goa-text as="h4" mt="none" mb="s">Before</goa-text>
    <goa-text mt="none">123456 78 Ave NW, Edmonton, Alberta</goa-text>
    <goa-text as="h4" mt="none" mb="s">After</goa-text>
    <goa-text mt="none" mb="none">881 12 Ave NW, Edmonton, Alberta</goa-text>
  </goa-container>
  <goa-form-item version="2" label="Effective date" mt="l">
    <goa-date-picker
      version="2"
      id="effective-date"
      name="effectiveDate"
    ></goa-date-picker>
  </goa-form-item>
  <div slot="actions">
    <goa-button-group alignment="end">
      <goa-button version="2" type="secondary" size="compact" id="undo-btn">
        Undo address change
      </goa-button>
      <goa-button version="2" type="primary" size="compact" id="confirm-btn">
        Confirm
      </goa-button>
    </goa-button-group>
  </div>
</goa-modal>