Inviting client members while creating clients

app/controllers/internal_api/v1/clients_controller.rb

@@ -9,12 +9,21 @@ def index
 
   def create
     authorize Client
-    ActiveRecord::Base.transaction do
-      client = Client.create!(client_params)
-      user = User.find_by!(email: params[:client][:email])
-      client_member = current_company.client_members.create!(client:, user:)
-      render :create, locals: { client:, address: client.current_address }
-    end
+    client = Client.create!(client_params)
+    render :create, locals: { client:, address: client.current_address }
+  end
+
+  def add_client_contact
+    authorize client
+    invitation_service = Invitations::ClientInvitationService.new(
+      params,
+      current_company,
+      current_user,
+      client
+    )
+
+    invitations = invitation_service.process
+    render json: { notice: "Invitation sent successfully." }, status: :ok
   end
 
   def show
@@ -25,7 +34,8 @@ def show
              project_details: client.project_details(params[:time_frame]),
              total_minutes: client.total_hours_logged(params[:time_frame]),
              overdue_outstanding_amount: client.client_overdue_and_outstanding_calculation,
-             invoices: client.invoices
+             invoices: client.invoices,
+             client_members: client.invitations
            },
       status: :ok
   end

app/javascript/src/apis/clients.ts

@@ -15,6 +15,9 @@ const destroy = async id => axios.delete(`${path}/${id}`);
 const sendPaymentReminder = async (id, payload) =>
   axios.post(`${path}/${id}/send_payment_reminder`, payload);
 
+const addClientContact = async (id, payload) =>
+  axios.post(`${path}/${id}/add_client_contact`, payload);
+
 const invoices = async (query = "") =>
   axios.get(query ? `${path}/invoices?${query}` : `${path}/invoices`);
 
@@ -26,6 +29,7 @@ const clientApi = {
   create,
   invoices,
   sendPaymentReminder,
+  addClientContact,
 };
 
 export default clientApi;

app/javascript/src/common/CustomAdvanceInput/index.tsx

@@ -14,6 +14,7 @@ type CustomAdvanceInputProps = {
   inputBoxClassName?: string;
   labelClassName?: string;
   onClick?: React.MouseEventHandler<any>;
+  onBlur?: React.FocusEventHandler<any>;
 };
 
 const getDefaultInputBoxClassName = focused =>
@@ -34,6 +35,7 @@ export const CustomAdvanceInput = ({
   inputBoxClassName,
   labelClassName,
   onClick,
+  onBlur,
 }: CustomAdvanceInputProps) => {
   const inputRef = useRef(null);
   const [focused, setFocused] = useState<boolean>(false);
@@ -57,6 +59,7 @@ export const CustomAdvanceInput = ({
       <div
         className={classNames(defaultInputBoxClassName, inputBoxClassName)}
         id={id}
+        onBlur={onBlur}
         onClick={onClick}
       >
         {value}

app/javascript/src/components/Clients/ClientForm/formValidationSchema.ts

@@ -9,7 +9,6 @@ export const clientSchema = Yup.object().shape({
   name: Yup.string()
     .required("Name cannot be blank")
     .max(30, "Maximum 30 characters are allowed"),
-  email: Yup.string().required("Email cannot be blank"),
   phone: Yup.string()
     .required("Business phone number cannot be blank")
     .matches(phoneRegExp, "Please enter a valid business phone number"),

app/javascript/src/components/Clients/ClientForm/index.tsx

@@ -31,7 +31,6 @@ const ClientForm = ({
   submitting,
   setSubmitting,
   fetchDetails,
-  usersWithClientRole,
 }: IClientForm) => {
   const [fileUploadError, setFileUploadError] = useState<string>("");
   const [countries, setCountries] = useState([]);
@@ -114,8 +113,7 @@ const ClientForm = ({
       onSubmit={handleSubmit}
     >
       {(props: FormikProps<FormValues>) => {
-        const { touched, errors, setFieldValue, values, setFieldTouched } =
-          props;
+        const { touched, errors, setFieldValue, values } = props;
 
         return (
           <Form>
@@ -153,24 +151,6 @@ const ClientForm = ({
                 fieldTouched={touched.name}
               />
             </div>
-            <div className="mt-4">
-              <CustomReactSelect
-                handleOnChange={email => setFieldValue("email", email.value)}
-                id="email"
-                label="Email"
-                name="email"
-                value={{ label: values.email, value: values.email }}
-                options={usersWithClientRole.map(user => ({
-                  value: user.email,
-                  label: user.email,
-                }))}
-                onBlur={() => setFieldTouched("email", true)}
-              />
-              <InputErrors
-                fieldErrors={errors.email?.value}
-                fieldTouched={touched.email}
-              />
-            </div>
             <div className="mt-4">
               <div className="field relative">
                 <div className="flex flex-col">
@@ -330,15 +310,10 @@ interface IClientForm {
   submitting: boolean;
   setSubmitting: any;
   fetchDetails?: any;
-  usersWithClientRole: any;
 }
 
 interface FormValues {
   name: string;
-  email: {
-    value: string;
-    label: string;
-  };
   phone: string;
   address1: string;
   address2: string;

app/javascript/src/components/Clients/ClientForm/utils.ts

@@ -7,17 +7,12 @@ export const formatFormData = (
   clientLogoUrl
 ) => {
   formData.append("client[name]", values.name);
-  formData.append("client[email]", values.email);
   formData.append("client[phone]", values.phone);
 
   if (!isNewForm) {
     formData.append("client[addresses_attributes[0][id]]", client.address.id);
   }
 
-  if (!isNewForm && values.email !== client.email) {
-    formData.append("client[prev_email]", client.email);
-  }
-
   formData.append(
     "client[addresses_attributes[0][address_line_1]]",
     values.address1
@@ -58,7 +53,6 @@ export const formatFormData = (
 export const disableBtn = (values, errors, submitting) => {
   if (
     errors.name ||
-    errors.email ||
     errors.phone ||
     errors.address1 ||
     errors.country ||
@@ -72,7 +66,6 @@ export const disableBtn = (values, errors, submitting) => {
 
   if (
     values.name &&
-    values.email &&
     values.phone &&
     values.address1 &&
     values.country &&

app/javascript/src/components/Clients/Details/Header.tsx

@@ -13,10 +13,11 @@ import {
   ReminderIcon,
 } from "miruIcons";
 import { useNavigate } from "react-router-dom";
-import { MobileMoreOptions, Modal } from "StyledComponents";
+import { Badge, MobileMoreOptions, Modal } from "StyledComponents";
 
 import { useUserContext } from "context/UserContext";
 
+import AddContacts from "../Modals/AddContacts";
 import DeleteClient from "../Modals/DeleteClient";
 import EditClient from "../Modals/EditClient";
 
@@ -25,14 +26,24 @@ const Header = ({
   setShowProjectModal,
   fetchDetails,
   setSendPaymentReminder,
+  contactDetails,
 }) => {
   const [isHeaderMenuVisible, setIsHeaderMenuVisible] =
     useState<boolean>(false);
   const [isClientOpen, setIsClientOpen] = useState<boolean>(false);
   const [showDeleteDialog, setShowDeleteDialog] = useState<boolean>(false);
   const [showEditDialog, setShowEditDialog] = useState<boolean>(false);
   const [showMobileModal, setShowMobileModal] = useState<boolean>(false);
+  const [showContactModal, setShowContactModal] = useState<boolean>(false);
 
+  const acceptedEmails = contactDetails.filter(
+    contact => contact.accepted_at !== null
+  );
+
+  const pendingInvitationEmails = contactDetails.filter(
+    contact => contact.accepted_at === null
+  );
+  const sortedEmails = [...acceptedEmails, ...pendingInvitationEmails];
   const navigate = useNavigate();
   const menuRef = useRef();
   const { isDesktop } = useUserContext();
@@ -116,6 +127,17 @@ const Header = ({
                   <span className="ml-3">Payment Reminder</span>
                 </button>
               </li>
+              <li
+                onClick={() => {
+                  setShowContactModal(true);
+                  setIsHeaderMenuVisible(false);
+                }}
+              >
+                <button className="menuButton__list-item">
+                  <ReminderIcon id="reminderIcon" size={16} />
+                  <span className="ml-3">Add Contacts</span>
+                </button>
+              </li>
               <li onClick={handleDelete}>
                 <button className="menuButton__list-item text-miru-red-400">
                   <DeleteIcon color="#E04646" size={16} weight="bold" />
@@ -133,7 +155,18 @@ const Header = ({
             <div className="mt-4 text-base">
               <p className="font-semibold">Email ID(s)</p>
               <p className="mt-1 text-miru-dark-purple-400">
-                {clientDetails.email}
+                {sortedEmails.map((contact, index) => (
+                  <p className="mb-2" key={index}>
+                    {contact.accepted_at !== null ? (
+                      contact.recipient_email
+                    ) : (
+                      <div className="flex justify-between">
+                        {contact.recipient_email}
+                        <Badge text="Pending Invitation" />
+                      </div>
+                    )}
+                  </p>
+                ))}
               </p>
             </div>
             <div className="mt-4 text-base">
@@ -169,6 +202,13 @@ const Header = ({
           showEditDialog={showEditDialog}
         />
       )}
+      {showContactModal && (
+        <AddContacts
+          client={clientDetails}
+          setShowContactModal={setShowContactModal}
+          showContactModal={showContactModal}
+        />
+      )}
       {showMobileModal && (
         <MobileMoreOptions
           setVisibilty={setShowMobileModal}

app/javascript/src/components/Clients/Details/index.tsx

@@ -31,13 +31,13 @@ const ClientDetails = ({ isAdminUser }) => {
   const [projectDetails, setProjectDetails] = useState<any>();
   const [totalMinutes, setTotalMinutes] = useState(null);
   const [clientDetails, setClientDetails] = useState<any>({});
+  const [contactDetails, setContactDetails] = useState<any>({});
   const [editProjectData, setEditProjectData] = useState<any>({});
   const [showProjectModal, setShowProjectModal] = useState<boolean>(false);
   const [loading, setLoading] = useState(true);
   const [overdueOutstandingAmount, setOverdueOutstandingAmount] =
     useState<any>(null);
   const [clientInvoices, setClientInvoices] = useState<any[]>([]);
-
   const [sendPaymentReminder, setSendPaymentReminder] =
     useState<boolean>(false);
 
@@ -75,6 +75,7 @@ const ClientDetails = ({ isAdminUser }) => {
     try {
       const res = await clientApi.show(params.clientId, "?time_frame=week");
       const sanitized = unmapClientDetails(res);
+      setContactDetails(sanitized.contactDetails);
       setClientDetails(sanitized.clientDetails);
       setProjectDetails(sanitized.projectDetails);
       setTotalMinutes(sanitized.totalMinutes);
@@ -132,6 +133,7 @@ const ClientDetails = ({ isAdminUser }) => {
     <>
       <Header
         clientDetails={clientDetails}
+        contactDetails={contactDetails}
         fetchDetails={fetchProjectList}
         setSendPaymentReminder={setSendPaymentReminder}
         setShowProjectModal={setShowProjectModal}