@licklist/design 0.44.485-dev.42 → 0.44.485-dev.44

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 (6) hide show
  1. package/dist/product-set/product/quantity/ProductQuantityRechargingControl.d.ts.map +1 -1
  2. package/dist/product-set/product/quantity/ProductQuantityRechargingControl.js +1 -1
  3. package/dist/styles/iframe-order-process/IframeOrderProcess.scss +5 -2
  4. package/package.json +1 -1
  5. package/src/product-set/product/quantity/ProductQuantityRechargingControl.tsx +33 -14
  6. package/src/styles/iframe-order-process/IframeOrderProcess.scss +5 -2
package/dist/product-set/product/quantity/ProductQuantityRechargingControl.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ProductQuantityRechargingControl.d.ts","sourceRoot":"","sources":["../../../../src/product-set/product/quantity/ProductQuantityRechargingControl.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoB,MAAM,OAAO,CAAC;AAEzC,OAAO,EACL,mBAAmB,EACnB,UAAU,EACX,MAAM,8DAA8D,CAAC;AAStE,MAAM,WAAW,sCAAuC,SAAQ,UAAU;IACxE,aAAa,EAAE,MAAM,CAAC;CACvB;AAED,MAAM,WAAW,qCAAqC,CAAC,CAAC,CACtD,SAAQ,mBAAmB,CAAC,CAAC,CAAC;IAC9B,SAAS,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,cAAc,KAAK,IAAI,CAAC;CAC7C;AAED,wBAAgB,gCAAgC,CAAC,CAAC,SAAS,UAAU,EACnE,KAAK,EAAE,qCAAqC,CAAC,CAAC,CAAC,eAoFhD"}
1
+ {"version":3,"file":"ProductQuantityRechargingControl.d.ts","sourceRoot":"","sources":["../../../../src/product-set/product/quantity/ProductQuantityRechargingControl.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoB,MAAM,OAAO,CAAC;AAEzC,OAAO,EACL,mBAAmB,EACnB,UAAU,EACX,MAAM,8DAA8D,CAAC;AAStE,MAAM,WAAW,sCAAuC,SAAQ,UAAU;IACxE,aAAa,EAAE,MAAM,CAAC;CACvB;AAED,MAAM,WAAW,qCAAqC,CAAC,CAAC,CACtD,SAAQ,mBAAmB,CAAC,CAAC,CAAC;IAC9B,SAAS,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,cAAc,KAAK,IAAI,CAAC;CAC7C;AAED,wBAAgB,gCAAgC,CAAC,CAAC,SAAS,UAAU,EACnE,KAAK,EAAE,qCAAqC,CAAC,CAAC,CAAC,eAuGhD"}
package/dist/product-set/product/quantity/ProductQuantityRechargingControl.js CHANGED
@@ -1 +1 @@
1
- "use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var t=require("react"),r=e(t),a=require("react-i18next"),n=require("react-bootstrap"),o=require("react-hook-form"),i=e(require("@licklist/plugins/dist/services/Form/HookFormService")),l=require("@react-aria/utils"),u=require("../../../assets/dashboard/increment.svg.js"),c=e(require("react-bootstrap/InputGroup"));exports.ProductQuantityRechargingControl=function(e){var s=e.isLoading,d=void 0!==s&&s,m=e.fieldNamePrefix,f=e.disabled,p=void 0!==f&&f,v=e.onFocus,b=o.useFormContext(),g=b.trigger,y=b.control,E=b.formState.errors,q=a.useTranslation("Design").t,F=l.useId();return t.useEffect((function(){g("".concat(m,".totalQuantity"))}),[p,m,g]),r.createElement(r.Fragment,null,r.createElement(n.Form.Group,{controlId:F},r.createElement(n.Form.Label,null,q("totalQuantity")),r.createElement(c,{hasValidation:!0},r.createElement(c.Prepend,null,r.createElement(c.Text,{className:"py-0 px-3"},r.createElement(u.ReactComponent,null))),r.createElement(o.Controller,{render:function(e){var t=e.field,a=t.value,o=t.onChange,l=t.ref;return r.createElement(n.Form.Control,{ref:l,type:"number",min:0,step:1,value:a,onFocus:v,onChange:o,isInvalid:i.isInvalid("".concat(m,".totalQuantity"),E),disabled:d||p})},control:y,name:"".concat(m,".totalQuantity"),rules:p?{required:!1,min:0}:{required:q("Validation:fieldRequired",{attribute:q("totalQuantity")}),min:{value:1,message:q("Validation:fieldMinNumber",{attribute:q("totalQuantity"),min:1})}}}),r.createElement(n.Form.Control.Feedback,{type:"invalid"},i.getErrors("".concat(m,".totalQuantity"),E)))))};
1
+ "use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var t=require("react"),r=e(t),a=require("react-i18next"),n=require("react-bootstrap"),o=require("react-hook-form"),i=e(require("@licklist/plugins/dist/services/Form/HookFormService")),l=require("@react-aria/utils"),u=require("../../../assets/dashboard/increment.svg.js"),c=e(require("react-bootstrap/InputGroup"));exports.ProductQuantityRechargingControl=function(e){var s=e.isLoading,m=void 0!==s&&s,d=e.fieldNamePrefix,y=e.disabled,f=void 0!==y&&y,p=e.onFocus,b=o.useFormContext(),E=b.control,g=b.clearErrors,v=b.setError,Q=b.watch,F=b.trigger,x=b.formState.errors,q=a.useTranslation("Design").t,C=l.useId(),h=Q("".concat(d,".maxQuantity")),N=Q("".concat(d,".totalQuantity"));return t.useEffect((function(){F("".concat(d,".totalQuantity"))}),[f,d,F]),t.useEffect((function(){0===Number(N)?v("".concat(d,".totalQuantity"),{type:i.manualErrorType,message:q("Validation:fieldMinNumber",{attribute:q("totalQuantity"),min:1})}):Number(h)>Number(N)?v("".concat(d,".totalQuantity"),{type:i.manualErrorType,message:q("Validation:fieldTotalNumber",{attribute:q("totalQuantity"),max:q("maxOrderQuantity")})}):g("".concat(d,".totalQuantity"))}),[N,h,v,g]),r.createElement(r.Fragment,null,r.createElement(n.Form.Group,{controlId:C},r.createElement(n.Form.Label,null,q("totalQuantity")),r.createElement(c,{hasValidation:!0},r.createElement(c.Prepend,null,r.createElement(c.Text,{className:"py-0 px-3"},r.createElement(u.ReactComponent,null))),r.createElement(o.Controller,{render:function(e){var t=e.field,a=t.value,o=t.onChange,l=t.ref;return r.createElement(n.Form.Control,{ref:l,type:"number",min:0,step:1,value:a,onFocus:p,onChange:o,isInvalid:i.isInvalid("".concat(d,".totalQuantity"),x),disabled:m||f})},control:E,name:"".concat(d,".totalQuantity"),rules:f?{required:!1,min:0}:{}}),r.createElement(n.Form.Control.Feedback,{type:"invalid"},i.getErrors("".concat(d,".totalQuantity"),x)))))};
package/dist/styles/iframe-order-process/IframeOrderProcess.scss CHANGED
@@ -202,7 +202,7 @@
202
202
 
203
203
  .step-numbers {
204
204
  font-weight: 500;
205
- margin-left: 1rem;
205
+ margin: 0 1rem;
206
206
  color: $snippet-page-header-steps-inactive-step-body-color;
207
207
 
208
208
  .active-step {
@@ -225,6 +225,7 @@
225
225
  height: 2rem;
226
226
  transition: $color-transition;
227
227
  max-width: calc(100% - 12rem);
228
+ flex-grow: 1;
228
229
 
229
230
  .step {
230
231
  display: flex;
@@ -233,10 +234,12 @@
233
234
  margin: 0 0.5rem;
234
235
  z-index: 1;
235
236
  scroll-margin: 10rem;
237
+ flex-grow: 1;
236
238
 
237
239
  .number {
238
240
  text-align: center;
239
- width: 3rem;
241
+ max-width: 3rem;
242
+ width: 100%;
240
243
  height: 0.25rem;
241
244
  line-height: 2.5rem;
242
245
  background: $snippet-page-header-steps-inactive-step-background-color;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@licklist/design",
3
- "version": "0.44.485-dev.42",
3
+ "version": "0.44.485-dev.44",
4
4
  "repository": {
5
5
  "type": "git",
6
6
  "url": "git+ssh://git@bitbucket.org/artelogicsoft/licklist_design.git"
package/src/product-set/product/quantity/ProductQuantityRechargingControl.tsx CHANGED
@@ -33,19 +33,49 @@ export function ProductQuantityRechargingControl<T extends FormValues>(
33
33
  onFocus,
34
34
  } = props;
35
35
  const {
36
- trigger,
37
36
  control,
37
+ clearErrors,
38
+ setError,
39
+ watch,
40
+ trigger,
38
41
  formState: { errors },
39
42
  } = useFormContext<T>();
40
43
  const { t } = useTranslation("Design");
41
-
42
44
  const totalQuantityId = useId();
43
45
 
46
+ const maxQuantityValue = watch(`${fieldNamePrefix}.maxQuantity` as Path<T>);
47
+ const totalQuantityValue = watch(
48
+ `${fieldNamePrefix}.totalQuantity` as Path<T>
49
+ );
50
+
44
51
  // trigger total quantity field's validation if disabled state was changed
45
52
  useEffect(() => {
46
53
  trigger(`${fieldNamePrefix}.totalQuantity` as Path<T>);
47
54
  }, [disabled, fieldNamePrefix, trigger]);
48
55
 
56
+ useEffect(() => {
57
+ if (Number(totalQuantityValue) === 0) {
58
+ setError(`${fieldNamePrefix}.totalQuantity` as Path<T>, {
59
+ type: HookFormService.manualErrorType,
60
+ message: t("Validation:fieldMinNumber", {
61
+ attribute: t("totalQuantity"),
62
+ min: 1,
63
+ }),
64
+ });
65
+ } else if (Number(maxQuantityValue) > Number(totalQuantityValue)) {
66
+ setError(`${fieldNamePrefix}.totalQuantity` as Path<T>, {
67
+ type: HookFormService.manualErrorType,
68
+ message: t("Validation:fieldTotalNumber", {
69
+ attribute: t("totalQuantity"),
70
+ max: t("maxOrderQuantity"),
71
+ }),
72
+ });
73
+ } else {
74
+ clearErrors(`${fieldNamePrefix}.totalQuantity` as Path<T>);
75
+ }
76
+ // eslint-disable-next-line react-hooks/exhaustive-deps
77
+ }, [totalQuantityValue, maxQuantityValue, setError, clearErrors]);
78
+
49
79
  return (
50
80
  <>
51
81
  <Form.Group controlId={totalQuantityId}>
@@ -83,18 +113,7 @@ export function ProductQuantityRechargingControl<T extends FormValues>(
83
113
  required: false,
84
114
  min: 0,
85
115
  }
86
- : {
87
- required: t("Validation:fieldRequired", {
88
- attribute: t("totalQuantity"),
89
- }) as string,
90
- min: {
91
- value: 1,
92
- message: t("Validation:fieldMinNumber", {
93
- attribute: t("totalQuantity"),
94
- min: 1,
95
- }) as string,
96
- },
97
- }
116
+ : {}
98
117
  }
99
118
  />
100
119
 
package/src/styles/iframe-order-process/IframeOrderProcess.scss CHANGED
@@ -202,7 +202,7 @@
202
202
 
203
203
  .step-numbers {
204
204
  font-weight: 500;
205
- margin-left: 1rem;
205
+ margin: 0 1rem;
206
206
  color: $snippet-page-header-steps-inactive-step-body-color;
207
207
 
208
208
  .active-step {
@@ -225,6 +225,7 @@
225
225
  height: 2rem;
226
226
  transition: $color-transition;
227
227
  max-width: calc(100% - 12rem);
228
+ flex-grow: 1;
228
229
 
229
230
  .step {
230
231
  display: flex;
@@ -233,10 +234,12 @@
233
234
  margin: 0 0.5rem;
234
235
  z-index: 1;
235
236
  scroll-margin: 10rem;
237
+ flex-grow: 1;
236
238
 
237
239
  .number {
238
240
  text-align: center;
239
- width: 3rem;
241
+ max-width: 3rem;
242
+ width: 100%;
240
243
  height: 0.25rem;
241
244
  line-height: 2.5rem;
242
245
  background: $snippet-page-header-steps-inactive-step-background-color;