moat data updates

Giphy · May 2, 2024 · d7bab79 · d7bab79
1 parent d1851ca
commit d7bab79
Show file tree

Hide file tree

Showing 8 changed files with 8 additions and 127 deletions.
diff --git a/.changeset/fluffy-pots-notice.md b/.changeset/fluffy-pots-notice.md
diff --git a/packages/react-components/src/components/gif.tsx b/packages/react-components/src/components/gif.tsx
@@ -2,7 +2,6 @@
 import { giphyBlue, giphyGreen, giphyPurple, giphyRed, giphyYellow } from '@giphy/colors'
 import { IGif, IUser, ImageAllTypes } from '@giphy/js-types'
 import { Logger, getAltText, getBestRendition, getGifHeight } from '@giphy/js-util'
-import MoatTracking from './moat-tracking'
 import 'intersection-observer'
 import React, { ElementType, ReactNode, SyntheticEvent, useContext, useEffect, useRef, useState } from 'react'
 import styled from 'styled-components'
@@ -290,8 +289,11 @@ const Gif = ({
                     alt={getAltText(gif)}
                     onLoad={shouldShowMedia ? onImageLoad : () => {}}
                 />
+                {isAd &&
+                    bottleData?.tags?.map((tag: string, index: number) => (
+                        <div dangerouslySetInnerHTML={{ __html: tag }} key={index} />
+                    ))}
             </picture>
-            {isAd && <MoatTracking bottleData={bottleData} />}
             {Overlay && (
                 // only render the overlay on the client since it depends on shouldShowMedia
                 <RenderOnClient>

diff --git a/packages/react-components/src/components/moat-tracking.tsx b/packages/react-components/src/components/moat-tracking.tsx
diff --git a/packages/react-components/stories/gif.stories.tsx b/packages/react-components/stories/gif.stories.tsx
@@ -106,27 +106,10 @@ export const GifWithOverlay: Story = {
 export const GifWithAd: Story = {
     args: {
         bottle_data: {
-            tid: 'd7494a8384b6906a880ff6dcc16a7151d3f2a3e8413be76e9ddb4ee1f8dc9fd0',
-            tags: [],
-            tdata: {
-                om: [],
-                bartab: [],
-                web: [
-                    {
-                        vendor: 'Moat',
-                        verificationParameters: {
-                            moatClientLevel1: 'Giphy',
-                            moatClientLevel2: 'Giphy',
-                            moatClientLevel3: 'Giphy',
-                            moatClientLevel4: 'Giphy',
-                            moatClientSlicer1: 'Giphy',
-                            moatClientSlicer2: 'Giphy',
-                            zMoatPosition: 'Giphy',
-                        },
-                    },
-                ],
-                click_out_url: '',
-            },
+            tid: '8691c382d3eed000da83ecc2ceef747b91190ab0e5bc0bc95ff5c80eeda242fa',
+            tags: [
+                '<noscript class="MOAT-giphydisplay879451385633?moatClientLevel1=ff6046d1-7125-462a-809c-efa338464775&amp;moatClientLevel2=e66d47a2-1b13-4b74-a34d-23fbdc10ddb5&amp;moatClientLevel3=82&amp;moatClientLevel4=3o7WIw8TV4UJROSElW&amp;moatClientSlicer1=e26c89fe-fb01-4442-9e8f-37940600265c&amp;moatClientSlicer2=giphytrending"></noscript><script src="https://z.moatads.com/giphydisplay879451385633/moatad.js#moatClientLevel1=ff6046d1-7125-462a-809c-efa338464775&moatClientLevel2=e66d47a2-1b13-4b74-a34d-23fbdc10ddb5&moatClientLevel3=82&moatClientLevel4=3o7WIw8TV4UJROSElW&moatClientSlicer1=e26c89fe-fb01-4442-9e8f-37940600265c&moatClientSlicer2=giphytrending" type="text/javascript"></script>',
+            ],
         },
     },
 }

diff --git a/packages/util/package.json b/packages/util/package.json
@@ -35,11 +35,9 @@
     },
     "dependencies": {
         "@giphy/js-types": "*",
-        "dompurify": "3.1.0",
         "uuid": "^9.0.0"
     },
     "devDependencies": {
-        "@types/dompurify": "^2.0.4",
         "@types/uuid": "^8.3.0",
         "typescript": "^5.0.4"
     }

diff --git a/packages/util/src/construct-moat-data.ts b/packages/util/src/construct-moat-data.ts
diff --git a/packages/util/src/index.ts b/packages/util/src/index.ts
@@ -1,6 +1,5 @@
 export { default as bestfit, setRenditionScaleUpMaxPixels } from './bestfit'
 export * from './collections'
-export * from './construct-moat-data'
 export { default as getClientRect } from './get-client-rect-from-el'
 export { default as getPingbackId } from './get-pingback-id'
 export {

diff --git a/yarn.lock b/yarn.lock
@@ -2549,9 +2549,7 @@ __metadata:
   resolution: "@giphy/js-util@workspace:packages/util"
   dependencies:
     "@giphy/js-types": "*"
-    "@types/dompurify": ^2.0.4
     "@types/uuid": ^8.3.0
-    dompurify: 3.1.0
     typescript: ^5.0.4
     uuid: ^9.0.0
   languageName: unknown
@@ -5164,15 +5162,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/dompurify@npm:^2.0.4":
-  version: 2.4.0
-  resolution: "@types/dompurify@npm:2.4.0"
-  dependencies:
-    "@types/trusted-types": "npm:*"
-  checksum: b48cd81e997794ebc390c7c5bef1a67ec14a6f2f0521973e07e06af186c7583abe114d94d24868c0632b9573f5bd77131a4b76f3fffdf089ba99a4e53dd46c39
-  languageName: node
-  linkType: hard
-
 "@types/ejs@npm:^3.1.1":
   version: 3.1.2
   resolution: "@types/ejs@npm:3.1.2"
@@ -5651,13 +5640,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/trusted-types@npm:*":
-  version: 2.0.3
-  resolution: "@types/trusted-types@npm:2.0.3"
-  checksum: 4794804bc4a4a173d589841b6d26cf455ff5dc4f3e704e847de7d65d215f2e7043d8757e4741ce3a823af3f08260a8d04a1a6e9c5ec9b20b7b04586956a6b005
-  languageName: node
-  linkType: hard
-
 "@types/unist@npm:^2.0.0":
   version: 2.0.7
   resolution: "@types/unist@npm:2.0.7"
@@ -9648,13 +9630,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"dompurify@npm:3.1.0":
-  version: 3.1.0
-  resolution: "dompurify@npm:3.1.0"
-  checksum: 06fc76607cd076e394b2ea5479ab6f0407b8fedb6877ae95e94207b878365e5e1cd914055dacce152a5f419818afb8d4cd284b780246cf35363f0747c179a0ba
-  languageName: node
-  linkType: hard
-
 "domutils@npm:^1.5.1, domutils@npm:^1.7.0":
   version: 1.7.0
   resolution: "domutils@npm:1.7.0"