Fixed profile editing issue, modified profile object structure, intro…

…duced new method for retrieving current selected profile.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-autofill",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "private": true,
   "dependencies": {
     "react": "^16.11.0",

public/manifest.json

@@ -2,7 +2,7 @@
   "manifest_version": 2,
   "name": "React Autofill",
   "author": "Arevi",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "description": "Automate the filling of checkout forms, increasing your checkout speeds.",
   "browser_action": {
     "default_popup": "index.html",

public/sites/shopify.js

@@ -47,17 +47,17 @@ const identifyStep = url => {
 //fieldDetails object whas a "key" of the field and a "value" of what the field should contain from the profile
 // Then iterates over the fields selecting them from the DOM and filling the fields with user options
 const fillShipping = profile => {
-  let shippingDetails = profile.shipping;
+  let billingDetails = profile.billing;
 
   const fieldDetails = {
-    checkout_email: shippingDetails.email,
-    checkout_shipping_address_first_name: shippingDetails.first_name,
-    checkout_shipping_address_last_name: shippingDetails.last_name,
-    checkout_shipping_address_address1: shippingDetails.address,
-    checkout_shipping_address_address2: shippingDetails.apartment,
-    checkout_shipping_address_city: shippingDetails.city,
-    checkout_shipping_address_zip: shippingDetails.zipcode,
-    checkout_shipping_address_phone: shippingDetails.phone
+    checkout_email: billingDetails.email,
+    checkout_shipping_address_first_name: billingDetails.first_name,
+    checkout_shipping_address_last_name: billingDetails.last_name,
+    checkout_shipping_address_address1: billingDetails.address,
+    checkout_shipping_address_address2: billingDetails.apartment,
+    checkout_shipping_address_city: billingDetails.city,
+    checkout_shipping_address_zip: billingDetails.zipcode,
+    checkout_shipping_address_phone: billingDetails.phone
   };
 
   const fields = Object.keys(fieldDetails);
@@ -78,9 +78,9 @@ const fillShipping = profile => {
   });
 
   document.getElementById('checkout_shipping_address_country').value =
-    shippingDetails.country;
+    billingDetails.country;
   document.getElementById('checkout_shipping_address_province').value =
-    shippingDetails.state;
+    billingDetails.state;
 
   if (options.shopify.navigateSteps) {
     clickNextStep();

public/sites/stripe.js

@@ -29,7 +29,6 @@ const setupTriggers = (options, profile) => {
 
 //Automatically fill out the standard stripe iframe with the users supplied information
 const fillBilling = profile => {
-  console.log('Running');
   let billingDetails = profile.billing;
 
   const optionalFields = {

src/Components/Pages/Profiles/ProfileDetail/ProfileDetail.jsx

@@ -1,29 +1,9 @@
 import React, { useEffect, useState } from 'react';
-import { useDispatch } from 'react-redux';
-import {
-  addProfile,
-  removeProfile,
-  editProfile
-} from '../../../../actions/profileActions';
-
 import './profiledetail.css';
 
 function ProfileDetail(props) {
-  const dispatch = useDispatch();
   const [profile, setProfile] = useState({
     name: '',
-    shipping: {
-      email: '',
-      first_name: '',
-      last_name: '',
-      address: '',
-      apartment: '',
-      city: '',
-      country: '',
-      state: '',
-      zipcode: '',
-      phone: ''
-    },
     billing: {
       first_name: '',
       last_name: '',
@@ -45,7 +25,7 @@ function ProfileDetail(props) {
 
   useEffect(() => {
     if (props.activeEdit) {
-      setProfile(props.activeEdit);
+      setProfile(JSON.parse(JSON.stringify(props.activeEdit)));
     }
   }, [props.activeEdit]);
 
@@ -60,60 +40,58 @@ function ProfileDetail(props) {
     setProfile(updatedProfile);
   };
 
-  const addOrUpdateProfile = () => {
-    let matches = props.allProfiles.filter(item => item.name === profile.name);
+  const addUpdateProfile = () => {
+    props.updateProfile(profile);
+  };
 
-    if (matches.length === 0) {
-      dispatch(addProfile(profile));
-    } else {
-      dispatch(editProfile(profile));
-    }
+  const removeProfile = () => {
+    props.deleteProfile(profile);
   };
 
   return (
     <div id='profile-detail'>
-      <h2 className='border-label'>Shipping Details</h2>
+      <h2 className='border-label'>billing Details</h2>
       <div className='wrapper'>
         <div className='col-1'>
           <label htmlFor='email'>Email</label>
           <input
             type='text'
             name='email'
             autoComplete='email'
-            value={profile ? profile.shipping.email : ''}
-            onChange={e => modifyProfile(e, 'email', 'shipping')}
+            value={profile ? profile.billing.email : ''}
+            onChange={e => modifyProfile(e, 'email', 'billing')}
           />
           <label htmlFor='phoneNumber'>Phone</label>
           <input
             type='text'
             name='phoneNumber'
             autoComplete='tel'
-            value={profile ? profile.shipping.phone : ''}
-            onChange={e => modifyProfile(e, 'phone', 'shipping')}
+            value={profile ? profile.billing.phone : ''}
+            onChange={e => modifyProfile(e, 'phone', 'billing')}
           />
           <label htmlFor='firstName'>First Name</label>
           <input
             type='text'
             name='firstName'
             autoComplete='given-name'
-            value={profile ? profile.shipping.first_name : ''}
-            onChange={e => modifyProfile(e, 'first_name', 'shipping')}
+            value={profile ? profile.billing.first_name : ''}
+            onChange={e => modifyProfile(e, 'first_name', 'billing')}
           />
           <label htmlFor='lastName'>Last Name</label>
           <input
             type='text'
             name='lastName'
             autoComplete='family-name'
-            value={profile ? profile.shipping.last_name : ''}
-            onChange={e => modifyProfile(e, 'last_name', 'shipping')}
+            value={profile ? profile.billing.last_name : ''}
+            onChange={e => modifyProfile(e, 'last_name', 'billing')}
           />
           <label htmlFor='country'>Country</label>
           <input
             type='text'
             name='country'
             autoComplete='country-name'
-            value={profile ? profile.shipping.country : ''}
-            onChange={e => modifyProfile(e, 'country', 'shipping')}
+            value={profile ? profile.billing.country : ''}
+            onChange={e => modifyProfile(e, 'country', 'billing')}
           />
         </div>
         <div className='col-2'>
@@ -122,40 +100,40 @@ function ProfileDetail(props) {
             type='text'
             name='address'
             autoComplete='street-address'
-            value={profile ? profile.shipping.address : ''}
-            onChange={e => modifyProfile(e, 'address', 'shipping')}
+            value={profile ? profile.billing.address : ''}
+            onChange={e => modifyProfile(e, 'address', 'billing')}
           />
           <label htmlFor='apartment'>Apartment</label>
           <input
             type='text'
             name='apartment'
             autoComplete='address-line1'
-            value={profile ? profile.shipping.apartment : ''}
-            onChange={e => modifyProfile(e, 'apartment', 'shipping')}
+            value={profile ? profile.billing.apartment : ''}
+            onChange={e => modifyProfile(e, 'apartment', 'billing')}
           />
           <label htmlFor='city'>City</label>
           <input
             type='text'
             name='city'
             autoComplete='address-level2'
-            value={profile ? profile.shipping.city : ''}
-            onChange={e => modifyProfile(e, 'city', 'shipping')}
+            value={profile ? profile.billing.city : ''}
+            onChange={e => modifyProfile(e, 'city', 'billing')}
           />
           <label htmlFor='state'>State</label>
           <input
             type='text'
             name='state'
             autoComplete='address-level1'
-            value={profile ? profile.shipping.state : ''}
-            onChange={e => modifyProfile(e, 'state', 'shipping')}
+            value={profile ? profile.billing.state : ''}
+            onChange={e => modifyProfile(e, 'state', 'billing')}
           />
           <label htmlFor='zipcode'>Zip Code</label>
           <input
             type='text'
             name='zipcode'
             autoComplete='postal-code'
-            value={profile ? profile.shipping.zipcode : ''}
-            onChange={e => modifyProfile(e, 'zipcode', 'shipping')}
+            value={profile ? profile.billing.zipcode : ''}
+            onChange={e => modifyProfile(e, 'zipcode', 'billing')}
           />
         </div>
       </div>
@@ -176,7 +154,7 @@ function ProfileDetail(props) {
             id='cardTypeSelect'
             autoComplete='cc-type'
             value={profile ? profile.billing.cardType : 'Visa'}
-            onChange={e => modifyProfile(e, 'billing', 'cardType')}
+            onChange={e => modifyProfile(e, 'cardType', 'billing')}
           >
             <option value='AMEX'>American Express</option>
             <option value='Discover'>Discover</option>
@@ -261,13 +239,10 @@ function ProfileDetail(props) {
           />
         </div>
         <div className='col-2' id='profileControls'>
-          <button className='btn save' onClick={addOrUpdateProfile}>
+          <button className='btn save' onClick={() => addUpdateProfile()}>
             Save
           </button>
-          <button
-            className='btn delete'
-            onClick={() => dispatch(removeProfile(profile))}
-          >
+          <button className='btn delete' onClick={() => removeProfile()}>
             Delete
           </button>
         </div>

src/Components/Pages/Profiles/Profiles.jsx

@@ -1,33 +1,52 @@
 import React, { useEffect, useState } from 'react';
-import { useSelector } from 'react-redux';
+import { useSelector, useDispatch } from 'react-redux';
 import { saveProfiles } from '../../../Utils/storageHandler';
+import {
+  addProfile,
+  editProfile,
+  removeProfile
+} from '../../../actions/profileActions';
 import Selector from '../../Selector/Selector';
 import ProfileDetail from './ProfileDetail/ProfileDetail';
 import './Profiles.css';
 
 function Profiles(props) {
+  const dispatch = useDispatch();
   const profiles = useSelector(state => state.profiles);
   const [editingProfile, setEditingProfile] = useState(profiles[0]);
 
   useEffect(() => {
     saveProfiles(profiles);
   }, [profiles]);
 
-  useEffect(() => {}, [editingProfile]);
-
   const profileSelected = profileName => {
     let profile = profiles.filter(profile => profile.name === profileName)[0];
     setEditingProfile({ ...profile });
   };
 
+  const addOrUpdateProfile = profile => {
+    let matches = profiles.filter(item => item.name === profile.name);
+
+    if (matches.length === 0) {
+      dispatch(addProfile(profile));
+    } else {
+      dispatch(editProfile(profile));
+    }
+  };
+
   return (
     <div id='profile-area' className='page'>
       <Selector
         text='Edit Profile'
         selection={value => profileSelected(value)}
         items={profiles.map(profile => profile.name)}
       />
-      <ProfileDetail activeEdit={editingProfile} allProfiles={profiles} />
+      <ProfileDetail
+        activeEdit={editingProfile}
+        allProfiles={profiles}
+        updateProfile={profile => addOrUpdateProfile(profile)}
+        deleteProfile={profile => dispatch(removeProfile(profile))}
+      />
     </div>
   );
 }

src/Utils/Defaults.js

@@ -26,18 +26,6 @@ const getTestProfile = () => {
   return {
     id: 0,
     name: 'Test Profile',
-    shipping: {
-      email: '[email protected]',
-      first_name: 'Test',
-      last_name: 'Profile',
-      address: '123 Main Street',
-      apartment: 'Apartment 1',
-      city: 'New York',
-      country: 'United States',
-      state: 'NY',
-      zipcode: '10001',
-      phone: '1234567890'
-    },
     billing: {
       first_name: 'Test',
       last_name: 'Profile',

src/Utils/storageHandler.js

@@ -25,3 +25,7 @@ export const saveOptions = options => {
 export const setCurrentProfile = profile => {
   chrome.storage.local.set({ selectedProfile: profile });
 };
+
+export const getCurrentProfile = () => {
+  return chrome.storage.local.get(['selectedProfile']);
+};