(SQ-68068) Criar paginação no modal de ativação do CI

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@squidit/react-css",
-  "version": "1.2.27",
+  "version": "1.2.28",
   "scripts": {
     "format": "prettier --write --parser typescript '**/*.{ts,tsx}'",
     "lint": "eslint src --ext js,ts,tsx",

src/components-creators-insights/sq-modal-activation/__docs__/sq-modal-activation.component.example.tsx

@@ -1,8 +1,8 @@
 'use client'
 
 import React, { useState } from 'react'
-import SqModalActivation from '../sq-modal-activation.component'
 import { SqButton } from '../../../components/buttons/sq-button'
+import SqModalActivation from '../sq-modal-activation.component'
 
 const mockProfiles = [
   {
@@ -11,20 +11,32 @@ const mockProfiles = [
     username: 'user1',
     hasCreatorsInsights: true,
     picture: 'https://via.placeholder.com/150',
+    followers: 1000,
+    hasSocialNetworkCache: true,
+    isSharedCreatorsInsights: false,
+    hasValidToken: true,
   },
   {
     profileId: '2',
     socialNetwork: 'youtube' as const,
     username: 'user2',
     hasCreatorsInsights: false,
     picture: 'https://via.placeholder.com/150',
+    followers: 1000,
+    hasSocialNetworkCache: true,
+    isSharedCreatorsInsights: false,
+    hasValidToken: true,
   },
   {
     profileId: '3',
     socialNetwork: 'twitter' as const,
     username: 'user3',
     hasCreatorsInsights: true,
     picture: 'https://via.placeholder.com/150',
+    followers: 1000,
+    hasSocialNetworkCache: true,
+    isSharedCreatorsInsights: false,
+    hasValidToken: true,
   },
 ]
 
@@ -50,6 +62,10 @@ const SqModalActivationExample: React.FC = () => {
     setIsModalOpen(false)
   }
 
+  const handleLoadMore = () => {
+    // Load more profiles
+  }
+
   return (
     <div
       style={{
@@ -64,9 +80,11 @@ const SqModalActivationExample: React.FC = () => {
       <SqModalActivation
         open={isModalOpen}
         profiles={profiles}
-        onToggle={handleToggle}
         onConfirm={handleDone}
         onOpenChange={handleOpenChange}
+        onLoadMore={handleLoadMore}
+        hasMore={true}
+        loading={false}
         requireActiveProfile={true}
       />
     </div>

src/components-creators-insights/sq-modal-activation/sq-modal-activation.component.tsx

@@ -3,13 +3,14 @@
 import { CSSProperties, useCallback, useEffect, useState } from 'react'
 
 import { SqButton } from '@/src/components/buttons/sq-button'
+import { SqSelector } from '@/src/components/inputs/sq-selector'
+import { SqInfinityScroll } from '@/src/components/sq-infinity-scroll'
 import { SqModal } from '@/src/components/sq-modal'
+import SqTipComponent from '@/src/components/sq-tip/sq-tip.component'
 import { useTranslation } from 'react-i18next'
 import { Props as ModalProps } from '../../components/sq-modal/sq-modal.component'
 import { SqSocialConnect } from '../sq-social-connect'
 import './sq-modal-activation.component.scoped.scss'
-import { SqSelector } from '@/src/components/inputs/sq-selector'
-import SqTipComponent from '@/src/components/sq-tip/sq-tip.component'
 
 type SocialNetwork = 'instagram' | 'youtube' | 'twitter' | 'tiktok'
 
@@ -29,12 +30,15 @@ export interface Props extends ModalProps {
   onConfirm?: () => void
   onToggleCreatorsInsights?: (profileId: string, socialNetwork: SocialNetwork, currentState: boolean) => void
   onTogglePublicProfile?: (profileId: string, socialNetwork: SocialNetwork, currentState: boolean) => void
+  onLoadMore?: () => void
   profiles: Profile[]
   requireActiveProfile?: boolean
   registerCompleted?: boolean
   titleModal?: string
   messageModal?: string
   textButton?: string
+  hasMore?: boolean
+  loading?: boolean
 }
 
 export default ({
@@ -43,12 +47,15 @@ export default ({
   onTogglePublicProfile,
   onConfirm,
   onOpenChange,
+  onLoadMore,
   open,
   requireActiveProfile = false,
   registerCompleted = false,
   titleModal = '',
   messageModal = '',
   textButton = '',
+  hasMore = true,
+  loading = false,
 }: Props) => {
   const [width, setWidth] = useState<number>(window.innerWidth)
   const [height, setHeight] = useState<number>(window.innerHeight)
@@ -63,6 +70,12 @@ export default ({
     [onOpenChange],
   )
 
+  const handleLoadMore = useCallback(() => {
+    if (onLoadMore && typeof onLoadMore === 'function') {
+      onLoadMore()
+    }
+  }, [onLoadMore])
+
   const getToolTipType = useCallback(
     (profile: Profile) => {
       if (
@@ -159,86 +172,97 @@ export default ({
       buttonClose={false}
       modalSize={width > 991 ? 'md' : 'lg'}
       forceMobileNoMargin={true}
+      id="modal-creators-insights"
     >
       <div className="box-insights">
         <p dangerouslySetInnerHTML={{ __html: messageModal || t('insightsText', { socialNetwork: 'instagram' }) }} />
       </div>
       <div
         className="profiles-list"
+        id="modal-creators-insights-profiles-list"
+        // -80px para compensar o alerta de disponibilidade apenas para Instagram. Remover quando o alerta for removido.
         style={
           width < 991
-            ? { height: `calc(${height}px - 30px - 240px)`, overflow: 'scroll' }
-            : { maxHeight: `calc(${height}px - 58px - 61px)` }
+            ? { height: `calc(${height}px - 30px - 240px - 80px)`, overflow: 'scroll' }
+            : { maxHeight: `calc(${height}px - 58px - 61px - 80px)` }
         }
       >
-        {profiles.map((profile) => (
-          <div className="profile-item" key={profile.profileId}>
-            <div className="profile-and-username display-flex align-items-center">
-              <SqSocialConnect profiles={mapProfilesToSocialConnect([profile])} style={{ width: '40px', height: '40px' }} />
-              <span className="text-bold">@{profile.username}</span>
-            </div>
-            <div className="profile-selector display-flex justify-content-space-between align-items-center">
-              <span>
-                <i className="fa-regular fa-user-chart mr-2" />
-                {t('activateCreatorsInsights')}
-              </span>
-              <div className="wrapper-selectors toggle">
-                <SqSelector
-                  type="checkbox"
-                  name={`toggle-creators-insights-${profile.username}`}
-                  id={`toggle-creators-insights-${profile.profileId}`}
-                  checked={profile.hasCreatorsInsights}
-                  onChange={() => onToggleCreatorsInsights?.(profile.profileId, profile.socialNetwork, profile.hasCreatorsInsights)}
-                  errorSpan={false}
-                />
-                <label
-                  className="checkbox"
-                  htmlFor={`toggle-creators-insights-${profile.profileId}`}
-                  aria-label={`Toggle creator insights for ${profile.username}`}
-                ></label>
+        <SqInfinityScroll
+          elementToScrollId={'modal-creators-insights-profiles-list'}
+          loading={loading}
+          onLoadMore={() => handleLoadMore()}
+          endMessage={' '}
+          hasMore={hasMore}
+        >
+          {profiles.map((profile) => (
+            <div className="profile-item" key={profile.profileId}>
+              <div className="profile-and-username display-flex align-items-center">
+                <SqSocialConnect profiles={mapProfilesToSocialConnect([profile])} style={{ width: '40px', height: '40px' }} />
+                <span className="text-bold">@{profile.username}</span>
               </div>
-            </div>
-            <div className="profile-selector display-flex justify-content-space-between align-items-center">
-              <span>
-                <i className="fa-regular fa-eye mr-2" />
-                {t('makeProfilePublic')}
-                <SqTipComponent
-                  message={getToolTipType(profile) === 'info' ? t('tipForInfo') : t('tipForAlert')}
-                  icon={getToolTipType(profile) === 'info' ? 'fa-solid fa-info-circle' : 'fa-solid fa-triangle-exclamation'}
-                  color={getToolTipType(profile) === 'info' ? 'var(--blue-30)' : 'var(--red-30)'}
-                />
-              </span>
-              <div className="wrapper-selectors toggle">
-                <SqSelector
-                  type="checkbox"
-                  name={`toggle-public-profile-${profile.username}`}
-                  id={`toggle-public-profile-${profile.profileId}`}
-                  checked={
-                    !profile.hasCreatorsInsights ||
-                    !profile?.hasValidToken ||
-                    !registerCompleted ||
-                    (profile?.socialNetwork === 'instagram' && !profile?.hasSocialNetworkCache)
-                      ? false
-                      : profile?.isSharedCreatorsInsights
-                  }
-                  onChange={() => onTogglePublicProfile?.(profile.profileId, profile.socialNetwork, profile?.isSharedCreatorsInsights)}
-                  disabled={
-                    !profile.hasCreatorsInsights ||
-                    !profile?.hasValidToken ||
-                    !registerCompleted ||
-                    (profile?.socialNetwork === 'instagram' && !profile?.hasSocialNetworkCache)
-                  }
-                  errorSpan={false}
-                />
-                <label
-                  className="checkbox"
-                  htmlFor={`toggle-public-profile-${profile.profileId}`}
-                  aria-label={`Toggle visibility for ${profile.username}`}
-                ></label>
+              <div className="profile-selector display-flex justify-content-space-between align-items-center">
+                <span>
+                  <i className="fa-regular fa-user-chart mr-2" />
+                  {t('activateCreatorsInsights')}
+                </span>
+                <div className="wrapper-selectors toggle">
+                  <SqSelector
+                    type="checkbox"
+                    name={`toggle-creators-insights-${profile.username}`}
+                    id={`toggle-creators-insights-${profile.profileId}`}
+                    checked={profile.hasCreatorsInsights}
+                    onChange={() => onToggleCreatorsInsights?.(profile.profileId, profile.socialNetwork, profile.hasCreatorsInsights)}
+                    errorSpan={false}
+                  />
+                  <label
+                    className="checkbox"
+                    htmlFor={`toggle-creators-insights-${profile.profileId}`}
+                    aria-label={`Toggle creator insights for ${profile.username}`}
+                  ></label>
+                </div>
+              </div>
+              <div className="profile-selector display-flex justify-content-space-between align-items-center">
+                <span>
+                  <i className="fa-regular fa-eye mr-2" />
+                  {t('makeProfilePublic')}
+                  <SqTipComponent
+                    message={getToolTipType(profile) === 'info' ? t('tipForInfo') : t('tipForAlert')}
+                    icon={getToolTipType(profile) === 'info' ? 'fa-solid fa-info-circle' : 'fa-solid fa-triangle-exclamation'}
+                    color={getToolTipType(profile) === 'info' ? 'var(--blue-30)' : 'var(--red-30)'}
+                  />
+                </span>
+                <div className="wrapper-selectors toggle">
+                  <SqSelector
+                    type="checkbox"
+                    name={`toggle-public-profile-${profile.username}`}
+                    id={`toggle-public-profile-${profile.profileId}`}
+                    checked={
+                      !profile.hasCreatorsInsights ||
+                      !profile?.hasValidToken ||
+                      !registerCompleted ||
+                      (profile?.socialNetwork === 'instagram' && !profile?.hasSocialNetworkCache)
+                        ? false
+                        : profile?.isSharedCreatorsInsights
+                    }
+                    onChange={() => onTogglePublicProfile?.(profile.profileId, profile.socialNetwork, profile?.isSharedCreatorsInsights)}
+                    disabled={
+                      !profile.hasCreatorsInsights ||
+                      !profile?.hasValidToken ||
+                      !registerCompleted ||
+                      (profile?.socialNetwork === 'instagram' && !profile?.hasSocialNetworkCache)
+                    }
+                    errorSpan={false}
+                  />
+                  <label
+                    className="checkbox"
+                    htmlFor={`toggle-public-profile-${profile.profileId}`}
+                    aria-label={`Toggle visibility for ${profile.username}`}
+                  ></label>
+                </div>
               </div>
             </div>
-          </div>
-        ))}
+          ))}
+        </SqInfinityScroll>
       </div>
     </SqModal>
   )