feat: job edit (#4907)

Author: capJavert

packages/shared/package.json

@@ -102,6 +102,7 @@
   "dependencies": {
     "@growthbook/growthbook": "https://gitpkg.now.sh/dailydotdev/growthbook/packages/sdk-js?e354fcf41b2b3f67590294a0e2cdfb56044d7a1e",
     "@growthbook/growthbook-react": "^0.17.0",
+    "@hookform/resolvers": "5.2.2",
     "@kickass-coderz/react": "^0.0.4",
     "@marsidev/react-turnstile": "^1.1.0",
     "@paddle/paddle-js": "1.4.0",
@@ -118,6 +119,7 @@
     "lottie-react": "^2.4.1",
     "node-fetch": "^2.6.6",
     "parsecurrency": "^1.1.1",
+    "react-hook-form": "7.54.2",
     "react-markdown": "^8.0.7",
     "react-onesignal": "^3.0.1",
     "react-syntax-highlighter": "^15.5.0",
@@ -126,7 +128,8 @@
     "tippy.js": "^6.3.7",
     "uuid": "^8.3.2",
     "web-vitals": "^3.5.0",
-    "webextension-polyfill": "^0.12.0"
+    "webextension-polyfill": "^0.12.0",
+    "zod": "4.1.8"
   },
   "sideEffects": [
     "*.css"

packages/shared/src/components/accordion/index.tsx

@@ -12,6 +12,7 @@ interface AccordionProps {
   className?: {
     button?: string;
   };
+  disabled?: boolean;
 }
 
 export function Accordion({
@@ -20,12 +21,19 @@ export function Accordion({
   onClick,
   initiallyOpen = false,
   className,
+  disabled = false,
 }: AccordionProps): ReactElement {
   const [isOpen, setIsOpen] = useState(initiallyOpen);
   const id = useId();
   const contentId = `accordion-content-${id}`;
 
+  const isOpenAndEnabled = isOpen && !disabled;
+
   const handleClick: MouseEventHandler<HTMLButtonElement> = (e) => {
+    if (disabled) {
+      return;
+    }
+
     onClick?.(e);
 
     setIsOpen((prev) => !prev);
@@ -35,9 +43,10 @@ export function Accordion({
     <div className="flex w-full flex-col">
       <Button
         aria-controls={contentId}
-        aria-expanded={isOpen}
+        aria-expanded={isOpenAndEnabled}
         className={classNames(
           'flex w-full flex-row gap-4 !px-0 text-left',
+          disabled && '!cursor-default',
           className?.button,
         )}
         type="button"
@@ -46,22 +55,24 @@ export function Accordion({
         <div className="min-w-0 flex-1">{title}</div>
         <ArrowIcon
           className={classNames('transition-transform ease-in-out', {
-            'rotate-180': !isOpen,
+            'rotate-180': !isOpenAndEnabled,
           })}
         />
       </Button>
       <div
-        aria-hidden={!isOpen}
+        aria-hidden={!isOpenAndEnabled}
         className={classNames(
           'flex h-full min-h-0 w-full flex-col overflow-y-hidden break-words transition-[max-height,margin] duration-300 ease-in-out',
-          isOpen ? 'mt-3 max-h-full' : 'max-h-0',
+          isOpenAndEnabled ? 'mt-3 max-h-full' : 'max-h-0',
         )}
         id={contentId}
       >
         <div
           className={classNames(
             'transition-transform duration-150 ease-in-out',
-            isOpen ? 'translate-y-0 opacity-100' : '-translate-y-2 opacity-0',
+            isOpenAndEnabled
+              ? 'translate-y-0 opacity-100'
+              : '-translate-y-2 opacity-0',
           )}
         >
           {children}

packages/shared/src/components/fields/Textarea.tsx

@@ -1,6 +1,6 @@
 import classNames from 'classnames';
-import type { ReactElement } from 'react';
-import React from 'react';
+import React, { forwardRef } from 'react';
+import type { ForwardedRef, ReactElement } from 'react';
 import styles from './TextField.module.css';
 import useInputFieldFunctions from '../../hooks/useInputFieldFunctions';
 import type { BaseFieldProps, FieldClassName } from './BaseFieldContainer';
@@ -10,28 +10,31 @@ import BaseFieldContainer, {
   InnerLabel,
 } from './BaseFieldContainer';
 
-function Textarea({
-  hint,
-  inputId,
-  saveHintSpace,
-  label,
-  value,
-  valueChanged,
-  valid,
-  validityChanged,
-  className = {},
-  placeholder,
-  readOnly,
-  isLocked,
-  disabled,
-  name,
-  maxLength = 100,
-  rows,
-  fieldType = 'primary',
-  ...props
-}: BaseFieldProps<HTMLTextAreaElement> & {
-  className?: FieldClassName;
-}): ReactElement {
+function Textarea(
+  {
+    hint,
+    inputId,
+    saveHintSpace,
+    label,
+    value,
+    valueChanged,
+    valid,
+    validityChanged,
+    className = {},
+    placeholder,
+    readOnly,
+    isLocked,
+    disabled,
+    name,
+    maxLength = 100,
+    rows,
+    fieldType = 'primary',
+    ...props
+  }: BaseFieldProps<HTMLTextAreaElement> & {
+    className?: FieldClassName;
+  },
+  ref: ForwardedRef<HTMLTextAreaElement>,
+): ReactElement {
   const {
     validInput,
     focused,
@@ -103,7 +106,16 @@ function Textarea({
         })}
         name={name}
         id={inputId}
-        ref={inputRef}
+        ref={(element) => {
+          inputRef.current = element;
+
+          if (typeof ref === 'function') {
+            ref(element);
+          } else if (ref) {
+            // eslint-disable-next-line no-param-reassign
+            ref.current = element;
+          }
+        }}
         onFocus={onFocus}
         onBlur={onBlur}
         onInput={onInput}
@@ -129,4 +141,4 @@ function Textarea({
   );
 }
 
-export default Textarea;
+export default forwardRef(Textarea);

packages/shared/src/components/modals/common.tsx

@@ -328,6 +328,12 @@ const SquadNotificationSettingsModal = dynamic(
     ),
 );
 
+const OpportunityEditModal = dynamic(() =>
+  import(
+    /* webpackChunkName: "opportunityEditModal" */ '../opportunity/OpportunityEditModal/OpportunityEditModal'
+  ).then((mod) => mod.OpportunityEditModal),
+);
+
 export const modals = {
   [LazyModal.SquadMember]: SquadMemberModal,
   [LazyModal.UpvotedPopup]: UpvotedPopupModal,
@@ -382,6 +388,7 @@ export const modals = {
   [LazyModal.OrganizationManageSeats]: OrganizationManageSeatsModal,
   [LazyModal.ActionSuccess]: ActionSuccessModal,
   [LazyModal.SquadNotificationSettings]: SquadNotificationSettingsModal,
+  [LazyModal.OpportunityEdit]: OpportunityEditModal,
 };
 
 type GetComponentProps<T> = T extends

packages/shared/src/components/modals/common/types.ts

@@ -78,6 +78,7 @@ export enum LazyModal {
   OrganizationManageSeats = 'organizationManageSeats',
   ActionSuccess = 'actionSuccess',
   SquadNotificationSettings = 'squadNotificationSettings',
+  OpportunityEdit = 'opportunityEdit',
 }
 
 export type ModalTabItem = {

packages/shared/src/components/opportunity/OpportunityEditButton.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import classNames from 'classnames';
+import type { AllowedTags, ButtonProps } from '../buttons/Button';
+import {
+  Button,
+  ButtonIconPosition,
+  ButtonSize,
+  ButtonVariant,
+} from '../buttons/Button';
+import { EditIcon } from '../icons';
+import { useOpportunityEditContext } from './OpportunityEditContext';
+
+export type OpportunityEditButtonProps = {
+  className?: string;
+  children?: React.ReactNode;
+} & ButtonProps<AllowedTags>;
+
+export const OpportunityEditButton = ({
+  className,
+  children = 'Edit',
+  icon = <EditIcon />,
+  iconPosition = ButtonIconPosition.Left,
+  variant = ButtonVariant.Float,
+  size = ButtonSize.Small,
+  ...rest
+}: OpportunityEditButtonProps) => {
+  const { canEdit } = useOpportunityEditContext();
+
+  if (!canEdit) {
+    return null;
+  }
+
+  return (
+    <Button
+      className={classNames('z-tooltip', className)}
+      type="button"
+      {...rest}
+      icon={icon}
+      iconPosition={iconPosition}
+      variant={variant}
+      size={size}
+    >
+      {children}
+    </Button>
+  );
+};

packages/shared/src/components/opportunity/OpportunityEditContext.tsx

@@ -0,0 +1,18 @@
+import { createContextProvider } from '@kickass-coderz/react';
+import type { ReactNode } from 'react';
+
+export type OpportunityEditContextProps = {
+  children: ReactNode;
+  canEdit: boolean;
+};
+
+const [OpportunityEditProvider, useOpportunityEditContext] =
+  createContextProvider((props: OpportunityEditContextProps) => {
+    const { canEdit } = props;
+
+    return {
+      canEdit,
+    };
+  });
+
+export { OpportunityEditProvider, useOpportunityEditContext };