📦 Survey Package (@zma/survey) - Usage Guide

The @zma/survey package provides a reusable Survey Component for mini app projects.
This document explains how to install, configure, and use the package.

1️⃣ Installation

Install the package into your main project:

npm install git+ssh://git-codecommit.ap-southeast-1.amazonaws.com/v1/repos/survey-web-package#release/survey

Or add it directly to your package.json:

"dependencies": {
  "@zma/survey": "git+ssh://git-codecommit.ap-southeast-1.amazonaws.com/v1/repos/survey-web-package#release/survey"
}

Then run:

npm install

2️⃣ Initialization

In your App.jsx (or main.jsx), import and call initSurvey to initialize the configuration.
The API URL should be provided from your .env file.

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import { initSurvey } from '@zma/survey';

// Initialize Survey configuration (using .env value from main project)
initSurvey({
  apiUrl: String,
  mediaCode: String, // Optional
  sharePhoneNumber: Boolean // Default false
  primaryColor: String // Default #3b82f6
});

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

3️⃣ Using the Survey Component

You can import and use the Survey component inside any page or component:

import { Survey } from '@zma/survey';

export default function RegisterPage() {
  const handleSharePhoneNumber = (phone) => {
    localStorage.setItem("userPhoneNumber", phone);
  };

  return (
    <div>
      <h1>Survey</h1>
      <Survey
        code="SURVEY-123"
        onSharePhoneNumber={handleSharePhoneNumber}
      />
    </div>
  );
}

4️⃣ Survey Component Props

| Prop | Type | Description | |-----------------------|-------------------|-----------------------------------------------------------------------------| | code | string | Survey identifier (e.g. "SURVEY-123") | | userCode | string | If the survey requires a user code | | onSubmitSuccess | string | Callback when user submit form successfully | | onSharePhoneNumber | (phone) => void | Callback when user shares phone number (can be saved into localStorage) |

5️⃣ Notes

• react and react-dom are declared as peer dependencies, so they must be installed in the main project.
• Make sure your .env file contains the variable VITE_APP_SURVEY_API_URL. Example:

  VITE_APP_SURVEY_API_URL=https://api.example.com/survey

✅ Now you can use the Survey component in any page of your application.