Cosmetic Product Listing API pages

gatsby-config.js

@@ -1,4 +1,5 @@
 module.exports = {
+  pathPrefix: 'productlisting',
   siteMetadata: {
     title: `openFDA`,
     siteUrl: `https://www.open.fda.gov`,

package.json

@@ -5,10 +5,10 @@
   "author": "Violet Wren, Priyanka Ayer",
   "scripts": {
     "dev": "gatsby develop -H 0.0.0.0 -p 3000",
-    "serve": "gatsby serve -H 0.0.0.0 -p 3000",
-    "build": "gatsby build --verbose",
+    "serve": "gatsby serve --prefix-paths -H 0.0.0.0 -p 3000",
+    "build": "gatsby build --prefix-paths --verbose",
     "format": "prettier --trailing-comma es5 --no-semi --single-quote --write 'src/**/*.{js,ts,tsx}'",
-    "develop": "gatsby develop",
+    "develop": "gatsby develop --prefix-paths",
     "cy:open": "cypress open",
     "cy:run": "cypress run",
     "test:e2e": "start-server-and-test dev http-get://127.0.0.1:3000 cy:open",

src/components/ApiStatus.tsx

@@ -15,6 +15,7 @@ let endpointKeys = [
   'foodenforcement',
   'foodevent',
   'cosmeticevent',
+  'cosmeticproductlisting',
   'drugevent',
   'druglabel',
   'ndc',
@@ -48,6 +49,7 @@ const catMap: Record<EndpointKey, string> = Object.freeze({
   'foodenforcement': 'Foods › Enforcement Reports',
   'foodevent': 'Foods › Adverse Events',
   'cosmeticevent': 'Cosmetics › Adverse Events',
+  'cosmeticproductlisting': 'Cosmetics › Product Listing',
   'drugevent': 'Drugs › Adverse Events',
   'druglabel': 'Drugs › Labeling',
   'ndc': 'Drugs › NDC Directory',
@@ -80,6 +82,7 @@ const endpointLinkMap: Record<EndpointKey, string> = Object.freeze({
   'foodevent': 'food/event',
   'foodenforcement': 'food/enforcement',
   'cosmeticevent': 'cosmetic/event',
+  'cosmeticproductlisting': 'cosmetic/productlisting',
   'drugevent': 'drug/event',
   'druglabel': 'drug/label',
   'ndc': 'drug/ndc',

src/components/ApiUsage.tsx

@@ -460,6 +460,7 @@ if (!bp.mob && hasWindow) {
 
                       <tr className='bg-primary-darkest clr-white'><td colSpan='2'><strong>Cosmetics</strong></td></tr>
                       <tr><td>Adverse Event Reports</td><td>{this.docCount('cosmeticevent')}</td></tr>
+                      <tr><td>Product Listing</td><td>{this.docCount('cosmeticproductlisting')}</td></tr>
 
                       <tr className='bg-primary-darkest clr-white'><td colSpan='2'><strong>Devices</strong></td></tr>
                       <tr><td>Classifications</td><td>{this.docCount('deviceclass')}</td></tr>
@@ -522,6 +523,7 @@ if (!bp.mob && hasWindow) {
 
                       <tr className='bg-primary-darkest clr-white'><td colSpan={2}><strong>Cosmetics</strong></td></tr>
                       <tr><td>Adverse Event Reports</td><td>{this.downloadCount('cosmeticevent')}</td></tr>
+                      <tr><td>Product Listing</td><td>{this.downloadCount('cosmeticproductlisting')}</td></tr>
 
 
                       <tr className='bg-primary-darkest clr-white'><td colSpan={2}><strong>Devices</strong></td></tr>

src/components/DataDictionary.tsx

@@ -113,7 +113,8 @@ class DataDictionary extends React.Component<{}, DataDictionaryState> {
       'crl': 'Complete Response Letters',
       'researchpreventionads': 'Prevention Ads Research',
       'researchdigitalads': 'Digital Ads Research',
-      'researchsmokefree': 'Smokefree Research'
+      'researchsmokefree': 'Smokefree Research',
+      'productlisting': 'Product Listing'
     }
 
 

src/components/EndpointBox.tsx

@@ -32,7 +32,8 @@ const EndpointBox = (props: endpointBoxProps) => {
       'event': <div className='ep-icon' style={bg_color.food}><i className='fa fa-3x fa-warning' style={{ color: "white" }} /></div>
     },
     'cosmetic': {
-      'event': <div className='ep-icon' style={bg_color.cosmetic}><i className='fa fa-3x fa-warning' style={{ color: "white" }} /></div>
+      'event': <div className='ep-icon' style={bg_color.cosmetic}><i className='fa fa-3x fa-warning' style={{ color: "white" }} /></div>,
+      'productlisting': <div className='ep-icon' style={bg_color.cosmetic}><i className='fa fa-3x fa-book' style={{ color: "white" }} /></div>
     },
     'device': {
       'event': <div className='ep-icon' style={bg_color.device}><i className='fa fa-3x fa-warning' style={{ color: "white" }} /></div>,

src/components/Footer.tsx

@@ -81,7 +81,7 @@ class Footer extends React.Component {
                 <img
                   alt='Go to FDA website'
                   width='180px'
-                  src={"/img/gov-fda-new-white.svg"}
+                  src={withPrefix("/img/gov-fda-new-white.svg")}
                 />
               </a>
             </li>

src/components/Layout.tsx

@@ -37,7 +37,7 @@ const Layout = (props: LayoutProps) => {
     up: 'sticky-scroll-up'
   }
 
-  const hasSidebar = props.location.pathname.slice(0, 6) === `/apis/`
+  const hasSidebar = props.location.pathname.slice(0, 6) === `/apis/` || props.location.pathname.slice(0, 21) === `/productlisting/apis/`
   return (
     <DocumentTitle title='openFDA' key='openFDA'>
       <div>

src/components/RenderContentObject/KeyFacts.tsx

@@ -15,7 +15,8 @@ const source: Record<string, Record<string, string>> = {
     'event': 'Center for Food Safety and Applied Nutrition Adverse Event Reporting System (CAERS)'
   },
   'cosmetic': {
-    'event': 'Cosmetic Adverse Events'
+    'event': 'Cosmetic Adverse Events',
+    'productlisting': 'Cosmetic Product Listing'
   },
   'device': {
     'event': 'Manufacturer and User Facility Device Experience (MAUDE)',
@@ -105,7 +106,8 @@ const timePeriod: any = {
     'event': '2004 to'
   },
   'cosmetic': {
-    'event': '2001 to'
+    'event': '2001 to',
+    'productlisting': 'Last updated on'
   },
   'device': {
     'event': '2009 to',
@@ -152,7 +154,8 @@ const frequency = {
     'event': 'Quarterly'
   },
   'cosmetic': {
-    'event': 'Infrequently'
+    'event': 'Infrequently',
+    'productlisting': 'Infrequently'
   },
   'device': {
     'event': 'Weekly',

src/constants/api.tsx

@@ -1,4 +1,6 @@
-export const API_LINK: string = "https://api.fda.gov"
+//export const API_LINK: string = "http://34.199.139.221:8000"
+export const API_LINK: string = "https://openfda-api.preprod.fda.gov"
+//export const API_LINK: string = "https://api.fda.gov"
 export const API_NAME: string = "api.fda.gov"
 export default {
   API_LINK,

src/constants/endpoint_box.ts

@@ -11,7 +11,8 @@ export const description: Record<NounName, Partial<Record<EndpointName, string>>
     'event': 'Food, dietary supplement, and cosmetic adverse event reports.'
   },
   'cosmetic': {
-    'event': 'Cosmetic adverse event reports.'
+    'event': 'Cosmetic adverse event reports.',
+    'productlisting': 'Cosmetic product listing.'
   },
   'device': {
     'event': 'Reports of serious injuries, deaths, malfunctions, and other undesirable effects associated with the use of medical devices.',
@@ -58,7 +59,8 @@ export const ep_title: Record<NounName, Partial<Record<EndpointName, string>>> =
     'event': 'CAERS reports'
   },
   'cosmetic': {
-    'event': 'Adverse event reports.'
+    'event': 'Adverse event reports.',
+    'productlisting': 'Product listing.'
   },
   'device': {
     'event': 'Adverse event reports',
@@ -115,7 +117,8 @@ export const ep_path: Record<NounName, Partial<Record<EndpointName, string>>> =
     'event': '/apis/food/event/'
   },
   'cosmetic': {
-    'event': '/apis/cosmetic/event/'
+    'event': '/apis/cosmetic/event/',
+    'productlisting': '/apis/cosmetic/productlisting/'
   },
   'device': {
     'event': '/apis/device/event/',

src/constants/fields/cosmeticproductlisting.yaml

@@ -0,0 +1,50 @@
+properties:
+  responsible_person_name:
+    description: "The manufacturer, packer, or distributor of a cosmetic product whose name appears on the label of such cosmetic product in accordance with section 609(a) of the FD&C Act or section 4(a) of the Fair Packaging and Labeling Act."
+    format:
+    is_exact: true
+    possible_values:
+    type: string
+  responsible_person_duns:
+    description: "The Data Universal Numbering System (DUNS) number for the responsible person's address listed on the product label. The DUNS Number is a unique nine-digit identification number provided by Dun & Bradstreet (D&B) and is site-specific."
+    format:
+    is_exact: true
+    possible_values:
+    type: string
+  business_type:
+    description: "The responsible person type of business as listed on label (i.e., manufacturer, packer, and/or distributor)."
+    format:
+    is_exact: true
+    possible_values:
+    type: string
+  product_name:
+    description: "The name for the cosmetic product as such name appears on the label. This is the statement of identity as required under 21 CFR 701.11, which provides information about the type or kind of cosmetic product in the package to help the consumer understand the functional use of the product."
+    format:
+    is_exact: true
+    possible_values:
+    type: string
+  category_names:
+    description: "The applicable cosmetic category or categories for the cosmetic product as listed in Appendix A of the guidance document."
+    format:
+    is_exact: true
+    possible_values:
+    type: string
+  ingredients:
+    description: "A list of ingredients in the cosmetic product, including any fragrances, flavors, or colors, with each ingredient identified by the name as required under section 701.3 of title 21, Code of Federal Regulations (or any successor regulations), or by the common or usual name of the ingredient."
+    format:
+    is_exact: true
+    possible_values:
+    type: string
+  fragrance_or_flavor:
+    description: "Information indicating whether the product contains fragrance, flavor, both fragrance and flavor, or neither."
+    format:
+    is_exact: true
+    possible_values:
+    type: string
+  product_url:
+    description: "The webpage link for the cosmetic product."
+    format:
+    is_exact: true
+    possible_values:
+    type: string
+type: object

src/constants/fields/master_fields.yaml

@@ -667,6 +667,57 @@ cosmetic:
           type: string
         type: array
     type: object
+  productlisting:
+    properties:
+      responsible_person_name:
+        description: "The manufacturer, packer, or distributor of a cosmetic product whose name appears on the label of such cosmetic product in accordance with section 609(a) of the FD&C Act or section 4(a) of the Fair Packaging and Labeling Act."
+        format:
+        is_exact: true
+        possible_values:
+        type: string
+      responsible_person_duns:
+        description: "The Data Universal Numbering System (DUNS) number for the responsible person's address listed on the product label. The DUNS Number is a unique nine-digit identification number provided by Dun & Bradstreet (D&B) and is site-specific."
+        format:
+        is_exact: true
+        possible_values:
+        type: string
+      business_type:
+        description: "The responsible person type of business as listed on label (i.e., manufacturer, packer, and/or distributor)."
+        format:
+        is_exact: true
+        possible_values:
+        type: string
+      product_name:
+        description: "The name for the cosmetic product as such name appears on the label. This is the statement of identity as required under 21 CFR 701.11, which provides information about the type or kind of cosmetic product in the package to help the consumer understand the functional use of the product."
+        format:
+        is_exact: true
+        possible_values:
+        type: string
+      category_names:
+        description: "The applicable cosmetic category or categories for the cosmetic product as listed in Appendix A of the guidance document."
+        format:
+        is_exact: true
+        possible_values:
+        type: string
+      ingredients:
+        description: "A list of ingredients in the cosmetic product, including any fragrances, flavors, or colors, with each ingredient identified by the name as required under section 701.3 of title 21, Code of Federal Regulations (or any successor regulations), or by the common or usual name of the ingredient."
+        format:
+        is_exact: true
+        possible_values:
+        type: string
+      fragrance_or_flavor:
+        description: "Information indicating whether the product contains fragrance, flavor, both fragrance and flavor, or neither."
+        format:
+        is_exact: true
+        possible_values:
+        type: string
+      product_url:
+        description: "The webpage link for the cosmetic product."
+        format:
+        is_exact: true
+        possible_values:
+        type: string
+    type: object
 device:
   classification:
     properties:

src/constants/file_download.ts

@@ -4,6 +4,7 @@ export const pdfDownloadMap: Readonly<Record<string, string>> = Object.freeze({
   'foodevent': '/fields/foodevent_reference.pdf',
   'foodenforcement': '/fields/foodenforcement_reference.pdf',
   'cosmeticevent': '/fields/cosmeticevent_reference.pdf',
+  'cosmeticproductlisting': '/fields/cosmeticproductisting_reference.pdf',
   'drugevent': '/fields/drugevent_reference.pdf',
   'druglabel': '/fields/druglabel_reference.pdf',
   'drugndc': '/fields/drugndc_reference.pdf',
@@ -31,6 +32,7 @@ export const xlsxDownloadMap: Readonly<Record<string, string>> = Object.freeze({
   'foodevent': '/fields/foodevent_reference.xlsx',
   'foodenforcement': '/fields/foodenforcement_reference.xlsx',
   'cosmeticevent': '/fields/cosmeticevent_reference.xlsx',
+  'cosmeticproductlisting': '/fields/cosmeticproductlisting_reference.xlsx',
   'drugevent': '/fields/drugevent_reference.xlsx',
   'druglabel': '/fields/druglabel_reference.xlsx',
   'drugndc': '/fields/drugndc_reference.xlsx',
@@ -58,6 +60,7 @@ export const yamlDownloadMap: Readonly<Record<string, string>> = Object.freeze({
   'foodevent': '/fields/foodevent.yaml',
   'foodenforcement': '/fields/foodenforcement.yaml',
   'cosmeticevent': '/fields/cosmeticevent.yaml',
+  'cosmeticproductlisting': '/fields/cosmeticproductlisting.yaml',
   'drugevent': '/fields/drugevent.yaml',
   'druglabel': '/fields/druglabel.yaml',
   'drugndc': '/fields/drugndc.yaml',

src/pages/about/updates/updates.yaml

@@ -162,4 +162,8 @@ updates:
   - title: "New openFDA Dataset - Tobacco Smokefree Research"
     path: /apis/tobacco/researchsmokefree/
     date: 2026-03-11
-    desc: "The dataset Tobacco Smokefree Research is now available."
+    desc: "The dataset Tobacco Smokefree Research is now available."
+  - title: "New openFDA Dataset - Cosmetic Product Listing"
+    path: /apis/cosmetic/productlisting/
+    date: 2026-03-27
+    desc: "The dataset Cosmetic Product Listing is now available."

src/pages/apis/cosmetic/index.tsx

@@ -11,6 +11,10 @@ export default () => (
           noun_name='cosmetic'
           endpoint_name='event'
         />
+        <EndpointBox
+          noun_name='cosmetic'
+          endpoint_name='productlisting'
+        />
       </div>
     </div>
   </section>

src/pages/apis/cosmetic/productlisting/_explorers.yaml

@@ -0,0 +1,23 @@
+oneRecord:
+  title: One Cosmetic Product Listing
+  params:
+    - Search for all records and display one.
+    - limit to 1 record.
+  description:
+    - This query searches for all records and asks for a single one.
+  query: 'https://openfda-api.preprod.fda.gov/cosmetic/productlisting.json?limit=1'
+fragrances:
+  title: Fragrance Products
+  description:
+    - This query searches for all Fragrance records.
+  params:
+    - search for all records with fragrance_or_flavor equal to Fragrance.
+    - Limit to 6 records.
+  query: 'https://openfda-api.preprod.fda.gov/cosmetic/productlisting.json?search=fragrance_or_flavor:"Fragrance"'
+categoryNames:
+  title: Count Records by Category
+  description:
+    - The suffix .exact is required by openFDA to count the unique full phrases in the field product. Without it, the API will count each word in that field individually.
+  params:
+    - count the records associated with each category
+  query: 'https://openfda-api.preprod.fda.gov/cosmetic/productlisting.json?count=category_names.exact'

src/pages/apis/cosmetic/productlisting/_meta.yaml

@@ -0,0 +1,13 @@
+documentTitle: openFDA › Cosmetic › Product Listing API
+name: Cosmetic Product Listing
+description: 'This dataset provides a product listing for cosmetics.'
+datasets:
+  - cosmeticproductlisting
+label: Cosmetic Product Listing
+title: Cosmetic Product Listing
+path: /apis/cosmetic/productlisting
+api_path: /cosmetic/productlisting
+start: 20170101
+status: cosmeticproductlisting
+dateConstraintKey:
+type: endpoint

src/pages/apis/cosmetic/productlisting/download/index.tsx

@@ -0,0 +1,23 @@
+import React from "react"
+import Link from "gatsby-link"
+
+import Downloads from '../../../../../components/Downloads'
+
+import meta from '../_meta.yaml'
+
+class IndexRoute extends React.Component {
+  render () {
+
+    return (
+      <section className='doc-content'>
+        <h2>Download the dataset</h2>
+        <p>Use the links below to download the dataset manually, or review the <Link to='/apis/downloads/'>Downloads</Link> documentation for more information about other download methods.</p>
+        <Downloads
+          meta={meta}
+        />
+      </section>
+    )
+  }
+}
+
+export default IndexRoute