@usgb/forms 1.0.2 → 1.0.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +128 -142
- package/dist/forms-manifest.1.0.3.json +439 -0
- package/dist/forms-manifest.json +218 -84
- package/dist/index.js +642 -582
- package/dist/src/contract/createIdempotencyKey.d.ts +2 -0
- package/dist/src/contract/createIdempotencyKey.d.ts.map +1 -0
- package/dist/src/contract/createStubAdapter.d.ts.map +1 -1
- package/dist/src/contract/types.d.ts +15 -15
- package/dist/src/contract/types.d.ts.map +1 -1
- package/dist/src/definitions/consents.d.ts +10 -0
- package/dist/src/definitions/consents.d.ts.map +1 -1
- package/dist/src/definitions/index.d.ts +4 -3
- package/dist/src/definitions/index.d.ts.map +1 -1
- package/dist/src/definitions/manifest.d.ts +14 -1
- package/dist/src/definitions/manifest.d.ts.map +1 -1
- package/dist/src/definitions/types.d.ts +35 -5
- package/dist/src/definitions/types.d.ts.map +1 -1
- package/dist/src/form/FormShell.d.ts +2 -1
- package/dist/src/form/FormShell.d.ts.map +1 -1
- package/dist/src/form/UsgbForm.d.ts +5 -4
- package/dist/src/form/UsgbForm.d.ts.map +1 -1
- package/dist/src/form/chunkFields.d.ts +1 -1
- package/dist/src/form/kinds/LeadKindForm.d.ts +1 -1
- package/dist/src/form/kinds/LeadKindForm.d.ts.map +1 -1
- package/dist/src/form/kinds/NewsletterKindForm.d.ts +1 -1
- package/dist/src/form/kinds/NewsletterKindForm.d.ts.map +1 -1
- package/dist/src/form/kinds/types.d.ts +3 -1
- package/dist/src/form/kinds/types.d.ts.map +1 -1
- package/dist/src/form/useUsgbFormSession.d.ts +3 -4
- package/dist/src/form/useUsgbFormSession.d.ts.map +1 -1
- package/dist/src/index.d.ts +5 -5
- package/dist/src/index.d.ts.map +1 -1
- package/dist/src/ui/Button.d.ts.map +1 -1
- package/dist/src/ui/ConsentField.d.ts.map +1 -1
- package/dist/usgb-forms.1.0.3.js +44 -0
- package/dist/usgb-forms.css +98 -15
- package/dist/usgb-forms.js +11 -11
- package/forms-manifest.json +218 -84
- package/package.json +1 -1
- package/dist/forms-manifest.1.0.2.json +0 -305
- package/dist/src/contract/collectContext.d.ts +0 -9
- package/dist/src/contract/collectContext.d.ts.map +0 -1
- package/dist/usgb-forms.1.0.2.js +0 -44
package/README.md
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
Shared lead and newsletter forms for the **PWA** (React) and **WordPress** (Web Component) hosts.
|
|
4
4
|
|
|
5
|
-
You pick a predefined `formId`. The package owns fields, validation, consent copy,
|
|
5
|
+
You pick a predefined `formId`. The package owns fields, validation, consent copy, and layout. You own the submit endpoint, legal-document URLs, heading/subheading/CTA copy, and thank-you behavior. The backend owns tracking and page-context collection.
|
|
6
6
|
|
|
7
7
|
## What you get
|
|
8
8
|
|
|
@@ -17,33 +17,61 @@ The Web Component script injects the same CSS once on load. React hosts must imp
|
|
|
17
17
|
|
|
18
18
|
## Mental model
|
|
19
19
|
|
|
20
|
-
| You pass | Package already decided
|
|
21
|
-
| ----------------------------------- |
|
|
22
|
-
| `formId` | Fields, required/optional rules, consent pins,
|
|
23
|
-
| `adapter.submit` | Where the payload goes (never an attribute or hardcoded URL)
|
|
24
|
-
| `legalUrls` / `*-url` | Hrefs for package-owned consent copy
|
|
25
|
-
| `heading`, `subheading`, `ctaLabel` | Marketing copy around the form
|
|
26
|
-
| `successMessage` or `successUrl` | Thank-you UX after accept
|
|
20
|
+
| You pass | Package already decided |
|
|
21
|
+
| ----------------------------------- | --------------------------------------------------------------------- |
|
|
22
|
+
| `formId` | Fields, required/optional rules, consent pins, layout family (`kind`) |
|
|
23
|
+
| `adapter.submit` | Where the payload goes (never an attribute or hardcoded URL) |
|
|
24
|
+
| `legalUrls` / `*-url` | Hrefs for package-owned consent copy |
|
|
25
|
+
| `heading`, `subheading`, `ctaLabel` | Marketing copy around the form |
|
|
26
|
+
| `successMessage` or `successUrl` | Thank-you UX after accept |
|
|
27
27
|
|
|
28
|
-
Hosts **must not** invent field lists
|
|
28
|
+
Hosts **must not** invent field lists or consent wording. New forms are new catalog entries in this package, not host-built schemas.
|
|
29
29
|
|
|
30
|
-
Use `listFormDefinitions()` (or the manifest) when a CMS needs a picker of available `formId`s
|
|
30
|
+
Use `listFormDefinitions()` (or the manifest) when a CMS needs a picker of available `formId`s, and `listEditorOptions(formId)` for the settings that picker may expose (see [Editor options](#editor-options)).
|
|
31
31
|
|
|
32
32
|
## Available forms
|
|
33
33
|
|
|
34
|
-
| `formId` | Kind | Fields | Consent
|
|
35
|
-
| --------------------------- | ------------ | --------------------------------------------------------- |
|
|
36
|
-
| `
|
|
37
|
-
| `
|
|
38
|
-
| `
|
|
34
|
+
| `formId` | Kind | Fields | Consent | Size/layout |
|
|
35
|
+
| --------------------------- | ------------ | --------------------------------------------------------- | --------------------------------------------------------------- | ------------------------------------------------------------ |
|
|
36
|
+
| `magento-fik` | `lead` | First name, last name, email (required); phone (optional) | Optional TCPA (v1), marketing SMS, and terms/privacy checkboxes | `dense`, `large`, or `sidebar`; optional two-column name row |
|
|
37
|
+
| `magento-ira-kick-article` | `lead` | First name, last name, email, phone (all required) | Optional TCPA checkbox (v2, links terms and privacy) | `dense`, `large`, or `sidebar`; optional two-column name row |
|
|
38
|
+
| `magento-fik-blog-rail` | `lead` | First name, last name, email, phone (all required) | Optional TCPA checkbox (v2, links terms and privacy) | `dense`, `large`, or `sidebar`; optional two-column name row |
|
|
39
|
+
| `main-investors-kit-notice` | `lead` | Same as `magento-fik` | Clickwrap notice only (`lead-clickwrap` v2) | `dense`, `large`, or `sidebar`; optional two-column name row |
|
|
40
|
+
| `newsletter` | `newsletter` | Email only | None | None — omit `variant` and `twoColumn` / `two-column` |
|
|
39
41
|
|
|
40
42
|
Appearances for every catalog form: `on-light` | `on-dark`. Appearance only recolors the form for readability on a light or dark host background — it never sets a background, padding, or radius. The host container owns those.
|
|
41
43
|
|
|
42
44
|
`kind` is the layout family (lead grid vs inline newsletter row). The root exposes `data-kind` for CSS. Several catalog forms can share one kind (e.g. another lead kit that reuses the lead layout).
|
|
43
45
|
|
|
44
|
-
|
|
46
|
+
### Editor options
|
|
47
|
+
|
|
48
|
+
`editorOptions` in the manifest lists every host-owned setting an editor may apply, and each form's `editor.options` lists the ones that form accepts. A CMS panel should build its controls from those two lists instead of hardcoding prop names:
|
|
49
|
+
|
|
50
|
+
| Option | Control | React prop | Attribute | Applies to |
|
|
51
|
+
| ---------------- | --------- | ---------------- | ---------------------------------------- | ------------------------------------------------ |
|
|
52
|
+
| `appearance` | select | `appearance` | `appearance` | All forms — values in `supportedAppearances` |
|
|
53
|
+
| `variant` | select | `variant` | `variant` | Lead forms — values in `supportedVariants` |
|
|
54
|
+
| `twoColumn` | checkbox | `twoColumn` | `two-column` | Lead forms — independent of the size variant |
|
|
55
|
+
| `heading` | text | `heading` | `heading` | All forms |
|
|
56
|
+
| `subheading` | text | `subheading` | `subheading` | All forms |
|
|
57
|
+
| `ctaLabel` | text | `ctaLabel` | `cta` | All forms — default is the form's `ctaLabel` |
|
|
58
|
+
| `legalUrls` | url group | `legalUrls` | `*-url` (see `attributes` on the option) | Forms with consent — keys in `requiredLegalUrls` |
|
|
59
|
+
| `successMessage` | text | `successMessage` | `success-message` | All forms |
|
|
60
|
+
| `successUrl` | url | `successUrl` | `success-url` | All forms |
|
|
61
|
+
|
|
62
|
+
Only `legalUrls` is required, and only for the keys a form's consents name — the form does not render when one is missing. Everything else is optional.
|
|
63
|
+
|
|
64
|
+
`listEditorOptions(formId)` returns those options already resolved for one form (allowed values, effective default, React prop, and attribute), so a Gutenberg panel does not have to follow the `valuesFrom` / `defaultFrom` pointers itself:
|
|
65
|
+
|
|
66
|
+
```ts
|
|
67
|
+
import { listEditorOptions } from '@usgb/forms'
|
|
68
|
+
|
|
69
|
+
listEditorOptions('newsletter')
|
|
70
|
+
// [{ key: 'appearance', control: 'select', values: ['on-light', 'on-dark'], defaultValue: 'on-light', … }, …]
|
|
71
|
+
// `variant`, `twoColumn`, and `legalUrls` are absent — newsletter takes none.
|
|
72
|
+
```
|
|
45
73
|
|
|
46
|
-
|
|
74
|
+
## Install
|
|
47
75
|
|
|
48
76
|
### npm (React / PWA)
|
|
49
77
|
|
|
@@ -64,46 +92,13 @@ Peer dependency: `react` and `react-dom` `^18` or `^19`.
|
|
|
64
92
|
|
|
65
93
|
### CDN (Web Component / WordPress)
|
|
66
94
|
|
|
67
|
-
Load the built
|
|
95
|
+
Load the built script for a release (styles inject themselves):
|
|
68
96
|
|
|
69
97
|
```html
|
|
70
|
-
<script src="https://
|
|
71
|
-
```
|
|
72
|
-
|
|
73
|
-
Exact CDN hostname, path, and versioning scheme are **TBD**. Prefer versioned filenames (`usgb-forms.<version>.js` and `forms-manifest.<version>.json`) so hosts can pin the script and the CMS picker to the same release. Gutenberg should load that matching manifest — not an unversioned “latest” file — when listing `formId`s.
|
|
74
|
-
|
|
75
|
-
### Local development (hosts, unpublished)
|
|
76
|
-
|
|
77
|
-
Hosts consume **built** artifacts (`dist/` and root `forms-manifest.json`), not `src/`. Clone this repo next to the host (or anywhere you can path to), then:
|
|
78
|
-
|
|
79
|
-
```bash
|
|
80
|
-
cd usgb-forms
|
|
81
|
-
yarn install
|
|
82
|
-
yarn build
|
|
83
|
-
```
|
|
84
|
-
|
|
85
|
-
Rebuild here whenever you change this package. The Vite playground (`yarn dev`) is only for package maintainers; it is not what PWA or WordPress load.
|
|
86
|
-
|
|
87
|
-
**React / PWA.** Point the host at this repo with Yarn 1 `file:` (preferred — the path lives in the host `package.json`, no global link):
|
|
88
|
-
|
|
89
|
-
```bash
|
|
90
|
-
# from the PWA / React host, path adjusted to your layout
|
|
91
|
-
yarn add file:../usgb-forms
|
|
98
|
+
<script src="https://forms.usgoldbureau.com/usgb-forms.1.0.3.js"></script>
|
|
92
99
|
```
|
|
93
100
|
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
`yarn link` in this repo and `yarn link @usgb/forms` in the host also works, but it can resolve a second copy of React and break hooks. If that happens, alias `@usgb/forms` to the sibling folder in the host bundler instead of linking.
|
|
97
|
-
|
|
98
|
-
**WordPress / Web Component.** Skip the CDN. After `yarn build`, load files from this repo:
|
|
99
|
-
|
|
100
|
-
| Host need | File in this repo |
|
|
101
|
-
| ------------------------ | --------------------------------------------------------------- |
|
|
102
|
-
| Form script | `dist/usgb-forms.js` |
|
|
103
|
-
| Pinned script (optional) | `dist/usgb-forms.<version>.js` |
|
|
104
|
-
| Gutenberg `formId` list | `forms-manifest.json` (or `dist/forms-manifest.<version>.json`) |
|
|
105
|
-
|
|
106
|
-
Copy those into the plugin on its build, or enqueue them from a local static server. A `file:` npm dependency is not required for the Web Component — only a URL (or filesystem path the plugin can enqueue) to the built JS and catalog JSON.
|
|
101
|
+
Pin the script and the catalog together: `usgb-forms.<version>.js` and `forms-manifest.<version>.json` on `https://forms.usgoldbureau.com/`. Gutenberg should load that matching manifest when listing `formId`s.
|
|
107
102
|
|
|
108
103
|
## React (PWA)
|
|
109
104
|
|
|
@@ -111,14 +106,13 @@ Copy those into the plugin on its build, or enqueue them from a local static ser
|
|
|
111
106
|
import { UsgbForm, createStubAdapter, PWA_LEGAL_URLS } from '@usgb/forms'
|
|
112
107
|
import '@usgb/forms/usgb-forms.css'
|
|
113
108
|
;<UsgbForm
|
|
114
|
-
formId="
|
|
109
|
+
formId="magento-fik"
|
|
115
110
|
appearance="on-dark"
|
|
116
|
-
|
|
111
|
+
variant="large"
|
|
112
|
+
twoColumn
|
|
117
113
|
heading="Get My Free Guide"
|
|
118
114
|
subheading="Enter your details to receive the Main Investors Kit."
|
|
119
115
|
ctaLabel="GET MY FREE GUIDE"
|
|
120
|
-
source="cms-home"
|
|
121
|
-
campaign="spring-kit"
|
|
122
116
|
legalUrls={PWA_LEGAL_URLS}
|
|
123
117
|
successMessage="Thanks — we will send your kit shortly."
|
|
124
118
|
adapter={yourHostAdapter}
|
|
@@ -131,7 +125,7 @@ import '@usgb/forms/usgb-forms.css'
|
|
|
131
125
|
/>
|
|
132
126
|
```
|
|
133
127
|
|
|
134
|
-
Newsletter (no consent
|
|
128
|
+
Newsletter (no consent or lead layout options):
|
|
135
129
|
|
|
136
130
|
```tsx
|
|
137
131
|
<UsgbForm
|
|
@@ -145,42 +139,51 @@ Newsletter (no consent, no variants):
|
|
|
145
139
|
|
|
146
140
|
### React props
|
|
147
141
|
|
|
148
|
-
| Prop | Required | Role
|
|
149
|
-
| ------------------------- | -------------------------- |
|
|
150
|
-
| `formId` | yes | Catalog key (`
|
|
151
|
-
| `adapter` | yes | `HostAdapter` with `host
|
|
152
|
-
| `appearance` | no | `on-light` (default) or `on-dark`
|
|
153
|
-
| `
|
|
154
|
-
| `
|
|
155
|
-
| `
|
|
156
|
-
| `
|
|
157
|
-
| `legalUrls` | when consent requires them | Host CMS paths
|
|
158
|
-
| `successMessage` | no | Inline thank-you when `successUrl` is omitted
|
|
159
|
-
| `successUrl` | no | Redirect after accept (analytics / `onAccepted` are invoked first; see Success behavior)
|
|
160
|
-
| `analytics` | no | `(event) => void`
|
|
161
|
-
| `className` | no | Extra class on `.usgb-form
|
|
162
|
-
| `onAccepted` / `onFailed` | no | Callbacks with the submission payload
|
|
142
|
+
| Prop | Required | Role |
|
|
143
|
+
| ------------------------- | -------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
144
|
+
| `formId` | yes | Catalog key (`magento-fik`, `newsletter`, …) |
|
|
145
|
+
| `adapter` | yes | `HostAdapter` with `host` and `submit()` |
|
|
146
|
+
| `appearance` | no | `on-light` (default) or `on-dark` |
|
|
147
|
+
| `variant` | no | Lead only. Default `dense`. Exactly one of `dense` \| `large` \| `sidebar` |
|
|
148
|
+
| `twoColumn` | no | Lead only. Places grouped name fields in two columns when space allows |
|
|
149
|
+
| `heading` / `subheading` | no | Title and supporting copy |
|
|
150
|
+
| `ctaLabel` | no | Submit button label. Falls back to the catalog `ctaLabel` for that `formId` |
|
|
151
|
+
| `legalUrls` | when consent requires them | Host CMS paths. Keys: `clientAgreement`, `privacyPolicy`, `userAgreement`, `marketLossPolicy`, `electronicDisclaimer`, `termsOfSale` (see Consent and legal URLs) |
|
|
152
|
+
| `successMessage` | no | Inline thank-you when `successUrl` is omitted |
|
|
153
|
+
| `successUrl` | no | Redirect after accept (analytics / `onAccepted` are invoked first; see Success behavior) |
|
|
154
|
+
| `analytics` | no | `(event) => void`. Event `type`: `view` \| `validation_failure` \| `submit_attempt` \| `success` \| `failure`. React-only — the Web Component has no equivalent |
|
|
155
|
+
| `className` | no | Extra class on `.usgb-form`. React-only — put classes on the host page around `<usgb-form>` |
|
|
156
|
+
| `onAccepted` / `onFailed` | no | Callbacks with the submission payload. Web Component: `usgb-form:success` / `usgb-form:failure` |
|
|
163
157
|
|
|
164
158
|
## Web Component (WordPress)
|
|
165
159
|
|
|
166
160
|
Load one script. Styles are injected automatically.
|
|
167
161
|
|
|
168
|
-
|
|
169
|
-
<script src="https://
|
|
162
|
+
```html
|
|
163
|
+
<script src="https://forms.usgoldbureau.com/usgb-forms.1.0.3.js"></script>
|
|
170
164
|
<usgb-form
|
|
171
|
-
|
|
172
|
-
form-id="main-investors-kit"
|
|
165
|
+
form-id="magento-fik"
|
|
173
166
|
appearance="on-dark"
|
|
174
|
-
variant="large
|
|
167
|
+
variant="large"
|
|
168
|
+
two-column
|
|
175
169
|
heading="Get My Free Guide"
|
|
176
170
|
subheading="Enter your details to receive the Main Investors Kit."
|
|
177
171
|
cta="GET MY FREE GUIDE"
|
|
178
|
-
|
|
179
|
-
client-agreement-url="/client-agreement/"
|
|
172
|
+
user-agreement-url="/user-agreement/"
|
|
180
173
|
privacy-policy-url="/privacy-policy/"
|
|
181
174
|
success-message="Thanks — we will send your kit shortly."
|
|
182
175
|
></usgb-form>
|
|
183
|
-
|
|
176
|
+
```
|
|
177
|
+
|
|
178
|
+
Clickwrap kit (`main-investors-kit-notice`) needs the two notice URLs:
|
|
179
|
+
|
|
180
|
+
```html
|
|
181
|
+
<usgb-form
|
|
182
|
+
form-id="main-investors-kit-notice"
|
|
183
|
+
privacy-policy-url="/privacy-policy/"
|
|
184
|
+
user-agreement-url="/user-agreement/"
|
|
185
|
+
></usgb-form>
|
|
186
|
+
```
|
|
184
187
|
|
|
185
188
|
Submit is **not** an attribute. Markup alone uses a stub adapter. Assign a real `HostAdapter` in script:
|
|
186
189
|
|
|
@@ -189,10 +192,6 @@ Submit is **not** an attribute. Markup alone uses a stub adapter. Assign a real
|
|
|
189
192
|
const el = document.querySelector('usgb-form')
|
|
190
193
|
el.adapter = {
|
|
191
194
|
host: 'wordpress',
|
|
192
|
-
getTrackingHints() {
|
|
193
|
-
// Cookies, UTMs, click ids — keys must match the package tracking registry
|
|
194
|
-
return {}
|
|
195
|
-
},
|
|
196
195
|
async submit(payload) {
|
|
197
196
|
const res = await fetch('/your-form-submit', {
|
|
198
197
|
method: 'POST',
|
|
@@ -215,48 +214,71 @@ Submit is **not** an attribute. Markup alone uses a stub adapter. Assign a real
|
|
|
215
214
|
|
|
216
215
|
### Attribute map
|
|
217
216
|
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
|
221
|
-
|
|
|
222
|
-
| `
|
|
223
|
-
| `
|
|
224
|
-
| `
|
|
225
|
-
| `
|
|
226
|
-
| `
|
|
227
|
-
| `
|
|
228
|
-
| `
|
|
217
|
+
`form-id` defaults to `magento-fik`, `appearance` to `on-light`, `variant` to `dense`, and `host` to `wordpress`. `two-column` is a boolean attribute and is off when omitted. There is no `version` attribute — `definitionVersion` comes from the catalog.
|
|
218
|
+
|
|
219
|
+
| Attribute | React prop |
|
|
220
|
+
| --------------------------- | ------------------------------------------------------------- |
|
|
221
|
+
| `form-id` | `formId` |
|
|
222
|
+
| `appearance` | `appearance` |
|
|
223
|
+
| `variant` | `variant` |
|
|
224
|
+
| `two-column` | `twoColumn` |
|
|
225
|
+
| `heading` / `subheading` | `heading` / `subheading` |
|
|
226
|
+
| `cta` | `ctaLabel` |
|
|
227
|
+
| `success-message` | `successMessage` |
|
|
228
|
+
| `success-url` | `successUrl` |
|
|
229
|
+
| `client-agreement-url` | `legalUrls.clientAgreement` |
|
|
230
|
+
| `privacy-policy-url` | `legalUrls.privacyPolicy` |
|
|
231
|
+
| `user-agreement-url` | `legalUrls.userAgreement` |
|
|
232
|
+
| `market-loss-policy-url` | `legalUrls.marketLossPolicy` |
|
|
233
|
+
| `electronic-disclaimer-url` | `legalUrls.electronicDisclaimer` |
|
|
234
|
+
| `terms-of-sale-url` | `legalUrls.termsOfSale` |
|
|
235
|
+
| `host` | Used only for the stub adapter before you assign `el.adapter` |
|
|
236
|
+
|
|
237
|
+
Same names are exported as `LEGAL_URL_ATTRS` (`legalUrls` key → attribute). Gutenberg and other generators should use that map instead of hard-coding strings.
|
|
238
|
+
|
|
239
|
+
### Properties and events
|
|
240
|
+
|
|
241
|
+
| Surface | Role |
|
|
242
|
+
| ------------------- | --------------------------------------------------------------------------------------- |
|
|
243
|
+
| `el.adapter` | Assign a `HostAdapter`. Not an attribute. Markup without this uses `createStubAdapter`. |
|
|
244
|
+
| `usgb-form:success` | `e.detail` is `SubmissionPayload` (same as React `onAccepted`) |
|
|
245
|
+
| `usgb-form:failure` | `e.detail` is `{ payload, message }` (same as React `onFailed`) |
|
|
246
|
+
|
|
247
|
+
The Web Component does not expose `analytics` or `className`. Listen for the events above, or wrap the element for layout.
|
|
229
248
|
|
|
230
249
|
## Host adapter
|
|
231
250
|
|
|
232
251
|
```ts
|
|
233
252
|
interface HostAdapter {
|
|
234
253
|
host: 'pwa' | 'wordpress'
|
|
235
|
-
getTrackingHints(): Partial<Record<TrackingKey, string | undefined>>
|
|
236
254
|
submit(payload: SubmissionPayload): Promise<SubmitResult>
|
|
237
255
|
}
|
|
238
256
|
```
|
|
239
257
|
|
|
240
258
|
- `submit` must return `{ status: 'accepted' }` or `{ status: 'failed', message?: string }`.
|
|
241
|
-
- The package
|
|
242
|
-
- `createStubAdapter('pwa' | 'wordpress')` accepts every payload (
|
|
243
|
-
- Tracking
|
|
259
|
+
- The package does not choose a submit URL.
|
|
260
|
+
- `createStubAdapter('pwa' | 'wordpress')` accepts every payload (markup-only Web Component).
|
|
261
|
+
- Tracking, UTMs, page URL, referrer, and similar context are collected by the backend. This package does not send a `context` object.
|
|
244
262
|
|
|
245
263
|
### Payload shape (summary)
|
|
246
264
|
|
|
247
|
-
Successful submits send
|
|
265
|
+
Successful submits send `formId`, `definitionVersion`, `submissionContractVersion`, `idempotencyKey`, `data` (field values), and optional `consents` (grant booleans, opt-in dates, and `*_consent_language` strings). Exact field sets come from the form’s catalog entry.
|
|
248
266
|
|
|
249
267
|
## Consent and legal URLs
|
|
250
268
|
|
|
251
269
|
Consent policies are versioned and package-owned (checkboxes and/or clickwrap notices). Forms list zero or more pins (`definitionId` + `definitionVersion` + optional `required` for checkboxes). Hosts only supply document **hrefs**.
|
|
252
270
|
|
|
253
|
-
- `
|
|
254
|
-
- `
|
|
271
|
+
- `magento-fik` pins `lead-tcpa`, `lead-sms`, and `lead-tospp` (all v1, optional checkboxes). Required URLs: `userAgreement`, `privacyPolicy` (`user-agreement-url`, `privacy-policy-url`).
|
|
272
|
+
- `magento-ira-kick-article` and `magento-fik-blog-rail` pin `lead-tcpa` v2 only (optional checkbox). Unlike v1, v2 links the terms and privacy policy, so required URLs: `userAgreement`, `privacyPolicy`.
|
|
273
|
+
- `main-investors-kit-notice` pins `lead-clickwrap` v2 (notice only: Privacy Policy, Terms & Conditions, and text/call consent). Required URLs: `privacyPolicy`, `userAgreement`. It shares the v1 payload key `clickwrap_consent_language`. `lead-clickwrap` v1 (five document links) stays in the catalog and is not pinned.
|
|
274
|
+
- `newsletter` has no consents and needs no legal URLs.
|
|
275
|
+
- `LEGAL_URL_ATTRS` lists every host-owned slot, including `clientAgreement` / `client-agreement-url`. No current catalog consent requires `clientAgreement`; it is still valid on `legalUrls` / the attribute (PWA Magento ships it in `PWA_LEGAL_URLS`).
|
|
255
276
|
- PWA Magento defaults (`PWA_LEGAL_URLS`): `/content/client-agreement`, `/content/privacy-policy`, `/content/user-agreement`, `/content/market-loss-policy`, `/content/electronic-disclaimer`, `/content/terms-of-sale`.
|
|
256
|
-
- WordPress must pass every URL required by the selected consents. A form with a missing required URL **does not render**.
|
|
277
|
+
- WordPress must pass every URL required by the selected consents. A form with a missing required URL **does not render**. CMS pickers can compute the list with `getFormDefinition`, `resolveFormConsents`, and `collectRequiredLegalUrls`, then map keys through `LEGAL_URL_ATTRS`.
|
|
278
|
+
- `isCompleteLegalUrls(legalUrls, requiredKeys)` is the same check the renderer uses.
|
|
257
279
|
- Checkbox grants land in `consents` only (`tcpa_form_consent_granted`, `sms_form_consent_granted`, `tospp_form_consent_granted`). The exact copy shown is `tcpa_consent_language` (and the matching keys for other policies), even when unchecked.
|
|
258
280
|
- Checking the TCPA box also adds `tcpa_form_opt_in_date` (YYYY-MM-DD). The notice form only sends `clickwrap_consent_language`.
|
|
259
|
-
-
|
|
281
|
+
- Hosts supply document hrefs only. Consent wording stays in this package.
|
|
260
282
|
|
|
261
283
|
## Success behavior
|
|
262
284
|
|
|
@@ -312,42 +334,6 @@ Appearance never paints a card. Put the form on a dark host surface and pass `ap
|
|
|
312
334
|
|
|
313
335
|
```html
|
|
314
336
|
<div style="background: #001f3d; padding: 2rem; border-radius: 0.75rem">
|
|
315
|
-
<usgb-form form-id="
|
|
337
|
+
<usgb-form form-id="magento-fik" appearance="on-dark" …></usgb-form>
|
|
316
338
|
</div>
|
|
317
339
|
```
|
|
318
|
-
|
|
319
|
-
Visual styles are a ported snapshot of the PWA form kit. When PWA form styles change, update this package and bump `package.json` `version`.
|
|
320
|
-
|
|
321
|
-
## Versions
|
|
322
|
-
|
|
323
|
-
Day to day, bump **`package.json` `version`** (and set `compatiblePackageVersions` to `^` that version). Push to `main`: npm publishes only if that version is new; S3 always uploads `dist/`. Skipping a package bump **overwrites** the existing `usgb-forms.<version>.js` pin.
|
|
324
|
-
|
|
325
|
-
Patch is enough while nothing is consuming the package. Use minor/major later for compatible vs breaking host API.
|
|
326
|
-
|
|
327
|
-
Everything else is a different object — leave it alone unless that object actually changed:
|
|
328
|
-
|
|
329
|
-
| Field | Bump when |
|
|
330
|
-
| --------------------------------------------- | -------------------------------------------------------------------- |
|
|
331
|
-
| `forms[formId].definitionVersion` | That form’s fields, consent pins, or tracking change |
|
|
332
|
-
| Consent `definitionVersion` in `consents.tsx` | Legal wording changes (new id/version; do not edit in place) |
|
|
333
|
-
| `submissionContract.version` | Submit JSON shape changes (proxies read `submissionContractVersion`) |
|
|
334
|
-
| `schemaVersion` | Manifest JSON keys/shape change (CMS parsers) |
|
|
335
|
-
|
|
336
|
-
Form and consent rules: [`src/definitions/context.md`](src/definitions/context.md).
|
|
337
|
-
|
|
338
|
-
## Develop (package maintainers)
|
|
339
|
-
|
|
340
|
-
```bash
|
|
341
|
-
yarn install
|
|
342
|
-
yarn dev # Vite playground (tries :5174)
|
|
343
|
-
yarn build
|
|
344
|
-
yarn typecheck
|
|
345
|
-
yarn lint
|
|
346
|
-
yarn format
|
|
347
|
-
```
|
|
348
|
-
|
|
349
|
-
Prettier and ESLint match magento-frontend (4-space indent, single quotes, no semicolons, print width 80).
|
|
350
|
-
|
|
351
|
-
## Git
|
|
352
|
-
|
|
353
|
-
Local repo only. Connect a GitHub remote later when ready to publish.
|