@licklist/design 0.44.505 → 0.44.506

package/dist/product-set/form/ProductSetForm.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ProductSetForm.d.ts","sourceRoot":"","sources":["../../../src/product-set/form/ProductSetForm.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,UAAU,EAAE,MAAM,8DAA8D,CAAC;AAI1F,OAAO,EAAE,WAAW,EAAE,MAAM,8DAA8D,CAAC;AAC3F,OAAO,EAAE,WAAW,EAAE,MAAM,+CAA+C,CAAC;AAK5E,OAAO,EAAE,gCAAgC,EAAE,MAAM,oFAAoF,CAAC;AACtI,OAAO,EAAE,IAAI,EAAE,MAAM,wDAAwD,CAAC;AAE9E,OAAO,EAEL,uBAAuB,EACvB,uBAAuB,EACxB,MAAM,YAAY,CAAC;AACpB,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAC;AAEhC,OAAO,EAAE,UAAU,EAAE,MAAM,gCAAgC,CAAC;AAE5D,MAAM,WAAW,aAAa;IAC5B,SAAS,EAAE,OAAO,CAAC;CACpB;AACD,MAAM,WAAW,MAAM;IACrB,EAAE,EAAE,MAAM,CAAC;CACZ;AACD,MAAM,WAAW,oBACf,SAAQ,UAAU,EAChB,MAAM,EACN,uBAAuB;IACzB,KAAK,CAAC,EAAE,IAAI,EAAE,CAAC;CAChB;AAED,MAAM,WAAW,mBACf,SAAQ,aAAa,EACnB,uBAAuB;IACzB,WAAW,EAAE,MAAM,CAAC;IACpB,aAAa,CAAC,EAAE,oBAAoB,CAAC;IACrC,mBAAmB,EAAE,CAAC,MAAM,EAAE,oBAAoB,KAAK,IAAI,CAAC;IAC5D,kBAAkB,CAAC,EAAE,CAAC,MAAM,EAAE,oBAAoB,KAAK,IAAI,CAAC;IAC5D,gBAAgB,CAAC,EAAE,UAAU,EAAE,CAAC;IAChC,YAAY,CAAC,EAAE,WAAW,CAAC;IAC3B,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,YAAY,CAAC,EAAE,WAAW,EAAE,CAAC;IAC7B,4BAA4B,CAAC,EAAE,gCAAgC,CAAC,sBAAsB,CAAC,CAAC;IACxF,KAAK,CAAC,EAAE,IAAI,EAAE,GAAG,IAAI,CAAC;IACtB,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B;AAED,wBAAgB,cAAc,CAAC,EAC7B,WAAW,EACX,SAAS,EACT,aAAa,EACb,mBAAmB,EACnB,kBAAkB,EAClB,gBAAgB,EAChB,YAAY,EACZ,cAAsB,EACtB,YAAiB,EACjB,4BAA4B,EAC5B,KAAK,EACL,cAAc,EACd,GAAG,MAAM,EACV,EAAE,mBAAmB,eA8GrB"}
+{"version":3,"file":"ProductSetForm.d.ts","sourceRoot":"","sources":["../../../src/product-set/form/ProductSetForm.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,UAAU,EAAE,MAAM,8DAA8D,CAAC;AAI1F,OAAO,EAAE,WAAW,EAAE,MAAM,8DAA8D,CAAC;AAC3F,OAAO,EAAE,WAAW,EAAE,MAAM,+CAA+C,CAAC;AAK5E,OAAO,EAAE,gCAAgC,EAAE,MAAM,oFAAoF,CAAC;AACtI,OAAO,EAAE,IAAI,EAAE,MAAM,wDAAwD,CAAC;AAE9E,OAAO,EAEL,uBAAuB,EACvB,uBAAuB,EACxB,MAAM,YAAY,CAAC;AACpB,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAC;AAEhC,OAAO,EAAE,UAAU,EAAE,MAAM,gCAAgC,CAAC;AAG5D,MAAM,WAAW,aAAa;IAC5B,SAAS,EAAE,OAAO,CAAC;CACpB;AACD,MAAM,WAAW,MAAM;IACrB,EAAE,EAAE,MAAM,CAAC;CACZ;AACD,MAAM,WAAW,oBACf,SAAQ,UAAU,EAChB,MAAM,EACN,uBAAuB;IACzB,KAAK,CAAC,EAAE,IAAI,EAAE,CAAC;CAChB;AAED,MAAM,WAAW,mBACf,SAAQ,aAAa,EACnB,uBAAuB;IACzB,WAAW,EAAE,MAAM,CAAC;IACpB,aAAa,CAAC,EAAE,oBAAoB,CAAC;IACrC,mBAAmB,EAAE,CAAC,MAAM,EAAE,oBAAoB,KAAK,IAAI,CAAC;IAC5D,kBAAkB,CAAC,EAAE,CAAC,MAAM,EAAE,oBAAoB,KAAK,IAAI,CAAC;IAC5D,gBAAgB,CAAC,EAAE,UAAU,EAAE,CAAC;IAChC,YAAY,CAAC,EAAE,WAAW,CAAC;IAC3B,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,YAAY,CAAC,EAAE,WAAW,EAAE,CAAC;IAC7B,4BAA4B,CAAC,EAAE,gCAAgC,CAAC,sBAAsB,CAAC,CAAC;IACxF,KAAK,CAAC,EAAE,IAAI,EAAE,GAAG,IAAI,CAAC;IACtB,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B;AAED,wBAAgB,cAAc,CAAC,EAC7B,WAAW,EACX,SAAS,EACT,aAAa,EACb,mBAAmB,EACnB,kBAAkB,EAClB,gBAAgB,EAChB,YAAY,EACZ,cAAsB,EACtB,YAAiB,EACjB,4BAA4B,EAC5B,KAAK,EACL,cAAc,EACd,GAAG,MAAM,EACV,EAAE,mBAAmB,eAwHrB"}

package/dist/product-set/form/ProductSetForm.js

@@ -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("tslib"),o=require("react"),r=e(o),n=require("react-i18next"),a=require("react-bootstrap"),i=require("react-hook-form"),s=e(require("@licklist/plugins/dist/services/Form/FormErrorService")),d=require("lodash"),l=require("../../modals/dialog/Dialog.js"),u=require("../../modals/dialog/DialogContext.js"),c=require("./context.js"),m=require("../control/ProductSetControl.js");exports.ProductSetForm=function(e){var p=e.companyName,v=e.isLoading,g=e.defaultValues,f=e.onSubmitAndRedirect,E=e.onSubmitNoRedirect,b=e.productGroupList,S=e.serverErrors,w=e.providerHasMap,C=void 0!==w&&w,h=e.venueMapSets,q=void 0===h?[]:h,D=e.providerHasBookingManagement,L=e.zones,M=e.isCreateAction,P=t.__rest(e,["companyName","isLoading","defaultValues","onSubmitAndRedirect","onSubmitNoRedirect","productGroupList","serverErrors","providerHasMap","venueMapSets","providerHasBookingManagement","zones","isCreateAction"]),x=n.useTranslation("Design").t,A=u.useDialogContext(),N=A.isShownDialog,k=A.onBeforeUnload,_=A.onPopState,y=A.onApproveDialog,B=A.onDeclineDialog,F=i.useForm({defaultValues:g,mode:"onChange"}),j=F.setError,H=F.reset,R=F.watch();return o.useEffect((function(){g&&!d.isEqual(g,R)&&H(g)}),[g]),o.useEffect((function(){S&&s.handleServerErrors(S,j)}),[S,j]),o.useEffect((function(){return window.history.pushState(null,"",window.location.pathname),window.addEventListener("beforeunload",k),window.addEventListener("popstate",_),function(){window.removeEventListener("beforeunload",k),window.removeEventListener("popstate",_)}}),[]),r.createElement(c.ProductSetContextProvider,{productGroupList:b,providerHasMap:C,venueMapSets:q,providerHasBookingManagement:D,zones:L},r.createElement(l.Dialog,{isActive:N,title:x("Design:leavePage"),content:x("Design:changesNotBeSaved"),onApprove:y,onDecline:B}),r.createElement(i.FormProvider,t.__assign({},F),r.createElement(a.Form,{onSubmit:F.handleSubmit(f)},r.createElement(c.ProductSetLoadingContext.Consumer,null,(function(e){var o=e.isLoading;return r.createElement(r.Fragment,null,r.createElement(m.ProductSetControl,t.__assign({},P,{isLoading:v,isCreateAction:M,companyName:p})),r.createElement(a.Row,null,r.createElement(a.Col,{md:6,sm:12}),r.createElement(a.Col,{className:"product-set-save-btn-wrapper p-0 pl-4 d-flex mw-100",md:6,sm:12},E&&r.createElement(a.Button,{className:"product-set-save-btn mt-5 ml-5 d-no dne d-md-block",onClick:F.handleSubmit(E),disabled:v||o||!R.name},x("save")),r.createElement(a.Button,{className:"product-set-save-btn mt-5 ml-5 d-no dne d-md-block",type:"submit",disabled:v||o||!R.name},x("saveAndClose")))))})))))};
+"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("tslib"),o=require("react"),r=e(o),n=require("react-i18next"),a=require("react-bootstrap"),i=require("react-hook-form"),s=e(require("@licklist/plugins/dist/services/Form/FormErrorService")),l=require("lodash"),d=require("../../modals/dialog/Dialog.js"),u=require("../../modals/dialog/DialogContext.js"),m=require("./context.js"),c=require("../utils/index.js"),p=require("../control/ProductSetControl.js");exports.ProductSetForm=function(e){var v=e.companyName,g=e.isLoading,E=e.defaultValues,f=e.onSubmitAndRedirect,S=e.onSubmitNoRedirect,b=e.productGroupList,w=e.serverErrors,C=e.providerHasMap,h=void 0!==C&&C,q=e.venueMapSets,T=void 0===q?[]:q,D=e.providerHasBookingManagement,L=e.zones,x=e.isCreateAction,M=t.__rest(e,["companyName","isLoading","defaultValues","onSubmitAndRedirect","onSubmitNoRedirect","productGroupList","serverErrors","providerHasMap","venueMapSets","providerHasBookingManagement","zones","isCreateAction"]),P=n.useTranslation("Design").t,A=u.useDialogContext(),F=A.isShownDialog,N=A.onBeforeUnload,k=A.onPopState,_=A.onApproveDialog,j=A.onDeclineDialog,y=i.useForm({defaultValues:E,mode:"onChange"}),B=y.setError,H=y.reset,R=y.watch();return o.useEffect((function(){E&&!l.isEqual(E,R)&&H(E)}),[E]),o.useEffect((function(){w&&s.handleServerErrors(w,B)}),[w,B]),o.useEffect((function(){return window.history.pushState(null,"",window.location.pathname),window.addEventListener("beforeunload",N),window.addEventListener("popstate",k),function(){window.removeEventListener("beforeunload",N),window.removeEventListener("popstate",k)}}),[]),r.createElement(m.ProductSetContextProvider,{productGroupList:b,providerHasMap:h,venueMapSets:T,providerHasBookingManagement:D,zones:L},r.createElement(d.Dialog,{isActive:F,title:P("Design:leavePage"),content:P("Design:changesNotBeSaved"),onApprove:_,onDecline:j}),r.createElement(i.FormProvider,t.__assign({},y),r.createElement(a.Form,{onSubmit:y.handleSubmit(f)},r.createElement(m.ProductSetLoadingContext.Consumer,null,(function(e){var o=e.isLoading;return r.createElement(r.Fragment,null,r.createElement(p.ProductSetControl,t.__assign({},M,{smsTemplates:c.getFilteredTemplates(null==M?void 0:M.smsTemplates,null==R?void 0:R.smsTemplates),emailTemplates:c.getFilteredTemplates(null==M?void 0:M.emailTemplates,null==R?void 0:R.emailTemplates),showEmailTemplate:!!(null==M?void 0:M.emailTemplates),showSmsTemplate:!!(null==M?void 0:M.smsTemplates),isLoading:g,isCreateAction:x,companyName:v})),r.createElement(a.Row,null,r.createElement(a.Col,{md:6,sm:12}),r.createElement(a.Col,{className:"product-set-save-btn-wrapper p-0 pl-4 d-flex mw-100",md:6,sm:12},S&&r.createElement(a.Button,{className:"product-set-save-btn mt-5 ml-5 d-no dne d-md-block",onClick:y.handleSubmit(S),disabled:g||o||!R.name},P("save")),r.createElement(a.Button,{className:"product-set-save-btn mt-5 ml-5 d-no dne d-md-block",type:"submit",disabled:g||o||!R.name},P("saveAndClose")))))})))))};

package/dist/product-set/utils/index.d.ts

@@ -1,5 +1,9 @@
+import { EmailTemplate } from "@licklist/core/dist/DataMapper/Notification/EmailTemplateDataMapper";
+import { SmsTemplate } from "@licklist/core/dist/DataMapper/Notification/SmsTemplateDataMapper";
+import { TemplateItem } from "../control/ProductSetControl";
 export declare const moveArrayElements: <T>(array: T[], prevIndex: number, nextIndex: number) => T[];
 export declare const sortArrayByIndex: <T>(array: T[]) => (T & {
     sort: number;
 })[];
+export declare const getFilteredTemplates: (templates?: EmailTemplate[] | SmsTemplate[], formTemplates?: TemplateItem[]) => TemplateItem[] | undefined;
 //# sourceMappingURL=index.d.ts.map

package/dist/product-set/utils/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/product-set/utils/index.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,iBAAiB,6BAEjB,MAAM,aACN,MAAM,QAQlB,CAAC;AAEF,eAAO,MAAM,gBAAgB;;IAE5B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/product-set/utils/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,qEAAqE,CAAC;AACpG,OAAO,EAAE,WAAW,EAAE,MAAM,mEAAmE,CAAC;AAChG,OAAO,EAAE,YAAY,EAAE,MAAM,8BAA8B,CAAC;AAE5D,eAAO,MAAM,iBAAiB,6BAEjB,MAAM,aACN,MAAM,QAQlB,CAAC;AAEF,eAAO,MAAM,gBAAgB;;IAE5B,CAAC;AAEF,eAAO,MAAM,oBAAoB,eACnB,aAAa,EAAE,GAAG,WAAW,EAAE,kBAC3B,YAAY,EAAE,KAC7B,YAAY,EAAE,GAAG,SAmBnB,CAAC"}

package/dist/product-set/utils/index.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var r=require("tslib");exports.moveArrayElements=function(e,s,t){var n=r.__spreadArray([],r.__read(e),!1);return n.splice(t,0,n.splice(s,1)[0]),n},exports.sortArrayByIndex=function(e){return e.map((function(e,s){return r.__assign(r.__assign({},e),{sort:s})}))};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var i=require("tslib");exports.getFilteredTemplates=function(i,e){var n;if(i)return null===(n=null==i?void 0:i.filter((function(i){return i.notification.isActive&&!(null==e?void 0:e.find((function(e){return e.value.notification.type===i.notification.type})))})))||void 0===n?void 0:n.map((function(i){var e;return{id:null==i?void 0:i.id,value:i,label:null===(e=null==i?void 0:i.notification)||void 0===e?void 0:e.name}}))},exports.moveArrayElements=function(e,n,t){var r=i.__spreadArray([],i.__read(e),!1);return r.splice(t,0,r.splice(n,1)[0]),r},exports.sortArrayByIndex=function(e){return e.map((function(e,n){return i.__assign(i.__assign({},e),{sort:n})}))};

package/dist/provider/provider-details-input/ProviderDetailsInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ProviderDetailsInput.d.ts","sourceRoot":"","sources":["../../../src/provider/provider-details-input/ProviderDetailsInput.tsx"],"names":[],"mappings":";AAKA,OAAO,EAAE,KAAK,EAAE,MAAM,sDAAsD,CAAC;AAE7E,OAAO,EAAa,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AAC9D,OAAO,EAEL,uBAAuB,EACvB,wBAAwB,EACzB,MAAM,yBAAyB,CAAC;AAEjC,oBAAY,0BAA0B,GAAG;IACvC,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,EAAE,MAAM,CAAC;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE;QAAE,EAAE,EAAE,MAAM,CAAA;KAAE,CAAC;IACzB,MAAM,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC;CACxB,GAAG,wBAAwB,CAAC;AAE7B,oBAAY,yBAAyB,GAAG;IACtC,gBAAgB,CAAC,EAAE,gBAAgB,EAAE,CAAC;IACtC,SAAS,CAAC,EAAE,uBAAuB,CAAC,WAAW,CAAC,CAAC;CAClD,CAAC;AAEF,wBAAgB,oBAAoB,CAAC,EACnC,gBAAqB,EACrB,SAAc,GACf,EAAE,yBAAyB,eAiI3B"}
+{"version":3,"file":"ProviderDetailsInput.d.ts","sourceRoot":"","sources":["../../../src/provider/provider-details-input/ProviderDetailsInput.tsx"],"names":[],"mappings":";AAKA,OAAO,EAAE,KAAK,EAAE,MAAM,sDAAsD,CAAC;AAE7E,OAAO,EAAa,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AAC9D,OAAO,EAEL,uBAAuB,EACvB,wBAAwB,EACzB,MAAM,yBAAyB,CAAC;AAEjC,oBAAY,0BAA0B,GAAG;IACvC,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,EAAE,MAAM,CAAC;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE;QAAE,EAAE,EAAE,MAAM,CAAA;KAAE,CAAC;IACzB,MAAM,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC;CACxB,GAAG,wBAAwB,CAAC;AAE7B,oBAAY,yBAAyB,GAAG;IACtC,gBAAgB,CAAC,EAAE,gBAAgB,EAAE,CAAC;IACtC,SAAS,CAAC,EAAE,uBAAuB,CAAC,WAAW,CAAC,CAAC;CAClD,CAAC;AAEF,wBAAgB,oBAAoB,CAAC,EACnC,gBAAqB,EACrB,SAAc,GACf,EAAE,yBAAyB,eA+H3B"}

package/dist/provider/provider-details-input/ProviderDetailsInput.js

@@ -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 r=require("tslib"),t=e(require("react")),n=require("react-i18next"),a=require("react-bootstrap"),i=require("react-hook-form"),o=e(require("@licklist/plugins/dist/services/Form/HookFormService")),l=require("@react-aria/utils"),s=require("../../typeahead/Typeahead.js"),m=require("../provider-links-input/ProviderLinksInput.js");exports.ProviderDetailsInput=function(e){var d,u,p,c,v,g=e.companiesOptions,E=void 0===g?[]:g,F=e.linkTypes,b=void 0===F?[]:F,h=i.useFormContext(),I=h.register,q=h.formState.errors,y=h.setValue,f=n.useTranslation(["App","Design","Validation"]).t,D=l.useId(),k=l.useId(),_=l.useId(),C=l.useId(),V=l.useId(),w=l.useId();return t.createElement(t.Fragment,null,t.createElement(a.Form.Group,{controlId:D},t.createElement(a.Form.Label,null,f("Design:name")),t.createElement(a.Form.Control,r.__assign({},I("name",{required:f("Validation:fieldRequired",{attribute:f("Design:name")})}),{name:"name",required:!0,isInvalid:Boolean(q.name)})),t.createElement(a.Form.Control.Feedback,{type:"invalid"},o.hasError(q.name,"required")&&(null===(d=q.name)||void 0===d?void 0:d.message))),t.createElement(a.Form.Group,{controlId:k},t.createElement(a.Form.Label,null,f("Design:description")),t.createElement(a.Form.Control,r.__assign({},I("description"),{as:"textarea",name:"description",rows:6}))),t.createElement(a.Form.Group,{controlId:_},t.createElement(a.Form.Label,null,f("Design:email")),t.createElement(a.Form.Control,r.__assign({},I("email",{required:f("Validation:fieldRequired",{attribute:f("Design:email")}),pattern:{value:/^\S+@\S+$/,message:f("Validation:fieldValidEmail",{attribute:f("Design:email")})}}),{name:"email",type:"email",inputMode:"email",isInvalid:Boolean(q.email)})),t.createElement(a.Form.Control.Feedback,{type:"invalid"},o.hasError(q.email,"required")&&(null===(u=q.email)||void 0===u?void 0:u.message),o.hasError(q.email,"pattern")&&(null===(p=q.email)||void 0===p?void 0:p.message))),t.createElement(a.Form.Group,{controlId:C},t.createElement(a.Form.Label,null,f("Design:phone")),t.createElement(a.Form.Control,r.__assign({},I("phone",{required:f("Validation:fieldRequired",{attribute:f("Design:phone")})}),{name:"phone",type:"tel",inputMode:"tel",isInvalid:Boolean(q.phone)})),t.createElement(a.Form.Control.Feedback,{type:"invalid"},o.hasError(q.phone,"required")&&(null===(c=q.phone)||void 0===c?void 0:c.message))),t.createElement(a.Form.Group,{controlId:V},t.createElement(a.Form.Label,null,f("Design:website")),t.createElement(a.Form.Control,r.__assign({},I("website",{pattern:{value:/\S+\.\S+/,message:f("Validation:fieldInvalid",{attribute:f("Design:website")})}}),{name:"website",type:"url",inputMode:"url",isInvalid:Boolean(q.website)})),t.createElement(a.Form.Control.Feedback,{type:"invalid"},o.hasError(q.website,"pattern")&&(null===(v=q.website)||void 0===v?void 0:v.message))),E.length>1&&t.createElement(a.Form.Group,{controlId:w},t.createElement(a.Form.Label,null,f("Design:company")),t.createElement(s.Typeahead,{name:"company",options:E,setValue:y,placeholder:f("App:select"),noOptionsMessage:f("App:noMatchesFound")})),b.length>0&&t.createElement(m.ProviderLinksInput,{linkTypes:b}))};
+"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var r=require("tslib"),t=e(require("react")),n=require("react-i18next"),i=require("react-bootstrap"),a=require("react-hook-form"),o=e(require("@licklist/plugins/dist/services/Form/HookFormService")),l=require("@react-aria/utils"),s=require("../../typeahead/Typeahead.js"),m=require("../provider-links-input/ProviderLinksInput.js");exports.ProviderDetailsInput=function(e){var d,u,p,c,v,g=e.companiesOptions,E=void 0===g?[]:g,F=e.linkTypes,b=void 0===F?[]:F,h=a.useFormContext(),I=h.register,q=h.formState.errors,y=n.useTranslation(["App","Design","Validation"]).t,f=l.useId(),D=l.useId(),k=l.useId(),_=l.useId(),C=l.useId(),w=l.useId();return t.createElement(t.Fragment,null,t.createElement(i.Form.Group,{controlId:f},t.createElement(i.Form.Label,null,y("Design:name")),t.createElement(i.Form.Control,r.__assign({},I("name",{required:y("Validation:fieldRequired",{attribute:y("Design:name")})}),{name:"name",required:!0,isInvalid:Boolean(q.name)})),t.createElement(i.Form.Control.Feedback,{type:"invalid"},o.hasError(q.name,"required")&&(null===(d=q.name)||void 0===d?void 0:d.message))),t.createElement(i.Form.Group,{controlId:D},t.createElement(i.Form.Label,null,y("Design:description")),t.createElement(i.Form.Control,r.__assign({},I("description"),{as:"textarea",name:"description",rows:6}))),t.createElement(i.Form.Group,{controlId:k},t.createElement(i.Form.Label,null,y("Design:email")),t.createElement(i.Form.Control,r.__assign({},I("email",{required:y("Validation:fieldRequired",{attribute:y("Design:email")}),pattern:{value:/^\S+@\S+$/,message:y("Validation:fieldValidEmail",{attribute:y("Design:email")})}}),{name:"email",type:"email",inputMode:"email",isInvalid:Boolean(q.email)})),t.createElement(i.Form.Control.Feedback,{type:"invalid"},o.hasError(q.email,"required")&&(null===(u=q.email)||void 0===u?void 0:u.message),o.hasError(q.email,"pattern")&&(null===(p=q.email)||void 0===p?void 0:p.message))),t.createElement(i.Form.Group,{controlId:_},t.createElement(i.Form.Label,null,y("Design:phone")),t.createElement(i.Form.Control,r.__assign({},I("phone",{required:y("Validation:fieldRequired",{attribute:y("Design:phone")})}),{name:"phone",type:"tel",inputMode:"tel",isInvalid:Boolean(q.phone)})),t.createElement(i.Form.Control.Feedback,{type:"invalid"},o.hasError(q.phone,"required")&&(null===(c=q.phone)||void 0===c?void 0:c.message))),t.createElement(i.Form.Group,{controlId:C},t.createElement(i.Form.Label,null,y("Design:website")),t.createElement(i.Form.Control,r.__assign({},I("website",{pattern:{value:/\S+\.\S+/,message:y("Validation:fieldInvalid",{attribute:y("Design:website")})}}),{name:"website",type:"url",inputMode:"url",isInvalid:Boolean(q.website)})),t.createElement(i.Form.Control.Feedback,{type:"invalid"},o.hasError(q.website,"pattern")&&(null===(v=q.website)||void 0===v?void 0:v.message))),E.length>1&&t.createElement(i.Form.Group,{controlId:w},t.createElement(i.Form.Label,null,y("Design:company")),t.createElement(s.Typeahead,{name:"company",options:E,placeholder:y("App:select"),noOptionsMessage:y("App:noMatchesFound")})),b.length>0&&t.createElement(m.ProviderLinksInput,{linkTypes:b}))};

package/dist/sales/manual-booking/select-menu/SelectMenu.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SelectMenu.d.ts","sourceRoot":"","sources":["../../../../src/sales/manual-booking/select-menu/SelectMenu.tsx"],"names":[],"mappings":";AAGA,OAAO,EAAE,eAAe,EAAE,MAAM,qDAAqD,CAAC;AAItF,oBAAY,eAAe,GAAG;IAC5B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,KAAK,CAAC,EAAE,eAAe,EAAE,CAAC;IAC1B,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,eAAe,KAAK,IAAI,CAAC;CAChD,CAAC;AAEF,eAAO,MAAM,UAAU,wCAIpB,eAAe,gBA0CjB,CAAC"}
+{"version":3,"file":"SelectMenu.d.ts","sourceRoot":"","sources":["../../../../src/sales/manual-booking/select-menu/SelectMenu.tsx"],"names":[],"mappings":";AAGA,OAAO,EAAE,eAAe,EAAE,MAAM,qDAAqD,CAAC;AAItF,oBAAY,eAAe,GAAG;IAC5B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,KAAK,CAAC,EAAE,eAAe,EAAE,CAAC;IAC1B,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,eAAe,KAAK,IAAI,CAAC;CAChD,CAAC;AAEF,eAAO,MAAM,UAAU,wCAIpB,eAAe,gBA4CjB,CAAC"}

package/dist/styles/snippet-templates/SnippetTemplateCard.scss

@@ -45,6 +45,22 @@ $snippet-template-card-button-transition: $product-set-card-transition !default;
     display: flex;
     justify-content: space-between;
     align-items: center;
+
+    a {
+      white-space: nowrap;
+      display: inline-block;
+      text-overflow: ellipsis;
+      width: 85%;
+      overflow: hidden;
+    }
+  }
+
+  .snippet-template-card-subject {
+    white-space: nowrap;
+    display: inline-block;
+    text-overflow: ellipsis;
+    width: 100%;
+    overflow: hidden;
   }
 
   .snippet-template-card-button {

package/dist/typeahead/Typeahead.d.ts

@@ -1,24 +1,17 @@
 /// <reference types="react" />
 export declare type TypeaheadOptions = {
-    id: number;
-    value: string;
+    id: number | string;
+    value: any;
     label: string;
 };
 export interface TypeaheadProps {
     options: TypeaheadOptions[];
-    setValue: (value: string | any) => void;
     placeholder: string;
     isRequired?: boolean;
     name: string;
+    isMultipleChoise?: boolean;
     noOptionsMessage: string;
 }
-declare function Typeahead({ options, setValue, placeholder, isRequired, name, noOptionsMessage, }: {
-    options: any;
-    setValue: any;
-    placeholder: any;
-    isRequired?: boolean;
-    name?: string;
-    noOptionsMessage?: string;
-}): JSX.Element;
+declare function Typeahead({ options, placeholder, isRequired, isMultipleChoise, name, noOptionsMessage, }: TypeaheadProps): JSX.Element;
 export { Typeahead };
 //# sourceMappingURL=Typeahead.d.ts.map

package/dist/typeahead/Typeahead.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Typeahead.d.ts","sourceRoot":"","sources":["../../src/typeahead/Typeahead.tsx"],"names":[],"mappings":";AAIA,oBAAY,gBAAgB,GAAG;IAC7B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,MAAM,WAAW,cAAc;IAC7B,OAAO,EAAE,gBAAgB,EAAE,CAAC;IAC5B,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,GAAG,KAAK,IAAI,CAAC;IACxC,WAAW,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,IAAI,EAAE,MAAM,CAAC;IACb,gBAAgB,EAAE,MAAM,CAAC;CAC1B;AAED,iBAAS,SAAS,CAAC,EACjB,OAAO,EACP,QAAQ,EACR,WAAW,EACX,UAAkB,EAClB,IAAS,EACT,gBAAqB,GACtB;;;;;;;CAAA,eA2BA;AAED,OAAO,EAAE,SAAS,EAAE,CAAC"}
+{"version":3,"file":"Typeahead.d.ts","sourceRoot":"","sources":["../../src/typeahead/Typeahead.tsx"],"names":[],"mappings":";AAIA,oBAAY,gBAAgB,GAAG;IAC7B,EAAE,EAAE,MAAM,GAAG,MAAM,CAAC;IACpB,KAAK,EAAE,GAAG,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,MAAM,WAAW,cAAc;IAC7B,OAAO,EAAE,gBAAgB,EAAE,CAAC;IAC5B,WAAW,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,IAAI,EAAE,MAAM,CAAC;IACb,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,gBAAgB,EAAE,MAAM,CAAC;CAC1B;AAED,iBAAS,SAAS,CAAC,EACjB,OAAO,EACP,WAAW,EACX,UAAkB,EAClB,gBAAgB,EAChB,IAAS,EACT,gBAAqB,GACtB,EAAE,cAAc,eAwBhB;AAED,OAAO,EAAE,SAAS,EAAE,CAAC"}

package/dist/typeahead/Typeahead.js

@@ -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 n=e(require("react")),r=require("react-hook-form"),t=e(require("react-select"));exports.Typeahead=function(e){var o=e.options,a=e.setValue,c=e.placeholder,l=e.isRequired,u=void 0!==l&&l,i=e.name,s=void 0===i?"":i,d=e.noOptionsMessage,p=void 0===d?"":d,f=r.useForm({mode:"onChange"}).control;return n.createElement(n.Fragment,null,n.createElement(r.Controller,{name:"".concat(s,".").concat("id"),control:f,rules:{required:u},render:function(e){var r=e.field;return n.createElement(t,{placeholder:c,value:r.value,onChange:function(e){a("".concat(s,".").concat("id"),e.id),r.onChange(e)},options:o,noOptionsMessage:function(){return n.createElement("span",null,p)}})}}))};
+"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var r=e(require("react")),t=require("react-hook-form"),n=e(require("react-select"));exports.Typeahead=function(e){var o=e.options,l=e.placeholder,a=e.isRequired,i=void 0!==a&&a,u=e.isMultipleChoise,s=e.name,c=void 0===s?"":s,d=e.noOptionsMessage,p=void 0===d?"":d,f=t.useFormContext().control;return r.createElement(r.Fragment,null,r.createElement(t.Controller,{name:c,control:f,rules:{required:i},render:function(e){var t=e.field;return r.createElement(n,{placeholder:l,value:t.value,isMulti:u,onChange:function(e){t.onChange(e)},options:o,noOptionsMessage:function(){return r.createElement("span",null,p)}})}}))};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@licklist/design",
-  "version": "0.44.505",
+  "version": "0.44.506",
   "repository": {
     "type": "git",
     "url": "git+ssh://git@bitbucket.org/artelogicsoft/licklist_design.git"

package/src/events/edit-event-modal/component/SelectEventProductSet/component/EditEventProductSet.tsx

@@ -11,6 +11,7 @@ import { ProductSetControl } from "../../../../../product-set";
 import { ProductSetContextProvider } from "../../../../../product-set/form/context";
 import { getDefaultValues } from "../../../utils/getDefaultProductSet";
 import { EditEventFormValues } from "../../EditEventForm";
+import { getFilteredTemplates } from "../../../../../product-set/utils/index";
 
 export const DEFAULT_FEE = 5;
 
@@ -109,8 +110,16 @@ export const EditEventProductSet = ({
       <FormProvider {...form}>
         <Form className="mt-6">
           <ProductSetControl
-            emailTemplates={emailTemplates}
-            smsTemplates={smsTemplates}
+            smsTemplates={getFilteredTemplates(
+              smsTemplates,
+              formValues?.smsTemplates
+            )}
+            emailTemplates={getFilteredTemplates(
+              emailTemplates,
+              formValues?.emailTemplates
+            )}
+            showEmailTemplate={!!emailTemplates}
+            showSmsTemplate={!!smsTemplates}
             fieldSets={fieldSetsData}
             isLoading={isLoading}
             companyName={selectedCompany?.title}

package/src/events/edit-event-modal/utils/getDefaultProductSet.ts

@@ -3,6 +3,7 @@ import {
   DEFAULT_PRODUCT_SET_TYPE,
   ProductSet,
 } from "@licklist/core/dist/DataMapper/Product/ProductSetDataMapper";
+import { getFilteredTemplates } from "../../../product-set/utils/index";
 import { ProductSetFormValues } from "../../../product-set/form/ProductSetForm";
 
 export const getDefaultValues = (
@@ -17,13 +18,13 @@ export const getDefaultValues = (
   thankYouPageUrl: productSet?.thankYouPageUrl ?? "",
   isDefault: productSet?.isDefault ?? false,
   fieldSetId: productSet?.fieldSetId,
-  emailTemplateId:
+  emailTemplates:
     productSet?.mailTemplates && productSet?.mailTemplates?.length > 0
-      ? productSet?.mailTemplates[0].notification.id
+      ? getFilteredTemplates(productSet?.mailTemplates)
       : undefined,
-  smsTemplateId:
+  smsTemplates:
     productSet?.smsTemplates && productSet?.smsTemplates?.length > 0
-      ? productSet?.smsTemplates[0].notification.id
+      ? getFilteredTemplates(productSet?.mailTemplates)
       : undefined,
   steps:
     productSet?.steps?.map(({ productCategories, ...step }) => ({

package/src/notification/email-template/card/EmailTemplateCard.stories.tsx

@@ -14,8 +14,10 @@ export const Default: Story<EmailTemplateCardProps> = (args) => (
 
 Default.args = {
   href: "#",
-  name: "Default Email Template",
-  subject: "Confirmation",
+  name: "Default Email Template with very long name",
+  subject: "Confirmation with looong subject text",
   hasPermission: true,
   isDefault: true,
+  templateType: "confirmation",
+  isActive: true,
 };

package/src/notification/email-template/card/EmailTemplateCard.tsx

@@ -2,16 +2,19 @@ import React from "react";
 import { Link } from "react-router-dom";
 import { HasPermissionProp } from "@licklist/plugins/dist/types/permission/Permission";
 import { useTranslation } from "react-i18next";
-
+import { NotificationType } from "@licklist/core/dist/DataMapper/Notification/NotificationTypeDataMapper";
 import { ConfirmModal, ConfirmModalType } from "../../../modals";
 import { Icon } from "../../../static";
+import { useTranslatedParameters } from "../../hooks/useTranslatedParameters";
 
 export interface EmailTemplateCardProps extends HasPermissionProp {
   name: string;
   subject: string;
   href: string;
   isDefault: boolean;
+  isActive: boolean;
   onRemove: () => void;
+  type: NotificationType;
 }
 
 export function EmailTemplateCard({
@@ -20,10 +23,14 @@ export function EmailTemplateCard({
   subject,
   onRemove,
   isDefault = false,
+  isActive = false,
   hasPermission = true,
+  type,
 }: EmailTemplateCardProps) {
   const { t } = useTranslation(["Design"]);
 
+  const texts = useTranslatedParameters({ isDefault, isActive });
+
   return (
     <>
       <div className="snippet-template-card">
@@ -53,8 +60,13 @@ export function EmailTemplateCard({
           )}
         </div>
         <div className={`mt-${isDefault ? "3" : "4"}`}>
-          {Boolean(isDefault) && <p className="mb-1">{t("Design:default")}</p>}
-          <span>{subject}</span>
+          {!!texts.length && <p className="mb-1">{texts}</p>}
+          <div className="d-flex flex-column">
+            <span className="snippet-template-card-subject">{subject}</span>
+            <p className="mb-0">
+              {t(`Design:type`)}:&nbsp;{t(`Design:${type}`)}
+            </p>
+          </div>
         </div>
       </div>
     </>

package/src/notification/email-template/control/EmailTemplateControl.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable react/display-name */
 import React, { useState, useEffect } from "react";
 import { Col, Row, Form } from "react-bootstrap";
 import { useFormContext } from "react-hook-form";
@@ -16,6 +15,7 @@ import {
   PERMANENT_IMAGE_TYPE_TEMP,
 } from "@licklist/core/dist/DataMapper/Media/UploadPermanentImageDataMapper";
 
+import { NotificationType } from "@licklist/core/dist/DataMapper/Notification/NotificationTypeDataMapper";
 import { FileUpload } from "../../../file-upload";
 import { EmailTemplateValues } from "../form";
 
@@ -26,6 +26,8 @@ export interface EmailTemplateControlProps {
   setIsLoading: (isLoading: boolean) => void;
   meta: string;
   defaultAttachments?: Attachment[];
+  notificationTypes?: NotificationType[];
+  getDefaultTemplateMetaByType?: (type?: NotificationType | null) => string;
 }
 
 export const EmailTemplateControl = React.forwardRef(
@@ -35,6 +37,8 @@ export const EmailTemplateControl = React.forwardRef(
       meta,
       options = [],
       defaultAttachments = [],
+      notificationTypes = [],
+      getDefaultTemplateMetaByType,
     }: EmailTemplateControlProps,
     ref: any
   ) => {
@@ -48,6 +52,8 @@ export const EmailTemplateControl = React.forwardRef(
       setValue,
       formState: { errors },
       getValues,
+      watch,
+      reset,
     } = useFormContext<EmailTemplateValues>();
     const [isIncludePDF, setIsIncludePDF] = useState(false);
 
@@ -64,12 +70,29 @@ export const EmailTemplateControl = React.forwardRef(
       handlePermanentImageUploading,
     } = usePermanentImage();
 
+    const type = watch("type");
+    const id = watch("id");
+
+    useEffect(() => {
+      if (id || !getDefaultTemplateMetaByType || !type) return;
+
+      const formValues = getValues();
+
+      const nextMeta = getDefaultTemplateMetaByType(type);
+
+      reset({ ...formValues, meta: nextMeta });
+
+      ref.current?.loadDesign(JSON.parse(nextMeta));
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [type]);
+
     useEffect(() => {
       setValue("attachmentMetadata", attachments);
     }, [attachments, setValue]);
 
     useEffect(() => {
       if (!permanentImages.length) return;
+
       setValue("imagesMetadata", permanentImages);
     }, [permanentImages, setValue]);
 
@@ -85,13 +108,15 @@ export const EmailTemplateControl = React.forwardRef(
     }, [defaultAttachments]);
 
     useEffect(() => {
-      if (!options.length) return;
+      if (!options?.length) return;
+
       const fileSelectorOptions = options.find(
         (option) => option.type === OPTION_TYPE.files_selector
       );
-      if (fileSelectorOptions.selectedValue) {
-        setIsIncludePDF(true);
-      }
+
+      if (!fileSelectorOptions?.selectedValue) return;
+
+      setIsIncludePDF(true);
     }, [options]);
 
     const handleDeleteEmailImage = (content) => {
@@ -175,6 +200,42 @@ export const EmailTemplateControl = React.forwardRef(
 
     return (
       <>
+        <Row>
+          <Form.Group
+            as={Col}
+            controlId="type"
+            xs
+            sm={12}
+            md={8}
+            lg={10}
+            xl={12}
+          >
+            <Form.Label>{t("type")}</Form.Label>
+            <Form.Control
+              as="select"
+              {...register("type", {
+                required: t("Validation:fieldRequired", {
+                  attribute: t("type"),
+                }) as string,
+              })}
+              name="type"
+              required
+              isInvalid={Boolean(errors.type)}
+              placeholder={t("Design:type")}
+              disabled={!!id}
+            >
+              <option value="">{t("Design:choose")}</option>
+              {notificationTypes.map((key) => (
+                <option key={key} value={key}>
+                  {t(`Design:${key}`)}
+                </option>
+              ))}
+            </Form.Control>
+            <Form.Control.Feedback type="invalid">
+              {errors.type?.message}
+            </Form.Control.Feedback>
+          </Form.Group>
+        </Row>
         <Row>
           <Form.Group
             as={Col}
@@ -279,7 +340,7 @@ export const EmailTemplateControl = React.forwardRef(
             isLoading={isAttachmentLoading}
           />
         </Row>
-        {options.length > 0 && (
+        {options?.length > 0 && (
           <Row>
             <Form.Group as={Col}>
               {options.map((option) => {
@@ -347,6 +408,27 @@ export const EmailTemplateControl = React.forwardRef(
                     </>
                   );
                 }
+
+                if (option.type === OPTION_TYPE.days_reminder) {
+                  return (
+                    <>
+                      <Form.Label className="mt-4">
+                        {t(`Design:${option.name}`)}
+                      </Form.Label>
+                      <Form.Control
+                        {...register(
+                          `templateOptionValues.${option?.id}.value` as any
+                        )}
+                        type="number"
+                        placeholder={t(`Design:${option.name}`)}
+                        id={option.name + option.id}
+                        defaultValue={option.selectedValue || ""}
+                      />
+                      <Form.Text>{option.description}</Form.Text>
+                    </>
+                  );
+                }
+
                 return null;
               })}
             </Form.Group>
@@ -356,3 +438,5 @@ export const EmailTemplateControl = React.forwardRef(
     );
   }
 );
+
+EmailTemplateControl.displayName = "EmailTemplateControl";

package/src/notification/email-template/form/EmailTemplateForm.stories.tsx

@@ -185,6 +185,7 @@ Default.args = {
       notificationType: "confirmation",
       type: "checkbox",
       defaultValue: "true",
+      descrption: "",
     },
     {
       id: 12,
@@ -192,6 +193,7 @@ Default.args = {
       notificationType: "confirmation",
       type: "checkbox",
       defaultValue: "false",
+      descrption: "",
     },
     {
       selectedValue: "invoice",
@@ -201,6 +203,17 @@ Default.args = {
       type: "files_selector",
       defaultValue:
         '{"confirmation":"Confirmation / Function Sheet","invoice":"Invoice"}',
+      descrption: "",
+    },
+    {
+      id: 13,
+      name: "days_reminder",
+      notificationType: "confirmation",
+      type: "days_reminder",
+      defaultValue: "",
+      description: `N.B. Add positive integer for days before the event, or negative for days after the event. 
+        E.g. if you want this remainder to be send 2 days before the event, enter 2. 
+        If you want this to be send 3 days after the event enter -3.`,
     },
   ],
   defaultValues: {
@@ -219,6 +232,13 @@ Default.args = {
         attachableType: "mail",
       },
     ],
+    type: "confirmation",
+    notificationTypes: [
+      "confirmation",
+      "paymentLink",
+      "afterBooking",
+      "preliminaryMail",
+    ],
   },
 };
 
@@ -248,10 +268,24 @@ ServerErrors.args = {
     body: "",
     meta: JSON.stringify(DefaultEmailTemplate),
   },
+  type: "confirmation",
+  notificationTypes: [
+    "confirmation",
+    "paymentLink",
+    "afterBooking",
+    "preliminaryMail",
+  ],
 };
 
 Empty.args = {
   onSubmit: (data) => console.log(data),
   isLoading: true,
   placeholders: [],
+  type: "confirmation",
+  notificationTypes: [
+    "confirmation",
+    "paymentLink",
+    "afterBooking",
+    "preliminaryMail",
+  ],
 };

package/src/notification/email-template/form/EmailTemplateForm.tsx

@@ -13,12 +13,13 @@ import { ServerError } from "@licklist/plugins/dist/hooks/Api/useHttpQuery";
 import FormErrorService from "@licklist/plugins/dist/services/Form/FormErrorService";
 import { AttachmentsWithHash } from "@licklist/plugins/dist/hooks/Media/useAttachments";
 import { UploadPermanentImage } from "@licklist/core/dist/DataMapper/Media/UploadPermanentImageDataMapper";
-
+import { NotificationType } from "@licklist/core/dist/DataMapper/Notification/NotificationTypeDataMapper";
 import { NotificationPlaceholders } from "../../components/NotificationPlaceholders";
 import { EmailTemplateControl } from "../control/EmailTemplateControl";
 import { BlockLoader } from "../../../static";
 
 export interface EmailTemplateValues extends FormValues {
+  id?: number | string;
   name: string;
   subject: string;
   isActive: boolean;
@@ -29,6 +30,7 @@ export interface EmailTemplateValues extends FormValues {
   attachments?: Attachment[];
   templateOptionValues?: TemplateOptionValue[];
   imagesMetadata?: UploadPermanentImage[];
+  type?: NotificationType;
 }
 
 export interface EmailTemplateProps extends HasPermissionProp {
@@ -39,9 +41,12 @@ export interface EmailTemplateProps extends HasPermissionProp {
   placeholders?: NotificationPlaceholder[];
   options?: TemplateOption[];
   serverErrors?: ServerError;
+  notificationTypes?: NotificationType[];
+  getDefaultTemplateMetaByType?: (type?: NotificationType | null) => string;
+  onTypeChange?: (type?: NotificationType | null) => void;
 }
 
-export function EmailTemplateForm({
+export const EmailTemplateForm = ({
   defaultValues,
   onSubmitSave,
   onSubmitSaveAndSend,
@@ -49,7 +54,10 @@ export function EmailTemplateForm({
   placeholders = [],
   options = [],
   serverErrors,
-}: EmailTemplateProps) {
+  notificationTypes = [],
+  getDefaultTemplateMetaByType,
+  onTypeChange,
+}: EmailTemplateProps) => {
   const { t } = useTranslation("Design");
   const [isLoading, setIsLoading] = useState(false);
   const emailEditorRef = useRef(null);
@@ -59,12 +67,20 @@ export function EmailTemplateForm({
     defaultValues,
   });
 
-  const { setError } = form;
+  const { setError, watch } = form;
+  const type = watch("type");
 
   useEffect(() => {
     FormErrorService.handleServerErrors(serverErrors, setError);
   }, [serverErrors, setError]);
 
+  useEffect(() => {
+    if (!onTypeChange) return;
+
+    onTypeChange(type);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [type]);
+
   return (
     <FormProvider {...form}>
       {isLoading && <BlockLoader />}
@@ -81,6 +97,8 @@ export function EmailTemplateForm({
           meta={defaultValues?.meta || null}
           defaultAttachments={defaultValues?.attachments || []}
           options={options}
+          notificationTypes={notificationTypes}
+          getDefaultTemplateMetaByType={getDefaultTemplateMetaByType}
         />
         <NotificationPlaceholders placeholders={placeholders} />
         {/* update email template */}
@@ -106,4 +124,4 @@ export function EmailTemplateForm({
       </Form>
     </FormProvider>
   );
-}
+};

package/src/notification/hooks/useTranslatedParameters.ts

@@ -0,0 +1,27 @@
+import { useTranslation } from "react-i18next";
+
+type UseTranslatedParametersProps = {
+  isDefault: boolean;
+  isActive: boolean;
+};
+
+export const useTranslatedParameters = ({
+  isActive,
+  isDefault,
+}: UseTranslatedParametersProps) => {
+  const { t } = useTranslation(["Design"]);
+
+  const translatedParameters = () => {
+    const texts: string[] = [];
+    if (isDefault) {
+      texts.push(t("Design:default"));
+    }
+    if (isActive) {
+      texts.push(t("Design:active"));
+    }
+
+    return texts.join(", ");
+  };
+
+  return translatedParameters();
+};

package/src/notification/sms-template/card/SmsTemplateCard.stories.tsx

@@ -14,7 +14,9 @@ export const Default: Story<SmsTemplateCardProps> = (args) => (
 
 Default.args = {
   href: "#",
-  name: "Default Sms Template",
+  name: "Default Sms Template with Long name",
   hasPermission: true,
   isDefault: true,
+  templateType: "confirmation",
+  isActive: true,
 };