Merge pull request #2047 from daostack/dev

Sprint 28

src/pages/OldCommon/components/CommonDetailContainer/MembershipRequestModal/MembershipRequestCreating.tsx

@@ -9,7 +9,8 @@ import { createMemberAdmittanceProposal } from "../../../store/actions";
 import { IStageProps } from "./MembershipRequestModal";
 import { MembershipRequestStage } from "./constants";
 
-interface MembershipRequestCreatingProps extends IStageProps {
+interface MembershipRequestCreatingProps
+  extends Omit<IStageProps, "governance"> {
   shouldSkipCreation?: boolean;
 }
 

src/pages/OldCommon/components/CommonDetailContainer/MembershipRequestModal/MembershipRequestIntroduce.tsx

@@ -9,6 +9,7 @@ import { getScreenSize } from "@/shared/store/selectors";
 import { parseLinksForSubmission } from "@/shared/utils";
 import { IStageProps } from "./MembershipRequestModal";
 import { MembershipRequestStage } from "./constants";
+import { shouldShowPaymentStep, shouldShowRulesStep } from "./helpers";
 import { introduceStageSchema } from "./validationSchemas";
 import "./index.scss";
 
@@ -29,12 +30,16 @@ export default function MembershipRequestIntroduce(props: IStageProps) {
 
   const handleSubmit = useCallback<FormikConfig<FormValues>["onSubmit"]>(
     (values) => {
-      const areRulesSpecified =
-        governance && governance.unstructuredRules.length > 0;
-      const nextStage = areRulesSpecified
-        ? MembershipRequestStage.Rules
-        : MembershipRequestStage.Payment;
       const links = parseLinksForSubmission(values.links);
+      let nextStage: MembershipRequestStage;
+
+      if (shouldShowRulesStep(governance)) {
+        nextStage = MembershipRequestStage.Rules;
+      } else {
+        nextStage = shouldShowPaymentStep(governance)
+          ? MembershipRequestStage.Payment
+          : MembershipRequestStage.Creating;
+      }
 
       setUserData((nextUserData) => ({
         ...nextUserData,

src/pages/OldCommon/components/CommonDetailContainer/MembershipRequestModal/MembershipRequestModal.tsx

@@ -24,13 +24,14 @@ import MembershipRequestProgressBar from "./MembershipRequestProgressBar";
 import MembershipRequestRules from "./MembershipRequestRules";
 import MembershipRequestWelcome from "./MembershipRequestWelcome";
 import { MembershipRequestStage } from "./constants";
+import { getSteps } from "./helpers";
 import "./index.scss";
 
 export interface IStageProps {
   setUserData: Dispatch<SetStateAction<IMembershipRequestData>>;
   userData: IMembershipRequestData;
   common?: Common;
-  governance?: Governance;
+  governance: Governance;
   isAutomaticAcceptance?: boolean;
 }
 
@@ -50,7 +51,7 @@ const INIT_DATA: IMembershipRequestData = {
 interface IProps extends Pick<ModalProps, "isShowing" | "onClose"> {
   common: Common;
   governance: Governance;
-  shouldShowLoadingAfterSuccessfulCreation?: boolean;
+  showLoadingAfterSuccessfulCreation?: boolean;
   onCreationStageReach?: (reached: boolean) => void;
   onRequestCreated?: () => void;
 }
@@ -68,7 +69,7 @@ export function MembershipRequestModal(props: IProps) {
     onClose,
     common,
     governance,
-    shouldShowLoadingAfterSuccessfulCreation = false,
+    showLoadingAfterSuccessfulCreation = false,
     onCreationStageReach,
     onRequestCreated,
   } = props;
@@ -81,15 +82,21 @@ export function MembershipRequestModal(props: IProps) {
   } = useMemberInAnyCommon();
   const user = useSelector(selectUser());
   const userId = user?.uid;
-  const shouldDisplayProgressBar =
-    stage > MembershipRequestStage.Welcome &&
-    stage < MembershipRequestStage.Creating;
   const shouldDisplayGoBack =
     (stage > MembershipRequestStage.Introduce &&
       stage < MembershipRequestStage.Creating) ||
     (stage === MembershipRequestStage.Introduce && !isMember);
   const isAutomaticAcceptance = checkIsAutomaticJoin(governance);
 
+  const steps = useMemo(() => {
+    return getSteps(governance);
+  }, [governance]);
+
+  const shouldDisplayProgressBar =
+    stage > MembershipRequestStage.Welcome &&
+    stage < MembershipRequestStage.Creating &&
+    steps.length > 1;
+
   useEffect(() => {
     if (isShowing) {
       disableZoom();
@@ -182,7 +189,7 @@ export function MembershipRequestModal(props: IProps) {
           />
         );
       case MembershipRequestStage.Created:
-        return shouldShowLoadingAfterSuccessfulCreation ? (
+        return showLoadingAfterSuccessfulCreation && isAutomaticAcceptance ? (
           <MembershipRequestCreating
             userData={userData}
             setUserData={setUserData}
@@ -258,7 +265,7 @@ export function MembershipRequestModal(props: IProps) {
     >
       <div className="membership-request-wrapper">
         {shouldDisplayProgressBar && (
-          <MembershipRequestProgressBar currentStage={stage} />
+          <MembershipRequestProgressBar currentStage={stage} steps={steps} />
         )}
         {renderCurrentStage(stage)}
       </div>

src/pages/OldCommon/components/CommonDetailContainer/MembershipRequestModal/MembershipRequestPayment.tsx

@@ -36,7 +36,7 @@ export default function MembershipRequestPayment(
     !changePaymentMethodState.isPaymentLoading;
 
   const contributionInfo = useMemo(() => {
-    const limitations = governance?.proposals?.MEMBER_ADMITTANCE?.limitations;
+    const limitations = governance.proposals?.MEMBER_ADMITTANCE?.limitations;
 
     if (limitations?.minFeeMonthly) {
       return {

src/pages/OldCommon/components/CommonDetailContainer/MembershipRequestModal/MembershipRequestProgressBar.tsx

@@ -8,34 +8,17 @@ import "./index.scss";
 
 interface IProps {
   currentStage: MembershipRequestStage;
+  steps: StepProgressItem[];
 }
 
-const STEPS: StepProgressItem[] = [
-  {
-    title: "Introduce",
-    activeImageSource: "/icons/membership-request/introduce-current.svg",
-    inactiveImageSource: "/icons/membership-request/introduce-current.svg",
-  },
-  {
-    title: "Rules",
-    activeImageSource: "/icons/membership-request/rules-current.svg",
-    inactiveImageSource: "/icons/membership-request/rules-gray.svg",
-  },
-  {
-    title: "Payment",
-    activeImageSource: "/icons/membership-request/payment-current.svg",
-    inactiveImageSource: "/icons/membership-request/payment-gray.svg",
-  },
-];
-
 export default function MembershipRequestProgressBar(props: IProps) {
-  const { currentStage } = props;
+  const { currentStage, steps } = props;
 
   return (
     <StepProgress
       className="membership-request-progress-bar"
       currentStep={currentStage}
-      items={STEPS}
+      items={steps}
     />
   );
 }

src/pages/OldCommon/components/CommonDetailContainer/MembershipRequestModal/MembershipRequestRules.tsx

@@ -2,13 +2,12 @@ import React from "react";
 import { Button } from "@/shared/components";
 import { IStageProps } from "./MembershipRequestModal";
 import { MembershipRequestStage } from "./constants";
+import { shouldShowPaymentStep } from "./helpers";
 import "./index.scss";
 
 export default function MembershipRequestRules(props: IStageProps) {
   const { userData, setUserData, governance, isAutomaticAcceptance } = props;
-  const rules = governance?.unstructuredRules || [];
-  const paymentMustGoThrough =
-    governance?.proposals?.MEMBER_ADMITTANCE?.limitations.paymentMustGoThrough;
+  const rules = governance.unstructuredRules || [];
 
   return (
     <div className="membership-request-content membership-request-rules">
@@ -42,7 +41,7 @@ export default function MembershipRequestRules(props: IStageProps) {
         onClick={() =>
           setUserData({
             ...userData,
-            stage: paymentMustGoThrough
+            stage: shouldShowPaymentStep(governance)
               ? MembershipRequestStage.Payment
               : MembershipRequestStage.Creating,
           })

src/pages/OldCommon/components/CommonDetailContainer/MembershipRequestModal/MembershipRequestWelcome.tsx

@@ -8,7 +8,9 @@ import { IStageProps } from "./MembershipRequestModal";
 import { MembershipRequestStage } from "./constants";
 import "./index.scss";
 
-export default function MembershipRequestWelcome(props: IStageProps) {
+export default function MembershipRequestWelcome(
+  props: Omit<IStageProps, "governance">,
+) {
   const screenSize = useSelector(getScreenSize());
   const isMobileView = screenSize === ScreenSize.Mobile;
   const { userData, setUserData } = props;

src/pages/OldCommon/components/CommonDetailContainer/MembershipRequestModal/constants.ts

@@ -1,3 +1,5 @@
+import { StepProgressItem } from "@/shared/components";
+
 export enum MembershipRequestStage {
   Welcome,
   Introduce,
@@ -6,3 +8,27 @@ export enum MembershipRequestStage {
   Creating,
   Created,
 }
+
+export enum MembershipRequestStep {
+  Introduce = "Introduce",
+  Rules = "Rules",
+  Payment = "Payment",
+}
+
+export const STEPS: StepProgressItem[] = [
+  {
+    title: MembershipRequestStep.Introduce,
+    activeImageSource: "/icons/membership-request/introduce-current.svg",
+    inactiveImageSource: "/icons/membership-request/introduce-current.svg",
+  },
+  {
+    title: MembershipRequestStep.Rules,
+    activeImageSource: "/icons/membership-request/rules-current.svg",
+    inactiveImageSource: "/icons/membership-request/rules-gray.svg",
+  },
+  {
+    title: MembershipRequestStep.Payment,
+    activeImageSource: "/icons/membership-request/payment-current.svg",
+    inactiveImageSource: "/icons/membership-request/payment-gray.svg",
+  },
+];

src/pages/OldCommon/components/CommonDetailContainer/MembershipRequestModal/helpers.ts

@@ -0,0 +1,29 @@
+import { StepProgressItem } from "@/shared/components";
+import { ProposalsTypes } from "@/shared/constants";
+import { Governance } from "@/shared/models";
+import { STEPS, MembershipRequestStep } from "./constants";
+
+export const shouldShowRulesStep = (governance: Governance): boolean =>
+  governance.unstructuredRules.length > 0;
+
+export const shouldShowPaymentStep = (governance: Governance): boolean =>
+  Boolean(
+    governance.proposals[ProposalsTypes.MEMBER_ADMITTANCE]?.limitations
+      .paymentMustGoThrough,
+  );
+
+export const getSteps = (governance: Governance): StepProgressItem[] => {
+  const stepsToExclude: MembershipRequestStep[] = [];
+
+  if (!shouldShowRulesStep(governance)) {
+    stepsToExclude.push(MembershipRequestStep.Rules);
+  }
+
+  if (!shouldShowPaymentStep(governance)) {
+    stepsToExclude.push(MembershipRequestStep.Payment);
+  }
+
+  return STEPS.filter(
+    ({ title }) => !stepsToExclude.includes(title as MembershipRequestStep),
+  );
+};

src/pages/common/components/ChatComponent/ChatComponent.module.scss

@@ -97,6 +97,7 @@
   flex-direction: column;
   justify-content: center;
   padding: 0.125rem 1.5rem 0.125rem 0.25rem;
+  word-break: break-word;
 }
 
 .messageInputEmpty {

src/pages/common/components/ChatComponent/ChatComponent.tsx

@@ -15,6 +15,7 @@ import { delay, omit } from "lodash";
 import { v4 as uuidv4 } from "uuid";
 import { selectUser } from "@/pages/Auth/store/selectors";
 import { ChatService, DiscussionMessageService, FileService } from "@/services";
+import { InternalLinkData } from "@/shared/components";
 import {
   ChatType,
   DiscussionMessageOwnerType,
@@ -80,7 +81,7 @@ interface ChatComponentInterface {
   governanceCircles?: Circles;
   commonMember: CommonMember | null;
   hasAccess?: boolean;
-  discussion: Discussion;
+  discussion?: Discussion;
   chatChannel?: ChatChannel;
   lastSeenItem?: CommonFeedObjectUserUnique["lastSeen"];
   feedItemId: string;
@@ -91,6 +92,8 @@ interface ChatComponentInterface {
   isJoinPending?: boolean;
   onJoinCommon?: () => void;
   onUserClick?: (userId: string) => void;
+  onFeedItemClick?: (feedItemId: string) => void;
+  onInternalLinkClick?: (data: InternalLinkData) => void;
 }
 
 interface Messages {
@@ -131,6 +134,8 @@ export default function ChatComponent({
   isJoinPending = false,
   onJoinCommon,
   onUserClick,
+  onFeedItemClick,
+  onInternalLinkClick,
 }: ChatComponentInterface) {
   const dispatch = useDispatch();
   useZoomDisabling();
@@ -142,7 +147,7 @@ export default function ChatComponent({
   );
   const user = useSelector(selectUser());
   const userId = user?.uid;
-  const discussionId = discussion.id;
+  const discussionId = discussion?.id || "";
   const isChatChannel = Boolean(chatChannel);
 
   const hasPermissionToHide =
@@ -204,9 +209,9 @@ export default function ChatComponent({
 
   useEffect(() => {
     if (commonId && !isChatChannel) {
-      fetchDiscussionUsers(commonId, discussion.circleVisibility);
+      fetchDiscussionUsers(commonId, discussion?.circleVisibility);
     }
-  }, [commonId, discussion.circleVisibility]);
+  }, [commonId, discussion?.circleVisibility]);
 
   useEffect(() => {
     if (chatChannel?.id) {
@@ -602,10 +607,12 @@ export default function ChatComponent({
           users={users}
           discussionId={discussionId}
           feedItemId={feedItemId}
-          isLoading={isLoadingDiscussionMessages}
+          isLoading={!discussion || isLoadingDiscussionMessages}
           onMessageDelete={handleMessageDelete}
           directParent={directParent}
           onUserClick={onUserClick}
+          onFeedItemClick={onFeedItemClick}
+          onInternalLinkClick={onInternalLinkClick}
         />
       </div>
       {isAuthorized && (