@salesforce/webapp-template-app-react-sample-b2x-experimental 1.88.1 → 1.90.0
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/dist/.a4drules/skills/webapp-features/SKILL.md +210 -0
- package/dist/CHANGELOG.md +19 -0
- package/dist/force-app/main/default/digitalExperiences/site/appreactsampleb2x1/sfdc_cms__site/appreactsampleb2x1/content.json +1 -1
- package/dist/force-app/main/default/webapplications/appreactsampleb2x/package.json +3 -3
- package/dist/force-app/main/default/webapplications/appreactsampleb2x/src/api/applicationApi.ts +7 -31
- package/dist/force-app/main/default/webapplications/appreactsampleb2x/src/features/authentication/api/userProfileApi.ts +15 -1
- package/dist/force-app/main/default/webapplications/appreactsampleb2x/src/pages/Application.tsx +31 -90
- package/dist/package.json +1 -1
- package/package.json +1 -1
|
@@ -0,0 +1,210 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: webapplications-features
|
|
3
|
+
description: Search, describe, and install pre-built UI features (authentication, shadcn components, navigation, charts, search, GraphQL, Agentforce AI) into Salesforce webapps. Use this when the user wants to add functionality to a webapp, or when determining what salesforce-provided features are available — whether prompted by the user or on your own initiative. Always check for an existing feature before building from scratch.
|
|
4
|
+
---
|
|
5
|
+
|
|
6
|
+
# webapps-features-experimental CLI — Agent Reference
|
|
7
|
+
|
|
8
|
+
**Always check for an existing feature before building something yourself.** This CLI installs pre-built, tested feature packages into Salesforce webapps. Features range from foundational UI component libraries (shadcn/ui with Button, Card, Input, Table, etc.) to full-stack application capabilities like authentication (login, registration, password flows, session management, and Apex backend classes), global search, navigation menus, data visualization charts, GraphQL integrations, and Agentforce AI conversation UIs. Each feature ships as a complete implementation — including React components, context providers, route guards, and any required Salesforce server-side code — that already handles platform-specific concerns like Salesforce API integration, session management, and SFDX metadata structure. Building these from scratch is error-prone and unnecessary when a feature exists. **If no existing feature is found, ask the user before proceeding with a custom implementation — a relevant feature may exist under a different name or keyword.**
|
|
9
|
+
|
|
10
|
+
```
|
|
11
|
+
npx @salesforce/webapps-features-experimental <command> [options]
|
|
12
|
+
```
|
|
13
|
+
|
|
14
|
+
## Workflow: Search Project → Search Features → Describe → Install
|
|
15
|
+
|
|
16
|
+
**MANDATORY**: When the user asks to add ANY webapp functionality, follow this entire workflow. Do not skip steps.
|
|
17
|
+
|
|
18
|
+
### 1. Search existing project code
|
|
19
|
+
|
|
20
|
+
Before installing anything, check whether the functionality already exists in the **project source code** (not dependencies).
|
|
21
|
+
|
|
22
|
+
- **Always scope searches to `src/`** to avoid matching files in `node_modules/`, `dist/`, or `build/` output
|
|
23
|
+
- Use Glob with a scoped path: e.g., `src/**/Button.tsx`, `src/**/*auth*.tsx`
|
|
24
|
+
- Use Grep with the `path` parameter set to the `src/` directory, or use `glob: "*.{ts,tsx}"` to restrict file types
|
|
25
|
+
- Check common directories: `src/components/`, `src/lib/`, `src/pages/`, `src/hooks/`
|
|
26
|
+
- **Never** search from the project root without a path or glob filter — this will crawl `node_modules` and produce massive, unhelpful output
|
|
27
|
+
|
|
28
|
+
**If existing code is found** — read the files, present them to the user, and ask if they want to reuse or extend what's there. If yes, use the existing code and stop. If no, proceed to step 2.
|
|
29
|
+
|
|
30
|
+
**If nothing is found** — proceed to step 2.
|
|
31
|
+
|
|
32
|
+
### 2. Search available features
|
|
33
|
+
|
|
34
|
+
```bash
|
|
35
|
+
npx @salesforce/webapps-features-experimental list [options]
|
|
36
|
+
```
|
|
37
|
+
|
|
38
|
+
Options:
|
|
39
|
+
|
|
40
|
+
- `-v, --verbose` — Show full descriptions, packages, and dependencies
|
|
41
|
+
- `--search <query>` — Filter features by keyword (ranked by relevance)
|
|
42
|
+
|
|
43
|
+
```bash
|
|
44
|
+
npx @salesforce/webapps-features-experimental list
|
|
45
|
+
npx @salesforce/webapps-features-experimental list --search "auth"
|
|
46
|
+
npx @salesforce/webapps-features-experimental list --search "button"
|
|
47
|
+
```
|
|
48
|
+
|
|
49
|
+
**If no matching feature is found** — ask the user before proceeding with a custom implementation. A relevant feature may exist under a different name or keyword.
|
|
50
|
+
|
|
51
|
+
### 3. Describe a feature
|
|
52
|
+
|
|
53
|
+
```bash
|
|
54
|
+
npx @salesforce/webapps-features-experimental describe <feature>
|
|
55
|
+
```
|
|
56
|
+
|
|
57
|
+
Shows description, package name, dependencies, components, copy operations, and example files.
|
|
58
|
+
|
|
59
|
+
```bash
|
|
60
|
+
npx @salesforce/webapps-features-experimental describe authentication
|
|
61
|
+
npx @salesforce/webapps-features-experimental describe shadcn
|
|
62
|
+
```
|
|
63
|
+
|
|
64
|
+
### 4. Install a feature
|
|
65
|
+
|
|
66
|
+
```bash
|
|
67
|
+
npx @salesforce/webapps-features-experimental install <feature> --webapp-dir <path> [options]
|
|
68
|
+
```
|
|
69
|
+
|
|
70
|
+
Resolves the feature name to an npm package, installs it and its dependencies (including transitive feature dependencies like `shadcn`), copies source files into your project, and reports any `__example__` files that require manual integration.
|
|
71
|
+
|
|
72
|
+
Options:
|
|
73
|
+
|
|
74
|
+
- `--webapp-dir <path>` (required) — Path to the webapp directory
|
|
75
|
+
- `--sfdx-root <path>` (default: `force-app/main/default`) — SFDX metadata root directory
|
|
76
|
+
- `--dry-run` (default: `false`) — Preview changes without writing files
|
|
77
|
+
- `-v, --verbose` (default: `false`) — Enable verbose logging
|
|
78
|
+
- `-y, --yes` (default: `false`) — Skip all prompts (auto-skip conflicts)
|
|
79
|
+
- `--on-conflict <mode>` (default: `prompt`) — `prompt`, `error`, `skip`, or `overwrite`
|
|
80
|
+
- `--conflict-resolution <file>` — Path to JSON file with per-file resolutions
|
|
81
|
+
|
|
82
|
+
```bash
|
|
83
|
+
# Install authentication (also installs shadcn dependency)
|
|
84
|
+
npx @salesforce/webapps-features-experimental install authentication \
|
|
85
|
+
--webapp-dir force-app/main/default/webapplications/mywebapp
|
|
86
|
+
|
|
87
|
+
# Dry run to preview changes
|
|
88
|
+
npx @salesforce/webapps-features-experimental install shadcn \
|
|
89
|
+
--webapp-dir force-app/main/default/webapplications/mywebapp \
|
|
90
|
+
--dry-run
|
|
91
|
+
|
|
92
|
+
# Non-interactive install (skip all file conflicts)
|
|
93
|
+
npx @salesforce/webapps-features-experimental install authentication \
|
|
94
|
+
--webapp-dir force-app/main/default/webapplications/mywebapp \
|
|
95
|
+
--yes
|
|
96
|
+
```
|
|
97
|
+
|
|
98
|
+
## Conflict Handling
|
|
99
|
+
|
|
100
|
+
Since you are running in a non-interactive environment, you cannot use `--on-conflict prompt` directly. When conflicts are likely (e.g. installing into an existing project), you have two options:
|
|
101
|
+
|
|
102
|
+
**Option A — Let the user resolve conflicts interactively.** Suggest the user run the install command themselves with `--on-conflict prompt` so they can decide per-file.
|
|
103
|
+
|
|
104
|
+
**Option B — Two-pass automated resolution:**
|
|
105
|
+
|
|
106
|
+
```bash
|
|
107
|
+
# Pass 1: detect conflicts
|
|
108
|
+
npx @salesforce/webapps-features-experimental install authentication \
|
|
109
|
+
--webapp-dir force-app/main/default/webapplications/mywebapp \
|
|
110
|
+
--on-conflict error
|
|
111
|
+
|
|
112
|
+
# The CLI will exit with an error listing every conflicting file path.
|
|
113
|
+
|
|
114
|
+
# Pass 2: create a resolution file and re-run
|
|
115
|
+
echo '{ "src/styles/global.css": "overwrite", "src/lib/utils.ts": "skip" }' > resolutions.json
|
|
116
|
+
|
|
117
|
+
npx @salesforce/webapps-features-experimental install authentication \
|
|
118
|
+
--webapp-dir force-app/main/default/webapplications/mywebapp \
|
|
119
|
+
--conflict-resolution resolutions.json
|
|
120
|
+
```
|
|
121
|
+
|
|
122
|
+
Resolution values per file: `"skip"` (keep existing) or `"overwrite"` (replace). When unsure how to resolve a conflict, ask the user rather than guessing.
|
|
123
|
+
|
|
124
|
+
## Hint Placeholders in Copy Paths
|
|
125
|
+
|
|
126
|
+
Some copy operations use **hint placeholders** in the `"to"` path — descriptive segments like `<desired-page-with-search-input>` that are NOT resolved by the CLI. These are guidance for the user or LLM to choose an appropriate destination.
|
|
127
|
+
|
|
128
|
+
**How they work:** The file is copied with the literal placeholder name (e.g., `src/pages/<desired-page-with-search-input>.tsx`). After installation, you should:
|
|
129
|
+
|
|
130
|
+
1. Read the copied file to understand its purpose
|
|
131
|
+
2. Rename or relocate it to the intended target (e.g., `src/pages/Home.tsx`)
|
|
132
|
+
3. Or integrate its patterns into an existing file, then delete it
|
|
133
|
+
|
|
134
|
+
**How to identify them:** Hint placeholders use `<descriptive-name>` syntax but are NOT one of the system placeholders (`<sfdxRoot>`, `<webappDir>`, `<webapp>`). They always appear in the middle or end of a path, never as the leading segment.
|
|
135
|
+
|
|
136
|
+
**Example from features.json:**
|
|
137
|
+
|
|
138
|
+
```json
|
|
139
|
+
{
|
|
140
|
+
"to": "<webappDir>/src/pages/<desired-page-with-search-input>.tsx",
|
|
141
|
+
"description": "Example home page showing GlobalSearchInput integration",
|
|
142
|
+
"integrationTarget": "src/pages/Home.tsx"
|
|
143
|
+
}
|
|
144
|
+
```
|
|
145
|
+
|
|
146
|
+
The `integrationTarget` field tells you the suggested destination. Use your judgment — if the user already has a different page where search should go, integrate there instead.
|
|
147
|
+
|
|
148
|
+
**When `integrationTarget` itself is a placeholder:** Some features use a hint placeholder in the `integrationTarget` value (e.g., `"integrationTarget": "src/<path-to-desired-page-with-search-input>.tsx"`). This means there is no single default target — the user must decide which existing file to integrate into. When you encounter this:
|
|
149
|
+
|
|
150
|
+
1. Ask the user which page or file they want to integrate the feature into
|
|
151
|
+
2. Read the `__example__` file to understand the integration pattern
|
|
152
|
+
3. Read the user's chosen target file
|
|
153
|
+
4. Apply the pattern from the example into the target file
|
|
154
|
+
|
|
155
|
+
## Post Installation: Integrating **example** Files
|
|
156
|
+
|
|
157
|
+
Features may include `__example__` files (e.g., `__example__auth-app.tsx`) showing integration patterns.
|
|
158
|
+
|
|
159
|
+
**The describe command shows**:
|
|
160
|
+
|
|
161
|
+
- Which **example** files will be copied
|
|
162
|
+
- Target file to integrate into (e.g., `src/app.tsx`)
|
|
163
|
+
- What the example demonstrates
|
|
164
|
+
|
|
165
|
+
### How to Integrate Example Files (CRITICAL FOR LLMs)
|
|
166
|
+
|
|
167
|
+
⚠️ **ONLY USE Read AND Edit TOOLS - NO BASH COMMANDS** ⚠️
|
|
168
|
+
|
|
169
|
+
**DO NOT DO THIS**:
|
|
170
|
+
|
|
171
|
+
- ❌ `git status` or any git commands
|
|
172
|
+
- ❌ `ls`, `cat`, `sed`, `awk`, or ANY bash file commands
|
|
173
|
+
- ❌ Chaining bash commands to read multiple files
|
|
174
|
+
- ❌ Using bash to check directories or file existence
|
|
175
|
+
|
|
176
|
+
**DO THIS INSTEAD**:
|
|
177
|
+
|
|
178
|
+
- ✅ Use Read tool with `file_path` parameter to read each file
|
|
179
|
+
- ✅ Use Edit tool with `file_path`, `old_string`, `new_string` to modify files
|
|
180
|
+
- ✅ That's it! Just Read and Edit tools.
|
|
181
|
+
|
|
182
|
+
**Integration steps**:
|
|
183
|
+
|
|
184
|
+
1. **Read each example file** (use Read tool)
|
|
185
|
+
- Example: Read tool with `file_path: "force-app/main/default/webapplications/mywebapp/src/__example__auth-app.tsx"`
|
|
186
|
+
- Note the imports and patterns to integrate
|
|
187
|
+
|
|
188
|
+
2. **Read each target file** (use Read tool)
|
|
189
|
+
- Example: Read tool with `file_path: "force-app/main/default/webapplications/mywebapp/src/app.tsx"`
|
|
190
|
+
- Understand where the new code should go
|
|
191
|
+
|
|
192
|
+
3. **Edit each target file** (use Edit tool)
|
|
193
|
+
- Add imports from the example
|
|
194
|
+
- Add or modify code following the example's patterns
|
|
195
|
+
- Preserve existing functionality
|
|
196
|
+
|
|
197
|
+
4. **Delete the example file after successful integration** (use Bash tool)
|
|
198
|
+
- Example: `rm force-app/main/default/webapplications/mywebapp/src/__example__authentication-routes.tsx`
|
|
199
|
+
- Only delete after you have successfully integrated the pattern
|
|
200
|
+
- This keeps the codebase clean and removes temporary example files
|
|
201
|
+
|
|
202
|
+
## Troubleshooting
|
|
203
|
+
|
|
204
|
+
**Directory not found**: Check paths are correct, use absolute or correct relative paths
|
|
205
|
+
|
|
206
|
+
**Feature not found**: Use `npx @salesforce/webapps-features-experimental list` to see available feature names
|
|
207
|
+
|
|
208
|
+
**Conflicts in error mode**: Follow CLI instructions to create resolution file
|
|
209
|
+
|
|
210
|
+
**Need help?**: Run `npx @salesforce/webapps-features-experimental --help` to see all commands and options
|
package/dist/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,25 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
# [1.90.0](https://github.com/salesforce-experience-platform-emu/webapps/compare/v1.89.0...v1.90.0) (2026-03-10)
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
### Features
|
|
10
|
+
|
|
11
|
+
* Features Skill @W-21452399 ([#248](https://github.com/salesforce-experience-platform-emu/webapps/issues/248)) ([0f4b41b](https://github.com/salesforce-experience-platform-emu/webapps/commit/0f4b41b2887f4b98b48f62b6c133dead8cb5d7e9))
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
|
|
16
|
+
|
|
17
|
+
# [1.89.0](https://github.com/salesforce-experience-platform-emu/webapps/compare/v1.88.1...v1.89.0) (2026-03-10)
|
|
18
|
+
|
|
19
|
+
**Note:** Version bump only for package @salesforce/webapp-template-base-sfdx-project-experimental
|
|
20
|
+
|
|
21
|
+
|
|
22
|
+
|
|
23
|
+
|
|
24
|
+
|
|
6
25
|
## [1.88.1](https://github.com/salesforce-experience-platform-emu/webapps/compare/v1.88.0...v1.88.1) (2026-03-10)
|
|
7
26
|
|
|
8
27
|
**Note:** Version bump only for package @salesforce/webapp-template-base-sfdx-project-experimental
|
|
@@ -15,8 +15,8 @@
|
|
|
15
15
|
"graphql:schema": "node scripts/get-graphql-schema.mjs"
|
|
16
16
|
},
|
|
17
17
|
"dependencies": {
|
|
18
|
-
"@salesforce/sdk-data": "^1.
|
|
19
|
-
"@salesforce/webapp-experimental": "^1.
|
|
18
|
+
"@salesforce/sdk-data": "^1.90.0",
|
|
19
|
+
"@salesforce/webapp-experimental": "^1.90.0",
|
|
20
20
|
"@tailwindcss/vite": "^4.1.17",
|
|
21
21
|
"@tanstack/react-form": "^1.28.4",
|
|
22
22
|
"@types/leaflet": "^1.9.21",
|
|
@@ -43,7 +43,7 @@
|
|
|
43
43
|
"@graphql-eslint/eslint-plugin": "^4.1.0",
|
|
44
44
|
"@graphql-tools/utils": "^11.0.0",
|
|
45
45
|
"@playwright/test": "^1.49.0",
|
|
46
|
-
"@salesforce/vite-plugin-webapp-experimental": "^1.
|
|
46
|
+
"@salesforce/vite-plugin-webapp-experimental": "^1.90.0",
|
|
47
47
|
"@testing-library/jest-dom": "^6.6.3",
|
|
48
48
|
"@testing-library/react": "^16.1.0",
|
|
49
49
|
"@testing-library/user-event": "^14.5.2",
|
package/dist/force-app/main/default/webapplications/appreactsampleb2x/src/api/applicationApi.ts
CHANGED
|
@@ -1,8 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* Create Application__c (property application) record via Salesforce UI API.
|
|
3
|
-
* Uses
|
|
4
|
-
* Employment__c, References__c). Applicant contact details are stored in
|
|
5
|
-
* Employment__c so no data is lost if custom contact fields aren’t deployed.
|
|
3
|
+
* Uses User__c to link the application to the authenticated user.
|
|
6
4
|
*/
|
|
7
5
|
import { createRecord } from "@salesforce/webapp-experimental/api";
|
|
8
6
|
|
|
@@ -10,37 +8,13 @@ const OBJECT_API_NAME = "Application__c";
|
|
|
10
8
|
|
|
11
9
|
export interface ApplicationRecordInput {
|
|
12
10
|
Property__c: string | null;
|
|
11
|
+
User__c: string;
|
|
13
12
|
Status__c?: string;
|
|
14
|
-
First_Name__c?: string | null;
|
|
15
|
-
Last_Name__c?: string | null;
|
|
16
|
-
Email__c?: string | null;
|
|
17
|
-
Phone__c?: string | null;
|
|
18
13
|
Start_Date__c?: string | null;
|
|
19
|
-
Preferred_Term__c?: string | null;
|
|
20
14
|
Employment__c?: string | null;
|
|
21
15
|
References__c?: string | null;
|
|
22
16
|
}
|
|
23
17
|
|
|
24
|
-
function buildEmploymentBlob(input: ApplicationRecordInput): string {
|
|
25
|
-
const lines: string[] = [];
|
|
26
|
-
const contact = [
|
|
27
|
-
input.First_Name__c,
|
|
28
|
-
input.Last_Name__c,
|
|
29
|
-
input.Email__c,
|
|
30
|
-
input.Phone__c,
|
|
31
|
-
input.Preferred_Term__c,
|
|
32
|
-
]
|
|
33
|
-
.filter(Boolean)
|
|
34
|
-
.join(", ");
|
|
35
|
-
if (contact) lines.push(`Contact: ${contact}`);
|
|
36
|
-
if (input.Employment__c?.trim()) lines.push(input.Employment__c.trim());
|
|
37
|
-
return lines.join("\n\n") || "";
|
|
38
|
-
}
|
|
39
|
-
|
|
40
|
-
/**
|
|
41
|
-
* Creates an Application__c record. Uses only core fields to avoid POST_BODY_PARSE_ERROR
|
|
42
|
-
* when custom contact fields are not yet in the org. Contact + employment text go into Employment__c.
|
|
43
|
-
*/
|
|
44
18
|
export async function createApplicationRecord(
|
|
45
19
|
input: ApplicationRecordInput,
|
|
46
20
|
): Promise<{ id: string }> {
|
|
@@ -49,15 +23,17 @@ export async function createApplicationRecord(
|
|
|
49
23
|
if (input.Property__c != null && input.Property__c !== "") {
|
|
50
24
|
fields.Property__c = input.Property__c;
|
|
51
25
|
}
|
|
26
|
+
if (input.User__c) {
|
|
27
|
+
fields.User__c = input.User__c;
|
|
28
|
+
}
|
|
52
29
|
if (input.Status__c != null && input.Status__c !== "") {
|
|
53
30
|
fields.Status__c = input.Status__c;
|
|
54
31
|
}
|
|
55
32
|
if (input.Start_Date__c != null && input.Start_Date__c !== "") {
|
|
56
33
|
fields.Start_Date__c = input.Start_Date__c;
|
|
57
34
|
}
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
fields.Employment__c = employmentBlob;
|
|
35
|
+
if (input.Employment__c != null && input.Employment__c !== "") {
|
|
36
|
+
fields.Employment__c = input.Employment__c;
|
|
61
37
|
}
|
|
62
38
|
if (input.References__c != null && input.References__c !== "") {
|
|
63
39
|
fields.References__c = input.References__c;
|
|
@@ -16,6 +16,10 @@ const USER_PROFILE_FIELDS_FULL = `
|
|
|
16
16
|
PostalCode { value }
|
|
17
17
|
Country { value }`;
|
|
18
18
|
|
|
19
|
+
const USER_CONTACT_FIELDS = `
|
|
20
|
+
Id
|
|
21
|
+
ContactId { value }`;
|
|
22
|
+
|
|
19
23
|
function getUserProfileQuery(fields: string): string {
|
|
20
24
|
return `
|
|
21
25
|
query GetUserProfile($userId: ID) {
|
|
@@ -58,11 +62,21 @@ export async function fetchUserProfile<T>(
|
|
|
58
62
|
fields: string = USER_PROFILE_FIELDS_FULL,
|
|
59
63
|
): Promise<T> {
|
|
60
64
|
const data = await getDataSDK();
|
|
61
|
-
const response: any = await data.graphql?.(getUserProfileQuery(fields), {
|
|
65
|
+
const response: any = await data.graphql?.(getUserProfileQuery(fields), {
|
|
66
|
+
userId,
|
|
67
|
+
});
|
|
62
68
|
throwOnGraphQLErrors(response);
|
|
63
69
|
return flattenGraphQLRecord<T>(response?.data?.uiapi?.query?.User?.edges?.[0]?.node);
|
|
64
70
|
}
|
|
65
71
|
|
|
72
|
+
/**
|
|
73
|
+
* Fetches the user's associated contact record ID via GraphQL and returns a flattened record.
|
|
74
|
+
* @param userId - The Salesforce User Id.
|
|
75
|
+
*/
|
|
76
|
+
export async function fetchUserContact<T>(userId: string): Promise<T> {
|
|
77
|
+
return fetchUserProfile<T>(userId, USER_CONTACT_FIELDS);
|
|
78
|
+
}
|
|
79
|
+
|
|
66
80
|
/**
|
|
67
81
|
* Updates the user profile via GraphQL and returns the flattened updated record.
|
|
68
82
|
* @param userId - The Salesforce User Id.
|
package/dist/force-app/main/default/webapplications/appreactsampleb2x/src/pages/Application.tsx
CHANGED
|
@@ -1,19 +1,20 @@
|
|
|
1
1
|
import { useSearchParams, Link } from "react-router";
|
|
2
|
-
import { useCallback, useEffect, useState, type ChangeEvent } from "react";
|
|
3
|
-
import { Button } from "
|
|
4
|
-
import { Input } from "
|
|
5
|
-
import { Label } from "
|
|
6
|
-
import { Card, CardContent } from "
|
|
2
|
+
import { useCallback, useEffect, useState, type ChangeEvent, type SubmitEvent } from "react";
|
|
3
|
+
import { Button } from "../components/ui/button";
|
|
4
|
+
import { Input } from "../components/ui/input";
|
|
5
|
+
import { Label } from "../components/ui/label";
|
|
6
|
+
import { Card, CardContent } from "../components/ui/card";
|
|
7
7
|
import {
|
|
8
8
|
fetchListingById,
|
|
9
9
|
fetchPropertyById,
|
|
10
10
|
fetchPrimaryImagesByPropertyIds,
|
|
11
11
|
} from "@/api/propertyDetailGraphQL";
|
|
12
12
|
import { createApplicationRecord } from "@/api/applicationApi";
|
|
13
|
-
|
|
14
|
-
|
|
13
|
+
import { useAuth } from "../features/authentication/context/AuthContext";
|
|
14
|
+
import { fetchUserContact } from "../features/authentication/api/userProfileApi";
|
|
15
15
|
|
|
16
16
|
export default function Application() {
|
|
17
|
+
const { user } = useAuth();
|
|
17
18
|
const [searchParams] = useSearchParams();
|
|
18
19
|
const listingId = searchParams.get("listingId") ?? "";
|
|
19
20
|
|
|
@@ -21,24 +22,33 @@ export default function Application() {
|
|
|
21
22
|
const [propertyAddress, setPropertyAddress] = useState<string | null>(null);
|
|
22
23
|
const [propertyId, setPropertyId] = useState<string | null>(null);
|
|
23
24
|
const [propertyImageUrl, setPropertyImageUrl] = useState<string | null>(null);
|
|
25
|
+
const [contactId, setContactId] = useState<string | null>(null);
|
|
24
26
|
const [loading, setLoading] = useState(!!listingId);
|
|
25
27
|
const [loadError, setLoadError] = useState<string | null>(null);
|
|
26
28
|
|
|
27
|
-
// Form state – all map to Application__c fields
|
|
28
|
-
const [firstName, setFirstName] = useState("");
|
|
29
|
-
const [lastName, setLastName] = useState("");
|
|
30
|
-
const [email, setEmail] = useState("");
|
|
31
|
-
const [phone, setPhone] = useState("");
|
|
32
29
|
const [moveInDate, setMoveInDate] = useState("");
|
|
33
|
-
const [
|
|
34
|
-
const [employmentInfo, setEmploymentInfo] = useState("");
|
|
30
|
+
const [employment, setEmployment] = useState("");
|
|
35
31
|
const [references, setReferences] = useState("");
|
|
36
32
|
|
|
37
33
|
const [submitting, setSubmitting] = useState(false);
|
|
38
34
|
const [submitError, setSubmitError] = useState<string | null>(null);
|
|
39
35
|
const [submittedId, setSubmittedId] = useState<string | null>(null);
|
|
40
36
|
|
|
41
|
-
|
|
37
|
+
useEffect(() => {
|
|
38
|
+
if (!user?.id) return;
|
|
39
|
+
let mounted = true;
|
|
40
|
+
fetchUserContact<{ ContactId?: string }>(user.id)
|
|
41
|
+
.then((contact) => {
|
|
42
|
+
if (mounted) setContactId(contact.ContactId ?? null);
|
|
43
|
+
})
|
|
44
|
+
.catch((err) => {
|
|
45
|
+
if (mounted) console.error("Failed to fetch contact ID", err);
|
|
46
|
+
});
|
|
47
|
+
return () => {
|
|
48
|
+
mounted = false;
|
|
49
|
+
};
|
|
50
|
+
}, [user]);
|
|
51
|
+
|
|
42
52
|
useEffect(() => {
|
|
43
53
|
if (!listingId?.trim()) {
|
|
44
54
|
setLoading(false);
|
|
@@ -80,7 +90,7 @@ export default function Application() {
|
|
|
80
90
|
}, [listingId]);
|
|
81
91
|
|
|
82
92
|
const handleSubmit = useCallback(
|
|
83
|
-
async (e:
|
|
93
|
+
async (e: SubmitEvent<HTMLFormElement>) => {
|
|
84
94
|
e.preventDefault();
|
|
85
95
|
setSubmitError(null);
|
|
86
96
|
setSubmitting(true);
|
|
@@ -88,13 +98,9 @@ export default function Application() {
|
|
|
88
98
|
const id = await createApplicationRecord({
|
|
89
99
|
Property__c: propertyId || null,
|
|
90
100
|
Status__c: "Submitted",
|
|
91
|
-
|
|
92
|
-
Last_Name__c: lastName.trim() || null,
|
|
93
|
-
Email__c: email.trim() || null,
|
|
94
|
-
Phone__c: phone.trim() || null,
|
|
101
|
+
User__c: contactId || user?.id || "",
|
|
95
102
|
Start_Date__c: moveInDate.trim() || null,
|
|
96
|
-
|
|
97
|
-
Employment__c: employmentInfo.trim() || null,
|
|
103
|
+
Employment__c: employment.trim() || null,
|
|
98
104
|
References__c: references.trim() || null,
|
|
99
105
|
});
|
|
100
106
|
setSubmittedId(id.id);
|
|
@@ -104,17 +110,7 @@ export default function Application() {
|
|
|
104
110
|
setSubmitting(false);
|
|
105
111
|
}
|
|
106
112
|
},
|
|
107
|
-
[
|
|
108
|
-
propertyId,
|
|
109
|
-
firstName,
|
|
110
|
-
lastName,
|
|
111
|
-
email,
|
|
112
|
-
phone,
|
|
113
|
-
moveInDate,
|
|
114
|
-
preferredTerm,
|
|
115
|
-
employmentInfo,
|
|
116
|
-
references,
|
|
117
|
-
],
|
|
113
|
+
[propertyId, contactId, moveInDate, employment, references],
|
|
118
114
|
);
|
|
119
115
|
|
|
120
116
|
if (loading) {
|
|
@@ -186,46 +182,6 @@ export default function Application() {
|
|
|
186
182
|
<Card className="mb-6 rounded-2xl border border-border shadow-sm">
|
|
187
183
|
<CardContent className="pt-3">
|
|
188
184
|
<form onSubmit={handleSubmit}>
|
|
189
|
-
<h3 className="mb-4 text-base font-semibold text-foreground">Your info</h3>
|
|
190
|
-
<div className="mb-4 grid grid-cols-1 gap-4 md:grid-cols-2">
|
|
191
|
-
<div className="space-y-2">
|
|
192
|
-
<Label htmlFor="app-first-name">First Name *</Label>
|
|
193
|
-
<Input
|
|
194
|
-
id="app-first-name"
|
|
195
|
-
type="text"
|
|
196
|
-
value={firstName}
|
|
197
|
-
onChange={(e: ChangeEvent<HTMLInputElement>) => setFirstName(e.target.value)}
|
|
198
|
-
/>
|
|
199
|
-
</div>
|
|
200
|
-
<div className="space-y-2">
|
|
201
|
-
<Label htmlFor="app-last-name">Last Name</Label>
|
|
202
|
-
<Input
|
|
203
|
-
id="app-last-name"
|
|
204
|
-
type="text"
|
|
205
|
-
value={lastName}
|
|
206
|
-
onChange={(e: ChangeEvent<HTMLInputElement>) => setLastName(e.target.value)}
|
|
207
|
-
/>
|
|
208
|
-
</div>
|
|
209
|
-
</div>
|
|
210
|
-
<div className="mb-4 space-y-2">
|
|
211
|
-
<Label htmlFor="app-email">Email Address</Label>
|
|
212
|
-
<Input
|
|
213
|
-
id="app-email"
|
|
214
|
-
type="email"
|
|
215
|
-
value={email}
|
|
216
|
-
onChange={(e: ChangeEvent<HTMLInputElement>) => setEmail(e.target.value)}
|
|
217
|
-
/>
|
|
218
|
-
</div>
|
|
219
|
-
<div className="mb-4 space-y-2">
|
|
220
|
-
<Label htmlFor="app-phone">Phone Number</Label>
|
|
221
|
-
<Input
|
|
222
|
-
id="app-phone"
|
|
223
|
-
type="tel"
|
|
224
|
-
value={phone}
|
|
225
|
-
onChange={(e: ChangeEvent<HTMLInputElement>) => setPhone(e.target.value)}
|
|
226
|
-
/>
|
|
227
|
-
</div>
|
|
228
|
-
<h3 className="mb-4 mt-6 text-base font-semibold text-foreground">Move in</h3>
|
|
229
185
|
<div className="mb-4 grid grid-cols-1 gap-4 md:grid-cols-2">
|
|
230
186
|
<div className="space-y-2">
|
|
231
187
|
<Label htmlFor="app-move-in">Move in date</Label>
|
|
@@ -236,21 +192,6 @@ export default function Application() {
|
|
|
236
192
|
onChange={(e: ChangeEvent<HTMLInputElement>) => setMoveInDate(e.target.value)}
|
|
237
193
|
/>
|
|
238
194
|
</div>
|
|
239
|
-
<div className="space-y-2">
|
|
240
|
-
<Label htmlFor="app-term">Preferred term</Label>
|
|
241
|
-
<select
|
|
242
|
-
id="app-term"
|
|
243
|
-
className="flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-xs outline-none focus-visible:ring-2 focus-visible:ring-ring"
|
|
244
|
-
value={preferredTerm}
|
|
245
|
-
onChange={(e: ChangeEvent<HTMLSelectElement>) => setPreferredTerm(e.target.value)}
|
|
246
|
-
>
|
|
247
|
-
{PREFERRED_TERM_OPTIONS.map((opt) => (
|
|
248
|
-
<option key={opt || "empty"} value={opt}>
|
|
249
|
-
{opt || "Select one"}
|
|
250
|
-
</option>
|
|
251
|
-
))}
|
|
252
|
-
</select>
|
|
253
|
-
</div>
|
|
254
195
|
</div>
|
|
255
196
|
<div className="mb-4 space-y-2">
|
|
256
197
|
<Label htmlFor="app-employment">Employment info</Label>
|
|
@@ -258,8 +199,8 @@ export default function Application() {
|
|
|
258
199
|
id="app-employment"
|
|
259
200
|
rows={3}
|
|
260
201
|
className="min-h-[80px] w-full resize-y rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-xs outline-none focus-visible:ring-2 focus-visible:ring-ring"
|
|
261
|
-
value={
|
|
262
|
-
onChange={(e) =>
|
|
202
|
+
value={employment}
|
|
203
|
+
onChange={(e) => setEmployment(e.target.value)}
|
|
263
204
|
/>
|
|
264
205
|
</div>
|
|
265
206
|
<div className="mb-4 space-y-2">
|
package/dist/package.json
CHANGED
package/package.json
CHANGED