@gustavo-valsechi/client 1.4.201 → 1.4.203

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 +16 -8
  2. package/dist/src/components/types/credit-card/card/index.mjs +16 -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,39 @@ 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
+ if (props.onSetFlag) props.onSetFlag(content.flag ? content : { flag: props.flag || "", logo: props.flagIcon || "" });
49
49
  if (!flagRef.current) return;
50
- if (!content.logo) {
50
+ if (!content.logo && !props.flagIcon) {
51
51
  flagRef.current.style.backgroundImage = "";
52
52
  return;
53
53
  }
54
- flagRef.current.style.backgroundImage = `url(${content.logo})`;
55
- }, [flagRef, props.number]);
54
+ flagRef.current.style.backgroundImage = `url(${content.logo || props.flagIcon})`;
55
+ }, [flagRef, props.number, props.flag, props.flagIcon]);
56
56
  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_styles.Container, { children: [
57
57
  /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "credit-card-left", children: [
58
58
  /* @__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
59
  /* @__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" }) })
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" }) || `\u2022\u2022\u2022\u2022 \u2022\u2022\u2022\u2022 \u2022\u2022\u2022\u2022 ${props.lastNumber}` }) }),
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.cardholder) == null ? void 0 : _a.replace(/[^A-Za-zÀ-ÿ\s]/g, "").toUpperCase()) || "Nome do Titular" }) })
62
62
  ] })
63
63
  ] }),
64
64
  /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "credit-card-right", children: [
65
65
  /* @__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
66
  /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "credit-card-bottom", children: [
67
67
  /* @__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: "/" }) })
68
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: import_utils.default.mask.loop(
69
+ props.expiry || `${((_b = String(props.validityMonth)) == null ? void 0 : _b.length) === 1 ? `0${props.validityMonth}` : props.validityMonth}/${props.validityYear}`,
70
+ {
71
+ sequencyNumber: 2,
72
+ maxSequency: 2,
73
+ placeholder: "\u2022",
74
+ separator: "/"
75
+ }
76
+ ) })
69
77
  ] })
70
78
  ] })
71
79
  ] });
package/dist/src/components/types/credit-card/card/index.mjs CHANGED
@@ -8,31 +8,39 @@ 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
+ if (props.onSetFlag) props.onSetFlag(content.flag ? content : { flag: props.flag || "", logo: props.flagIcon || "" });
16
16
  if (!flagRef.current) return;
17
- if (!content.logo) {
17
+ if (!content.logo && !props.flagIcon) {
18
18
  flagRef.current.style.backgroundImage = "";
19
19
  return;
20
20
  }
21
- flagRef.current.style.backgroundImage = `url(${content.logo})`;
22
- }, [flagRef, props.number]);
21
+ flagRef.current.style.backgroundImage = `url(${content.logo || props.flagIcon})`;
22
+ }, [flagRef, props.number, props.flag, props.flagIcon]);
23
23
  return /* @__PURE__ */ jsxs(Container, { children: [
24
24
  /* @__PURE__ */ jsxs("div", { className: "credit-card-left", children: [
25
25
  /* @__PURE__ */ jsx("div", { className: "credit-card-top", children: /* @__PURE__ */ jsx("div", { id: "credit-card-chip", style: { backgroundImage: `url(${assets.Chip})` } }) }),
26
26
  /* @__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" }) })
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" }) || `\u2022\u2022\u2022\u2022 \u2022\u2022\u2022\u2022 \u2022\u2022\u2022\u2022 ${props.lastNumber}` }) }),
28
+ /* @__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
29
  ] })
30
30
  ] }),
31
31
  /* @__PURE__ */ jsxs("div", { className: "credit-card-right", children: [
32
32
  /* @__PURE__ */ jsx("div", { className: "credit-card-top", children: /* @__PURE__ */ jsx("div", { id: "credit-card-flag", ref: flagRef }) }),
33
33
  /* @__PURE__ */ jsxs("div", { className: "credit-card-bottom", children: [
34
34
  /* @__PURE__ */ jsx("span", { children: "validade" }),
35
- /* @__PURE__ */ jsx("span", { children: Utils.mask.loop(props.expiry, { sequencyNumber: 2, maxSequency: 2, placeholder: "\u2022", separator: "/" }) })
35
+ /* @__PURE__ */ jsx("span", { children: Utils.mask.loop(
36
+ props.expiry || `${((_b = String(props.validityMonth)) == null ? void 0 : _b.length) === 1 ? `0${props.validityMonth}` : props.validityMonth}/${props.validityYear}`,
37
+ {
38
+ sequencyNumber: 2,
39
+ maxSequency: 2,
40
+ placeholder: "\u2022",
41
+ separator: "/"
42
+ }
43
+ ) })
36
44
  ] })
37
45
  ] })
38
46
  ] });
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.203",
4
4
  "main": "dist/index.js",
5
5
  "module": "dist/index.js",
6
6
  "types": "dist/index.d.ts",