@betterstore/react 0.6.10 → 0.6.11
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.
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/compounds/form/address-input/index.tsx"],"names":[],"mappings":"AAgBA,UAAU,iBAAiB;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,wBAAwB,CAAC,EAAE,MAAM,CAAC;IAClC,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,wBAAgB,YAAY,CAAC,EAC3B,SAAc,EACd,KAAK,EACL,YAAY,EACZ,QAAQ,EACR,SAAS,EACT,wBAAwB,EACxB,MAAM,GACP,EAAE,iBAAiB,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/compounds/form/address-input/index.tsx"],"names":[],"mappings":"AAgBA,UAAU,iBAAiB;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,wBAAwB,CAAC,EAAE,MAAM,CAAC;IAClC,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,wBAAgB,YAAY,CAAC,EAC3B,SAAc,EACd,KAAK,EACL,YAAY,EACZ,QAAQ,EACR,SAAS,EACT,wBAAwB,EACxB,MAAM,GACP,EAAE,iBAAiB,2CA8TnB"}
|
package/dist/index.cjs.js
CHANGED
|
@@ -36302,6 +36302,7 @@ function AddressInput({ className = "", proxy, clientSecret, latitude, longitude
|
|
|
36302
36302
|
const [suggestions, setSuggestions] = React.useState([]);
|
|
36303
36303
|
const [isLoading, setIsLoading] = React.useState(false);
|
|
36304
36304
|
const [isLoadingLookup, setIsLoadingLookup] = React.useState(false);
|
|
36305
|
+
const latestQueryRef = React.useRef("");
|
|
36305
36306
|
const addressInput = form.watch("address.line1") || "";
|
|
36306
36307
|
const cityInput = form.watch("address.city") || "";
|
|
36307
36308
|
const countryCodeInput = form.watch("address.countryCode");
|
|
@@ -36334,6 +36335,7 @@ function AddressInput({ className = "", proxy, clientSecret, latitude, longitude
|
|
|
36334
36335
|
React.useEffect(() => {
|
|
36335
36336
|
if (!showAllInputs && addressInput.length > 2) {
|
|
36336
36337
|
setIsLoading(true);
|
|
36338
|
+
latestQueryRef.current = addressInput;
|
|
36337
36339
|
const fetchSuggestions = () => __awaiter(this, void 0, void 0, function* () {
|
|
36338
36340
|
try {
|
|
36339
36341
|
const countryCode = form.watch("address.countryCode");
|
|
@@ -36345,16 +36347,22 @@ function AddressInput({ className = "", proxy, clientSecret, latitude, longitude
|
|
|
36345
36347
|
locale,
|
|
36346
36348
|
});
|
|
36347
36349
|
console.log(results);
|
|
36348
|
-
|
|
36349
|
-
|
|
36350
|
+
if (latestQueryRef.current === addressInput) {
|
|
36351
|
+
setSuggestions(results);
|
|
36352
|
+
setShowSuggestions(true);
|
|
36353
|
+
}
|
|
36350
36354
|
}
|
|
36351
36355
|
catch (error) {
|
|
36352
|
-
|
|
36353
|
-
|
|
36354
|
-
|
|
36356
|
+
if (latestQueryRef.current === addressInput) {
|
|
36357
|
+
console.error("Error fetching address suggestions:", error);
|
|
36358
|
+
setShowSuggestions(false);
|
|
36359
|
+
setSuggestions([]);
|
|
36360
|
+
}
|
|
36355
36361
|
}
|
|
36356
36362
|
finally {
|
|
36357
|
-
|
|
36363
|
+
if (latestQueryRef.current === addressInput) {
|
|
36364
|
+
setIsLoading(false);
|
|
36365
|
+
}
|
|
36358
36366
|
}
|
|
36359
36367
|
});
|
|
36360
36368
|
fetchSuggestions();
|
|
@@ -36409,7 +36417,7 @@ function AddressInput({ className = "", proxy, clientSecret, latitude, longitude
|
|
|
36409
36417
|
: t("CheckoutEmbed.CustomerForm.address.line1-autocomplete"), required: showAllInputs, icon: jsxRuntime.jsx(Search, { className: "h-4 w-4" }), showIcon: !showAllInputs, onFocus: () => setShowSuggestions(true), onBlur: () => setTimeout(() => setShowSuggestions(false), 200) }), !showAllInputs &&
|
|
36410
36418
|
(showSuggestions || isLoading || isLoadingLookup) && (jsxRuntime.jsx("div", { className: "bg-background border-border absolute left-0 right-0 top-full z-50 mt-1 rounded-md border shadow-lg", "data-dropdown": "suggestions", children: isLoading || isLoadingLookup ? (jsxRuntime.jsxs("div", { className: "text-muted-foreground border-border flex gap-2 border-b p-3 text-sm", children: [isLoadingLookup
|
|
36411
36419
|
? t("CheckoutEmbed.CustomerForm.address.loadingLookup")
|
|
36412
|
-
: t("CheckoutEmbed.CustomerForm.address.loadingSuggestions"), " ", jsxRuntime.jsx(Loader, { className: "size-4 animate-spin" })] })) : suggestions.length > 0 ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { className: "text-muted-foreground border-border border-b p-3 text-sm", children: t("CheckoutEmbed.CustomerForm.address.keepTyping") }), jsxRuntime.jsxs("div", { className: "max-h-60 overflow-y-auto", children: [suggestions.map((address, index) => (jsxRuntime.jsx("button", { type: "button", onClick: () => __awaiter(this, void 0, void 0, function* () { return yield handleSelectAddress(address); }), className: "hover:bg-accent border-border flex w-full cursor-pointer items-center border-b px-3 py-3 text-left transition-colors last:border-b-0", children: jsxRuntime.jsx("div", { className: "text-foreground text-sm", children: address.title }) }, index))), jsxRuntime.jsx("button", { type: "button", onClick: handleManualEntry, className: "hover:bg-accent border-border flex w-full cursor-pointer items-center border-b px-3 py-3 text-left transition-colors last:border-b-0", children: jsxRuntime.jsxs("div", { className: "text-muted-foreground flex items-center gap-2 text-sm", children: [t("CheckoutEmbed.CustomerForm.address.enterManually"), " ", jsxRuntime.jsx(ArrowRight, { className: "size-4" })] }) })] })] })) : addressInput.length
|
|
36420
|
+
: t("CheckoutEmbed.CustomerForm.address.loadingSuggestions"), " ", jsxRuntime.jsx(Loader, { className: "size-4 animate-spin" })] })) : suggestions.length > 0 ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { className: "text-muted-foreground border-border border-b p-3 text-sm", children: t("CheckoutEmbed.CustomerForm.address.keepTyping") }), jsxRuntime.jsxs("div", { className: "max-h-60 overflow-y-auto", children: [suggestions.map((address, index) => (jsxRuntime.jsx("button", { type: "button", onClick: () => __awaiter(this, void 0, void 0, function* () { return yield handleSelectAddress(address); }), className: "hover:bg-accent border-border flex w-full cursor-pointer items-center border-b px-3 py-3 text-left transition-colors last:border-b-0", children: jsxRuntime.jsx("div", { className: "text-foreground text-sm", children: address.title }) }, index))), jsxRuntime.jsx("button", { type: "button", onClick: handleManualEntry, className: "hover:bg-accent border-border flex w-full cursor-pointer items-center border-b px-3 py-3 text-left transition-colors last:border-b-0", children: jsxRuntime.jsxs("div", { className: "text-muted-foreground flex items-center gap-2 text-sm", children: [t("CheckoutEmbed.CustomerForm.address.enterManually"), " ", jsxRuntime.jsx(ArrowRight, { className: "size-4" })] }) })] })] })) : addressInput.length <= 4 ? (jsxRuntime.jsx("div", { className: "text-muted-foreground border-border border-b p-3 text-sm", children: t("CheckoutEmbed.CustomerForm.address.keepTyping") })) : (jsxRuntime.jsx("div", { className: "text-muted-foreground border-border border-b p-3 text-sm", children: t("CheckoutEmbed.CustomerForm.address.noResults") })) }))] }), jsxRuntime.jsx("div", { className: cn(!showAllInputs ? "-mt-2 mb-4 block" : "hidden"), children: jsxRuntime.jsx("button", { type: "button", onClick: handleManualEntry, className: "text-foreground hover:text-muted-foreground cursor-pointer text-[13px] underline", children: t("CheckoutEmbed.CustomerForm.address.enterManually") }) }), jsxRuntime.jsxs("div", { className: cn("space-y-4", !showAllInputs && "-mt-4 h-0 max-h-0 w-0 max-w-0 opacity-0"), children: [jsxRuntime.jsx("div", { className: cn(!showApartmentField ? "block" : "hidden"), children: jsxRuntime.jsxs("button", { type: "button", onClick: () => {
|
|
36413
36421
|
setShowApartmentField(true);
|
|
36414
36422
|
form.setValue("address.line2", "");
|
|
36415
36423
|
form.setFocus("address.line2");
|
package/dist/index.mjs
CHANGED
|
@@ -36282,6 +36282,7 @@ function AddressInput({ className = "", proxy, clientSecret, latitude, longitude
|
|
|
36282
36282
|
const [suggestions, setSuggestions] = useState([]);
|
|
36283
36283
|
const [isLoading, setIsLoading] = useState(false);
|
|
36284
36284
|
const [isLoadingLookup, setIsLoadingLookup] = useState(false);
|
|
36285
|
+
const latestQueryRef = useRef("");
|
|
36285
36286
|
const addressInput = form.watch("address.line1") || "";
|
|
36286
36287
|
const cityInput = form.watch("address.city") || "";
|
|
36287
36288
|
const countryCodeInput = form.watch("address.countryCode");
|
|
@@ -36314,6 +36315,7 @@ function AddressInput({ className = "", proxy, clientSecret, latitude, longitude
|
|
|
36314
36315
|
useEffect(() => {
|
|
36315
36316
|
if (!showAllInputs && addressInput.length > 2) {
|
|
36316
36317
|
setIsLoading(true);
|
|
36318
|
+
latestQueryRef.current = addressInput;
|
|
36317
36319
|
const fetchSuggestions = () => __awaiter(this, void 0, void 0, function* () {
|
|
36318
36320
|
try {
|
|
36319
36321
|
const countryCode = form.watch("address.countryCode");
|
|
@@ -36325,16 +36327,22 @@ function AddressInput({ className = "", proxy, clientSecret, latitude, longitude
|
|
|
36325
36327
|
locale,
|
|
36326
36328
|
});
|
|
36327
36329
|
console.log(results);
|
|
36328
|
-
|
|
36329
|
-
|
|
36330
|
+
if (latestQueryRef.current === addressInput) {
|
|
36331
|
+
setSuggestions(results);
|
|
36332
|
+
setShowSuggestions(true);
|
|
36333
|
+
}
|
|
36330
36334
|
}
|
|
36331
36335
|
catch (error) {
|
|
36332
|
-
|
|
36333
|
-
|
|
36334
|
-
|
|
36336
|
+
if (latestQueryRef.current === addressInput) {
|
|
36337
|
+
console.error("Error fetching address suggestions:", error);
|
|
36338
|
+
setShowSuggestions(false);
|
|
36339
|
+
setSuggestions([]);
|
|
36340
|
+
}
|
|
36335
36341
|
}
|
|
36336
36342
|
finally {
|
|
36337
|
-
|
|
36343
|
+
if (latestQueryRef.current === addressInput) {
|
|
36344
|
+
setIsLoading(false);
|
|
36345
|
+
}
|
|
36338
36346
|
}
|
|
36339
36347
|
});
|
|
36340
36348
|
fetchSuggestions();
|
|
@@ -36389,7 +36397,7 @@ function AddressInput({ className = "", proxy, clientSecret, latitude, longitude
|
|
|
36389
36397
|
: t("CheckoutEmbed.CustomerForm.address.line1-autocomplete"), required: showAllInputs, icon: jsx(Search, { className: "h-4 w-4" }), showIcon: !showAllInputs, onFocus: () => setShowSuggestions(true), onBlur: () => setTimeout(() => setShowSuggestions(false), 200) }), !showAllInputs &&
|
|
36390
36398
|
(showSuggestions || isLoading || isLoadingLookup) && (jsx("div", { className: "bg-background border-border absolute left-0 right-0 top-full z-50 mt-1 rounded-md border shadow-lg", "data-dropdown": "suggestions", children: isLoading || isLoadingLookup ? (jsxs("div", { className: "text-muted-foreground border-border flex gap-2 border-b p-3 text-sm", children: [isLoadingLookup
|
|
36391
36399
|
? t("CheckoutEmbed.CustomerForm.address.loadingLookup")
|
|
36392
|
-
: t("CheckoutEmbed.CustomerForm.address.loadingSuggestions"), " ", jsx(Loader, { className: "size-4 animate-spin" })] })) : suggestions.length > 0 ? (jsxs(Fragment, { children: [jsx("div", { className: "text-muted-foreground border-border border-b p-3 text-sm", children: t("CheckoutEmbed.CustomerForm.address.keepTyping") }), jsxs("div", { className: "max-h-60 overflow-y-auto", children: [suggestions.map((address, index) => (jsx("button", { type: "button", onClick: () => __awaiter(this, void 0, void 0, function* () { return yield handleSelectAddress(address); }), className: "hover:bg-accent border-border flex w-full cursor-pointer items-center border-b px-3 py-3 text-left transition-colors last:border-b-0", children: jsx("div", { className: "text-foreground text-sm", children: address.title }) }, index))), jsx("button", { type: "button", onClick: handleManualEntry, className: "hover:bg-accent border-border flex w-full cursor-pointer items-center border-b px-3 py-3 text-left transition-colors last:border-b-0", children: jsxs("div", { className: "text-muted-foreground flex items-center gap-2 text-sm", children: [t("CheckoutEmbed.CustomerForm.address.enterManually"), " ", jsx(ArrowRight, { className: "size-4" })] }) })] })] })) : addressInput.length
|
|
36400
|
+
: t("CheckoutEmbed.CustomerForm.address.loadingSuggestions"), " ", jsx(Loader, { className: "size-4 animate-spin" })] })) : suggestions.length > 0 ? (jsxs(Fragment, { children: [jsx("div", { className: "text-muted-foreground border-border border-b p-3 text-sm", children: t("CheckoutEmbed.CustomerForm.address.keepTyping") }), jsxs("div", { className: "max-h-60 overflow-y-auto", children: [suggestions.map((address, index) => (jsx("button", { type: "button", onClick: () => __awaiter(this, void 0, void 0, function* () { return yield handleSelectAddress(address); }), className: "hover:bg-accent border-border flex w-full cursor-pointer items-center border-b px-3 py-3 text-left transition-colors last:border-b-0", children: jsx("div", { className: "text-foreground text-sm", children: address.title }) }, index))), jsx("button", { type: "button", onClick: handleManualEntry, className: "hover:bg-accent border-border flex w-full cursor-pointer items-center border-b px-3 py-3 text-left transition-colors last:border-b-0", children: jsxs("div", { className: "text-muted-foreground flex items-center gap-2 text-sm", children: [t("CheckoutEmbed.CustomerForm.address.enterManually"), " ", jsx(ArrowRight, { className: "size-4" })] }) })] })] })) : addressInput.length <= 4 ? (jsx("div", { className: "text-muted-foreground border-border border-b p-3 text-sm", children: t("CheckoutEmbed.CustomerForm.address.keepTyping") })) : (jsx("div", { className: "text-muted-foreground border-border border-b p-3 text-sm", children: t("CheckoutEmbed.CustomerForm.address.noResults") })) }))] }), jsx("div", { className: cn(!showAllInputs ? "-mt-2 mb-4 block" : "hidden"), children: jsx("button", { type: "button", onClick: handleManualEntry, className: "text-foreground hover:text-muted-foreground cursor-pointer text-[13px] underline", children: t("CheckoutEmbed.CustomerForm.address.enterManually") }) }), jsxs("div", { className: cn("space-y-4", !showAllInputs && "-mt-4 h-0 max-h-0 w-0 max-w-0 opacity-0"), children: [jsx("div", { className: cn(!showApartmentField ? "block" : "hidden"), children: jsxs("button", { type: "button", onClick: () => {
|
|
36393
36401
|
setShowApartmentField(true);
|
|
36394
36402
|
form.setValue("address.line2", "");
|
|
36395
36403
|
form.setFocus("address.line2");
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@betterstore/react",
|
|
3
|
-
"version": "0.6.
|
|
3
|
+
"version": "0.6.11",
|
|
4
4
|
"private": false,
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"module": "dist/index.mjs",
|
|
@@ -77,7 +77,7 @@
|
|
|
77
77
|
"world_countries_lists": "^3.2.0",
|
|
78
78
|
"zod": "^3.25.30",
|
|
79
79
|
"zustand": "^5.0.5",
|
|
80
|
-
"@betterstore/sdk": "0.6.
|
|
80
|
+
"@betterstore/sdk": "0.6.11"
|
|
81
81
|
},
|
|
82
82
|
"publishConfig": {
|
|
83
83
|
"access": "public"
|