docs(newsletter): clean up formatting and verbiage of existing documentation

libs/newsletter/README.md

@@ -1,83 +1,39 @@
 # @daffodil/newsletter
+`@daffodil/newsletter` allows you to quickly scaffold a "newsletter" subscription 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 newsletter feature easy.
 
-The `@daffodil/newsletter` library allows you to quickly scaffold a "newsletter" subscription 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 newsletter feature easy. <!-- talk about supported platforms -->
+<!-- ## Overview
+talk about supported platforms -->
 
-## Getting Started
+## Installation
+To install `@daffodil/newsletter`, use the following commands in the terminal.
 
-This overview assumes that you have already set up an Angular project and have gone through the [Newsletter installation guide](/libs/newsletter/guides/installation.md). If you have not, we recommend you do that first.
+Install with npm:
+```
+npm install @daffodil/newsletter --save
+```
 
-## Setting up your AppModule
+Install with yarn:
+```
+yarn add @daffodil/newsletter
+```
 
-To get started, import the `StoreModule` and the `DaffNewsletterModule` at the top of your app.module file.
+> After installing, a platform driver needs to be set up. We highly recommend installing the [in-memory web api](./guides/drivers.md) for getting started quickly.
 
-```typescript
+## Getting started
+1. Import the `StoreModule` and the `DaffNewsletterModule` in the root component of your application.
+2. Include `StoreModule.forRoot({})` in the imports section. This will be relevant later on when utilizing the redux and state management features of `@daffodil/newsletter`.
+
+```ts
 import { DaffNewsletterModule } from '@daffodil/newsletter';
 import { StoreModule } from '@ngrx/store';
-```
-
-Then import the `DaffNewsletterModule` in your app.module. Afterwards, also import `StoreModule.forRoot({})`, as this will be relevant later on when utilizing the redux and state management features of the newsletter module.
 
-```typescript
 @ngModule({
-  imports:[
+  imports: [
     StoreModule.forRoot({}),
     DaffNewsletterModule
   ]
 })
 ```
 
-## Utilizing inside your component
-
-The `DaffNewsletterModule` provides a `DaffNewsletterFacade` that wraps the complexities of the library into one place. This facade will handle sending your newsletter subscription to your application's backend and and can also be utilized to build your UI with behaviors common to a newsletter.
-
-To inject the facade inside your component, include an instance of `DaffNewsletterFacade` in your component's constructor.
-
-```typescript
-export class NewsletterComponent {
-  constructor(public newsletterFacade: DaffNewsletterFacade) {}
-}
-```
-
-## Sending a Newsletter Subscription to your platform's backend
-
-The `DaffNewsletterFacade` supports sending a `DaffNewsletterSubmission` when sending a subscription to your platform's backend.
-
-```typescript
-export interface DaffNewsletterSubmission {
-  email: string;
-}
-```
-
-The `DaffNewsletterSubmission` is the default object and only contains a value of `email`. To learn how to customize your submission, read the [customizing submission data guide](/libs/newsletter/guides/advanced/customizing-submission-data.md).
-
-## Using the facade
-
-Once the `DaffNewsletterFacade` has been set up in your component, it can now be used to send off your newsletter data. To do so, the facade will dispatch an action of type `DaffNewsletterSubscribe<T>()` with `T` being the type of submission your 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.
-
-```typescript
-import { DaffNewsletterSubscribe, DaffNewsletterSubmission, DaffNewsletterFacade } from '@daffodil/newsletter';
-
-export class NewsletterComponent implements OnInit{
-  ngOnInit(){
-    success$: Observable<boolean> = this.newsletterFacade.success$;
-    error$: Observable<string> = this.newsletterFacade.error$;
-    loading$: Observable<boolean> = this.newsletterFacade.loading$;
-  }
-
-
-  email:string = "[email protected]"
-
-  constructor(public newsletterFacade: DaffNewsletterFacade) {
-  }
-  submitData() {
-      this.newsletterFacade.dispatch(new DaffNewsletterSubscribe<DaffNewsletterSubmission>(this.email));
-  }
-
-}
-```
-
-> In this example, three observable streams are assigned from `newsletterFacade`. Then when `submitData` is called, the `newsletterFacade` will call its `dispatch` function which will send your data off to the backend and update the three observable streams.
-
-## Live Demo
-
-[Checkout a live example of the `DaffNewsletter` library in action!](https://stackblitz.com/edit/daff-newsletter-example)
+## Live demo
+Check out a [live example](https://stackblitz.com/edit/daff-newsletter-example) of `@daffodil/newsletter` in action!

libs/newsletter/guides/drivers.md

@@ -1,12 +1,14 @@
 # Drivers
 
-## InMemory Driver
+## In-memory web API
+The in-memory driver is for rapid development without the need to set up a magento/shopify/etc backend. It will mock out the submission of a newsletter subscription and operate like a functional database.
 
-The In-Memory driver is for rapid development without the need to set up a magento/shopify/etc backend. It will mock out the submission of a newsletter subscription and operate like a functional database.
+To set up in the root component:
+1. Import `DaffNewsletterInMemoryDriverModule` from `@daffodil/newsletter/testing`
+2. Import `HttpClientInMemoryWebApiModule` from `angular-in-memory-web-api`
+3. Include `DaffContactInMemoryDriverModule.forRoot()` and `HttpClientInMemoryWebApiModule` in the imports section.
 
-To set up, inside of your `app.module` make sure to include the `DaffNewsletterInMemoryDriverModule.forRoot()` inside of your imports section, as well as to import the `DaffNewsletterInMemoryDriverModule` from the `@daffodil/newsletter/testing` library and the `HttpClientInMemoryWebApiModule` from `angular-in-memory-web-api`.
-
-```typescript
+```ts
 import { HttpClientInMemoryWebApiModule } from "angular-in-memory-web-api";
 import { DaffNewsletterInMemoryDriverModule } from '@daffodil/newsletter/testing';
 
@@ -19,6 +21,9 @@ import { DaffNewsletterInMemoryDriverModule } from '@daffodil/newsletter/testing
 export class AppModule {}
 ```
 
-Now your `DaffNewsletter` implementation will have access to the In-Memory Driver to use while developing.
+Now your `@daffodil/newsletter` implementation will have access to the in-memory driver to use while developing.
+
+> Note: It is important to only have one driver set up at a time in the root component. To set up a driver configuration to make switching between different backend drivers simple, follow the [advanced setup guide](). <!-- later on this can link to a guide about setting up a config file for multiple drivers like demo -->
 
-> It is important to note to only have one driver set up in your App.Module at a time. To set up a driver configuration to make switching between different backend drivers simple, follow the [advanced setup guide](). <!-- later on this can link to a guide about setting up a config file for multiple drivers like demo -->
+## Hubspot
+<!-- need docs>

libs/newsletter/guides/usage.md

@@ -0,0 +1,97 @@
+# Usage
+`@daffodil/newsletter` provides a `DaffNewsletterFacade` that centralizes the complexities of the library into one place. It manages the process of sending newsletter subscriptions to your application's backend and can also be used to build your UI with behaviors common to a newsletter.
+
+## DaffNewsletterFacade
+To inject the newsletter facade inside your component, include an instance of `DaffNewsletterFacade` in the constructor.
+
+```ts
+export class NewsletterComponent {
+  constructor(public newsletterFacade: DaffNewsletterFacade) {}
+}
+```
+
+Once `DaffNewsletterFacade` has been set up in your component, it can be used to send off your newsletter data.
+
+To do so, the facade will dispatch an action of type `DaffNewsletterSubscribe<T>()` with `T` being the type of submission your 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.
+
+```ts
+import {
+  DaffNewsletterSubscribe,
+  DaffNewsletterSubmission,
+  DaffNewsletterFacade
+} from '@daffodil/newsletter';
+
+export class NewsletterComponent implements OnInit {
+  constructor(public newsletterFacade: DaffNewsletterFacade) {}
+
+  ngOnInit() {
+    success$: Observable<boolean> = this.newsletterFacade.success$;
+    error$: Observable<string> = this.newsletterFacade.error$;
+    loading$: Observable<boolean> = this.newsletterFacade.loading$;
+  }
+
+  email = '[email protected]';
+
+  submitData() {
+    this.newsletterFacade.dispatch(new DaffNewsletterSubscribe<DaffNewsletterSubmission>(this.email));
+  }
+}
+```
+
+> In this example, three observable streams are assigned from `newsletterFacade`. Then when `submitData` is called, the `newsletterFacade` will call its `dispatch` function which will send your data off to the backend and update the three observable streams.
+
+## DaffNewsletterSubmission
+`DaffNewsletterSubmission` is the default object that holds your subscription data and gets sent to your application's backend. It's simple and represents the baseline information needed in a subscription. It also serves as an out-of-the-box payload for submitting a newsletter subscription. It only contains a value of `email`.
+
+```ts
+export interface DaffNewsletterSubmission {
+  email: string;
+}
+```
+
+To learn how to customize your submission, read the customizing submission data guide below.
+
+### Customizing submission data
+Whenever you are setting up your newsletter feature within your application, you must decide what information is important for your user to include for the subscription. This section will walk you through on how to include your desired newsletter payload when a user submits their subscription using `@daffodil/newsletter`.
+
+### Creating your own submission object
+To customize `@daffodil/newsletter` to use your custom payload when sending a submission, you must define an object that implements the `DaffNewsletterSubmission`. The `DaffNewsletterSubmission` only contains one variable of `email` to be used as a standard template for the Newsletter library, so it must be included in your defined class.
+
+Here is an example of creating your own payload object that implements `DaffNewsletterSubscription`.
+
+```typescript
+import { DaffNewsletterSubmission } from '@daffodil/newsletter';
+
+export class MyNewsletterSubmission implements DaffNewsletterSubmission {
+  email: string;
+  name: string;
+  address: string;
+}
+```
+
+### Utilizing your payload
+After customizing the payload, you can dispatch a `DaffNewsletterSubscribe` with your updated payload via the `DaffNewsletterFacade`'s `dispatch` method. Be sure to type the generic `DaffNewsletterSubscribe<MyNewsletterSubmission>` in order to get proper type safety.
+
+```ts
+import {
+  DaffNewsletterSubscribe,
+  DaffNewsletterSubmission,
+  DaffNewsletterFacade
+} from '@daffodil/newsletter';
+
+export class NewsletterComponent {
+  constructor(public newsletterFacade: DaffNewsletterFacade) {}
+
+  dataToSubmit: MyNewsletterSubmission = {
+    email = "[email protected]",
+    name = "John Doe",
+    address= "1800 John Doe's street" 
+  }
+
+  submitData() {
+    this.newsletterFacade.dispatch(new DaffNewsletterSubscribe<MyNewsletterSubmission>(this.dataToSubmit));
+  }
+}
+```
+
+> Creating your own payload is not required. It's also fine to use the base `DaffNewsletterSubmission`.