From 697c9fad4314e0077b3c0479dbb0573f2c8382f0 Mon Sep 17 00:00:00 2001
From: Abishek Bashyal <abishek_bashyal@outlook.com>
Date: Thu, 5 Oct 2023 16:42:47 +0545
Subject: [PATCH] feat: pr changes done

---
 .../chat/CreateGroup/AddCriteria.tsx          |  32 ++--
 .../chat/CreateGroup/CreateGroupType.tsx      |  38 ++---
 .../components/chat/CreateGroup/Criteria.tsx  | 153 ------------------
 .../chat/CreateGroup/DefineCondition.tsx      |  44 ++---
 .../chat/CreateGroup/MultipleCriterias.tsx    | 124 --------------
 .../CreateGroup/SingleAndMultipleCriteria.tsx |  10 --
 .../lib/components/chat/CreateGroup/Type.ts   |  11 +-
 .../chat/helpers/tokenGatedGroup.ts           |  25 +++
 8 files changed, 69 insertions(+), 368 deletions(-)
 delete mode 100644 packages/uiweb/src/lib/components/chat/CreateGroup/Criteria.tsx
 delete mode 100644 packages/uiweb/src/lib/components/chat/CreateGroup/MultipleCriterias.tsx
 delete mode 100644 packages/uiweb/src/lib/components/chat/CreateGroup/SingleAndMultipleCriteria.tsx
 create mode 100644 packages/uiweb/src/lib/components/chat/helpers/tokenGatedGroup.ts

diff --git a/packages/uiweb/src/lib/components/chat/CreateGroup/AddCriteria.tsx b/packages/uiweb/src/lib/components/chat/CreateGroup/AddCriteria.tsx
index 73693e722..77e245a17 100644
--- a/packages/uiweb/src/lib/components/chat/CreateGroup/AddCriteria.tsx
+++ b/packages/uiweb/src/lib/components/chat/CreateGroup/AddCriteria.tsx
@@ -262,9 +262,7 @@ const AddCriteria = ({
     setQuantity({ ...quantity, value: e.target.value });
   };
 
-
   const verifyAndDoNext = ()=>{
-
     const _type = dropdownTypeValues[selectedTypeValue].value as 'PUSH' | 'GUILD'
     const category:string = _type === "PUSH" ? (dropdownCategoryValues[_type] as DropdownValueType[])[
       selectedCategoryValue
@@ -301,11 +299,10 @@ const AddCriteria = ({
         // GUILD type
         return {
           id:guildId,
-          role:specificRoleId,
           comparison:guildComparison,
+          role:guildComparison === 'specific' ? specificRoleId : "*",
         }
       }
-
     }
 
     const rule:Rule = {
@@ -315,9 +312,10 @@ const AddCriteria = ({
       data: getData(_type, category),
     }
 
-    // alert(JSON.stringify(rule))
     entryCriteria.addNewRule(rule)
 
+    // alert(`${JSON.stringify(rule)}`)
+
     if(handlePrevious){
       handlePrevious()
     }
@@ -364,19 +362,17 @@ const AddCriteria = ({
       }
     }else{
       // guild condition
+      alert(`${JSON.stringify(oldValue.data)}`)
       setGuildId((oldValue.data as GuildData).id)
       setSpecificRoleId((oldValue.data as GuildData).role)
-      setGuildComparison((oldValue.data as GuildData).comparison)
+      setGuildComparison((oldValue.data as GuildData).comparison) 
     }
     
     setSelectedTypeValue(
       dropdownTypeValues.findIndex(obj => obj.value === oldValue.type) 
     )
-
-    
-    // TODO: reverse the form fill
    } 
-  },[0])
+  },[])
 
   return (
     <Section
@@ -502,12 +498,16 @@ const AddCriteria = ({
               setGuildComparison(newEl)}}
           />
 
-          <TextInput
-            labelName="Specific Role"
-            inputValue={specificRoleId}
-            onInputChange={(e: any) => setSpecificRoleId(e.target.value)}
-            placeholder="e.g. 4687"
-          />
+          {guildComparison === "specific" && 
+            <TextInput
+              labelName="Specific Role"
+              inputValue={specificRoleId}
+              onInputChange={(e: any) => setSpecificRoleId(e.target.value)}
+              placeholder="e.g. 4687"
+            />
+          }
+
+          
         </>
       )}
       <Button width="197px" onClick={verifyAndDoNext}>
diff --git a/packages/uiweb/src/lib/components/chat/CreateGroup/CreateGroupType.tsx b/packages/uiweb/src/lib/components/chat/CreateGroup/CreateGroupType.tsx
index 0c660e51a..f2058c05f 100644
--- a/packages/uiweb/src/lib/components/chat/CreateGroup/CreateGroupType.tsx
+++ b/packages/uiweb/src/lib/components/chat/CreateGroup/CreateGroupType.tsx
@@ -10,9 +10,9 @@ import { GroupTypeState } from './CreateGroupModal';
 
 import { ThemeContext } from '../theme/ThemeProvider';
 import useToast from '../reusables/NewToast';
-import {ConditionType, CriteriaStateType, Rule, } from './Type'
-import { OPERATOR_OPTIONS, OPERATOR_OPTIONS_INFO } from '../constants';
+import {ConditionType, CriteriaStateType,} from './Type'
 import ConditionsComponent from './ConditionsComponent';
+import { OperatorContainer } from './OperatorContainer';
 
 const GROUP_TYPE_OPTIONS: Array<OptionDescription> = [
   {
@@ -84,28 +84,13 @@ const AddConditionSection = ({
 
       {/* todo - check later if this etire section can be optimised for define condtion page too */}
       <Section flexDirection="column" gap="16px">
-        <OptionButtons
-          options={OPERATOR_OPTIONS}
-          selectedValue={criteriaState.entryRootCondition}
-          handleClick={(newEl: string) => {
-            criteriaState.setEntryRootCondition(newEl as ConditionType);
-          }}
-        />
-        <Span fontSize="14px">
-          {
-            OPERATOR_OPTIONS_INFO[
-              criteriaState.entryRootCondition as keyof typeof OPERATOR_OPTIONS_INFO
-            ].head
-          }
-          <Span color={theme.textColor?.modalSubHeadingText}>
-            {' '}
-            {
-              OPERATOR_OPTIONS_INFO[
-                criteriaState.entryRootCondition as keyof typeof OPERATOR_OPTIONS_INFO
-              ].tail
-            }
-          </Span>
-        </Span>
+      
+      <OperatorContainer 
+        operator={criteriaState.entryRootCondition} 
+        setOperator={(newEl: string) => {
+          criteriaState.setEntryRootCondition(newEl as ConditionType);
+        }}
+      />
       
       <ConditionsComponent 
         conditionData={[
@@ -204,7 +189,6 @@ export const CreateGroupType = ({
         selectedValue={groupEncryptionType}
         handleClick={(newEl: string) => {
           setGroupEncryptionType(newEl);
-          console.log('we called it');
         }}
       />
 
@@ -221,10 +205,6 @@ export const CreateGroupType = ({
             criteriaState={entryCriteria}
             handleNext={
               ()=>{
-                // add new condtion
-                // entryCriteria.
-
-
                 if(handleNext){
                   handleNext()
                 }
diff --git a/packages/uiweb/src/lib/components/chat/CreateGroup/Criteria.tsx b/packages/uiweb/src/lib/components/chat/CreateGroup/Criteria.tsx
deleted file mode 100644
index 2f20b62f1..000000000
--- a/packages/uiweb/src/lib/components/chat/CreateGroup/Criteria.tsx
+++ /dev/null
@@ -1,153 +0,0 @@
-import React, { useContext, useState } from 'react';
-import { Section, Span } from '../../reusables';
-import { MoreDarkIcon } from '../../../icons/MoreDark';
-import { ThemeContext } from '../theme/ThemeProvider';
-import styled from 'styled-components';
-import { device } from '../../../config';
-import Dropdown from '../reusables/DropDown';
-import EditSvg from '../../../icons/EditSvg.svg';
-import RemoveSvg from '../../../icons/RemoveSvg.svg';
-import { ConditionType } from './Type';
-
-export type CriteraValueType = {
-    invertedIcon?: any;
-    id: number;
-    type?: string;
-    title?: string;
-    icon?: string;
-    function: () => void;
-};
-
-interface CriteriaProps {
-    dropdownValues: CriteraValueType[];
-    // criteraType:
-    conditionType:ConditionType
-    width?: string;
-}
-
-const Criteria = ({ dropdownValues,conditionType,  width = '100%' }: CriteriaProps) => {
-    const [selectedValue, setSelectedValue] = useState<number>(0);
-    const [dropdownHeight, setDropdownHeight] = useState<number | undefined>(0);
-
-    const dropDownValues = [
-        {
-            id: 0,
-            value: 'Edit',
-            title: 'Edit',
-            icon: EditSvg,
-            function: () => setSelectedValue(0),
-        },
-        {
-            id: 1,
-            value: 'Remove',
-            title: 'Remove',
-            icon: RemoveSvg,
-            function: () => setSelectedValue(1),
-        },
-    ];
-    const theme = useContext(ThemeContext);
-    const [criteriaDetails, setCriteriaDetails] = useState<[]>([]);
-
-    const [openDropdownId, setOpenDropdownId] = useState<number | null>(null);
-
-    const toggleDropdown = (criteriaId: number) => {
-        if (openDropdownId === criteriaId) {
-            // Clicked on an already open dropdown, so close it
-            setOpenDropdownId(null);
-        } else {
-            // Clicked on a different criteria, so open its dropdown
-            setOpenDropdownId(criteriaId);
-        }
-    };
-
-    const showOrText = dropdownValues.length === 2; // Show "or" text if there are exactly 2 dropdowns
-
-    return (
-        <Section flexDirection='column' gap='8px'>
-            {dropdownValues &&
-                dropdownValues.map((criteria, index) => (
-                    <Section key={criteria.id} alignItems='center' justifyContent='center' flexDirection='row' gap='8px'>
-                        <CriteriaContainer
-                            height='48px'
-                            borderRadius='12px'
-                            background={theme.backgroundColor?.modalHoverBackground}
-                            padding='0px 4px 0px 12px'
-                            justifyContent='space-between'
-                            width={width}
-                        >
-                            <Section gap='4px'>
-                                <Span
-                                    alignSelf='center'
-                                    background='#657795'
-                                    borderRadius='4px'
-                                    fontSize='13px'
-                                    color={theme.textColor?.buttonText}
-                                    padding='4px 8px 4px 8px'
-                                >
-                                    {criteria.type}
-                                </Span>
-                                <Span fontWeight='700'>
-                                    {criteria.title}{' '}
-                                    <Span color={theme.textColor?.modalSubHeadingText}>or more</Span>
-                                </Span>
-                            </Section>
-                            {openDropdownId === criteria.id && (
-                                <DropdownContainer
-                                    style={{
-                                        top: dropdownHeight! > 500 ? '30%' : '45%',
-                                    }}
-                                    theme={theme}
-                                >
-                                    <Dropdown dropdownValues={dropDownValues} />
-                                </DropdownContainer>
-                            )}
-                            <Section>
-                                <MoreDarkIcon />
-                            </Section>
-                        </CriteriaContainer>
-                        {showOrText && index === 0 && (
-                            <Span
-                                borderRadius='12px'
-                                color={theme.textColor?.modalSubHeadingText}
-                                padding='4px 12px 4px 12px'
-                                background='#F4F5FA'
-                            >
-                                {conditionType}
-                            </Span>
-                        )}
-                    </Section>
-                ))}
-        </Section>
-    );
-};
-
-export default Criteria;
-
-const DropdownContainer = styled.div`
-    position: absolute;
-    left: 48%;
-    top: 69%;
-    border-radius: ${(props) => props.theme.borderRadius.modalInnerComponents};
-    padding: 14px 8px;
-    z-index: 999999999999 !important;
-    display: flex;
-    flex-direction: column !important;
-    background: ${(props) => props.theme.backgroundColor.modalBackground};
-    border: ${(props) => props.theme.border.modalInnerComponents};
-
-    @media ${device.mobileL} {
-        left: 27%;
-    }
-    @media (min-width: 426px) and (max-width: 1150px) {
-        left: 48%;
-    }
-    @media (max-width: 480px) {
-        left: 25%;
-    }
-`;
-
-const CriteriaContainer = styled(Section)`
-    @media (max-width: 426px) {
-        width: 280px;
-    }
-`;
diff --git a/packages/uiweb/src/lib/components/chat/CreateGroup/DefineCondition.tsx b/packages/uiweb/src/lib/components/chat/CreateGroup/DefineCondition.tsx
index a54e80caa..7db6c97e2 100644
--- a/packages/uiweb/src/lib/components/chat/CreateGroup/DefineCondition.tsx
+++ b/packages/uiweb/src/lib/components/chat/CreateGroup/DefineCondition.tsx
@@ -7,10 +7,11 @@ import { ModalHeaderProps } from './CreateGroupModal';
 import { ThemeContext } from '../theme/ThemeProvider';
 import { GatingRulesInformation } from './CreateGroupModal';
 import useMediaQuery from '../../../hooks/useMediaQuery';
-import OptionButtons from '../reusables/OptionButtons';
 import { device } from '../../../config';
-import { OPERATOR_OPTIONS, OPERATOR_OPTIONS_INFO } from '../constants';
+import { OPERATOR_OPTIONS_INFO } from '../constants';
 import ConditionsComponent from './ConditionsComponent';
+import { OperatorContainer } from './OperatorContainer';
+import { handleDefineCondition } from '../helpers/tokenGatedGroup';
 
 export const DefineCondtion = ({
   onClose,
@@ -33,17 +34,7 @@ export const DefineCondtion = ({
   const isMobile = useMediaQuery(device.mobileL);
 
   const verifyAndDoNext = ()=>{
-    if(entryCriteria.isCondtionUpdateEnabled()){
-      // handle update
-      entryCriteria.updateCondition()
-    }else{
-      // handle insertion
-      entryCriteria.addNewCondtion()
-    }
-
-    if(handlePrevious){
-      handlePrevious()
-    }
+    handleDefineCondition(entryCriteria, handlePrevious)
   }
 
   const getRules = ()=>{
@@ -53,6 +44,7 @@ export const DefineCondtion = ({
     ]
   }
 
+  // set state for edit condition
   useEffect(()=>{
     if(entryCriteria.isCondtionUpdateEnabled()){
       entryCriteria.setEntryRuleTypeCondition(
@@ -65,7 +57,7 @@ export const DefineCondtion = ({
         ])
       }
     }
-  },[0])
+  },[])
 
 
   return (
@@ -81,30 +73,12 @@ export const DefineCondtion = ({
       />
       {isCriteriaAdded && (
         <Section flexDirection="column" gap="16px">
-          <OptionButtons
-            options={OPERATOR_OPTIONS}
-            selectedValue={
-              entryCriteria.entryRuleTypeCondition
-            }
-            handleClick={(newEl: string) => {
+          <OperatorContainer 
+            operator={entryCriteria.entryRuleTypeCondition} 
+            setOperator={(newEl: string) => {
               entryCriteria.setEntryRuleTypeCondition(newEl as keyof typeof OPERATOR_OPTIONS_INFO);
             }}
           />
-          <Span fontSize="14px">
-            {
-              OPERATOR_OPTIONS_INFO[
-                entryCriteria.entryRuleTypeCondition as keyof typeof OPERATOR_OPTIONS_INFO
-              ].head
-            } 
-            <Span color={theme.textColor?.modalSubHeadingText}>
-              {' '}
-              {
-                OPERATOR_OPTIONS_INFO[
-                  entryCriteria.entryRuleTypeCondition as keyof typeof OPERATOR_OPTIONS_INFO
-                ].tail
-              }
-            </Span>
-          </Span>{' '}
           <ConditionsComponent
             conditionData={getRules()}
             deleteFunction={(idx)=>{
diff --git a/packages/uiweb/src/lib/components/chat/CreateGroup/MultipleCriterias.tsx b/packages/uiweb/src/lib/components/chat/CreateGroup/MultipleCriterias.tsx
deleted file mode 100644
index f1f3386f3..000000000
--- a/packages/uiweb/src/lib/components/chat/CreateGroup/MultipleCriterias.tsx
+++ /dev/null
@@ -1,124 +0,0 @@
-import React, { useContext, useRef, useState } from 'react';
-import { Section, Span } from '../../reusables';
-import { ThemeContext } from '../theme/ThemeProvider';
-import styled from 'styled-components';
-import { device } from '../../../config';
-import EditSvg from '../../../icons/EditSvg.svg';
-import RemoveSvg from '../../../icons/RemoveSvg.svg';
-import { ConditionType } from './Type';
-import Criteria from './ConditionsComponent';
-import { useClickAway } from '../../../hooks';
-
-export type CriteraValueType = {
-  invertedIcon?: any;
-  id: number;
-  type?: string;
-  title?: string;
-  icon?: string;
-  function: () => void;
-};
-
-interface CriteriaProps {
-  width?: string;
-  dropdownValues: CriteraValueType[];
-  conditionType:ConditionType
-}
-
-const MultipleCriterias = ({
-  dropdownValues,
-  width = '100%',
-  conditionType
-}: CriteriaProps) => {
-  const [selectedValue, setSelectedValue] = useState<number>(0);
-  const [dropdownHeight, setDropdownHeight] = useState<number | undefined>(0);
-  const [selectedIndex, setSelectedIndex] = useState<number | null>(null);
-  const dropdownRef = useRef<any>(null);
-
-  const dropDownValues = [
-    {
-      id: 0,
-      value: 'Edit',
-      title: 'Edit',
-      icon: EditSvg,
-      function: () => setSelectedValue(0),
-    },
-    {
-      id: 1,
-      value: 'Remove',
-      title: 'Remove',
-      icon: RemoveSvg,
-      function: () => setSelectedValue(1),
-    },
-  ];
-  const theme = useContext(ThemeContext);
-  const [criteriaDetails, setCriteriaDetails] = useState<[]>([]);
-
-  const [openDropdownId, setOpenDropdownId] = useState<number | null>(null);
-
-
-  const toggleDropdown = (criteriaId: number) => {
-    if (openDropdownId === criteriaId) {
-      // Clicked on an already open dropdown, so close it
-      setOpenDropdownId(null);
-    } else {
-      // Clicked on a different criteria, so open its dropdown
-      setOpenDropdownId(criteriaId);
-    }
-  };
-
-  useClickAway(dropdownRef, () => setSelectedIndex(null));
-
-  return (
-    <Section flexDirection="column" gap="8px">
-      {
-        dropdownValues && (
-          // dropdownValues.map((criteria) => (
-          <Section
-            borderWidth="1px"
-            justifyContent="center"
-            alignItems="center"
-            borderColor="#E6E7EE"
-            borderRadius="12px"
-            borderStyle="solid"
-            padding="8px 0px 8px 8px"
-          >
-            <Criteria width="330px" dropdownValues={dropdownValues} conditionType={conditionType}/>
-          </Section>
-        )
-        // )
-        // )
-      }
-    </Section>
-  );
-};
-
-export default MultipleCriterias;
-
-const DropdownContainer = styled.div`
-  position: absolute;
-  left: 48%;
-  top: 69%;
-  border-radius: ${(props) => props.theme.borderRadius.modalInnerComponents};
-  padding: 14px 8px;
-  z-index: 999999999999 !important;
-  display: flex;
-  flex-direction: column !important;
-  background: ${(props) => props.theme.backgroundColor.modalBackground};
-  border: ${(props) => props.theme.border.modalInnerComponents};
-
-  @media ${device.mobileL} {
-    left: 27%;
-  }
-  @media (min-width: 426px) and (max-width: 1150px) {
-    left: 48%;
-  }
-  @media (max-width: 480px) {
-    left: 25%;
-  }
-};`;
-
-const CriteriaContainer = styled(Section)`
-  @media (max-width: 426px) {
-    width: 280px;
-  }
-`;
diff --git a/packages/uiweb/src/lib/components/chat/CreateGroup/SingleAndMultipleCriteria.tsx b/packages/uiweb/src/lib/components/chat/CreateGroup/SingleAndMultipleCriteria.tsx
deleted file mode 100644
index 75c17ee1b..000000000
--- a/packages/uiweb/src/lib/components/chat/CreateGroup/SingleAndMultipleCriteria.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import Criteria, { CriteraValueType } from "./Criteria"
-import MultipleCriterias from "./MultipleCriterias"
-import { ConditionType } from "./Type"
-
-export const SingleAndMultipleCriteria = ({dropdownValues,conditionType}:{dropdownValues:CriteraValueType[],conditionType:ConditionType}) =>{
-    if(dropdownValues.length > 1){
-        return <MultipleCriterias dropdownValues={dropdownValues} conditionType={conditionType}/>
-    }
-    return <Criteria width="385px" dropdownValues={dropdownValues} conditionType={conditionType}/>
-}
\ No newline at end of file
diff --git a/packages/uiweb/src/lib/components/chat/CreateGroup/Type.ts b/packages/uiweb/src/lib/components/chat/CreateGroup/Type.ts
index 9b3ac556b..6a7b57a79 100644
--- a/packages/uiweb/src/lib/components/chat/CreateGroup/Type.ts
+++ b/packages/uiweb/src/lib/components/chat/CreateGroup/Type.ts
@@ -144,7 +144,16 @@ export const useCriteriaState = ():CriteriaStateType=>{
       setSelectedCriteria(entryOptionTypeArray.length)
     }
 
-    setSelectedRule(prev =>[...prev,newRule])
+    if(updateCriteriaIdx !== -1){
+      // update existing
+      const _rulesToUpdate = [...selectedRules]
+      _rulesToUpdate[updateCriteriaIdx] = newRule
+      setSelectedRule(_rulesToUpdate)
+    }else{
+      // add new
+      setSelectedRule(prev =>[...prev,newRule])
+    }
+
   }
 
   const deleteRule = (idx:number)=>{
diff --git a/packages/uiweb/src/lib/components/chat/helpers/tokenGatedGroup.ts b/packages/uiweb/src/lib/components/chat/helpers/tokenGatedGroup.ts
new file mode 100644
index 000000000..422c8d919
--- /dev/null
+++ b/packages/uiweb/src/lib/components/chat/helpers/tokenGatedGroup.ts
@@ -0,0 +1,25 @@
+import { CriteriaStateType, Data } from '../CreateGroup/Type';
+import { DropdownValueType } from '../reusables';
+import { CATEGORY, DropdownCategoryValuesType } from '../types';
+
+const handleDefineCondition = (
+  entryCriteria: CriteriaStateType,
+  handlePrevious: (() => void) | undefined
+) => {
+  if (entryCriteria.isCondtionUpdateEnabled()) {
+    // handle update
+    entryCriteria.updateCondition();
+  } else {
+    // handle insertion
+    entryCriteria.addNewCondtion();
+  }
+
+  if (handlePrevious) {
+    handlePrevious();
+  }
+};
+
+
+
+
+export {handleDefineCondition}