@aztrix/elements

elements

This library was generated with Nx.

Running unit tests

Run nx test elements to execute the unit tests.

Aztrix elements

This repository contains reusable web components.

Install

npm install @aztrix/elements

Usage

different webcomponents usages

aztrix-card

import '@aztrix/elements/card';

<aztrix-card profile-id="your profile id"></aztrix-card>

aztrix-subscribe

import '@aztrix/elements/subscribe';

STANDARD mode

<aztrix-subscribe proposal-id="your proposal id"></aztrix-subscribe>

COMPACT mode

<aztrix-subscribe proposal-id="your proposal id" mode="COMPACT"></aztrix-subscribe>

aztrix-subscribe-button

import '@aztrix/elements/subscribe-button';

<aztrix-subscribe-button
  proposal-id="your proposal id"
  label="button text"
></aztrix-subscribe-button>

aztrix-subscribe-form [DEPRECATED]

In the future, this webcomponent will be deprecated. For a webcomponent with a similar experience, use the aztrix-subscribe in compact mode

<aztrix-subscribe-form proposal-id="your proposal id"></aztrix-subscribe-form>

import '@aztrix/elements/subscribe-form';

You can set externalAgreementProperties and subscriberMetadata by setting those as an attribute in Javascript. Example:

const subscribeForm = document.getElementsByTagName('aztrix-subscribe-form')[0];
subscribeForm.setAttribute(
  'prefill-properties',
  JSON.stringify([
    {
      requestedPropertyId: '0',
      type: 'EMAIL',
      value: '[e-mail]',
    },
    {
      requestedPropertyId: '2',
      type: 'ADDRESS',
      subType: 'STREET',
      value: 'TestStreet',
    },
  ])
);

subscribeForm.setAttribute(
  'subscriber-metadata',
  JSON.stringify([
    {
      key: 'listingId',
      value: '1234',
    },
  ])
);

If you want disable the proposal verification in the form add verification="false" to the susbcribe-form. (only applicable if the proposal already has verification)

<aztrix-subscribe-form proposal-id="your proposal id" verification="false"></aztrix-subscribe-form>

We implemented an event that you can use to notify the user that the subscription is done. You can do something like this in JavaScript:

const subscribeForm = document.getElementsByTagName('aztrix-subscribe-form')[0];
subscribeForm.addEventListener('subscribed', function (e) {
  console.log(e.detail.proposal);
  console.log(e.detail.agreement);
});