@reevit/react 0.4.6 → 0.4.7
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/index.d.mts +2 -0
- package/dist/index.d.ts +2 -0
- package/dist/index.js +43 -2
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +43 -2
- package/dist/index.mjs.map +1 -1
- package/dist/styles.css +6 -0
- package/package.json +1 -1
package/dist/index.d.mts
CHANGED
|
@@ -117,6 +117,8 @@ interface ReevitTheme {
|
|
|
117
117
|
darkMode?: boolean;
|
|
118
118
|
/** Custom logo URL to display in checkout header */
|
|
119
119
|
logoUrl?: string;
|
|
120
|
+
/** Company or organization name to display in checkout header */
|
|
121
|
+
companyName?: string;
|
|
120
122
|
/** PSP selector background color */
|
|
121
123
|
pspSelectorBgColor?: string;
|
|
122
124
|
/** PSP selector text color */
|
package/dist/index.d.ts
CHANGED
|
@@ -117,6 +117,8 @@ interface ReevitTheme {
|
|
|
117
117
|
darkMode?: boolean;
|
|
118
118
|
/** Custom logo URL to display in checkout header */
|
|
119
119
|
logoUrl?: string;
|
|
120
|
+
/** Company or organization name to display in checkout header */
|
|
121
|
+
companyName?: string;
|
|
120
122
|
/** PSP selector background color */
|
|
121
123
|
pspSelectorBgColor?: string;
|
|
122
124
|
/** PSP selector text color */
|
package/dist/index.js
CHANGED
|
@@ -366,6 +366,36 @@ function mapAvailableProviders(providers) {
|
|
|
366
366
|
};
|
|
367
367
|
}).filter((provider) => provider.methods.length > 0);
|
|
368
368
|
}
|
|
369
|
+
function normalizeBranding(branding) {
|
|
370
|
+
if (!branding) {
|
|
371
|
+
return {};
|
|
372
|
+
}
|
|
373
|
+
const raw = branding;
|
|
374
|
+
const theme = { ...raw };
|
|
375
|
+
const getString = (value) => typeof value === "string" ? value : void 0;
|
|
376
|
+
const getBoolean = (value) => typeof value === "boolean" ? value : void 0;
|
|
377
|
+
const setIf = (key, value) => {
|
|
378
|
+
if (value !== void 0) {
|
|
379
|
+
theme[key] = value;
|
|
380
|
+
}
|
|
381
|
+
};
|
|
382
|
+
setIf("logoUrl", getString(raw.logoUrl ?? raw.logo_url));
|
|
383
|
+
setIf("companyName", getString(raw.companyName ?? raw.company_name));
|
|
384
|
+
setIf("primaryColor", getString(raw.primaryColor ?? raw.primary_color));
|
|
385
|
+
setIf("primaryForegroundColor", getString(raw.primaryForegroundColor ?? raw.primary_foreground_color));
|
|
386
|
+
setIf("backgroundColor", getString(raw.backgroundColor ?? raw.background_color));
|
|
387
|
+
setIf("surfaceColor", getString(raw.surfaceColor ?? raw.surface_color));
|
|
388
|
+
setIf("textColor", getString(raw.textColor ?? raw.text_color));
|
|
389
|
+
setIf("mutedTextColor", getString(raw.mutedTextColor ?? raw.muted_text_color));
|
|
390
|
+
setIf("borderRadius", getString(raw.borderRadius ?? raw.border_radius));
|
|
391
|
+
setIf("fontFamily", getString(raw.fontFamily ?? raw.font_family));
|
|
392
|
+
setIf("darkMode", getBoolean(raw.darkMode ?? raw.dark_mode));
|
|
393
|
+
setIf("pspSelectorBgColor", getString(raw.pspSelectorBgColor ?? raw.psp_selector_bg_color));
|
|
394
|
+
setIf("pspSelectorTextColor", getString(raw.pspSelectorTextColor ?? raw.psp_selector_text_color));
|
|
395
|
+
setIf("pspSelectorBorderColor", getString(raw.pspSelectorBorderColor ?? raw.psp_selector_border_color));
|
|
396
|
+
setIf("pspSelectorUseBorder", getBoolean(raw.pspSelectorUseBorder ?? raw.psp_selector_use_border));
|
|
397
|
+
return theme;
|
|
398
|
+
}
|
|
369
399
|
function mapToPaymentIntent(response, config) {
|
|
370
400
|
return {
|
|
371
401
|
id: response.id,
|
|
@@ -385,7 +415,7 @@ function mapToPaymentIntent(response, config) {
|
|
|
385
415
|
netAmount: response.net_amount,
|
|
386
416
|
metadata: config.metadata,
|
|
387
417
|
availableProviders: mapAvailableProviders(response.available_psps),
|
|
388
|
-
branding: response.branding
|
|
418
|
+
branding: normalizeBranding(response.branding)
|
|
389
419
|
};
|
|
390
420
|
}
|
|
391
421
|
function useReevit(options) {
|
|
@@ -2184,6 +2214,7 @@ function ReevitCheckout({
|
|
|
2184
2214
|
};
|
|
2185
2215
|
}, [paymentIntent?.branding, theme]);
|
|
2186
2216
|
const themeStyles = resolvedTheme ? createThemeVariables(resolvedTheme) : {};
|
|
2217
|
+
const brandName = resolvedTheme?.companyName;
|
|
2187
2218
|
const themeMode = resolvedTheme?.darkMode;
|
|
2188
2219
|
const dataTheme = react.useMemo(() => {
|
|
2189
2220
|
if (typeof themeMode === "boolean") {
|
|
@@ -2426,7 +2457,17 @@ function ReevitCheckout({
|
|
|
2426
2457
|
"aria-modal": "true",
|
|
2427
2458
|
children: [
|
|
2428
2459
|
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "reevit-modal__header", children: [
|
|
2429
|
-
/* @__PURE__ */ jsxRuntime.
|
|
2460
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "reevit-modal__branding", children: [
|
|
2461
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
2462
|
+
"img",
|
|
2463
|
+
{
|
|
2464
|
+
src: resolvedTheme?.logoUrl || "https://i.imgur.com/bzUR5Lm.png",
|
|
2465
|
+
alt: brandName || "Reevit",
|
|
2466
|
+
className: "reevit-modal__logo"
|
|
2467
|
+
}
|
|
2468
|
+
),
|
|
2469
|
+
brandName && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "reevit-modal__brand-name", children: brandName })
|
|
2470
|
+
] }),
|
|
2430
2471
|
/* @__PURE__ */ jsxRuntime.jsx("button", { className: "reevit-modal__close", onClick: handleClose, "aria-label": "Close", children: "\u2715" })
|
|
2431
2472
|
] }),
|
|
2432
2473
|
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "reevit-modal__amount", children: [
|