@daffodil/contact

@daffodil/contact

The @daffodil/contact library allows you quickly to scaffold a contact form UI feature in an Angular application. It supports drivers for a variety of ecommerce platforms in order to make connecting your UI to your platform's contact feature easy.

Getting Started

This overview assumes that you have already set up an Angular project and have gone through the contact installation guide. If you have not, we recommend you do that first.

Setting up your AppModule

To get started, import the DaffContactModule in your app.module. Next, import StoreModule.forRoot({}), which will be relevant later on when utilizing the redux and state management features of the contact module.

@ngModule({
  imports:[
    StoreModule.forRoot({}),
    DaffContactModule
  ]
})

Utilizing inside your component

The DaffContactModule provides a DaffContactFacade that wraps the complexities of the library into one place. This facade will handle sending your contact form to your application's backend and can also be utilized to build your UI with behaviors common to a contact.

To inject the facade inside your component, include an instance of DaffContactFacade in your component's constructor.

export class contactComponent {
  constructor(public contactFacade: DaffContactFacade) {}
}

Sending a Contact Form to your platform's backend

The DaffContactFacade is built generically, so feel free to create your own submission object that represents your app's contact form. A simple example is given below.

export interface ContactForm {
  email: string;
}

The ContactForm only contains a value of email and will represent the payload of data that is sent when a user submits their contact form.

Using the facade

Once the DaffContactFacade has been set up in your component, it can now be used to send off your contact data. To do so, use the facade.dispatch() method to dispatch a DaffContactSubscribe<T>() action with T being the type of submission object you are using. In addition, it will also update three observable streams of success$, error$, and loading$. These can be used to enhance your application's UI.

import { DaffContactSubscribe, DaffContactSubmission, DaffContactFacade } from '@daffodil/contact';

export class contactComponent implements OnInit{
  ngOnInit(){
    success$: Observable<boolean> = this.contactFacade.success$;
    error$: Observable<string> = this.contactFacade.error$;
    loading$: Observable<boolean> = this.contactFacade.loading$;
  }


  email:string = "[e-mail]"

  constructor(public contactFacade: DaffContactFacade){}
  submitData(){
    this.contactFacade.dispatch(new DaffContactSubscribe<DaffContactSubmission>(this.email));
  }

}

In this example, three observable streams are assigned from contactFacade. Then when submitData is called, the contactFacade will call its dispatch function which will send your data off to the backend and update the three observable streams.

Changelog

0.62.4 (2023-08-11)

Features

• authorizenet: add state config for accept retry backoff (#2541) (9dd40b7)
• cart: handle create errors in Magento driver (#2536) (4ead116)
• design: add focus trapping to modal component (#2532) (1569d60)
• design: create notification component (#2484) (e1f2574)
• design: use position fixed on sidebar nav (1839a85)
• driver: add DaffDriverNetworkError (#2534) (6e30ab1)