From f4a2dbd7bcf0b5cfcf8cc92e36457eb5a73dcdd9 Mon Sep 17 00:00:00 2001 From: KlausMikhaelson Date: Wed, 1 Nov 2023 02:10:06 -0600 Subject: [PATCH] fix: replcaed hardcoded access failed msg with actual conditions --- .../chat/ChatProfile/GroupInfoModal.tsx | 4 +- .../chat/MessageInput/MessageInput.tsx | 297 ++++++++++-------- packages/uiweb/src/lib/icons/Info.tsx | 9 + packages/uiweb/src/lib/icons/info.svg | 5 - 4 files changed, 175 insertions(+), 140 deletions(-) create mode 100644 packages/uiweb/src/lib/icons/Info.tsx delete mode 100644 packages/uiweb/src/lib/icons/info.svg diff --git a/packages/uiweb/src/lib/components/chat/ChatProfile/GroupInfoModal.tsx b/packages/uiweb/src/lib/components/chat/ChatProfile/GroupInfoModal.tsx index f006e57eb..2ce75bc2d 100644 --- a/packages/uiweb/src/lib/components/chat/ChatProfile/GroupInfoModal.tsx +++ b/packages/uiweb/src/lib/components/chat/ChatProfile/GroupInfoModal.tsx @@ -236,15 +236,17 @@ interface GroupTypeProps { subheader: string; cursor?: string; handleNextInformation?: () => void; + alert?: boolean; } -const GroupTypeBadge = ({ +export const GroupTypeBadge = ({ theme, icon, header, subheader, handleNextInformation, cursor, + alert }: GroupTypeProps) => { return (
diff --git a/packages/uiweb/src/lib/components/chat/MessageInput/MessageInput.tsx b/packages/uiweb/src/lib/components/chat/MessageInput/MessageInput.tsx index 29b048620..92f0a2e84 100644 --- a/packages/uiweb/src/lib/components/chat/MessageInput/MessageInput.tsx +++ b/packages/uiweb/src/lib/components/chat/MessageInput/MessageInput.tsx @@ -21,6 +21,7 @@ import TokenGatedIcon from '../../../icons/Token-Gated.svg'; import { Modal } from '../reusables/Modal'; import { Image } from '../../reusables'; import { ConnectButtonComp } from '../ConnectButton'; +import { Info } from '../../../icons/Info'; import { checkIfIntent, getDefaultFeedObject, @@ -38,11 +39,16 @@ import { usePushChatSocket, } from '../../../hooks'; -import type { FileMessageContent } from '../../../types'; +import type { FileMessageContent, IGroup } from '../../../types'; import { GIFType, IChatTheme, MessageInputProps } from '../exportedTypes'; import { PUBLIC_GOOGLE_TOKEN, device } from '../../../config'; import { checkIfAccessVerifiedGroup, checkIfMember } from '../helpers'; import useToast from '../reusables/NewToast'; +import { GroupTypeBadge } from '../ChatProfile/GroupInfoModal'; +import ConditionsComponent from '../CreateGroup/ConditionsComponent'; +import useGetGroupByID from '../../../hooks/chat/useGetGroupByID'; +import { getRuleInfo } from '../helpers/getRulesToCondtionArray'; +import { ACCESS_TYPE_TITLE, OPERATOR_OPTIONS_INFO } from '../constants'; /** * @interface IThemeProps @@ -52,7 +58,7 @@ interface IThemeProps { theme?: IChatTheme; } -const ConnectButtonSection = ({autoConnect}:{autoConnect:boolean}) => { +const ConnectButtonSection = ({ autoConnect }: { autoConnect: boolean }) => { const { signer } = useChatData(); return (
= ({ setIsRules(checkIfAccessVerifiedGroup(chatFeed)); } }, [chatId, chatFeed, account, env]); -console.log(isMember) -console.log(checkIfMember(chatFeed, account!)) + console.log(isMember) + console.log(checkIfMember(chatFeed, account!)) const addEmoji = (emojiData: EmojiClickData, event: MouseEvent): void => { setTypedMessage(typedMessage + emojiData.emoji); setShowEmojis(false); @@ -257,7 +263,8 @@ console.log(checkIfMember(chatFeed, account!)) chatId, }); if (response) { - await updateChatFeed();} + await updateChatFeed(); + } } else { const sendTextMessage = await sendMessage({ message: `Hello, please let me join this group, my wallet address is ${account}`, @@ -378,7 +385,17 @@ console.log(checkIfMember(chatFeed, account!)) setChatFeed(chat as IFeeds); } }; - + + const groupRules = getRuleInfo(chatFeed?.groupInformation?.rules); + + const getOperator = (key: keyof typeof groupRules) => { + if (groupRules[key as keyof typeof groupRules].length) { + return groupRules[key as keyof typeof groupRules][0][0] + ?.operator as keyof typeof OPERATOR_OPTIONS_INFO; + } + return null; + }; + return !Object.keys(chatFeed || {}).length ? ( <> {!pgpPrivateKey && (isConnected || !!signer) && ( @@ -392,7 +409,7 @@ console.log(checkIfMember(chatFeed, account!)) alignItems="center" justifyContent="space-between" > - + )} @@ -411,143 +428,155 @@ console.log(checkIfMember(chatFeed, account!)) > {Object.keys(chatFeed || {}).length && chatFeed?.groupInformation ? ( <> - {(isJoinGroup() || isNotVerified()) && ( -
- - {isJoinGroup() && 'Click on the button to join the group'} - {isNotVerified() && ( - <> - Sending messages requires{' '} - - 1 PUSH Token - {' '} - for participation.{' '} - - Learn More - - - )} - - - - isJoinGroup() ? await handleJoinGroup() : await checkVerification() - } - > - {isJoinGroup() && - <> - {approveLoading ? ( - - ) : ( - ' Join Group ' - )} - - } - {isNotVerified() && - <> - {accessLoading ? ( - - ) : ( - 'Verify Access' - )} - - } - - -
- )} - {(!!pgpPrivateKey && !verificationSuccessfull) && ( - + {(isJoinGroup() || isNotVerified()) && (
- Verification Failed - - - Please ensure the following conditions are met to participate and - send messages. - -
- token-gated -
- {' '} - - Token Gated - - - You need to have{' '} + {isJoinGroup() && 'Click on the button to join the group'} + {isNotVerified() && ( + <> + Sending messages requires{' '} 1 PUSH Token {' '} - in your wallet to be able to send messages. - -
-
-
- { - if (onGetTokenClick) { - onGetTokenClick(); - } - setVerificationSuccessfull(true); - }} + for participation.{' '} + + Learn More + + + )} + + + + isJoinGroup() ? await handleJoinGroup() : await checkVerification() + } > - - Get Free Tokens - - - - { - setVerificationSuccessfull(true); - }} + {isJoinGroup() && + <> + {approveLoading ? ( + + ) : ( + ' Join Group ' + )} + + } + {isNotVerified() && + <> + {accessLoading ? ( + + ) : ( + 'Verify Access' + )} + + } + + +
+ )} + {(!!pgpPrivateKey && !verificationSuccessfull) && ( + +
+ - Close - + Access Failed + + + {Object.keys(ACCESS_TYPE_TITLE).map((key, idx) => ( + <> + {getOperator(key as keyof typeof groupRules) ? ( +
+ + { + ACCESS_TYPE_TITLE[key as keyof typeof ACCESS_TYPE_TITLE] + ?.heading + } + + + + { + OPERATOR_OPTIONS_INFO[ + groupRules[key as keyof typeof groupRules][0][0] + ?.operator as keyof typeof OPERATOR_OPTIONS_INFO + ]?.head + } + + {' '} + { + OPERATOR_OPTIONS_INFO[ + groupRules[key as keyof typeof groupRules][0][0] + ?.operator as keyof typeof OPERATOR_OPTIONS_INFO + ]?.tail + } + + +
+ + +
+
+ ) : null} + + ))} +
+ { + setVerificationSuccessfull(true); + }} + > + Cancel + +
+ + Learn more about getting rules +
+
-
- - )} - + + )} + ) : null} {!!pgpPrivateKey && (((isRules ? verified : true) && isMember) || @@ -669,7 +698,7 @@ console.log(checkIfMember(chatFeed, account!)) ); }; -const TypebarSection = styled(Section)<{ border?: string }>` +const TypebarSection = styled(Section) <{ border?: string }>` gap: 10px; border: ${(props) => props.border || 'none'}; @media ${device.mobileL} { diff --git a/packages/uiweb/src/lib/icons/Info.tsx b/packages/uiweb/src/lib/icons/Info.tsx new file mode 100644 index 000000000..7e3fd9c12 --- /dev/null +++ b/packages/uiweb/src/lib/icons/Info.tsx @@ -0,0 +1,9 @@ +export const Info = () => { + return ( + + + + + + ) +} diff --git a/packages/uiweb/src/lib/icons/info.svg b/packages/uiweb/src/lib/icons/info.svg deleted file mode 100644 index 4aa6cdd7d..000000000 --- a/packages/uiweb/src/lib/icons/info.svg +++ /dev/null @@ -1,5 +0,0 @@ - - - - -