Feature/fix ad copy input text name and add button props to state

src/components/AdCopyInput/AdCopyInput.tsx

@@ -28,7 +28,10 @@ export default function AdCopyInput({
   };
   return (
     <div className="promo-mt-3">
-      <label htmlFor="buttonText" className="promo-button-ad-copy-input-label">
+      <label
+        htmlFor="adCopyInputText"
+        className="promo-button-ad-copy-input-label"
+      >
         Description{' '}
         <span className="promo-button-ad-copy-input-label-inner">
           10-20 words
@@ -37,8 +40,8 @@ export default function AdCopyInput({
       <div className="promo-button-ad-copy-input-container">
         <input
           type="text"
-          name="buttonText"
-          id="buttonText"
+          name="adCopyInputText"
+          id="adCopyInputText"
           className="promo-button-ad-copy-input"
           defaultValue={adCopy}
           ref={adCopyInputRef}

src/index.tsx

@@ -14,6 +14,7 @@ import React, {
   useState,
   useRef,
   useEffect,
+  FormEvent,
 } from 'react';
 
 import { Dialog, Transition } from '@headlessui/react';
@@ -22,7 +23,7 @@ import {
   generateAccessToken,
   getOptions,
 } from '@tincre/promo-button-node';
-import { PromoOptions, Options } from './lib/types';
+import { PromoOptions, Options, ButtonFormSubmission } from './lib/types';
 import HowItWorks from './components/HowItWorks/HowItWorks';
 import PromoPay from './components/PromoPay/PromoPay';
 import DefaultAdDisplay from './components/DefaultAdDisplay/DefaultAdDisplay';
@@ -106,12 +107,12 @@ function PromoButton({
       ? 'promo-button-main group'
       : `promo-button-${shape} group`;
 
-  const submitCampaign = async (event: any) => {
+  const submitCampaign = async (event: FormEvent<ButtonFormSubmission>) => {
     try {
       event.preventDefault();
       if (!fileImage) throw Error('FILE upload is required');
       setIsSubmitting(true);
-      let targetLink = event.target.target.value;
+      let targetLink = event.currentTarget.elements.target.value;
       if (targetLink.substring(0, 8) !== 'https://') {
         if (!targetLink.includes('http://')) {
           targetLink = 'https://' + targetLink;
@@ -123,18 +124,24 @@ function PromoButton({
       }
       if (targetLinkError) setTargetLinkError(false);
       const data = {
-        target_link: event.target.target.value,
-        budget: event.target.budget.value,
+        target_link: event.currentTarget.elements.target.value,
+        budget: event.currentTarget.elements.budget.value,
         email: email,
         creative_uri: fileImage,
-        asset_title: event.target.adTitle.value || event.target.name.value, // TODO add additional inputs to backend
+        asset_title: event.currentTarget.elements.adTitle.value,
+        buttonText: event.currentTarget.elements.buttonText.value,
+        callToAction: event.currentTarget.elements.adCallToActionText.value,
+        copyOption1: event.currentTarget.elements.adCopyInputText.value,
       };
       if (typeof content?.setPromoData !== 'undefined') {
         content.setPromoData({
           target: data.target_link,
           budget: data.budget,
           creativeUri: fileImage,
-          adTitle: data.asset_title, // TODO add additional inputs
+          adTitle: data.asset_title,
+          buttonText: data.buttonText,
+          adCallToAction: data.callToAction,
+          adCopy: data.copyOption1,
         });
       }
       const response = await fetch(backend, {
@@ -165,15 +172,14 @@ function PromoButton({
         setFileImage(undefined);
       } else {
         setIsSubmitted(false);
-        setTargetLink(event.target.target.value);
-        setBudget(event.target.budget.value);
-        setAdTitle(event.target.adTitle.value || event.target.name.value);
-        setAdCopy(undefined);
-        setButtonText(undefined);
-        setCallToAction(undefined);
+        setTargetLink(event.currentTarget.elements.target.value);
+        setBudget(event.currentTarget.elements.budget.value);
+        setAdTitle(event.currentTarget.elements.adTitle.value);
+        setAdCopy(event.currentTarget.elements.adCopyInputText.value);
+        setButtonText(event.currentTarget.elements.buttonText.value);
+        setCallToAction(event.currentTarget.elements.adCallToActionText.value);
         setFileImage(undefined);
       }
-
       setIsSubmitting(false);
       setImageUploadError(false);
       setTargetLinkError(false);

src/lib/types.ts

@@ -46,3 +46,14 @@ export interface PromoOptions {
   inputPlaceholders?: InputPlaceholders;
   setPromoData?: Dispatch<InputValues | null>;
 }
+export interface ButtonFormElements extends HTMLFormControlsCollection {
+  target: HTMLInputElement;
+  budget: HTMLInputElement;
+  adTitle: HTMLInputElement;
+  buttonText: HTMLInputElement;
+  adCallToActionText: HTMLInputElement;
+  adCopyInputText: HTMLInputElement;
+}
+export interface ButtonFormSubmission extends HTMLFormElement {
+  readonly elements: ButtonFormElements;
+}