Sp2 Tool Extension

A VS Code extension to streamline the process of converting CSV data to JSON and updating content.json files within your workspace, including a preview and diff step.

Features

Add Provider for Currency Feature

• Custom Sidebar Webview: Provides a dedicated UI panel in the VS Code sidebar.
• CSV Upload: Allows users to select a CSV file containing currency data directly from the webview.
• Merchant Code Input: Capture a merchant code to determine the target directory.
• CSV Parsing: Parses the uploaded CSV file content with currency information.
• Enhanced Preview: Shows a comprehensive preview of all files that will be modified with:
  • Summary statistics (total files, records, merchant code)
  • Individual file previews with diff capabilities
  • Per-file approval/rejection options
• Diff View: Click any filename in the preview to open a diff editor showing the difference between the current file content and the proposed changes.
• Flexible Approval: Choose to:
  • Apply all changes at once with "Approve & Apply All"
  • Apply individual files selectively with per-file "Apply" buttons
  • Skip specific files with per-file "Skip" buttons
  • Cancel the entire operation
• Real-time Status: Visual indicators show the status of each file (Applied ✅, Skipped ⏭️, Processing ⏳).
• File Saving: On approval, saves the generated JSON data to the appropriate provider configuration files, creating directories as necessary.
• Status Feedback: Provides comprehensive visual feedback in the webview on the progress and result of operations.

Add Translation Feature

• CSV Translation Upload: Upload CSV files containing translation data for multiple languages.
• Enhanced Preview: Shows a comprehensive preview of all translation files that will be modified with:
  • Summary statistics (total files, keys, languages)
  • Individual file previews with translation keys
  • Per-file approval/rejection options
• Multi-language Support: Handles translations for multiple languages simultaneously.
• Diff View: Click any filename to view detailed changes for each translation file.
• Flexible Approval: Apply all translations at once or selectively approve individual files.
• Template Download: Download a sample CSV template to understand the expected format.
• Real-time Status: Visual feedback for each file's processing status.

Provider for SS2 Feature

• ZIP File Upload: Upload a ZIP file containing provider assets.
• Provider Configuration: Enter merchant code, category, provider code, and provider name.
• Automatic Extraction: Extracts and processes the ZIP file contents.
• Directory Structure Creation: Creates the appropriate directory structure for the provider.
• Status Updates: Provides real-time feedback on the processing status.
• Form Reset: Automatically resets the form after successful submission.

Requirements

• VS Code version 1.60 or higher (for Webview View support).
• Node.js and npm installed (for building and installing dependencies during development).

Installation

From the VS Code Marketplace (Once published)

1. Open VS Code.
2. Go to the Extensions view (Ctrl+Shift+X or Cmd+Shift+X).
3. Search for "Sp2 Tool" (or the official extension name).
4. Click "Install".

From VSIX File

1. Download the VSIX file
2. Open VS Code
3. Go to Extensions view (Ctrl+Shift+X or Cmd+Shift+X)
4. Click on "..." menu in the top right of the Extensions view
5. Select "Install from VSIX..."
6. Navigate to and select the VSIX file

From Source (For Development/Testing)

1. Clone this repository: git clone [repository-url]
2. Navigate into the extension directory: cd sp2-tool-extension (or your directory name)
3. Install dependencies: npm install
4. Open the project in VS Code: code .
5. Press F5 to launch a new VS Code window (Extension Host) with the extension running.

Usage

CSV Upload Feature

1. Open a Workspace: In the Extension Host window, open a workspace folder (File > Open Folder...). The content.json files will be saved relative to this folder.
2. Open the Sp2 Tool Webview: Look for the Sp2 Tool icon in the Activity Bar (usually where the Explorer, Search, etc., icons are). Click it to open the sidebar panel. If you don't see the icon, you can also find it via View > Open View... and search for "Sp2 Tool".
3. Upload CSV and Enter Merchant Code:
   • Click the "Choose File" or "Browse" button next to "Upload CSV" and select your CSV file.
   • Enter the desired merchant code in the "Merchant Code" text input. This will be used as the folder name.
4. Prepare Update Preview: Click the "Prepare Update Preview" button.
   • The extension will parse the CSV, apply normalization modules, and prepare the JSON content.
   • The UI will switch to the "Preview" section, showing the proposed filename path (e.g., merchant-a/content.json) and a status message.
5. View Diff (Optional): Click on the filename path (e.g., merchant-a/content.json) displayed in the preview section.
   • A diff editor will open, comparing the content that is currently in the file on disk (or an empty file if it doesn't exist) on the left side, with the proposed JSON content generated from your CSV (after normalization) on the right side.
   • Review the changes carefully.
6. Approve or Reject:
   • If the diff looks correct and you want to save the file, return to the Sp2 Tool sidebar and click "Approve Update".
   • If you do not want to save the file, return to the sidebar and click "Reject".
7. Status Feedback: The status area in the webview will update to indicate the result of the operation (parsing, saving, cancelling). After approval or rejection, the UI will return to the upload section.

Provider for SS2 Feature

1. Open a Workspace: In the Extension Host window, open a workspace folder (File > Open Folder...). The provider files will be saved relative to this folder.
2. Open the Sp2 Tool Webview: Look for the Sp2 Tool icon in the Activity Bar and click it to open the sidebar panel.
3. Navigate to Provider for SS2: Click on the "Provider for SS2" tab in the navigation bar.
4. Fill in the Provider Details:
   • The "Merchant Code" field is pre-filled with "ss2" by default.
   • Click "Choose File" to select a ZIP file containing the provider assets.
   • Enter the category (e.g., "games").
   • Enter the provider code (e.g., "provider-123").
   • Enter the provider name (e.g., "Game Provider").
5. Add Provider: Click the "Add Provider" button.
   • The extension will process the ZIP file and create the necessary directory structure.
   • You'll see status updates as the process progresses.
6. Completion: Upon successful completion, the form will reset and you'll see a success message.
   • If there are any errors, they will be displayed in the status area.

CSV Format

The CSV file is expected to have a header row. The extension's normalization modules will use these headers as keys when processing the data. The default mappingData module, for example, looks for columns like 'Product ID', 'Product Name', 'Price', and 'Include'.

Project Structure

React Integration

This extension uses React for building the webview UI. Here's how the React integration works:

Technology Stack

• React: For building the UI components
• TypeScript: For type-safe development
• Webpack: For bundling the React application

Development Workflow

1. The React components are located in src/webview/
2. The main React entry point is src/webview/index.tsx
3. Component files are in src/webview/components/
4. Styling is handled through src/webview/styles.css

Building and Running

• Development Mode: Run npm run dev to start both TypeScript and webpack in watch mode
• Production Build: Run npm run build-webview to create a production build of the React app
• Full Extension Build: Run npm run vscode:prepublish to build both the extension and the React app

How It Works

1. Webpack bundles the React application into out/webview/bundle.js
2. The extension loads this bundle in the webview
3. The React app communicates with the extension through the VS Code API
4. The extension injects the proper Content Security Policy when loading the webview

Adding New React Components

1. Create your component in src/webview/components/features/your-feature-name/
2. Import and use it in App.tsx by adding it to the FEATURES array and renderFeature function
3. Run npm run dev to see your changes in real-time

Troubleshooting

If you encounter any issues:

1. Check the Developer Tools console (Help > Toggle Developer Tools)
2. Look for error messages in the console
3. Check the VS Code output panel for extension logs
4. If the extension is stuck loading, try reloading the window (Developer: Reload Window)