# Examples

## Basic Usage

### Simple Setup

```javascript
import { Product7 } from '@product7/product7-js';

const sdk = new Product7({
	workspace: 'my-workspace',
	boardName: 'feature-requests',
});

await sdk.init();
await sdk.identify({
	user_id: 'user_123',
	email: 'user@example.com',
	name: 'John Doe',
});

const widget = sdk.createFeedbackWidget();
widget.mount();
```

---

## User Identity

### Basic Identify Call

```javascript
await sdk.identify({
	user_id: 'user_123',
	email: 'user@example.com',
	name: 'John Doe',
});
```

### With Custom Fields

```javascript
await sdk.identify({
	user_id: 'user_123',
	email: 'user@example.com',
	name: 'John Doe',
	custom_fields: {
		role: 'admin',
		plan: 'pro',
		signup_date: '2024-01-01',
	},
});
```

### With Company Data

```javascript
await sdk.identify({
	user_id: 'user_123',
	email: 'user@example.com',
	name: 'John Doe',
	company: {
		id: 'company_456',
		name: 'Acme Corp',
		monthly_spend: 1000,
	},
});
```

### Extract from Auth

```javascript
const authData = {
	sub: 'user_123',
	email: 'user@example.com',
	name: 'John Doe',
	role: 'admin',
};

const metadata = Product7.extractMetadataFromAuth(authData);

await sdk.identify(metadata);
```

---

## Feedback Widget

### Different Positions

```javascript
const widget1 = sdk.createFeedbackWidget({
	position: 'bottom-right',
});

const widget2 = sdk.createFeedbackWidget({
	position: 'bottom-left',
});

const widget3 = sdk.createFeedbackWidget({
	position: 'top-right',
});

const widget4 = sdk.createFeedbackWidget({
	position: 'top-left',
});
```

### Dark Theme

```javascript
const widget = sdk.createFeedbackWidget({
	theme: 'dark',
});
widget.mount();
```

### Custom Board

```javascript
const widget = sdk.createFeedbackWidget({
	boardName: 'bug-reports',
});
widget.mount();
```

### Headless Feedback

```javascript
const widget = sdk.createFeedbackWidget({
	headless: true,
	boardName: 'feature-requests',
});

widget.mount();

document
	.querySelector('#feedback-trigger')
	?.addEventListener('click', () => widget.open());
```

### Multiple Feedback Widgets

```javascript
const feedbackWidget = sdk.createFeedbackWidget({
	position: 'bottom-right',
	boardName: 'general',
});
feedbackWidget.mount();

const bugWidget = sdk.createFeedbackWidget({
	position: 'bottom-left',
	boardName: 'bug-reports',
});
bugWidget.updateText('Report Bug');
bugWidget.mount();
```

### Update the Widget

```javascript
const widget = sdk.createFeedbackWidget();
widget.mount();

widget.updateText('Send Feedback');
widget.updatePosition('top-right');
widget.hide();
widget.show();
```

---

## Survey Widget

### Create and Open a Survey

```javascript
const survey = sdk.createSurveyWidget({
	surveyType: 'nps',
	position: 'center',
	title: 'Quick question',
	description: 'How likely are you to recommend us?',
	showSubmitButton: true,
});

survey.mount();
survey.open();
```

### Show Active Surveys

```javascript
const surveys = await sdk.getActiveSurveys({
	includeEligibility: true,
});

if (surveys.length > 0) {
	await sdk.showSurveyById(surveys[0].surveyId, {
		position: 'center',
	});
}
```

---

## Web Chat Widget

### Basic Web Chat

```javascript
const liveChat = sdk.createLiveChatWidget({
	position: 'bottom-right',
	teamName: 'Support Team',
	enableHelp: true,
	enableChangelog: true,
});

liveChat.mount();
```

### Headless Web Chat

```javascript
const liveChat = sdk.createLiveChatWidget({
	headless: true,
	enableHelp: true,
});

liveChat.mount();

document
	.querySelector('#support-link')
	?.addEventListener('click', () => liveChat.open());
```

### Programmatic Web Chat Navigation

```javascript
liveChat.open();
liveChat.navigateTo('help');
liveChat.close();
```

---

## Changelog Widget

### Basic Changelog

```javascript
const changelog = sdk.createChangelogWidget({
	position: 'bottom-left',
	triggerText: "What's New",
	showBadge: true,
});

changelog.mount();
```

### Open Changelog Programmatically

```javascript
const changelog = sdk.createChangelogWidget({
	headless: true,
});

changelog.mount();
changelog.open();
```

---

## Event Handling

### Track Feedback Submissions

```javascript
sdk.on('feedback:submitted', ({ feedback }) => {
	console.log('Feedback submitted:', feedback);
});
```

### Track Survey Events

```javascript
sdk.on('survey:submitted', ({ response }) => {
	console.log('Survey submitted:', response);
});

sdk.on('survey:questionAnswered', (data) => {
	console.log('Question answered:', data.pageId, data.answer);
});
```

### SDK Lifecycle

```javascript
sdk.on('sdk:initialized', (data) => {
	console.log('SDK ready:', data.sessionToken);
});

sdk.on('sdk:identified', (data) => {
	console.log('User identified:', data.metadata);
});
```

---

## Authentication Flows

### On Login

```javascript
async function handleLogin(authResponse) {
	const metadata = Product7.extractMetadataFromAuth(authResponse);

	await sdk.init();
	await sdk.identify(metadata);

	const widget = sdk.createFeedbackWidget();
	widget.mount();
}
```

### On User Change

```javascript
async function handleUserChanged(user) {
	await sdk.identify({
		user_id: user.id,
		email: user.email,
		name: user.name,
	});
}
```

### On Logout

```javascript
function handleLogout() {
	sdk.destroyAllWidgets();
	sdk.destroy();
}
```

---

## Programmatic Control

### Open Feedback from Code

```javascript
const widget = sdk.createFeedbackWidget({
	headless: true,
});

widget.mount();

setTimeout(() => {
	widget.open();
}, 3000);
```

### Toggle Survey

```javascript
const survey = sdk.createSurveyWidget({
	surveyType: 'csat',
	showSubmitButton: true,
});

survey.mount();
survey.toggle();
```

---

## Error Handling

### Try-Catch Pattern

```javascript
try {
	await sdk.init();
	await sdk.identify({
		user_id: 'user_123',
		email: 'user@example.com',
	});

	const widget = sdk.createFeedbackWidget();
	widget.mount();
} catch (error) {
	console.error('Product7 error:', error);
}
```

### Handle API Errors

```javascript
try {
	await sdk.apiService.submitFeedback(data);
} catch (error) {
	if (error.isNetworkError()) {
		alert('No internet connection');
	} else if (error.isClientError()) {
		alert('Invalid data. Please check your input.');
	} else if (error.isServerError()) {
		alert('Server error. Please try again later.');
	}
}
```

---

## Advanced Usage

### Custom Widget Creation

```javascript
import { BaseWidget, WidgetFactory } from '@product7/product7-js';

class CustomWidget extends BaseWidget {
	constructor(options) {
		super({ ...options, type: 'custom' });
	}

	_render() {
		const element = document.createElement('div');
		element.innerHTML = '<button>Custom Feedback</button>';
		return element;
	}

	_attachEvents() {
		this.element
			.querySelector('button')
			.addEventListener('click', this.openPanel);
	}
}

WidgetFactory.register('custom', CustomWidget);

const widget = sdk.createWidget('custom');
widget.mount();
```

### Conditional Loading

```javascript
if (user.isAuthenticated) {
	const sdk = new Product7({
		workspace: 'my-workspace',
	});

	await sdk.init();
	await sdk.identify({
		user_id: user.id,
		email: user.email,
	});

	const widget = sdk.createFeedbackWidget();
	widget.mount();
}
```

### Environment-Based Config

```javascript
const sdk = new Product7({
	workspace: 'my-workspace',
	apiUrl:
		process.env.NODE_ENV === 'production'
			? 'https://api.product7.io/api/v1'
			: 'https://staging.api.product7.io/api/v1',
	debug: process.env.NODE_ENV === 'development',
});

await sdk.init();
await sdk.identify(getMetadata());
```

---

## Testing

### Mock SDK

```javascript
jest.mock('@product7/product7-js');

test('should initialize SDK', async () => {
	const sdk = new Product7({
		workspace: 'test',
		mock: true,
	});

	await sdk.init();
	await sdk.identify({ user_id: '123' });

	expect(sdk.initialized).toBe(true);
});
```

### Check Widget Exists

```javascript
const widget = sdk.createFeedbackWidget();
widget.mount();

const found = sdk.getWidget(widget.id);
expect(found).toBeDefined();
```