@hiofu/apply-sdk 0.1.0 → 0.1.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 +39 -36
- package/dist/{chunk-6YSWH4IM.js → chunk-S5RLAIWP.js} +275 -19
- package/dist/{client-BD0-Mbnq.d.cts → client-BTGUPzt9.d.cts} +4 -4
- package/dist/{client-BD0-Mbnq.d.ts → client-BTGUPzt9.d.ts} +4 -4
- package/dist/index.cjs +282 -34
- package/dist/index.d.cts +11 -5
- package/dist/index.d.ts +11 -5
- package/dist/index.global.js +1 -1
- package/dist/index.js +45 -33
- package/dist/react.cjs +424 -18
- package/dist/react.d.cts +307 -3
- package/dist/react.d.ts +307 -3
- package/dist/react.js +170 -2
- package/package.json +1 -1
package/dist/react.js
CHANGED
|
@@ -1,6 +1,11 @@
|
|
|
1
1
|
import {
|
|
2
|
-
|
|
3
|
-
|
|
2
|
+
HIOFU_BRAND_COLOR,
|
|
3
|
+
HIOFU_BRAND_SOFT,
|
|
4
|
+
HIOFU_BUTTON_LABEL,
|
|
5
|
+
HIOFU_FONT_FAMILY,
|
|
6
|
+
HiofuClient,
|
|
7
|
+
hiofuLogoSvg
|
|
8
|
+
} from "./chunk-S5RLAIWP.js";
|
|
4
9
|
|
|
5
10
|
// src/react.ts
|
|
6
11
|
import {
|
|
@@ -90,7 +95,170 @@ function useHiofuApply() {
|
|
|
90
95
|
}, [client]);
|
|
91
96
|
return { status, result, error, apply, reset };
|
|
92
97
|
}
|
|
98
|
+
var HIOFU_APPLY_BUTTON_BASE_STYLE = {
|
|
99
|
+
alignItems: "center",
|
|
100
|
+
border: "0",
|
|
101
|
+
borderRadius: 999,
|
|
102
|
+
cursor: "pointer",
|
|
103
|
+
display: "inline-flex",
|
|
104
|
+
fontFamily: HIOFU_FONT_FAMILY,
|
|
105
|
+
fontSize: 14,
|
|
106
|
+
fontWeight: 700,
|
|
107
|
+
gap: 10,
|
|
108
|
+
justifyContent: "center",
|
|
109
|
+
lineHeight: 1,
|
|
110
|
+
minHeight: 52,
|
|
111
|
+
padding: "14px 18px",
|
|
112
|
+
transition: "background 0.18s ease, box-shadow 0.18s ease, opacity 0.18s ease, transform 0.18s ease",
|
|
113
|
+
width: "100%"
|
|
114
|
+
};
|
|
115
|
+
var HIOFU_APPLY_BUTTON_VARIANTS = {
|
|
116
|
+
primary: {
|
|
117
|
+
background: "linear-gradient(135deg, #667eea 0%, #5967d8 100%)",
|
|
118
|
+
boxShadow: "0 16px 28px rgba(102, 126, 234, 0.25)",
|
|
119
|
+
color: "#fff"
|
|
120
|
+
},
|
|
121
|
+
secondary: {
|
|
122
|
+
background: "transparent",
|
|
123
|
+
border: `1.5px solid ${HIOFU_BRAND_COLOR}`,
|
|
124
|
+
color: HIOFU_BRAND_COLOR
|
|
125
|
+
},
|
|
126
|
+
ghost: {
|
|
127
|
+
background: "#eef2ff",
|
|
128
|
+
color: "#312e81"
|
|
129
|
+
}
|
|
130
|
+
};
|
|
131
|
+
var HIOFU_APPLY_BUTTON_HOVER_BACKGROUND = {
|
|
132
|
+
primary: "#5468d4",
|
|
133
|
+
secondary: HIOFU_BRAND_SOFT,
|
|
134
|
+
ghost: "#e0e7ff"
|
|
135
|
+
};
|
|
136
|
+
var HIOFU_APPLY_BUTTON_LOGO_COLOR = {
|
|
137
|
+
primary: "#fff",
|
|
138
|
+
secondary: HIOFU_BRAND_COLOR,
|
|
139
|
+
ghost: "#312e81"
|
|
140
|
+
};
|
|
141
|
+
function HiofuApplyButton({
|
|
142
|
+
options,
|
|
143
|
+
variant = "primary",
|
|
144
|
+
label = HIOFU_BUTTON_LABEL,
|
|
145
|
+
authorisingLabel = "Opening HSP1 review...",
|
|
146
|
+
submittingLabel = "Submitting application...",
|
|
147
|
+
successLabel = "Application submitted",
|
|
148
|
+
showLogo = true,
|
|
149
|
+
children,
|
|
150
|
+
disabled,
|
|
151
|
+
style,
|
|
152
|
+
type = "button",
|
|
153
|
+
onClick,
|
|
154
|
+
onMouseEnter,
|
|
155
|
+
onMouseLeave,
|
|
156
|
+
onSuccess,
|
|
157
|
+
onError,
|
|
158
|
+
...buttonProps
|
|
159
|
+
}) {
|
|
160
|
+
const client = useHiofu();
|
|
161
|
+
const [status, setStatus] = useState("idle");
|
|
162
|
+
const [hovered, setHovered] = useState(false);
|
|
163
|
+
const busy = status === "authorising" || status === "submitting";
|
|
164
|
+
const isDisabled = Boolean(disabled || busy);
|
|
165
|
+
const logoColor = HIOFU_APPLY_BUTTON_LOGO_COLOR[variant];
|
|
166
|
+
const handleClick = useCallback(
|
|
167
|
+
async (event) => {
|
|
168
|
+
onClick?.(event);
|
|
169
|
+
if (event.defaultPrevented) return;
|
|
170
|
+
setStatus("authorising");
|
|
171
|
+
const unsubscribe = client.subscribe((sdkEvent) => {
|
|
172
|
+
switch (sdkEvent.type) {
|
|
173
|
+
case "apply_submitting":
|
|
174
|
+
setStatus("submitting");
|
|
175
|
+
break;
|
|
176
|
+
case "apply_success":
|
|
177
|
+
setStatus("success");
|
|
178
|
+
break;
|
|
179
|
+
case "apply_error":
|
|
180
|
+
setStatus("error");
|
|
181
|
+
break;
|
|
182
|
+
default:
|
|
183
|
+
break;
|
|
184
|
+
}
|
|
185
|
+
});
|
|
186
|
+
try {
|
|
187
|
+
const result = await client.apply(options);
|
|
188
|
+
setStatus("success");
|
|
189
|
+
onSuccess?.(result);
|
|
190
|
+
} catch (err) {
|
|
191
|
+
const error = err instanceof Error ? err : new Error(String(err));
|
|
192
|
+
setStatus("error");
|
|
193
|
+
onError?.(error);
|
|
194
|
+
} finally {
|
|
195
|
+
unsubscribe();
|
|
196
|
+
}
|
|
197
|
+
},
|
|
198
|
+
[client, onClick, onError, onSuccess, options]
|
|
199
|
+
);
|
|
200
|
+
const handleMouseEnter = useCallback(
|
|
201
|
+
(event) => {
|
|
202
|
+
onMouseEnter?.(event);
|
|
203
|
+
setHovered(true);
|
|
204
|
+
},
|
|
205
|
+
[onMouseEnter]
|
|
206
|
+
);
|
|
207
|
+
const handleMouseLeave = useCallback(
|
|
208
|
+
(event) => {
|
|
209
|
+
onMouseLeave?.(event);
|
|
210
|
+
setHovered(false);
|
|
211
|
+
},
|
|
212
|
+
[onMouseLeave]
|
|
213
|
+
);
|
|
214
|
+
const content = children ?? (status === "success" ? successLabel : status === "submitting" ? submittingLabel : status === "authorising" ? authorisingLabel : label);
|
|
215
|
+
const buttonStyle = {
|
|
216
|
+
...HIOFU_APPLY_BUTTON_BASE_STYLE,
|
|
217
|
+
...HIOFU_APPLY_BUTTON_VARIANTS[variant],
|
|
218
|
+
...hovered && !isDisabled ? {
|
|
219
|
+
background: HIOFU_APPLY_BUTTON_HOVER_BACKGROUND[variant],
|
|
220
|
+
transform: "translateY(-1px)"
|
|
221
|
+
} : null,
|
|
222
|
+
...isDisabled ? {
|
|
223
|
+
cursor: "wait",
|
|
224
|
+
opacity: 0.68,
|
|
225
|
+
transform: "translateY(0)"
|
|
226
|
+
} : null,
|
|
227
|
+
...style
|
|
228
|
+
};
|
|
229
|
+
return createElement(
|
|
230
|
+
"button",
|
|
231
|
+
{
|
|
232
|
+
...buttonProps,
|
|
233
|
+
"aria-busy": busy || void 0,
|
|
234
|
+
disabled: isDisabled,
|
|
235
|
+
onClick: handleClick,
|
|
236
|
+
onMouseEnter: handleMouseEnter,
|
|
237
|
+
onMouseLeave: handleMouseLeave,
|
|
238
|
+
style: buttonStyle,
|
|
239
|
+
type
|
|
240
|
+
},
|
|
241
|
+
showLogo ? createElement("span", {
|
|
242
|
+
"aria-hidden": true,
|
|
243
|
+
dangerouslySetInnerHTML: {
|
|
244
|
+
__html: hiofuLogoSvg({ size: 24, color: logoColor })
|
|
245
|
+
},
|
|
246
|
+
style: {
|
|
247
|
+
alignItems: "center",
|
|
248
|
+
display: "inline-flex",
|
|
249
|
+
flexShrink: 0,
|
|
250
|
+
height: 24,
|
|
251
|
+
justifyContent: "center",
|
|
252
|
+
width: 24
|
|
253
|
+
}
|
|
254
|
+
}) : null,
|
|
255
|
+
createElement("span", null, content)
|
|
256
|
+
);
|
|
257
|
+
}
|
|
93
258
|
export {
|
|
259
|
+
HIOFU_APPLY_BUTTON_BASE_STYLE,
|
|
260
|
+
HIOFU_APPLY_BUTTON_VARIANTS,
|
|
261
|
+
HiofuApplyButton,
|
|
94
262
|
HiofuProvider,
|
|
95
263
|
useHiofu,
|
|
96
264
|
useHiofuApply
|
package/package.json
CHANGED