import { storiesOf } from "@storybook/react" ; import * as React from "react" ; import styled from "styled-components" ; import { EmailSignup } from "./EmailSignup" ; import { EmailSignupSuccess } from "./EmailSignupSuccess" ; import { addToMailingList } from "@joincivil/utils" ; const StyledDiv = styled . div `
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 400px;
` ; const Container = ( { children } ) => < StyledDiv > { children } < /StyledDiv>; let email ; function onChange ( name , value ) { if ( name === "EmailSignupTextInput" ) { email = value ; } } async function onSubmit ( ) { console . log ( "On Submit" , email ) ; try { await addToMailingList ( email , "5353193" ) ; } catch ( err ) { console . error ( "Error adding to mailing list:" , { err } ) ; } } storiesOf ( "Registry / Mailing List Signup Component" , module ) . add ( "Mailing List Signup Signup" , ( ) => { return ( < Container > < EmailSignup onChange = { onChange } onSubmit = { onSubmit } / > < /Container>); } ) . add ( "Mailing List Signup Success" , ( ) => { return ( < Container > < EmailSignupSuccess /> < /Container>); } ) ;