Postcard Designer Tool

<h1 align="center">Postcard Designer Tool</h1>

## User Guide

Install the package in your application:

```sh
npm install designertool
```

Default config:

```js
{
  "size": {
    "w": 11,
    "h": 6
  },
  // Adobe Fonts (Typekit) kit loaded globally so its brand fonts render in the editor and
  // in exported/printed HTML. Empty string disables it.
  "fontKit": "https://use.typekit.net/exp2yhe.css",
  "template_scope": undefined,
  "flags": {
    "disable_default_templates": false
  },
  "zoom": 100,
  "backgroundColor": "#ffffff",
  "backgroundImage": null,
  "border": {
    "enabled": false,
    "width": 6,
    "color": "rgba(0, 0, 0, 0)"
  },
  "canvasOffset": {
    "x": 0,
    "y": 0
  },
  "address_box": {
    // Controls the actual address box shown on the View Proof page. Defaults to true when
    // omitted; set to false to hide it.
    "visible": true,
    // Controls the transparent-white placeholder box shown inside the design canvas (and the
    // matching placeholder in the exported/downloaded HTML) as a guide for where the address
    // box will be placed. Defaults to true when omitted, but also inherits an off-state from
    // `visible` above: if `visible` is false, this is false too unless explicitly set to true.
    "isAddressBoxPlaceholderVisibleInCanvas": true,
    // Optional — when omitted, width is derived from `size`: 4in, except on the 6"x4" template
    // where it's narrowed to 3.2835in to fit. Set explicitly to override that default.
    "width": 4,
    "height": 2.375,
    "isLetter": false
  },
  "sideSelector": {
    "front": true,
    "back": true
  },
  "initial_html": undefined,
  // There can be selected between these two options: 'download' or 'save'
  "htmlButtonBehaviour": "download",
  // This function is called when the user clicks on the Html button (This is only an example, you can replace it with your own function)
  "onHtmlButtonClick": (html) => {
    console.log(html);
  },
  "isTopRightExitButtonVisible": false,
  "isBottomLeftExitButtonVisible": false,
  "onExitButtonClick": () => {
    console.log('Exit Tool');
  },
  // The logo needs to be on a publicly accessible URL, in image format PNG, JPG, SVG etc.
  "logo_sidebar_url": "https://yourdomain.com/path-to-your-logo.png",
  // Each entry needs a merge_tag, a type ('text' or 'image'), and optionally a default_value.
  "merge_variables": [
    { "merge_tag": "company", "type": "text", "default_value": "Acme" },
    { "merge_tag": "first_name", "type": "text", "default_value": "John" },
    { "merge_tag": "last_name", "type": "text", "default_value": "Doe" },
    { "merge_tag": "address_line1", "type": "text", "default_value": "123 Main St" },
    { "merge_tag": "address_line2", "type": "text", "default_value": "Apt 1" },
    { "merge_tag": "address_city", "type": "text", "default_value": "Los Angeles" },
    { "merge_tag": "address_state", "type": "text", "default_value": "CA" },
    { "merge_tag": "address_zip", "type": "text", "default_value": "12345" },
    { "merge_tag": "image", "type": "image", "default_value": "https://via.placeholder.com/100" },
    { "merge_tag": "phone_number", "type": "text", "default_value": "(123) 456-7890" },
    { "merge_tag": "web_address", "type": "text", "default_value": "www.designertool.io" }
  ],
  "return_address": {
    "company": "Growmail",
    "first_name": "Jeff",
    "last_name": "Kingsford",
    "address_line1": "425 East Spruce St",
    "address_line2": "Apt 1",
    "address_city": "Tarpon Springs",
    "address_state": "FL",
    "address_zip": "34689"
  },
  "example_data": [
    {
      "company": "Acme",
      "first_name": "John",
      "last_name": "Doe",
      "address_line1": "123 Main St",
      "address_line2": "Apt 1",
      "address_city": "Los Angeles",
      "address_state": "CA",
      "address_zip": "12345",
      "image": "https://via.placeholder.com/100",
      "phone_number": "(123) 456-7890",
      "web_address": "www.designertool.io"
    },
    {
      "company": "Acme",
      "first_name": "Jane",
      "last_name": "Doe",
      "address_line1": "23 Any street",
      "address_line2": "Apt 45",
      "address_city": "Anytown",
      "address_state": "CA",
      "address_zip": "23452",
      "phone_number": "(987) 654-3210",
      "web_address": "www.designertool.io"
    }
  ],
  "api": {
    "base_url": "https://dev-designer.directmailmanager.com/api",
    "project_id": 1,
    "user_id": 2
  },
  "user_id": "{INTERNAL_USER_ID}",
  "google": {
    "map_api_key": "{YOUR_GOOGLE_MAPS_API_KEY}",
    "use_predefined_locations": false,
    "to_addresses": ["1 Main St Apt 1, Los Angeles, CA 12345"]
  },
  // Extend/override with addFont() — see below. Each font needs a name, a link
  // (Google Fonts URL or CSS file; empty string for system/kit-provided fonts),
  // and the list of weights it supports.
  "fonts": [
    {
      "name": "Arial Black",
      "link": "",
      "weights": ["400"]
    },
    {
      "name": "Courier New",
      "link": "",
      "weights": ["400", "700"]
    }
  ]
}
```

Use the component in your application:

```js
<script setup lang="ts">
import { register } from 'designertool'
register()

</script>

<template>
  <postcard-designer api-key="YOUR_API_KEY" :config="config" />
</template>

```

Available functions to modify the default config:

- Every option can be modified by calling the init() function except the fonts, which can be extended by calling the addFont() function:

```js
import { init, addFont } from '@webgurus-eu/postcard-designer-tool';

init({
  backgroundColor: '#000000',
  return_address: {
    company: '',
    first_name: 'Chuck',
    last_name: 'Norris',
    address_line1: '420 Forrest St',
    address_line2: '',
    address_city: 'Austin',
    address_state: 'TX',
    address_zip: '34444',
  },
});

addFont([
  {
    name: 'Kablammo',
    link: 'https://fonts.googleapis.com/css?family=Kablammo',
    weights: ['400'],
  },
  {
    name: 'Bebas Neue',
    link: 'https://fonts.googleapis.com/css?family=Bebas+Neue',
    weights: ['400'],
  },
]);
```

## Built With

- TypeScript
- Vue 3
- Vite
- Tailwind

## Future Updates

- [ ] Conversion Tracking