From f997216d82480331c4a788d8b6da8d87c78c872a Mon Sep 17 00:00:00 2001
From: Ralph <janicklas@google.com>
Date: Tue, 22 Aug 2023 21:38:32 -0700
Subject: [PATCH 1/6] Updating Third party capital version. Refactor
 next/third-parties to update the way components are built.

---
 packages/third-parties/README.md              |  10 +-
 packages/third-parties/package.json           |   3 +-
 .../scripts/update-third-parties.js           | 121 ------------------
 .../src/ThirdPartyScriptEmbed.tsx             |  10 +-
 .../src/google/GoogleMapsEmbed.tsx            |  20 +++
 .../third-parties/src/google/YouTubeEmbed.tsx |  35 +++++
 packages/third-parties/src/google/index.tsx   |  42 +-----
 .../third-parties/src/google/tpc-config.json  |   4 -
 packages/third-parties/src/types/google.ts    |   2 +-
 pnpm-lock.yaml                                |   8 +-
 .../app/google-maps-embed/page.js             |   5 +-
 .../third-parties/app/youtube-embed/page.js   |   4 +-
 test/e2e/app-dir/third-parties/basic.test.ts  |   3 +-
 test/e2e/third-parties/index.test.ts          |   2 +-
 .../third-parties/pages/google-maps-embed.js  |   4 +-
 test/e2e/third-parties/pages/youtube-embed.js |   4 +-
 16 files changed, 85 insertions(+), 192 deletions(-)
 delete mode 100644 packages/third-parties/scripts/update-third-parties.js
 create mode 100644 packages/third-parties/src/google/GoogleMapsEmbed.tsx
 create mode 100644 packages/third-parties/src/google/YouTubeEmbed.tsx
 delete mode 100644 packages/third-parties/src/google/tpc-config.json

diff --git a/packages/third-parties/README.md b/packages/third-parties/README.md
index 77cffc8b0c26b..f325e42a4e341 100644
--- a/packages/third-parties/README.md
+++ b/packages/third-parties/README.md
@@ -10,13 +10,13 @@
 
 ### YouTube Embed
 
-The `YoutubeEmbed` component is used to load and display a YouTube embed. This component loads faster by using [lite-youtube-embed](https://github.com/paulirish/lite-youtube-embed) under the hood.
+The `YouTubeEmbed` component is used to load and display a YouTube embed. This component loads faster by using [lite-youtube-embed](https://github.com/paulirish/lite-youtube-embed) under the hood.
 
 ```js
-import { YoutubeEmbed } from '@next/third-parties/google'
+import { YouTubeEmbed } from '@next/third-parties/google'
 
 export default function Page() {
-  return <YoutubeEmbed videoid="ogfYd705cRs" height={400} />
+  return <YouTubeEmbed videoid="ogfYd705cRs" height={400} />
 }
 ```
 
@@ -33,8 +33,8 @@ export default function Page() {
       apiKey="XYZ"
       height={200}
       width="100%"
-      mapMode="place"
-      parameters="q=Brooklyn+Bridge,New+York,NY"
+      mode="place"
+      q="Brooklyn+Bridge,New+York,NY"
     />
   )
 }
diff --git a/packages/third-parties/package.json b/packages/third-parties/package.json
index 7490779cf980f..bfaa82bed2521 100644
--- a/packages/third-parties/package.json
+++ b/packages/third-parties/package.json
@@ -16,12 +16,11 @@
   "scripts": {
     "build": "rm -rf dist && tsc -d -p tsconfig.json",
     "prepublishOnly": "cd ../../ && turbo run build",
-    "update-third-parties": "rm -rf src/**/index.tsx && node scripts/update-third-parties",
     "dev": "tsc -d -w -p tsconfig.json",
     "typescript": "tsec --noEmit -p tsconfig.json"
   },
   "dependencies": {
-    "third-party-capital": "1.0.17"
+    "third-party-capital": "1.0.20"
   },
   "devDependencies": {
     "next": "13.4.20-canary.2",
diff --git a/packages/third-parties/scripts/update-third-parties.js b/packages/third-parties/scripts/update-third-parties.js
deleted file mode 100644
index 5f7ed1b30e571..0000000000000
--- a/packages/third-parties/scripts/update-third-parties.js
+++ /dev/null
@@ -1,121 +0,0 @@
-const fs = require('fs/promises')
-const path = require('path')
-const AllThirdParties = require('third-party-capital')
-// eslint-disable-next-line import/no-extraneous-dependencies
-const prettier = require('prettier')
-// eslint-disable-next-line import/no-extraneous-dependencies
-const { outdent } = require('outdent')
-
-const scriptStrategy = {
-  server: 'beforeInteractive',
-  client: 'afterInteractive',
-  idle: 'lazyOnload',
-  worker: 'worker',
-}
-
-const SRC = path.join(__dirname, '../src')
-const CONFIG_FILE_NAME = 'tpc-config.json'
-
-function generateComponent(thirdParty) {
-  let thirdPartyFunctions = ''
-
-  const insertScripts = (id, scripts, stylesheets) => {
-    let props = ''
-
-    if (stylesheets?.length > 0) {
-      // TODO: Remove ts-ignore after new <Script> component is published
-      // New <Script> accepts stylesheet as a param. Otherwise it throws error
-      props += `
-      // @ts-ignore
-      stylesheets={${JSON.stringify(stylesheets)}}`
-    }
-
-    return scripts
-      .map((script) => {
-        if (typeof script === 'string') {
-          // External script with only URL
-          return `<Script src="${script}"${props} />`
-        } else if (script.url) {
-          // External script with additional properties
-          // TODO: Validate the strategy. Set fallback if an inpnpvalid strategy is passed
-          const { url, strategy } = script
-          return `<Script src={\`${url}\`} strategy="${scriptStrategy[strategy]}"${props} />`
-        } else if (script.code) {
-          // Inline script with additional properties
-          const { code, strategy } = script
-          return outdent`<Script
-            id="${id}"
-            strategy="${scriptStrategy[strategy]}"
-            dangerouslySetInnerHTML={{
-              __html: \`${code}\`,
-            }}${props}
-          />`
-        }
-
-        return ''
-      })
-      .join('')
-  }
-
-  const { id, description, content, scripts, stylesheets } =
-    AllThirdParties[thirdParty]
-
-  thirdPartyFunctions += outdent`
-
-    // ${description}
-    export function ${thirdParty}(args: Types.${thirdParty}) {
-      return (
-        <ThirdPartyScriptEmbed
-          ${content ? 'height={args.height || null}' : ''}
-          ${content ? 'width={args.width || null}' : ''}
-          ${content ? `content={\`${content}\`}` : ''}
-          dataNtpc="${thirdParty}"
-        >
-          ${scripts?.length > 0 ? insertScripts(id, scripts, stylesheets) : ''}
-        </ThirdPartyScriptEmbed>
-      )
-    }
-    `
-
-  return thirdPartyFunctions
-}
-
-;(async () => {
-  const dirs = (await fs.readdir(SRC, { withFileTypes: true }))
-    .filter((dirent) => dirent.isDirectory())
-    .map((dirent) => dirent.name)
-
-  for (let dir of dirs) {
-    // Fetch the list of third-parties from tpc-config.json
-    // Then retrieve its loading instructions from Third Party Capital
-    const dirPath = path.join(SRC, dir)
-
-    const configFile = (await fs.readdir(dirPath)).find(
-      (file) => file === CONFIG_FILE_NAME
-    )
-
-    if (!configFile) continue
-
-    const config = JSON.parse(await fs.readFile(path.join(dirPath, configFile)))
-
-    let thirdPartyFunctions = `/**
-    * This is an autogenerated file by update-third-parties.js
-    */
-    import React from 'react'
-    import Script from 'next/script'
-
-    import ThirdPartyScriptEmbed from '../ThirdPartyScriptEmbed'
-    import * as Types from '../types/${dir}'
-    `
-    for (const thirdParty of Object.values(config)) {
-      thirdPartyFunctions += generateComponent(thirdParty)
-    }
-
-    await Promise.all([
-      fs.writeFile(
-        path.join(dirPath, 'index.tsx'),
-        prettier.format(thirdPartyFunctions, { semi: false, parser: 'babel' })
-      ),
-    ])
-  }
-})()
diff --git a/packages/third-parties/src/ThirdPartyScriptEmbed.tsx b/packages/third-parties/src/ThirdPartyScriptEmbed.tsx
index 9354ce6483ed8..8c220e4815cb5 100644
--- a/packages/third-parties/src/ThirdPartyScriptEmbed.tsx
+++ b/packages/third-parties/src/ThirdPartyScriptEmbed.tsx
@@ -1,7 +1,7 @@
 import React from 'react'
 
 export type ScriptEmbed = {
-  content?: string
+  html?: string | null
   height?: number | null
   width?: number | null
   children?: React.ReactElement | React.ReactElement[]
@@ -9,7 +9,7 @@ export type ScriptEmbed = {
 }
 
 export default function ThirdPartyScriptEmbed({
-  content,
+  html,
   height = null,
   width = null,
   children,
@@ -19,15 +19,15 @@ export default function ThirdPartyScriptEmbed({
     <>
       {/* insert script children */}
       {children}
-      {/* insert content */}
-      {content && (
+      {/* insert html */}
+      {html && (
         <div
           style={{
             height: height != null ? `${height}px` : 'auto',
             width: width != null ? `${width}px` : 'auto',
           }}
           data-ntpc={dataNtpc}
-          dangerouslySetInnerHTML={{ __html: content }}
+          dangerouslySetInnerHTML={{ __html: html }}
         />
       )}
     </>
diff --git a/packages/third-parties/src/google/GoogleMapsEmbed.tsx b/packages/third-parties/src/google/GoogleMapsEmbed.tsx
new file mode 100644
index 0000000000000..9180546c332d2
--- /dev/null
+++ b/packages/third-parties/src/google/GoogleMapsEmbed.tsx
@@ -0,0 +1,20 @@
+import React from 'react'
+import { GoogleMapsEmbed as TPCGoogleMapEmbed } from 'third-party-capital'
+
+import ThirdPartyScriptEmbed from '../ThirdPartyScriptEmbed'
+import { GoogleMapsEmbed } from '../types/google'
+
+export default function GoogleMapsEmbed(props: GoogleMapsEmbed) {
+  const { apiKey, ...restProps } = props
+  const formattedProps = { ...restProps, key: apiKey }
+  const { html } = TPCGoogleMapEmbed(formattedProps)
+
+  return (
+    <ThirdPartyScriptEmbed
+      height={formattedProps.height || null}
+      width={formattedProps.width || null}
+      html={html}
+      dataNtpc="GoogleMapsEmbed"
+    ></ThirdPartyScriptEmbed>
+  )
+}
diff --git a/packages/third-parties/src/google/YouTubeEmbed.tsx b/packages/third-parties/src/google/YouTubeEmbed.tsx
new file mode 100644
index 0000000000000..b1a779fdd95c4
--- /dev/null
+++ b/packages/third-parties/src/google/YouTubeEmbed.tsx
@@ -0,0 +1,35 @@
+import React from 'react'
+import Script from 'next/script'
+import { YouTubeEmbed as TPCYouTubeEmbed } from 'third-party-capital'
+
+import ThirdPartyScriptEmbed from '../ThirdPartyScriptEmbed'
+import { YouTubeEmbed } from '../types/google'
+
+const scriptStrategy = {
+  server: 'beforeInteractive',
+  client: 'afterInteractive',
+  idle: 'lazyOnload',
+  worker: 'worker',
+}
+
+export default function YouTubeEmbed(props: YouTubeEmbed) {
+  const { html, scripts, stylesheets } = TPCYouTubeEmbed(props)
+
+  return (
+    <ThirdPartyScriptEmbed
+      height={props.height || null}
+      width={props.width || null}
+      html={html}
+      dataNtpc="YoutubeEmbed"
+    >
+      {scripts?.map((script) => (
+        <Script
+          src={script.url}
+          strategy={scriptStrategy[script.strategy]}
+          // @ts-ignore
+          stylesheets={stylesheets}
+        />
+      ))}
+    </ThirdPartyScriptEmbed>
+  )
+}
diff --git a/packages/third-parties/src/google/index.tsx b/packages/third-parties/src/google/index.tsx
index 534cb0dbcb451..aa704aae1c427 100644
--- a/packages/third-parties/src/google/index.tsx
+++ b/packages/third-parties/src/google/index.tsx
@@ -1,40 +1,2 @@
-/**
- * This is an autogenerated file by update-third-parties.js
- */
-import React from 'react'
-import Script from 'next/script'
-
-import ThirdPartyScriptEmbed from '../ThirdPartyScriptEmbed'
-import * as Types from '../types/google'
-
-// Embed a Google Maps embed on your webpage
-export function GoogleMapsEmbed(args: Types.GoogleMapsEmbed) {
-  return (
-    <ThirdPartyScriptEmbed
-      height={args.height || null}
-      width={args.width || null}
-      content={`<iframe loading="lazy" src="https://www.google.com/maps/embed/v1/${args.mapMode}?key=${args.apiKey}&${args.parameters}" width=${args.width} height=${args.height} style=${args.style} allowfullscreen=${args.allowfullscreen} referrerpolicy="no-referrer-when-downgrade"></iframe>`}
-      dataNtpc="GoogleMapsEmbed"
-    ></ThirdPartyScriptEmbed>
-  )
-}
-// Embed a YouTube embed on your webpage.
-export function YoutubeEmbed(args: Types.YoutubeEmbed) {
-  return (
-    <ThirdPartyScriptEmbed
-      height={args.height || null}
-      width={args.width || null}
-      content={`<lite-youtube videoid=${args.videoid} playlabel=${args.playlabel}></lite-youtube>`}
-      dataNtpc="YoutubeEmbed"
-    >
-      <Script
-        src={`https://cdn.jsdelivr.net/gh/paulirish/lite-youtube-embed@master/src/lite-yt-embed.js`}
-        strategy="lazyOnload"
-        // @ts-ignore
-        stylesheets={[
-          'https://cdn.jsdelivr.net/gh/paulirish/lite-youtube-embed@master/src/lite-yt-embed.css',
-        ]}
-      />
-    </ThirdPartyScriptEmbed>
-  )
-}
+export { default as GoogleMapsEmbed } from './GoogleMapsEmbed'
+export { default as YouTubeEmbed } from './YouTubeEmbed'
diff --git a/packages/third-parties/src/google/tpc-config.json b/packages/third-parties/src/google/tpc-config.json
deleted file mode 100644
index 25f1ee7f08c37..0000000000000
--- a/packages/third-parties/src/google/tpc-config.json
+++ /dev/null
@@ -1,4 +0,0 @@
-{
-  "google-maps-embed": "GoogleMapsEmbed",
-  "youtube-embed": "YoutubeEmbed"
-}
diff --git a/packages/third-parties/src/types/google.ts b/packages/third-parties/src/types/google.ts
index 6c4dc9e77bf37..453940bbfe7b3 100644
--- a/packages/third-parties/src/types/google.ts
+++ b/packages/third-parties/src/types/google.ts
@@ -9,7 +9,7 @@ export type GoogleMapsEmbed = {
   loading: 'eager' | 'lazy'
 }
 
-export type YoutubeEmbed = {
+export type YouTubeEmbed = {
   height?: number
   width?: number
   videoid: string
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 695d0c62a74ff..c5e20f34128c3 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -1594,8 +1594,8 @@ importers:
         specifier: ^18.2.0
         version: 18.2.0
       third-party-capital:
-        specifier: 1.0.17
-        version: 1.0.17
+        specifier: 1.0.20
+        version: 1.0.20
     devDependencies:
       next:
         specifier: 13.4.20-canary.2
@@ -24862,8 +24862,8 @@ packages:
   /text-table@0.2.0:
     resolution: {integrity: sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==}
 
-  /third-party-capital@1.0.17:
-    resolution: {integrity: sha512-TOoAmaUg1sYZNErMrsEdEp8BSgtnnJL9nhHwisv3kZ2d1Ze0Cjj4zdv/qgwhVPqMvecTI3ZNxhrKSvkYEY2qtg==}
+  /third-party-capital@1.0.20:
+    resolution: {integrity: sha512-oB7yIimd8SuGptespDAZnNkzIz+NWaJCu2RMsbs4Wmp9zSDUM8Nhi3s2OOcqYuv3mN4hitXc8DVx+LyUmbUDiA==}
     dev: false
 
   /throat@6.0.1:
diff --git a/test/e2e/app-dir/third-parties/app/google-maps-embed/page.js b/test/e2e/app-dir/third-parties/app/google-maps-embed/page.js
index 4a9017e627ba7..28210fe9bab6f 100644
--- a/test/e2e/app-dir/third-parties/app/google-maps-embed/page.js
+++ b/test/e2e/app-dir/third-parties/app/google-maps-embed/page.js
@@ -8,8 +8,9 @@ const Page = () => {
         apiKey="XYZ"
         height={200}
         width="100%"
-        mapMode="place"
-        parameters="q=Brooklyn+Bridge,New+York,NY"
+        mode="place"
+        id="maps-embed"
+        q="Brooklyn+Bridge,New+York,NY"
       />
     </div>
   )
diff --git a/test/e2e/app-dir/third-parties/app/youtube-embed/page.js b/test/e2e/app-dir/third-parties/app/youtube-embed/page.js
index 1396464fad574..bc07ee42127d9 100644
--- a/test/e2e/app-dir/third-parties/app/youtube-embed/page.js
+++ b/test/e2e/app-dir/third-parties/app/youtube-embed/page.js
@@ -1,10 +1,10 @@
-import { YoutubeEmbed } from '@next/third-parties/google'
+import { YouTubeEmbed } from '@next/third-parties/google'
 
 const Page = () => {
   return (
     <div class="container">
       <h1>Youtube Embed</h1>
-      <YoutubeEmbed videoid="ogfYd705cRs" height={400} />
+      <YouTubeEmbed videoid="ogfYd705cRs" height={400} />
     </div>
   )
 }
diff --git a/test/e2e/app-dir/third-parties/basic.test.ts b/test/e2e/app-dir/third-parties/basic.test.ts
index 6fd22cde1d5ec..b52b1d9de0529 100644
--- a/test/e2e/app-dir/third-parties/basic.test.ts
+++ b/test/e2e/app-dir/third-parties/basic.test.ts
@@ -22,8 +22,9 @@ createNextDescribe(
       const $ = await next.render$('/google-maps-embed')
 
       const baseContainer = $('[data-ntpc="GoogleMapsEmbed"]')
+
       const mapContainer = $(
-        '[src="https://www.google.com/maps/embed/v1/place?key=XYZ&q=Brooklyn+Bridge,New+York,NY"]'
+        '[src^="https://www.google.com/maps/embed/v1/place?key=XYZ"]'
       )
       expect(baseContainer.length).toBe(1)
       expect(mapContainer.length).toBe(1)
diff --git a/test/e2e/third-parties/index.test.ts b/test/e2e/third-parties/index.test.ts
index 6fd22cde1d5ec..dce402bed0064 100644
--- a/test/e2e/third-parties/index.test.ts
+++ b/test/e2e/third-parties/index.test.ts
@@ -23,7 +23,7 @@ createNextDescribe(
 
       const baseContainer = $('[data-ntpc="GoogleMapsEmbed"]')
       const mapContainer = $(
-        '[src="https://www.google.com/maps/embed/v1/place?key=XYZ&q=Brooklyn+Bridge,New+York,NY"]'
+        '[src^="https://www.google.com/maps/embed/v1/place?key=XYZ"]'
       )
       expect(baseContainer.length).toBe(1)
       expect(mapContainer.length).toBe(1)
diff --git a/test/e2e/third-parties/pages/google-maps-embed.js b/test/e2e/third-parties/pages/google-maps-embed.js
index 4a9017e627ba7..e10afb97b337d 100644
--- a/test/e2e/third-parties/pages/google-maps-embed.js
+++ b/test/e2e/third-parties/pages/google-maps-embed.js
@@ -8,8 +8,8 @@ const Page = () => {
         apiKey="XYZ"
         height={200}
         width="100%"
-        mapMode="place"
-        parameters="q=Brooklyn+Bridge,New+York,NY"
+        mode="place"
+        q="Brooklyn+Bridge,New+York,NY"
       />
     </div>
   )
diff --git a/test/e2e/third-parties/pages/youtube-embed.js b/test/e2e/third-parties/pages/youtube-embed.js
index 1396464fad574..bc07ee42127d9 100644
--- a/test/e2e/third-parties/pages/youtube-embed.js
+++ b/test/e2e/third-parties/pages/youtube-embed.js
@@ -1,10 +1,10 @@
-import { YoutubeEmbed } from '@next/third-parties/google'
+import { YouTubeEmbed } from '@next/third-parties/google'
 
 const Page = () => {
   return (
     <div class="container">
       <h1>Youtube Embed</h1>
-      <YoutubeEmbed videoid="ogfYd705cRs" height={400} />
+      <YouTubeEmbed videoid="ogfYd705cRs" height={400} />
     </div>
   )
 }

From cf8eb13a1626cf787e24c963770eae229b94e341 Mon Sep 17 00:00:00 2001
From: Ralph <janicklas@google.com>
Date: Tue, 22 Aug 2023 21:51:20 -0700
Subject: [PATCH 2/6] fix lint

---
 packages/third-parties/src/google/YouTubeEmbed.tsx | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/packages/third-parties/src/google/YouTubeEmbed.tsx b/packages/third-parties/src/google/YouTubeEmbed.tsx
index b1a779fdd95c4..fe0bbf57946cc 100644
--- a/packages/third-parties/src/google/YouTubeEmbed.tsx
+++ b/packages/third-parties/src/google/YouTubeEmbed.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import Script from 'next/script'
+import Script, { ScriptProps } from 'next/script'
 import { YouTubeEmbed as TPCYouTubeEmbed } from 'third-party-capital'
 
 import ThirdPartyScriptEmbed from '../ThirdPartyScriptEmbed'
@@ -20,13 +20,12 @@ export default function YouTubeEmbed(props: YouTubeEmbed) {
       height={props.height || null}
       width={props.width || null}
       html={html}
-      dataNtpc="YoutubeEmbed"
+      dataNtpc="YouTubeEmbed"
     >
       {scripts?.map((script) => (
         <Script
           src={script.url}
-          strategy={scriptStrategy[script.strategy]}
-          // @ts-ignore
+          strategy={scriptStrategy[script.strategy] as ScriptProps['strategy']}
           stylesheets={stylesheets}
         />
       ))}

From 70c22a52c5b63879958f852c5755d902e11df601 Mon Sep 17 00:00:00 2001
From: Ralph <janicklas@google.com>
Date: Tue, 22 Aug 2023 22:12:01 -0700
Subject: [PATCH 3/6] fix lint

---
 packages/third-parties/src/google/GoogleMapsEmbed.tsx | 4 ++--
 packages/third-parties/src/google/YouTubeEmbed.tsx    | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/third-parties/src/google/GoogleMapsEmbed.tsx b/packages/third-parties/src/google/GoogleMapsEmbed.tsx
index 9180546c332d2..047c2af146860 100644
--- a/packages/third-parties/src/google/GoogleMapsEmbed.tsx
+++ b/packages/third-parties/src/google/GoogleMapsEmbed.tsx
@@ -2,9 +2,9 @@ import React from 'react'
 import { GoogleMapsEmbed as TPCGoogleMapEmbed } from 'third-party-capital'
 
 import ThirdPartyScriptEmbed from '../ThirdPartyScriptEmbed'
-import { GoogleMapsEmbed } from '../types/google'
+import { GoogleMapsEmbed as GoogleMapsEmbedTypes } from '../types/google'
 
-export default function GoogleMapsEmbed(props: GoogleMapsEmbed) {
+export default function GoogleMapsEmbed(props: GoogleMapsEmbedTypes) {
   const { apiKey, ...restProps } = props
   const formattedProps = { ...restProps, key: apiKey }
   const { html } = TPCGoogleMapEmbed(formattedProps)
diff --git a/packages/third-parties/src/google/YouTubeEmbed.tsx b/packages/third-parties/src/google/YouTubeEmbed.tsx
index fe0bbf57946cc..fec2c07d282e8 100644
--- a/packages/third-parties/src/google/YouTubeEmbed.tsx
+++ b/packages/third-parties/src/google/YouTubeEmbed.tsx
@@ -3,7 +3,7 @@ import Script, { ScriptProps } from 'next/script'
 import { YouTubeEmbed as TPCYouTubeEmbed } from 'third-party-capital'
 
 import ThirdPartyScriptEmbed from '../ThirdPartyScriptEmbed'
-import { YouTubeEmbed } from '../types/google'
+import { YouTubeEmbed as YouTubeEmbedTypes } from '../types/google'
 
 const scriptStrategy = {
   server: 'beforeInteractive',
@@ -12,7 +12,7 @@ const scriptStrategy = {
   worker: 'worker',
 }
 
-export default function YouTubeEmbed(props: YouTubeEmbed) {
+export default function YouTubeEmbed(props: YouTubeEmbedTypes) {
   const { html, scripts, stylesheets } = TPCYouTubeEmbed(props)
 
   return (

From 2a615051f0358f05fa76051950446eae5c743d0e Mon Sep 17 00:00:00 2001
From: Ralph <janicklas@google.com>
Date: Wed, 23 Aug 2023 10:43:19 -0700
Subject: [PATCH 4/6] Fix test

---
 test/e2e/app-dir/third-parties/basic.test.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/test/e2e/app-dir/third-parties/basic.test.ts b/test/e2e/app-dir/third-parties/basic.test.ts
index b52b1d9de0529..82c5305e07839 100644
--- a/test/e2e/app-dir/third-parties/basic.test.ts
+++ b/test/e2e/app-dir/third-parties/basic.test.ts
@@ -12,7 +12,7 @@ createNextDescribe(
     it('renders YoutubeEmbed', async () => {
       const $ = await next.render$('/youtube-embed')
 
-      const baseContainer = $('[data-ntpc="YoutubeEmbed"]')
+      const baseContainer = $('[data-ntpc="YouTubeEmbed"]')
       const youtubeContainer = $('lite-youtube')
       expect(baseContainer.length).toBe(1)
       expect(youtubeContainer.length).toBe(1)

From 9b38b560afd812ef5cfac67d97633cded8a6b583 Mon Sep 17 00:00:00 2001
From: Ralph <janicklas@google.com>
Date: Wed, 23 Aug 2023 14:22:27 -0700
Subject: [PATCH 5/6] Fix test

---
 test/e2e/third-parties/index.test.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/test/e2e/third-parties/index.test.ts b/test/e2e/third-parties/index.test.ts
index dce402bed0064..85e80eb87c53e 100644
--- a/test/e2e/third-parties/index.test.ts
+++ b/test/e2e/third-parties/index.test.ts
@@ -12,7 +12,7 @@ createNextDescribe(
     it('renders YoutubeEmbed', async () => {
       const $ = await next.render$('/youtube-embed')
 
-      const baseContainer = $('[data-ntpc="YoutubeEmbed"]')
+      const baseContainer = $('[data-ntpc="YouTubeEmbed"]')
       const youtubeContainer = $('lite-youtube')
       expect(baseContainer.length).toBe(1)
       expect(youtubeContainer.length).toBe(1)

From b64224994ddb84f9490b4036220115b07f002c73 Mon Sep 17 00:00:00 2001
From: Ralph <janicklas@google.com>
Date: Tue, 29 Aug 2023 15:56:38 -0700
Subject: [PATCH 6/6] Updating types

---
 packages/third-parties/src/ThirdPartyScriptEmbed.tsx | 4 ++--
 packages/third-parties/src/types/google.ts           | 9 +++++++--
 2 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/packages/third-parties/src/ThirdPartyScriptEmbed.tsx b/packages/third-parties/src/ThirdPartyScriptEmbed.tsx
index 8c220e4815cb5..3be79f6232ae3 100644
--- a/packages/third-parties/src/ThirdPartyScriptEmbed.tsx
+++ b/packages/third-parties/src/ThirdPartyScriptEmbed.tsx
@@ -20,7 +20,7 @@ export default function ThirdPartyScriptEmbed({
       {/* insert script children */}
       {children}
       {/* insert html */}
-      {html && (
+      {html ? (
         <div
           style={{
             height: height != null ? `${height}px` : 'auto',
@@ -29,7 +29,7 @@ export default function ThirdPartyScriptEmbed({
           data-ntpc={dataNtpc}
           dangerouslySetInnerHTML={{ __html: html }}
         />
-      )}
+      ) : null}
     </>
   )
 }
diff --git a/packages/third-parties/src/types/google.ts b/packages/third-parties/src/types/google.ts
index 453940bbfe7b3..075c7555a30f2 100644
--- a/packages/third-parties/src/types/google.ts
+++ b/packages/third-parties/src/types/google.ts
@@ -1,12 +1,17 @@
 export type GoogleMapsEmbed = {
   height?: number
   width?: number
-  mapMode: 'place' | 'view' | 'directions' | 'streetview' | 'search'
+  mode: 'place' | 'view' | 'directions' | 'streetview' | 'search'
   apiKey: string
-  parameters: string
   style: string
   allowfullscreen: boolean
   loading: 'eager' | 'lazy'
+  q?: string
+  center?: string
+  zoom?: string
+  maptype?: string
+  language?: string
+  region?: string
 }
 
 export type YouTubeEmbed = {