@gustavo-valsechi/client 1.4.201 → 1.4.202

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.
Files changed (4) hide show
  1. package/dist/src/components/types/credit-card/card/index.js +17 -8
  2. package/dist/src/components/types/credit-card/card/index.mjs +17 -8
  3. package/dist/src/interfaces/components/credit-card/index.d.ts +6 -1
  4. package/package.json +1 -1
package/dist/src/components/types/credit-card/card/index.js CHANGED
@@ -41,31 +41,40 @@ var import_utils = __toESM(require("@gustavo-valsechi/utils"));
41
41
  var import_lodash = __toESM(require("lodash"));
42
42
  var import_assets = __toESM(require("../assets"));
43
43
  function CreditCardComponent(props) {
44
- var _a;
44
+ var _a, _b;
45
45
  const flagRef = (0, import_react.useRef)({});
46
46
  (0, import_react.useEffect)(() => {
47
47
  const content = (0, import_tools.getCardContent)(props.number);
48
- if (props.onSetFlag) props.onSetFlag(content);
48
+ console.log(content);
49
+ if (props.onSetFlag) props.onSetFlag(content || { flag: props.flag, logo: props.flagIcon });
49
50
  if (!flagRef.current) return;
50
- if (!content.logo) {
51
+ if (!content.logo && !props.flagIcon) {
51
52
  flagRef.current.style.backgroundImage = "";
52
53
  return;
53
54
  }
54
- flagRef.current.style.backgroundImage = `url(${content.logo})`;
55
- }, [flagRef, props.number]);
55
+ flagRef.current.style.backgroundImage = `url(${content.logo || props.flagIcon})`;
56
+ }, [flagRef, props.number, props.flag, props.flagIcon]);
56
57
  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_styles.Container, { children: [
57
58
  /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "credit-card-left", children: [
58
59
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "credit-card-top", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { id: "credit-card-chip", style: { backgroundImage: `url(${import_assets.default.Chip})` } }) }),
59
60
  /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "credit-card-bottom", children: [
60
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "credit-card-number", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "credit-card-elipse", children: import_utils.default.mask.loop(props.number, { sequencyNumber: 4, maxSequency: 4, placeholder: "\u2022" }) }) }),
61
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "credit-card-name", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "credit-card-elipse", children: import_lodash.default.deburr((_a = props.name) == null ? void 0 : _a.replace(/[^A-Za-zÀ-ÿ\s]/g, "").toUpperCase()) || "Nome do Titular" }) })
61
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "credit-card-number", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "credit-card-elipse", children: import_utils.default.mask.loop(props.number || `\u2022\u2022\u2022\u2022 \u2022\u2022\u2022\u2022 \u2022\u2022\u2022\u2022 ${props.lastNumber}`, { sequencyNumber: 4, maxSequency: 4, placeholder: "\u2022" }) }) }),
62
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "credit-card-name", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "credit-card-elipse", children: import_lodash.default.deburr((_a = props.cardholder) == null ? void 0 : _a.replace(/[^A-Za-zÀ-ÿ\s]/g, "").toUpperCase()) || "Nome do Titular" }) })
62
63
  ] })
63
64
  ] }),
64
65
  /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "credit-card-right", children: [
65
66
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "credit-card-top", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { id: "credit-card-flag", ref: flagRef }) }),
66
67
  /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "credit-card-bottom", children: [
67
68
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: "validade" }),
68
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: import_utils.default.mask.loop(props.expiry, { sequencyNumber: 2, maxSequency: 2, placeholder: "\u2022", separator: "/" }) })
69
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: import_utils.default.mask.loop(
70
+ props.expiry || `${((_b = String(props.validityMonth)) == null ? void 0 : _b.length) === 1 ? `0${props.validityMonth}` : props.validityMonth}/${props.validityYear}`,
71
+ {
72
+ sequencyNumber: 2,
73
+ maxSequency: 2,
74
+ placeholder: "\u2022",
75
+ separator: "/"
76
+ }
77
+ ) })
69
78
  ] })
70
79
  ] })
71
80
  ] });
package/dist/src/components/types/credit-card/card/index.mjs CHANGED
@@ -8,31 +8,40 @@ import Utils from "@gustavo-valsechi/utils";
8
8
  import _ from "lodash";
9
9
  import assets from "../assets";
10
10
  function CreditCardComponent(props) {
11
- var _a;
11
+ var _a, _b;
12
12
  const flagRef = useRef({});
13
13
  useEffect(() => {
14
14
  const content = getCardContent(props.number);
15
- if (props.onSetFlag) props.onSetFlag(content);
15
+ console.log(content);
16
+ if (props.onSetFlag) props.onSetFlag(content || { flag: props.flag, logo: props.flagIcon });
16
17
  if (!flagRef.current) return;
17
- if (!content.logo) {
18
+ if (!content.logo && !props.flagIcon) {
18
19
  flagRef.current.style.backgroundImage = "";
19
20
  return;
20
21
  }
21
- flagRef.current.style.backgroundImage = `url(${content.logo})`;
22
- }, [flagRef, props.number]);
22
+ flagRef.current.style.backgroundImage = `url(${content.logo || props.flagIcon})`;
23
+ }, [flagRef, props.number, props.flag, props.flagIcon]);
23
24
  return /* @__PURE__ */ jsxs(Container, { children: [
24
25
  /* @__PURE__ */ jsxs("div", { className: "credit-card-left", children: [
25
26
  /* @__PURE__ */ jsx("div", { className: "credit-card-top", children: /* @__PURE__ */ jsx("div", { id: "credit-card-chip", style: { backgroundImage: `url(${assets.Chip})` } }) }),
26
27
  /* @__PURE__ */ jsxs("div", { className: "credit-card-bottom", children: [
27
- /* @__PURE__ */ jsx("div", { className: "credit-card-number", children: /* @__PURE__ */ jsx("div", { className: "credit-card-elipse", children: Utils.mask.loop(props.number, { sequencyNumber: 4, maxSequency: 4, placeholder: "\u2022" }) }) }),
28
- /* @__PURE__ */ jsx("div", { className: "credit-card-name", children: /* @__PURE__ */ jsx("div", { className: "credit-card-elipse", children: _.deburr((_a = props.name) == null ? void 0 : _a.replace(/[^A-Za-zÀ-ÿ\s]/g, "").toUpperCase()) || "Nome do Titular" }) })
28
+ /* @__PURE__ */ jsx("div", { className: "credit-card-number", children: /* @__PURE__ */ jsx("div", { className: "credit-card-elipse", children: Utils.mask.loop(props.number || `\u2022\u2022\u2022\u2022 \u2022\u2022\u2022\u2022 \u2022\u2022\u2022\u2022 ${props.lastNumber}`, { sequencyNumber: 4, maxSequency: 4, placeholder: "\u2022" }) }) }),
29
+ /* @__PURE__ */ jsx("div", { className: "credit-card-name", children: /* @__PURE__ */ jsx("div", { className: "credit-card-elipse", children: _.deburr((_a = props.cardholder) == null ? void 0 : _a.replace(/[^A-Za-zÀ-ÿ\s]/g, "").toUpperCase()) || "Nome do Titular" }) })
29
30
  ] })
30
31
  ] }),
31
32
  /* @__PURE__ */ jsxs("div", { className: "credit-card-right", children: [
32
33
  /* @__PURE__ */ jsx("div", { className: "credit-card-top", children: /* @__PURE__ */ jsx("div", { id: "credit-card-flag", ref: flagRef }) }),
33
34
  /* @__PURE__ */ jsxs("div", { className: "credit-card-bottom", children: [
34
35
  /* @__PURE__ */ jsx("span", { children: "validade" }),
35
- /* @__PURE__ */ jsx("span", { children: Utils.mask.loop(props.expiry, { sequencyNumber: 2, maxSequency: 2, placeholder: "\u2022", separator: "/" }) })
36
+ /* @__PURE__ */ jsx("span", { children: Utils.mask.loop(
37
+ props.expiry || `${((_b = String(props.validityMonth)) == null ? void 0 : _b.length) === 1 ? `0${props.validityMonth}` : props.validityMonth}/${props.validityYear}`,
38
+ {
39
+ sequencyNumber: 2,
40
+ maxSequency: 2,
41
+ placeholder: "\u2022",
42
+ separator: "/"
43
+ }
44
+ ) })
36
45
  ] })
37
46
  ] })
38
47
  ] });
package/dist/src/interfaces/components/credit-card/index.d.ts CHANGED
@@ -1,8 +1,13 @@
1
1
  export interface ICreditCard {
2
2
  cvc?: string;
3
- name: string;
3
+ cardholder: string;
4
+ lastNumber: string;
4
5
  number: string;
5
6
  expiry: string;
7
+ validityMonth: string;
8
+ validityYear: string;
9
+ flag: string;
10
+ flagIcon: string;
6
11
  onSetFlag?: (content: {
7
12
  flag: string;
8
13
  logo: string;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@gustavo-valsechi/client",
3
- "version": "1.4.201",
3
+ "version": "1.4.202",
4
4
  "main": "dist/index.js",
5
5
  "module": "dist/index.js",
6
6
  "types": "dist/index.d.ts",