React Shared Components

Interactive testing environment for react-shared components

Theme Playground

Current: Default

DigitalDownloadPreview

Digital download assets preview component showing file information with smart file type detection

Interactive Preview

View the component with sample digital download data

5 Files Included

Examples

Different digital download preview scenarios

Multiple Files (shows count)

5 Files Included

Single PDF File

PDF Document

Single Image File

PNG Image

Single ZIP File

ZIP Compressed File

No Files (shows default message)

Ready To Download

Unknown File Extension

Ready To Download

API Reference

Props

product

object - Digital download data with digital_assets array containing file information

preview

boolean - Preview mode flag (default: false)

username

string - Username (optional, currently unused)

className

string - Additional CSS classes (optional)

Usage Notes

File Type Detection

The component automatically detects file types based on extensions and displays appropriate labels:

  • jpg/jpeg: "JPG/JPEG Image"
  • png: "PNG Image"
  • pdf: "PDF Document"
  • docx: "DOCX Document"
  • xlsx: "XLSX Spreadsheet"
  • zip: "ZIP Compressed File"
  • unknown: "Ready to Download" (default)

Multiple Files Display

When multiple files are included, the component shows "X files included" instead of individual file names. For single files, it displays the detected file type.

Data Structure

The component expects a product object with the following structure:

{
  digital_download: {
    digital_assets: [
      { name: "file1.pdf" },
      { name: "file2.zip" },
      // ... more files
    ]
  }
}

Internationalization

The component uses translation keys for file count and default messages:

  • shared.digital_download.files_included - For multiple files
  • shared.digital_download.ready_to_download - Default message

Icon Display

All file types display the same digital download icon, regardless of the file extension. The icon is styled with the accent2 background color.