@woopze/react-native-sdk 0.1.0

package/dist/search/index.js

@@ -0,0 +1,652 @@
+'use strict';
+
+var React = require('react');
+var reactNative = require('react-native');
+var reactNativeSafeAreaContext = require('react-native-safe-area-context');
+var FilterModal = require('./FilterModal');
+var ProductCard = require('../components/ProductCard');
+var constants = require('../constants');
+var SearchInput = require('../components/SearchInput');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+var FilterModal__default = /*#__PURE__*/_interopDefault(FilterModal);
+var ProductCard__default = /*#__PURE__*/_interopDefault(ProductCard);
+var SearchInput__default = /*#__PURE__*/_interopDefault(SearchInput);
+
+const recentSearches = [
+  "\xC7\u0131kar\u0131labilir Bro\u015F Detayl\u0131 Cepli Giy \xC7\u0131k",
+  "etek",
+  "mont",
+  "ayakkab\u0131",
+  "k\xFCrk"
+];
+const popularSearches = ["Tunik Tak\u0131m", "Elbise", "Ferace", "Kaban", "Triko"];
+const DEFAULT_SEARCH_THEME = {
+  backgroundColor: "#FFFFFF",
+  inputBackgroundColor: "#efefef",
+  borderColor: "#1f1f1f",
+  textPrimaryColor: "#111",
+  textSecondaryColor: "#333",
+  mutedTextColor: "#6f6f6f",
+  chipBackgroundColor: "#efefef",
+  buttonTextColor: "#6a6a6a",
+  accentColor: "#000",
+  dangerColor: "#d00000",
+  iconTintColor: "#111",
+  cameraButtonBackgroundColor: "#fff"
+};
+const SEARCH_API_URL = "https://search.woopze.com/api/mod7/search";
+const DEBOUNCE_MS = 800;
+const EMPTY_FILTERS = {
+  categories: [],
+  facets: {},
+  minPrice: null,
+  maxPrice: null
+};
+const formatPrice = (value) => `${value.toLocaleString("tr-TR", { minimumFractionDigits: 2, maximumFractionDigits: 2 })} TL`;
+const parsePriceBounds = (facetDistribution) => {
+  const entries = Object.keys((facetDistribution == null ? void 0 : facetDistribution.price) || {}).map((key) => Number(key)).filter((value) => Number.isFinite(value) && value > 0).sort((a, b) => a - b);
+  if (entries.length === 0) {
+    return { min: 0, max: 0 };
+  }
+  return {
+    min: Math.floor(entries[0]),
+    max: Math.ceil(entries[entries.length - 1])
+  };
+};
+const escapeFilterValue = (value) => value.replace(/'/g, "\\'");
+const buildFilterQuery = (applied, defaultMin, defaultMax) => {
+  const clauses = [];
+  if (applied.categories.length === 1) {
+    clauses.push(`product_group = '${applied.categories[0]}'`);
+  } else if (applied.categories.length > 1) {
+    const categoryExpression = applied.categories.map((category) => `product_group = '${category}'`).join(" OR ");
+    clauses.push(`(${categoryExpression})`);
+  }
+  if (defaultMin > 0 && defaultMax > 0 && applied.minPrice !== null && applied.maxPrice !== null && (applied.minPrice !== defaultMin || applied.maxPrice !== defaultMax)) {
+    clauses.push(`price>=${Math.floor(applied.minPrice)}`);
+    clauses.push(`price<=${Math.ceil(applied.maxPrice)}`);
+  }
+  Object.entries(applied.facets).forEach(([facetKey, values]) => {
+    if (!values.length) return;
+    if (values.length === 1) {
+      clauses.push(`${facetKey} = '${escapeFilterValue(values[0])}'`);
+      return;
+    }
+    const facetExpression = values.map((value) => `${facetKey} = '${escapeFilterValue(value)}'`).join(" OR ");
+    clauses.push(`(${facetExpression})`);
+  });
+  return clauses.join(" AND ");
+};
+const mapApiProduct = (item) => {
+  const oldPriceValue = item.market_price > item.discount_price ? item.market_price : 0;
+  const discountRate = oldPriceValue > 0 ? Math.round(
+    (oldPriceValue - item.discount_price) / oldPriceValue * 100
+  ) : 0;
+  return {
+    id: String(item.id),
+    imageUrl: item.photo,
+    title: item.name,
+    oldPrice: oldPriceValue > 0 ? formatPrice(oldPriceValue) : "",
+    discount: discountRate > 0 ? `%${discountRate}` : "",
+    newPrice: formatPrice(item.discount_price || item.price),
+    url: item.url,
+    model_code: item.model_code,
+    photo_embedding: item.photo_embedding,
+    ids: item.ids
+  };
+};
+function WoopzeSearchScreen({
+  apiKey,
+  uid,
+  originDomain,
+  onProductPressed,
+  onClosePress,
+  hideHeaderCloseIcon = false,
+  hideRecentSearchCloseIcon = false,
+  theme,
+  containerStyle,
+  route
+}) {
+  var _a;
+  if (!apiKey || !uid || !originDomain) {
+    throw new Error(
+      "Woopze.Search requires `apiKey`, `uid`, and `originDomain` props."
+    );
+  }
+  const origin = `https://${originDomain}`;
+  const mergedTheme = React.useMemo(
+    () => ({ ...DEFAULT_SEARCH_THEME, ...theme || {} }),
+    [theme]
+  );
+  const [query, setQuery] = React.useState("");
+  const [debouncedQuery, setDebouncedQuery] = React.useState("");
+  const [items, setItems] = React.useState([]);
+  const [page, setPage] = React.useState(0);
+  const [isLoading, setIsLoading] = React.useState(false);
+  const [isLoadingMore, setIsLoadingMore] = React.useState(false);
+  const [hasMore, setHasMore] = React.useState(false);
+  const [totalCount, setTotalCount] = React.useState(0);
+  const [errorText, setErrorText] = React.useState("");
+  const [baseFacetDistribution, setBaseFacetDistribution] = React.useState({});
+  const [facetConfig, setFacetConfig] = React.useState({});
+  const [isFilterModalVisible, setIsFilterModalVisible] = React.useState(false);
+  const [defaultMinPrice, setDefaultMinPrice] = React.useState(0);
+  const [defaultMaxPrice, setDefaultMaxPrice] = React.useState(0);
+  const [appliedFiltersState, setAppliedFiltersState] = React.useState(EMPTY_FILTERS);
+  const [appliedFilter, setAppliedFilter] = React.useState("");
+  const [activeQuery, setActiveQuery] = React.useState("");
+  const isPaginatingRef = React.useRef(false);
+  const inFlightRequestSignaturesRef = React.useRef(/* @__PURE__ */ new Set());
+  React.useEffect(() => {
+    const timeout = setTimeout(() => {
+      setDebouncedQuery(query.trim());
+    }, DEBOUNCE_MS);
+    return () => clearTimeout(timeout);
+  }, [query]);
+  const searchProducts = React.useCallback(
+    async (nextQuery, nextPage, filterExpression) => {
+      const requestSignature = `${nextQuery}::${nextPage}::${filterExpression}`;
+      if (inFlightRequestSignaturesRef.current.has(requestSignature)) {
+        return;
+      }
+      inFlightRequestSignaturesRef.current.add(requestSignature);
+      const isFirstPage = nextPage === 0;
+      if (isFirstPage) {
+        setIsLoading(true);
+        setErrorText("");
+      } else {
+        setIsLoadingMore(true);
+      }
+      try {
+        const response = await fetch(SEARCH_API_URL, {
+          method: "POST",
+          headers: {
+            "content-type": "application/json",
+            "x-origin-domain": originDomain,
+            "x-woopze-api-key": apiKey,
+            "x-woopze-uid": uid
+          },
+          body: JSON.stringify({
+            apiKey,
+            q: nextQuery,
+            page: nextPage,
+            filter: filterExpression,
+            response_time: null
+          })
+        });
+        if (!response.ok) {
+          throw new Error(`Request failed with status ${response.status}`);
+        }
+        const json = await response.json();
+        const mapped = json.hits.map(mapApiProduct);
+        const loadedCount = (nextPage + 1) * json.limit;
+        const moreAvailable = loadedCount < json.total;
+        setItems((prev) => isFirstPage ? mapped : [...prev, ...mapped]);
+        setPage(json.page);
+        setTotalCount(json.total);
+        setHasMore(moreAvailable);
+        if (isFirstPage && !filterExpression) {
+          setBaseFacetDistribution(json.facetDistribution || {});
+          setFacetConfig(json.facetConfig || {});
+        }
+        if (isFirstPage && !filterExpression) {
+          const { min, max } = parsePriceBounds(json.facetDistribution);
+          if (min > 0 && max > 0) {
+            setDefaultMinPrice(min);
+            setDefaultMaxPrice(max);
+          }
+        }
+      } catch (e) {
+        console.log(e, "<--- woopze search error", " send body", {
+          apiKey,
+          q: nextQuery,
+          page: nextPage,
+          filter: filterExpression,
+          response_time: null
+        });
+        setErrorText("Arama s\u0131ras\u0131nda bir hata olu\u015Ftu.");
+        if (isFirstPage) {
+          setItems([]);
+        }
+        setHasMore(false);
+      } finally {
+        inFlightRequestSignaturesRef.current.delete(requestSignature);
+        setIsLoading(false);
+        setIsLoadingMore(false);
+        isPaginatingRef.current = false;
+      }
+    },
+    [apiKey, origin, originDomain, uid]
+  );
+  React.useEffect(() => {
+    var _a2;
+    console.log(route, "<-- route from woopze");
+    if ((_a2 = route == null ? void 0 : route.params) == null ? void 0 : _a2.model_code) {
+      console.log("visual search working");
+      handleVisualSearch(route.params.model_code);
+    }
+  }, [(_a = route == null ? void 0 : route.params) == null ? void 0 : _a.model_code]);
+  React.useEffect(() => {
+    if (!debouncedQuery) {
+      if (query.trim().length > 0) {
+        return;
+      }
+      setAppliedFilter("");
+      setAppliedFiltersState(EMPTY_FILTERS);
+      setActiveQuery("");
+      setItems([]);
+      setPage(0);
+      setTotalCount(0);
+      setHasMore(false);
+      setErrorText("");
+      isPaginatingRef.current = false;
+      searchProducts("", 0, "");
+      return;
+    }
+    setAppliedFilter("");
+    setAppliedFiltersState(EMPTY_FILTERS);
+    setActiveQuery(debouncedQuery);
+    setItems([]);
+    setPage(0);
+    setTotalCount(0);
+    setHasMore(false);
+    isPaginatingRef.current = false;
+    searchProducts(debouncedQuery, 0, "");
+  }, [debouncedQuery, query, searchProducts]);
+  const loadNextPage = React.useCallback(() => {
+    if (isLoading || isLoadingMore || !hasMore || isPaginatingRef.current) {
+      return;
+    }
+    isPaginatingRef.current = true;
+    searchProducts(activeQuery, page + 1, appliedFilter);
+  }, [
+    activeQuery,
+    appliedFilter,
+    hasMore,
+    isLoading,
+    isLoadingMore,
+    page,
+    searchProducts
+  ]);
+  const onScroll = React.useCallback(
+    (event) => {
+      const { layoutMeasurement, contentOffset, contentSize } = event.nativeEvent;
+      const threshold = 180;
+      const isCloseToBottom = layoutMeasurement.height + contentOffset.y >= contentSize.height - threshold;
+      if (isCloseToBottom) {
+        loadNextPage();
+      }
+    },
+    [loadNextPage]
+  );
+  const hasTypedQuery = query.trim().length > 0;
+  const isResultsMode = hasTypedQuery || debouncedQuery.length > 0;
+  const showResultsHeader = debouncedQuery.length > 0 && !errorText;
+  const showInitialSections = !showResultsHeader && query.trim().length === 0 && debouncedQuery.length === 0;
+  const applyFilters = (nextFilters) => {
+    if (!debouncedQuery) return;
+    const expression = buildFilterQuery(
+      nextFilters,
+      defaultMinPrice,
+      defaultMaxPrice
+    );
+    setAppliedFiltersState(nextFilters);
+    setAppliedFilter(expression);
+    setItems([]);
+    setPage(0);
+    setHasMore(false);
+    isPaginatingRef.current = false;
+    searchProducts(debouncedQuery, 0, expression);
+  };
+  const resetFilters = () => {
+    setAppliedFiltersState(EMPTY_FILTERS);
+    setAppliedFilter("");
+    if (debouncedQuery) {
+      setItems([]);
+      setPage(0);
+      setHasMore(false);
+      isPaginatingRef.current = false;
+      searchProducts(debouncedQuery, 0, "");
+    }
+  };
+  const clearSearch = () => {
+    setQuery("");
+    setDebouncedQuery("");
+    setItems([]);
+    setPage(0);
+    setTotalCount(0);
+    setHasMore(false);
+    setErrorText("");
+    setBaseFacetDistribution({});
+    setFacetConfig({});
+    setAppliedFiltersState(EMPTY_FILTERS);
+    setDefaultMinPrice(0);
+    setDefaultMaxPrice(0);
+  };
+  const handleVisualSearch = async (model_code) => {
+    var _a2;
+    try {
+      const result = await constants.fetchVisualSearch({ apiKey, model_code });
+      if ((_a2 = result == null ? void 0 : result.results) == null ? void 0 : _a2.length) {
+        const mapped = result.results.map(mapApiProduct);
+        setItems(mapped);
+        setPage(1);
+        setTotalCount(result.results.length);
+        setHasMore(false);
+      }
+    } catch (e) {
+      console.log(e, "<--- woopze visual search error", " send body", {
+        apiKey,
+        model_code
+      });
+      setErrorText("Arama s\u0131ras\u0131nda bir hata olu\u015Ftu.");
+      setItems([]);
+      setHasMore(false);
+    }
+  };
+  return /* @__PURE__ */ React__default.default.createElement(
+    reactNativeSafeAreaContext.SafeAreaView,
+    {
+      style: [
+        styles.outer,
+        { backgroundColor: mergedTheme.backgroundColor },
+        containerStyle
+      ]
+    },
+    /* @__PURE__ */ React__default.default.createElement(reactNative.View, { style: styles.contentWrap }, /* @__PURE__ */ React__default.default.createElement(
+      SearchInput__default.default,
+      {
+        query,
+        hideHeaderCloseIcon,
+        setQuery,
+        isResultsMode,
+        clearSearch,
+        onClosePress,
+        mergedTheme
+      }
+    ), /* @__PURE__ */ React__default.default.createElement(
+      reactNative.ScrollView,
+      {
+        contentContainerStyle: [
+          styles.content,
+          {
+            backgroundColor: mergedTheme.backgroundColor,
+            paddingBottom: 120
+          }
+        ],
+        showsVerticalScrollIndicator: false,
+        keyboardShouldPersistTaps: "handled",
+        keyboardDismissMode: "none",
+        onScroll,
+        scrollEventThrottle: 16
+      },
+      query ? /* @__PURE__ */ React__default.default.createElement(React__default.default.Fragment, null, /* @__PURE__ */ React__default.default.createElement(
+        reactNative.Text,
+        {
+          style: [
+            styles.resultsCountText,
+            { color: mergedTheme.textPrimaryColor }
+          ]
+        },
+        '"',
+        query,
+        '" ile ilgili',
+        " ",
+        /* @__PURE__ */ React__default.default.createElement(reactNative.Text, { style: styles.resultsCountBold }, totalCount),
+        " \xFCr\xFCn listelendi."
+      ), /* @__PURE__ */ React__default.default.createElement(
+        reactNative.TouchableOpacity,
+        {
+          activeOpacity: 0.7,
+          style: styles.filterRow,
+          onPress: () => setIsFilterModalVisible(true)
+        },
+        /* @__PURE__ */ React__default.default.createElement(
+          reactNative.Text,
+          {
+            style: [
+              styles.filterText,
+              { color: mergedTheme.textPrimaryColor }
+            ]
+          },
+          "Filtreyi G\xF6ster"
+        ),
+        /* @__PURE__ */ React__default.default.createElement(
+          reactNative.Image,
+          {
+            source: require("../assets/filter-icon.png"),
+            style: [
+              styles.filterIcon,
+              { tintColor: mergedTheme.iconTintColor }
+            ]
+          }
+        )
+      )) : null,
+      showInitialSections ? /* @__PURE__ */ React__default.default.createElement(React__default.default.Fragment, null, /* @__PURE__ */ React__default.default.createElement(
+        reactNative.Text,
+        {
+          style: [
+            styles.sectionTitle,
+            { color: mergedTheme.accentColor }
+          ]
+        },
+        "Son Aramalar"
+      ), /* @__PURE__ */ React__default.default.createElement(reactNative.View, { style: styles.chipWrap }, recentSearches.map((label) => /* @__PURE__ */ React__default.default.createElement(
+        reactNative.TouchableOpacity,
+        {
+          key: label,
+          activeOpacity: 0.7,
+          onPress: () => setQuery(label),
+          style: [
+            styles.chip,
+            { backgroundColor: mergedTheme.chipBackgroundColor }
+          ]
+        },
+        /* @__PURE__ */ React__default.default.createElement(
+          reactNative.Text,
+          {
+            numberOfLines: 1,
+            style: [
+              styles.chipText,
+              { color: mergedTheme.textSecondaryColor }
+            ]
+          },
+          label
+        ),
+        !hideRecentSearchCloseIcon ? /* @__PURE__ */ React__default.default.createElement(reactNative.TouchableOpacity, { style: styles.chipCloseContainer }, /* @__PURE__ */ React__default.default.createElement(
+          reactNative.Image,
+          {
+            source: require("../assets/close-icon.png"),
+            style: [
+              styles.chipClose,
+              { tintColor: mergedTheme.iconTintColor }
+            ]
+          }
+        )) : null
+      ))), /* @__PURE__ */ React__default.default.createElement(
+        reactNative.Text,
+        {
+          style: [
+            styles.sectionTitle,
+            { color: mergedTheme.accentColor }
+          ]
+        },
+        "Pop\xFCler Aramalar"
+      ), /* @__PURE__ */ React__default.default.createElement(reactNative.View, { style: styles.popularWrap }, popularSearches.map((item) => /* @__PURE__ */ React__default.default.createElement(
+        reactNative.TouchableOpacity,
+        {
+          activeOpacity: 0.7,
+          onPress: () => setQuery(item),
+          key: item
+        },
+        /* @__PURE__ */ React__default.default.createElement(
+          reactNative.Text,
+          {
+            style: [
+              styles.popularText,
+              { color: mergedTheme.textSecondaryColor }
+            ]
+          },
+          item
+        )
+      )))) : null,
+      items.length > 0 ? /* @__PURE__ */ React__default.default.createElement(reactNative.View, { style: styles.grid }, items.map((item) => /* @__PURE__ */ React__default.default.createElement(
+        ProductCard__default.default,
+        {
+          key: item.id,
+          item,
+          onProductPress: (product) => onProductPressed == null ? void 0 : onProductPressed(product),
+          onVisualSearchPress: () => handleVisualSearch(item.model_code),
+          theme: mergedTheme
+        }
+      ))) : null,
+      !isLoading && !errorText && debouncedQuery.length > 0 && items.length === 0 ? /* @__PURE__ */ React__default.default.createElement(
+        reactNative.Text,
+        {
+          style: [styles.emptyText, { color: mergedTheme.mutedTextColor }]
+        },
+        "Sonu\xE7 bulunamad\u0131."
+      ) : null,
+      isLoadingMore ? /* @__PURE__ */ React__default.default.createElement(reactNative.View, { style: styles.statusWrap }, /* @__PURE__ */ React__default.default.createElement(reactNative.ActivityIndicator, { size: "small", color: mergedTheme.accentColor })) : null,
+      errorText ? /* @__PURE__ */ React__default.default.createElement(
+        reactNative.Text,
+        {
+          style: [styles.errorText, { color: mergedTheme.dangerColor }]
+        },
+        errorText
+      ) : null
+    )),
+    /* @__PURE__ */ React__default.default.createElement(
+      FilterModal__default.default,
+      {
+        visible: isFilterModalVisible,
+        onClose: () => setIsFilterModalVisible(false),
+        facetDistribution: baseFacetDistribution,
+        facetConfig,
+        defaultMinPrice,
+        defaultMaxPrice,
+        appliedFilters: appliedFiltersState,
+        onApply: applyFilters,
+        onReset: resetFilters
+      }
+    )
+  );
+}
+const styles = reactNative.StyleSheet.create({
+  outer: {
+    flex: 1,
+    backgroundColor: "#FFFFFF",
+    padding: 16
+  },
+  content: {
+    backgroundColor: "#FFFFFF",
+    minHeight: "100%"
+  },
+  contentWrap: {
+    flex: 1,
+    position: "relative"
+  },
+  sectionTitle: {
+    marginTop: 28,
+    marginBottom: 12,
+    fontSize: 12,
+    fontWeight: "700",
+    color: "#000"
+  },
+  chipWrap: {
+    flexDirection: "row",
+    flexWrap: "wrap",
+    gap: 10
+  },
+  chip: {
+    flexDirection: "row",
+    alignItems: "center",
+    backgroundColor: "#efefef",
+    borderRadius: 3,
+    paddingLeft: 12,
+    paddingRight: 8,
+    paddingVertical: 7,
+    maxWidth: "100%"
+  },
+  chipText: {
+    fontSize: 13,
+    fontWeight: "500",
+    color: "#333",
+    marginRight: 8
+  },
+  chipCloseContainer: {
+    width: 16,
+    height: 16,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  chipClose: {
+    width: 8,
+    height: 8
+  },
+  popularWrap: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 22,
+    marginBottom: 20
+  },
+  popularText: {
+    fontSize: 12,
+    color: "#333",
+    fontWeight: "500"
+  },
+  resultsCountText: {
+    marginTop: 56,
+    marginBottom: 18,
+    fontSize: 15,
+    color: "#111"
+  },
+  resultsCountBold: {
+    fontWeight: "700"
+  },
+  filterRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    marginBottom: 22
+  },
+  filterText: {
+    fontSize: 15,
+    color: "#111",
+    fontWeight: "600",
+    marginRight: 8
+  },
+  filterIcon: {
+    width: 18,
+    height: 18
+  },
+  grid: {
+    flexDirection: "row",
+    flexWrap: "wrap",
+    justifyContent: "space-between",
+    rowGap: 28
+  },
+  statusWrap: {
+    paddingVertical: 16,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  errorText: {
+    color: "#d00000",
+    textAlign: "center",
+    fontSize: 12,
+    marginTop: 12
+  },
+  emptyText: {
+    color: "#666",
+    textAlign: "center",
+    fontSize: 12,
+    marginTop: 16
+  }
+});
+
+module.exports = WoopzeSearchScreen;
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map