# Quick Reference: Artifact to File Mapping

This document maps each artifact I created to its exact file location in the plugin structure.

## 📦 Artifacts Created (in order)

| # | Artifact ID | File Name | Location |
|---|-------------|-----------|----------|
| 1 | `main_plugin` | wpforms-mailjet-automation.php | **Root** |
| 2 | `core_class` | class-wpfmj-core.php | **includes/** |
| 3 | `loader_class` | class-wpfmj-loader.php | **includes/** |
| 4 | `activator_class` | class-wpfmj-activator.php | **includes/** |
| 5 | `deactivator_class` | class-wpfmj-deactivator.php | **includes/** |
| 6 | `cpt_class` | class-wpfmj-cpt.php | **includes/** |
| 7 | `encryption_class` | class-wpfmj-encryption.php | **includes/** |
| 8 | `mailjet_api_class` | class-wpfmj-mailjet-api.php | **includes/** |
| 9 | `form_handler_class` | class-wpfmj-form-handler.php | **includes/** |
| 10 | `error_logger_class` | class-wpfmj-error-logger.php | **includes/** |
| 11 | `admin_class` | class-wpfmj-admin.php | **admin/** |
| 12 | `dashboard_class` | class-wpfmj-dashboard.php | **admin/** |
| 13 | `admin_css` | wpfmj-admin.css | **admin/css/** |
| 14 | `wizard_app` | App.jsx | **assets/src/wizard/** |
| 15 | `step_one` | StepOne.jsx | **assets/src/wizard/components/** |
| 16 | `step_two` | StepTwo.jsx | **assets/src/wizard/components/** |
| 17 | `step_three` | StepThree.jsx | **assets/src/wizard/components/** |
| 18 | `step_four` | StepFour.jsx | **assets/src/wizard/components/** |
| 19 | `step_five` | StepFive.jsx | **assets/src/wizard/components/** |
| 20 | `step_six` | StepSix.jsx | **assets/src/wizard/components/** |
| 21 | `api_utils` | api.js | **assets/src/wizard/utils/** |
| 22 | `uninstall_script` | uninstall.php | **Root** |
| 23 | `silence_index` | index.php | **Multiple locations** (see below) |
| 24 | `wizard_asset` | wpfmj-wizard.asset.php | **admin/js/** |
| 25 | `build_readme` | BUILD-INSTRUCTIONS.md | **Root** |
| 26 | `directory_structure` | DIRECTORY-STRUCTURE.txt | **Root** |
| 27 | `plugin_summary` | PLUGIN-SUMMARY.md | **Root** |
| 28 | `quick_reference` | QUICK-REFERENCE.md | **Root** (this file) |

## 📍 index.php Placement (9 copies needed)

The `silence_index` artifact should be copied to these 9 locations:

```
wpforms-mailjet-automation/index.php
wpforms-mailjet-automation/includes/index.php
wpforms-mailjet-automation/admin/index.php
wpforms-mailjet-automation/admin/css/index.php
wpforms-mailjet-automation/admin/js/index.php
wpforms-mailjet-automation/assets/index.php
wpforms-mailjet-automation/assets/src/index.php
wpforms-mailjet-automation/assets/src/wizard/index.php
wpforms-mailjet-automation/assets/src/wizard/components/index.php
wpforms-mailjet-automation/assets/src/wizard/utils/index.php
```

**Content of each index.php:**
```php
<?php
// Silence is golden.
```

## 🗂️ Complete File Tree

```
wpforms-mailjet-automation/
│
├── 📄 wpforms-mailjet-automation.php          (Artifact #1)
├── 📄 uninstall.php                           (Artifact #22)
├── 📄 index.php                               (Artifact #23)
├── 📄 BUILD-INSTRUCTIONS.md                   (Artifact #25)
├── 📄 DIRECTORY-STRUCTURE.txt                 (Artifact #26)
├── 📄 PLUGIN-SUMMARY.md                       (Artifact #27)
├── 📄 QUICK-REFERENCE.md                      (Artifact #28)
├── 📄 package.json                            (Create manually - see below)
│
├── 📁 includes/
│   ├── 📄 index.php                           (Artifact #23)
│   ├── 📄 class-wpfmj-activator.php           (Artifact #4)
│   ├── 📄 class-wpfmj-deactivator.php         (Artifact #5)
│   ├── 📄 class-wpfmj-loader.php              (Artifact #3)
│   ├── 📄 class-wpfmj-core.php                (Artifact #2)
│   ├── 📄 class-wpfmj-cpt.php                 (Artifact #6)
│   ├── 📄 class-wpfmj-encryption.php          (Artifact #7)
│   ├── 📄 class-wpfmj-mailjet-api.php         (Artifact #8)
│   ├── 📄 class-wpfmj-form-handler.php        (Artifact #9)
│   └── 📄 class-wpfmj-error-logger.php        (Artifact #10)
│
├── 📁 admin/
│   ├── 📄 index.php                           (Artifact #23)
│   ├── 📄 class-wpfmj-admin.php               (Artifact #11)
│   ├── 📄 class-wpfmj-dashboard.php           (Artifact #12)
│   │
│   ├── 📁 css/
│   │   ├── 📄 index.php                       (Artifact #23)
│   │   └── 📄 wpfmj-admin.css                 (Artifact #13)
│   │
│   └── 📁 js/
│       ├── 📄 index.php                       (Artifact #23)
│       ├── 📄 wpfmj-wizard.asset.php          (Artifact #24)
│       └── 📄 wpfmj-wizard.js                 (Generated by build)
│
└── 📁 assets/
    ├── 📄 index.php                           (Artifact #23)
    └── 📁 src/
        ├── 📄 index.php                       (Artifact #23)
        └── 📁 wizard/
            ├── 📄 index.php                   (Artifact #23)
            ├── 📄 App.jsx                     (Artifact #14)
            │
            ├── 📁 components/
            │   ├── 📄 index.php               (Artifact #23)
            │   ├── 📄 StepOne.jsx             (Artifact #15)
            │   ├── 📄 StepTwo.jsx             (Artifact #16)
            │   ├── 📄 StepThree.jsx           (Artifact #17)
            │   ├── 📄 StepFour.jsx            (Artifact #18)
            │   ├── 📄 StepFive.jsx            (Artifact #19)
            │   └── 📄 StepSix.jsx             (Artifact #20)
            │
            └── 📁 utils/
                ├── 📄 index.php               (Artifact #23)
                └── 📄 api.js                  (Artifact #21)
```

## 📝 package.json Template

Create this file manually in the root directory:

```json
{
  "name": "wpforms-mailjet-automation",
  "version": "1.0.0",
  "description": "WPForms to Mailjet automation plugin",
  "scripts": {
    "build": "wp-scripts build assets/src/wizard/App.jsx --output-path=admin/js",
    "start": "wp-scripts start assets/src/wizard/App.jsx --output-path=admin/js"
  },
  "devDependencies": {
    "@wordpress/scripts": "^26.0.0"
  },
  "dependencies": {
    "@wordpress/element": "^5.0.0",
    "@wordpress/components": "^25.0.0",
    "@wordpress/i18n": "^4.0.0"
  }
}
```

## ⚡ Quick Setup Commands

```bash
# 1. Create plugin directory
mkdir wpforms-mailjet-automation
cd wpforms-mailjet-automation

# 2. Create subdirectories
mkdir -p includes admin/css admin/js assets/src/wizard/components assets/src/wizard/utils

# 3. Copy all artifacts to their locations (see table above)

# 4. Create package.json from template above

# 5. Install dependencies
npm install

# 6. Build React bundle
npm run build

# 7. Upload to WordPress
# Upload the entire wpforms-mailjet-automation folder to wp-content/plugins/

# 8. Activate in WordPress Admin
```

## ✅ Verification Checklist

After placing all files, verify:

- [ ] 28 artifacts placed correctly
- [ ] 9 index.php security files in place
- [ ] package.json created in root
- [ ] npm install completed successfully
- [ ] npm run build generated admin/js/wpfmj-wizard.js
- [ ] No syntax errors in any PHP files
- [ ] All JSX files in correct locations
- [ ] CSS file in admin/css/
- [ ] All class files start with <?php tag
- [ ] No missing dependencies

## 🎯 Build Output

After running `npm run build`, you should see:

```
✔ Compiled successfully in XXXms

asset wpfmj-wizard.js XXX KiB [emitted] [minimized] (name: main)
asset wpfmj-wizard.asset.php XXX bytes [emitted] (name: main)

webpack 5.x.x compiled successfully in XXXms
```

The build creates these files:
- `admin/js/wpfmj-wizard.js` - Minified React bundle
- `admin/js/wpfmj-wizard.asset.php` - Dependency manifest (overwrites the template)

## 🚀 Final Steps

1. **Zip the plugin** (optional):
   ```bash
   zip -r wpforms-mailjet-automation.zip wpforms-mailjet-automation -x "*/node_modules/*" -x "*/.git/*"
   ```

2. **Upload to WordPress**:
   - Via FTP: Upload folder to `/wp-content/plugins/`
   - Via Admin: Upload the .zip file at Plugins → Add New → Upload

3. **Activate**:
   - Go to Plugins menu
   - Find "WPForms to Mailjet Automation"
   - Click "Activate"

4. **Configure**:
   - Go to "Mailjet Automations" in admin menu
   - Click "Add New" to create your first automation

## 📞 Support

If you encounter any issues:

1. Check BUILD-INSTRUCTIONS.md for detailed build steps
2. Verify all files are in correct locations using this reference
3. Check browser console for JavaScript errors
4. Check PHP error log for server-side errors
5. Ensure WPForms is installed and activated

---

**Total Implementation Time**: ~30 minutes (including npm install and build)  
**Difficulty Level**: Intermediate  
**Prerequisites**: Node.js installed, basic command line knowledge