Add customizable emailInputPlaceholder (#20)

components/ChatFooter.tsx

@@ -4,11 +4,13 @@ import SendIcon from './SendIcon';
 
 const ChatFooter = ({
   placeholder,
+  emailInputPlaceholder,
   isSending,
   shouldRequireEmail,
   onSendMessage,
 }: {
   placeholder?: string;
+  emailInputPlaceholder?: string;
   isSending: boolean;
   shouldRequireEmail?: boolean;
   onSendMessage: (message: string, email?: string) => Promise<void>;
@@ -58,7 +60,7 @@ const ChatFooter = ({
           <Box py={1} sx={{borderBottom: '1px solid rgb(230, 230, 230)'}}>
             <Input
               sx={{variant: 'styles.input.transparent'}}
-              placeholder="Enter your email"
+              placeholder={emailInputPlaceholder}
               value={email}
               onChange={handleEmailChange}
             />

components/ChatWindow.tsx

@@ -29,6 +29,7 @@ type Props = {
   baseUrl?: string;
   greeting?: string;
   newMessagePlaceholder?: string;
+  emailInputPlaceholder?: string;
   shouldRequireEmail?: boolean;
   isMobile?: boolean;
   customer?: API.CustomerMetadata;
@@ -834,6 +835,7 @@ class ChatWindow extends React.Component<Props, State> {
       title = 'Welcome!',
       subtitle = 'How can we help you?',
       newMessagePlaceholder = 'Start typing...',
+      emailInputPlaceholder = 'Enter your email',
       agentAvailableText = "We're online right now!",
       agentUnavailableText = "We're away at the moment.",
       companyName,
@@ -969,6 +971,7 @@ class ChatWindow extends React.Component<Props, State> {
           <ChatFooter
             key={isOpen ? 1 : 0}
             placeholder={newMessagePlaceholder}
+            emailInputPlaceholder={emailInputPlaceholder}
             isSending={isSending}
             shouldRequireEmail={shouldAskForEmail}
             onSendMessage={this.handleSendMessage}

components/Widget.tsx

@@ -16,6 +16,7 @@ type Config = {
   greeting?: string;
   customerId?: string;
   newMessagePlaceholder?: string;
+  emailInputPlaceholder?: string;
   companyName?: string;
   agentAvailableText?: string;
   agentUnavailableText?: string;
@@ -140,6 +141,7 @@ class Wrapper extends React.Component<Props, State> {
       title = 'Welcome!',
       subtitle = 'How can we help you?',
       newMessagePlaceholder = 'Start typing...',
+      emailInputPlaceholder = 'Enter your email',
       primaryColor = '1890ff',
       baseUrl = 'https://app.papercups.io',
       requireEmailUpfront = '0',
@@ -167,6 +169,7 @@ class Wrapper extends React.Component<Props, State> {
           greeting={greeting}
           companyName={companyName}
           newMessagePlaceholder={newMessagePlaceholder}
+          emailInputPlaceholder={emailInputPlaceholder}
           agentAvailableText={agentAvailableText}
           agentUnavailableText={agentUnavailableText}
           showAgentAvailability={shouldHideAvailability}