fix(campaign): replace tag with meta namings

Author: marcbon

src/pages/Campaign/pageHeader/Tags/CampaignDurationTag.tsx renamed to src/pages/Campaign/pageHeader/Meta/CampaignDurationMeta.tsx

@@ -5,7 +5,7 @@ import { useTranslation, Trans } from 'react-i18next';
 import { Span } from '@appquality/unguess-design-system';
 import { Meta } from 'src/common/components/Meta';
 
-export const CampaignDurationTag = ({
+export const CampaignDurationMeta = ({
   start,
   end,
 }: {

src/pages/Campaign/pageHeader/Tags/deviceTags/DesktopTag.tsx renamed to src/pages/Campaign/pageHeader/Meta/DesktopMeta.tsx

@@ -2,7 +2,7 @@ import { useTranslation } from 'react-i18next';
 import { ReactComponent as DesktopIcon } from 'src/assets/icons/pill-icon-desktop.svg';
 import { Meta } from 'src/common/components/Meta';
 
-export const DesktopTag = () => {
+export const DesktopMeta = () => {
   const { t } = useTranslation();
   return (
     <Meta id="pill-desktop-header" size="large" icon={<DesktopIcon />}>

src/pages/Campaign/pageHeader/Tags/deviceTags/SmartphoneTag.tsx renamed to src/pages/Campaign/pageHeader/Meta/SmartphoneMeta.tsx

@@ -2,7 +2,7 @@ import { useTranslation } from 'react-i18next';
 import { ReactComponent as SmartphoneIcon } from 'src/assets/icons/pill-icon-smartphone.svg';
 import { Meta } from 'src/common/components/Meta';
 
-export const SmartphoneTag = () => {
+export const SmartphoneMeta = () => {
   const { t } = useTranslation();
   return (
     <Meta id="pill-smartphone-header" size="large" icon={<SmartphoneIcon />}>

src/pages/Campaign/pageHeader/Tags/deviceTags/TabletTag.tsx renamed to src/pages/Campaign/pageHeader/Meta/TabletMeta.tsx

@@ -2,7 +2,7 @@ import { useTranslation } from 'react-i18next';
 import { ReactComponent as TabletIcon } from 'src/assets/icons/pill-icon-tablet.svg';
 import { Meta } from 'src/common/components/Meta';
 
-export const TabletTag = () => {
+export const TabletMeta = () => {
   const { t } = useTranslation();
   return (
     <Meta id="pill-tablet-header" size="large" icon={<TabletIcon />}>

src/pages/Campaign/pageHeader/Tags/index.tsx renamed to src/pages/Campaign/pageHeader/Meta/index.tsx

@@ -15,10 +15,10 @@ import { useLocalizeRoute } from 'src/hooks/useLocalizedRoute';
 import { CampaignStatus } from 'src/types';
 import { StatusMeta } from 'src/common/components/meta/StatusMeta';
 import useWindowSize from 'src/hooks/useWindowSize';
-import { DesktopTag } from './deviceTags/DesktopTag';
-import { SmartphoneTag } from './deviceTags/SmartphoneTag';
-import { TabletTag } from './deviceTags/TabletTag';
-import { CampaignDurationTag } from './CampaignDurationTag';
+import { DesktopMeta } from './DesktopMeta';
+import { SmartphoneMeta } from './SmartphoneMeta';
+import { TabletMeta } from './TabletMeta';
+import { CampaignDurationMeta } from './CampaignDurationMeta';
 
 const ButtonWrapper = styled.div`
   display: flex;
@@ -49,15 +49,15 @@ const FooterContainer = styled.div`
   }
 `;
 
-const TagsWrapper = styled.div`
+const MetasWrapper = styled.div`
   display: flex;
   align-items: center;
   justify-content: flex-start;
   flex-direction: row;
   flex-wrap: wrap;
 `;
 
-export const Tags = ({ campaign }: { campaign: CampaignWithOutput }) => {
+export const Metas = ({ campaign }: { campaign: CampaignWithOutput }) => {
   const { width } = useWindowSize();
   const breakpoint = parseInt(globalTheme.breakpoints.lg, 10);
   const hide = width < breakpoint;
@@ -78,21 +78,21 @@ export const Tags = ({ campaign }: { campaign: CampaignWithOutput }) => {
 
   return (
     <FooterContainer>
-      <TagsWrapper>
+      <MetasWrapper>
         <StatusMeta status={family.name.toLowerCase() as CampaignStatus}>
           {type.name}
         </StatusMeta>
         <StatusMeta status={status.name as CampaignStatus} />
-        <CampaignDurationTag start={start_date} end={end_date} />
+        <CampaignDurationMeta start={start_date} end={end_date} />
         {meta ? (
           <>
             {!hide && <Pipe style={{ marginRight: globalTheme.space.lg }} />}
-            {meta.allowed_devices.includes('desktop') && <DesktopTag />}
-            {meta.allowed_devices.includes('smartphone') && <SmartphoneTag />}
-            {meta.allowed_devices.includes('tablet') && <TabletTag />}
+            {meta.allowed_devices.includes('desktop') && <DesktopMeta />}
+            {meta.allowed_devices.includes('smartphone') && <SmartphoneMeta />}
+            {meta.allowed_devices.includes('tablet') && <TabletMeta />}
           </>
         ) : null}
-      </TagsWrapper>
+      </MetasWrapper>
       <ButtonWrapper>
         {outputs?.includes('media') && (
           <Button

src/pages/Campaign/pageHeader/index.tsx

@@ -2,12 +2,12 @@ import { Anchor, PageHeader } from '@appquality/unguess-design-system';
 import { useNavigate } from 'react-router-dom';
 import styled from 'styled-components';
 import { LayoutWrapper } from 'src/common/components/LayoutWrapper';
-import { Tags } from './Tags';
+import { Metas } from './Meta';
 import { HeaderSkeleton } from './HeaderSkeleton';
 import { EditableTitle } from './EditableTitle';
 import { useCampaign } from './useCampaign';
 
-const StyledTagsWrapper = styled(PageHeader.Meta)`
+const StyledMetasWrapper = styled(PageHeader.Meta)`
   width: 100%;
 `;
 
@@ -35,9 +35,9 @@ const CampaignPageHeader = ({ campaignId }: { campaignId: number }) => {
           <PageHeader.Title>
             <EditableTitle campaignId={campaignId} />
           </PageHeader.Title>
-          <StyledTagsWrapper>
-            <Tags campaign={campaign} />
-          </StyledTagsWrapper>
+          <StyledMetasWrapper>
+            <Metas campaign={campaign} />
+          </StyledMetasWrapper>
         </PageHeader.Main>
       </PageHeader>
     </LayoutWrapper>