@sikka/hawa 0.0.7 → 0.0.8

package/es/index.es.js

@@ -1 +1 @@
-import{createContext as e,useContext as r,useState as t}from"react";import o from"@mui/material/Button";import"@mui/material/Tooltip";import n from"prop-types";import{jsx as a,jsxs as i,Fragment as l}from"react/jsx-runtime";import{darken as d,styled as s}from"@mui/material/styles";import"@mui/material/FormControlLabel";import"@mui/material/Checkbox";import"@mui/material";import"@mui/material/TextField";import u from"@mui/material/InputBase";import c from"@mui/material/Typography";import m from"@mui/material/InputLabel";import{useFormContext as p,Controller as h,useForm as g,FormProvider as b}from"react-hook-form";import"@mui/icons-material";import f from"@mui/material/Alert";import y from"@mui/material/AlertTitle";import w from"@mui/icons-material/GitHub";import v from"@mui/icons-material/Twitter";import x from"@mui/icons-material/AccountBalanceWallet";import C from"@mui/material/InputAdornment";import k from"@mui/icons-material/HttpsOutlined";import T from"@mui/icons-material/MailOutline";import S from"@mui/icons-material/PermIdentityOutlined";function P(e,r){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);r&&(o=o.filter((function(r){return Object.getOwnPropertyDescriptor(e,r).enumerable}))),t.push.apply(t,o)}return t}function L(e){for(var r=1;r<arguments.length;r++){var t=null!=arguments[r]?arguments[r]:{};r%2?P(Object(t),!0).forEach((function(r){A(e,r,t[r])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):P(Object(t)).forEach((function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(t,r))}))}return e}function A(e,r,t){return r in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}function W(e,r){return function(e){if(Array.isArray(e))return e}(e)||function(e,r){var t=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null==t)return;var o,n,a=[],i=!0,l=!1;try{for(t=t.call(e);!(i=(o=t.next()).done)&&(a.push(o.value),!r||a.length!==r);i=!0);}catch(e){l=!0,n=e}finally{try{i||null==t.return||t.return()}finally{if(l)throw n}}return a}(e,r)||function(e,r){if(!e)return;if("string"==typeof e)return R(e,r);var t=Object.prototype.toString.call(e).slice(8,-1);"Object"===t&&e.constructor&&(t=e.constructor.name);if("Map"===t||"Set"===t)return Array.from(e);if("Arguments"===t||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t))return R(e,r)}(e,r)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function R(e,r){(null==r||r>e.length)&&(r=e.length);for(var t=0,o=new Array(r);t<r;t++)o[t]=e[t];return o}var B=e({allPrimaryBG:"#f90900",allPrimaryAction:"#138A36",allBorderRadius:10,borderRadius:10,primaryColor:"blue",secondaryColor:"grey",primaryActionColor:"grey",secondaryActionColor:"#4cc9f0",layoutColor:"#d3d4d9",textColor:"black",inputColor:"white",lightBackground:"#FBF5F3",darkBackground:"#0F0E0E",testcolor:"green",margins:10,paddings:10,typography:{primary:{color:"black"},secondary:{color:"white"}},logoButton:{primary:{borderRadius:10,backgroundColor:"#B20D30",marginTop:10,padding:10,border:"1px solid #ced4da",height:50,"&:focus":{borderColor:"#B20D30"}},secondary:{borderRadius:10,backgroundColor:"#f90900",marginTop:10,padding:10,border:"1px solid #ced4da",height:50,"&:focus":{borderColor:"green"}}},actionButton:{primary:{borderRadius:10,backgroundColor:"#B20D30",color:"white",margin:10,padding:10,border:"1px solid #ced4da",fontSize:16,height:50,"&:focus":{borderColor:"red"}},secondary:{borderRadius:10,margin:10,padding:10,backgroundColor:"#FF8811",color:"black"}},layout:{primary:{backgroundColor:"#d3d4d9",color:"black",margin:10,padding:10,borderRadius:10},secondary:{backgroundColor:"#001E3C",color:"white",margin:10,padding:10,borderRadius:10}},inputFields:{primary:{backgroundColor:"white",borderRadius:10,"&:focus":{borderColor:"red",borderWidth:1,border:"1px solid black"},"&:hover":{borderColor:"red",borderWidth:1,border:"1px solid black"}},secondary:{backgroundColor:"white",borderRadius:10}},alerts:{primary:{marginBottom:10,padding:10,borderRadius:10},secondary:{marginBottom:10,padding:10,borderRadius:10}},settingsRow:{primary:{display:"flex",flexDirection:"row",justifyContent:"space-between",alignItems:"center",backgroundColor:"#F5F5F5",margin:0,padding:10,borderRadius:10},secondary:{display:"flex",flexDirection:"row",justifyContent:"space-between",alignItems:"center",backgroundColor:"blue",margin:0,padding:5,borderRadius:10}},radioSelector:{primary:{padding:10,borderRadius:10},secondary:{padding:10,borderRadius:10}}});n.string,n.bool,n.bool,n.bool;var F=function(e){var t,n=r(B),i=n.hawaTheme,l=n.themeName,u=Object.keys(i.actionButton).find((function(e){return e.toLowerCase()===(null==l?void 0:l.toLowerCase())})),c={};u?c=L(L({},i.actionButton[u]),{},{margin:e.last?0:i.actionButton[u].margin,marginTop:e.last?2*i.actionButton[u].margin:0,"&:hover":{backgroundColor:d(null===(t=i.actionButton[u])||void 0===t?void 0:t.backgroundColor,.1)}}):c={backgroundColor:"black",color:"white",padding:10,marginTop:e.last?20:0,borderRadius:0};var m=s(o)((function(e){return e.theme,L({},c)}));return a(m,L(L({},e),{},{children:e.text}))},O=function(e){var t=r(B),o=t.hawaTheme,n=t.themeName,i={},l=Object.keys(o.layout).find((function(e){return e.toLowerCase()===(null==n?void 0:n.toLowerCase())}));return i=l?L(L({display:"flex",flexDirection:e.horizontal?"row":"column"},o.layout[l]),{},{backgroundColor:e.noColor?"none":o.layout[l].backgroundColor,padding:e.noPadding?0:o.layout[l].padding,margin:e.noMargin?0:o.layout[l].margin,maxWidth:e.maxWidth}):{display:"flex",flexDirection:e.horizontal?"row":"column",color:"white",marginTop:e.last?20:0,backgroundColor:e.noColor?"none":"lightGrey",padding:e.noPadding?0:10,margin:e.noMargin?0:10,maxWidth:e.maxWidth,borderRadius:0},a("div",{style:i,children:e.children})};n.oneOf(["text","number","password"]),n.string;var q=function(e){var t=r(B),n=t.hawaTheme,i=t.themeName,l={},u=Object.keys(n.logoButton).find((function(e){return e.toLowerCase()===(null==i?void 0:i.toLowerCase())}));l=u?L(L({},n.logoButton[u]),{},{backgroundColor:"white","&:hover":{backgroundColor:d("#ffffff",.1)}}):{cursor:"pointer",display:"flex",flexDirection:"row",alignItems:"center",justifyContent:"center",marginTop:10,height:50,border:"1px solid #ced4da",backgroundColor:"white","&:hover":{backgroundColor:d("#ffffff",.1)}};var c=s(o)((function(e){return e.theme,L({},l)}));return a(c,L(L({},e),{},{children:e.children}))},z=function(e){var t=r(B),o=t.hawaTheme,n=t.themeName,i={},l=Object.keys(o.actionButton).find((function(e){return e.toLowerCase()===(null==n?void 0:n.toLowerCase())}));return i=l?{margin:15,marginRight:5,marginLeft:5,color:o.layout[l].color}:{margin:15,marginRight:0,marginLeft:0,color:"black"},a(m,{style:i,children:a("div",{style:{fontSize:15},children:e.label})})},E=function(e){var t=p(),o=t.control,n=t.register,d=r(B),m=d.hawaTheme,g=d.themeName,b=Object.keys(m.inputFields).find((function(e){return e.toLowerCase()===(null==g?void 0:g.toLowerCase())})),f={};f=b?L(L({},m.inputFields[b]),{},{margin:e.last?0:m.inputFields[b].margin,marginTop:e.last?2*m.inputFields[b].margin:0}):{backgroundColor:"white"};var y=s(u)((function(r){return L({"& .MuiInputBase-input":{transition:r.theme.transitions.create(["border-color","background-color","box-shadow"])},border:"1px solid #ced4da",fontSize:16,padding:"10px 12px",marginBottom:e.helperText?5:0,paddingLeft:10,paddingRight:10},f)}));return a(h,{render:function(r){var t;return r.field,i(l,{children:[e.inputLabel&&a(z,{label:e.inputLabel}),a(y,L(L({fullWidth:!0,type:null!==(t=e.type)&&void 0!==t?t:"text",defaultValue:e.defaultValue&&"",value:e.value&&""},e),n(e.name))),a(c,{variant:"caption",style:{margin:5,marginBottom:0,color:"red"},children:e.helperText})]})},name:e.name,rules:e.rules,control:o,shouldUnregister:e.shouldUnregister})};E.propTypes={type:n.oneOf(["text","number","password"]),helperText:n.string};var M=function(e){var t=r(B),o=t.hawaTheme,n=t.themeName,i=Object.keys(o.typography).find((function(e){return e.toLowerCase()===(null==n?void 0:n.toLowerCase())})),l={};l=i?L({},o.typography[i]):{color:"black"};var d=s(c)((function(e){return e.theme,L({},l)}));return a(d,L(L({},e),{},{children:e.children}))},j=function(e){var t=r(B),o=t.hawaTheme,n=t.themeName,l=Object.keys(o.alerts).find((function(e){return e.toLowerCase()===(null==n?void 0:n.toLowerCase())})),d={};d=l?L({},o.alerts[l]):{marginBottom:10};var u=s(f)((function(e){return e.theme,L({},d)}));return i(u,L(L({},e),{},{children:[e.title&&a(y,{children:e.title}),e.text]}))},I=function(e){return i(q,L(L({},e),{},{children:[a("img",{src:"https://upload.wikimedia.org/wikipedia/commons/5/53/Google_%22G%22_Logo.svg"}),a("div",{style:{width:10}}),a("p",{style:{color:"black",fontSize:14,textAlign:"center",letterSpacing:.4,fontFamily:"Roboto",fontWeight:500},children:e.buttonText})]}))},N=function(e){return i(q,L(L({},e),{},{children:[a(w,{}),a("div",{style:{width:10}}),a("p",{style:{color:"black",fontSize:14,textAlign:"center",letterSpacing:.4,fontFamily:"Roboto",fontWeight:500},children:e.buttonText})]}))},G=function(e){return i(q,L(L({},e),{},{children:[a(v,{}),a("div",{style:{width:10}}),a("p",{style:{color:"black",fontSize:14,textAlign:"center",letterSpacing:.4,fontFamily:"Roboto",fontWeight:500},children:e.buttonText})]}))},D=function(e){return i(q,L(L({},e),{},{children:[a("img",{src:"https://sikka-images.s3.ap-southeast-1.amazonaws.com/payments/visa-master.png",height:30})," ",a("div",{style:{width:10}}),a("p",{style:{color:"black",fontSize:14,textAlign:"center",letterSpacing:.4,fontFamily:"Roboto",fontWeight:500},children:e.buttonText})]}))},V=function(e){return i(q,L(L({},e),{},{children:[a("img",{src:"https://sikka-images.s3.ap-southeast-1.amazonaws.com/payments/mada.png",height:20})," ",a("div",{style:{width:10}}),a("p",{style:{color:"black",fontSize:14,textAlign:"center",letterSpacing:.4,fontFamily:"Roboto",fontWeight:500},children:e.buttonText})]}))},U=function(e){return i(q,L(L({},e),{},{children:[a("img",{src:"https://sikka-images.s3.ap-southeast-1.amazonaws.com/payments/stc-pay.png",height:20}),a("div",{style:{width:10}}),a("p",{style:{color:"black",fontSize:14,textAlign:"center",letterSpacing:.4,fontFamily:"Roboto",fontWeight:500},children:e.buttonText})]}))},Z=function(e){return i(q,L(L({},e),{},{children:[a("img",{src:"https://sikka-images.s3.ap-southeast-1.amazonaws.com/payments/paypal.png",height:25})," ",a("div",{style:{width:10}}),a("p",{style:{color:"black",fontSize:14,textAlign:"center",letterSpacing:.4,fontFamily:"Roboto",fontWeight:500},children:e.buttonText})]}))},$=function(e){return i(q,L(L({},e),{},{children:[a("img",{src:"https://sikka-images.s3.ap-southeast-1.amazonaws.com/payments/apple-pay.png",height:40})," ",a("div",{style:{width:10}}),a("p",{style:{color:"black",fontSize:14,textAlign:"center",letterSpacing:.4,fontFamily:"Roboto",fontWeight:500},children:e.buttonText})]}))},H=function(e){return i(q,L(L({},e),{},{children:[a("img",{src:"https://sikka-images.s3.ap-southeast-1.amazonaws.com/payments/google-pay.png",height:20}),a("div",{style:{width:10}}),a("p",{style:{color:"black",fontSize:14,textAlign:"center",letterSpacing:.4,fontFamily:"Roboto",fontWeight:500},children:e.buttonText})]}))},_=function(e){return i(q,L(L({},e),{},{children:[a(x,{}),a("div",{style:{width:10}}),a("p",{style:{color:"black",fontSize:14,textAlign:"center",letterSpacing:.4,fontFamily:"Roboto",fontWeight:500},children:e.buttonText})]}))},J=function(e){var r,t,o,n,l=g(),d=l.formState.errors;return l.handleSubmit,a(O,{maxWidth:400,noMargin:!0,children:a(O,{noMargin:!0,noColor:!0,children:a(b,L(L({},l),{},{children:i("form",{children:[a(E,{type:"text",name:"fullName",inputLabel:"Full Name",placeholder:"Fulan AlFulani",rules:{required:"Email is required"},helperText:null===(r=d.fullName)||void 0===r?void 0:r.message}),a(E,{type:"text",name:"email",inputLabel:"New Email",placeholder:"Enter your new email",rules:{required:"Email is required"},helperText:null===(t=d.email)||void 0===t?void 0:t.message}),a(E,{type:"password",name:"password",inputLabel:"New password",placeholder:"Enter your new password",rules:{required:"Email is required"},helperText:null===(o=d.password)||void 0===o?void 0:o.message}),a(E,{type:"password",name:"confirmPassword",inputLabel:"Confirm new password",placeholder:"Confirm new password",rules:{required:"Email is required"},helperText:null===(n=d.confirmPassword)||void 0===n?void 0:n.message}),a(F,{fullWidth:!0,last:!0,text:"Update Account"})]})}))})})},K=function(e){return i(O,{maxWidth:400,children:[a(E,{type:"text",inputLabel:"First Name"}),a(E,{type:"text",inputLabel:"Last Name"}),a(E,{type:"email",inputLabel:"Email"}),a(E,{type:"password",inputLabel:"Password"}),a(F,{last:!0,text:"Update Account"})]})},Q=function(e){var r,o,n=W(t(""),2),l=n[0],d=n[1],s=W(t(""),2);s[0],s[1];var u=W(t(!1),2);u[0],u[1];var c=W(t(""),2);c[0],c[1];var m=W(t(!0),2);m[0],m[1];var p=g(),h=p.formState.errors,f=p.handleSubmit;return p.getValues,p.register,p.watch,p.reset,p.setValue,a(O,{maxWidth:400,noColor:!0,noMargin:!0,noPadding:!0,children:i(O,{noMargin:!0,children:[e.error&&a(j,{text:"This is a new password alert",severity:"error"}),a(b,L(L({},p),{},{children:i("form",{onSubmit:f(e.handleNewPassword),children:[a(E,{name:"password",type:"password",inputLabel:"Choose new password",placeholder:"Enter password",onChange:function(e){return d(e.target.value)},value:l,startAdornment:a(C,{position:"start",children:a(k,{})}),rules:{required:"Password is rquired"},helperText:null===(r=h.password)||void 0===r?void 0:r.message}),a(E,{name:"confirmPassword",type:"password",placeholder:"Confirm Password",inputLabel:"Confirm",startAdornment:a(C,{position:"start",children:a(k,{})}),rules:{required:"Password is rquired"},helperText:null===(o=h.confirmPassword)||void 0===o?void 0:o.message}),a(F,{fullWidth:!0,type:"submit",last:!0,text:"Reset Password"})]})}))]})})},X=function(e){var r,t=g(),o=t.formState.errors,n=t.handleSubmit;return t.getValues,t.register,t.watch,t.reset,t.setValue,a(O,{maxWidth:400,noColor:!0,noMargin:!0,noPadding:!0,children:i(O,{noMargin:!0,children:[e.error&&a(j,{text:"This is a reset password alert",severity:"error"}),a(b,L(L({},t),{},{children:i("form",{onSubmit:n(e.handleResetPassword),children:[a(E,{type:"text",name:"email",inputLabel:"Email",placeholder:"Enter your email",startAdornment:a(C,{position:"start",children:a(T,{})}),rules:{required:"Email is required",pattern:{value:/^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/,message:"Invalid email address"}},helperText:null===(r=o.email)||void 0===r?void 0:r.message}),a(F,{fullWidth:!0,last:!0,type:"submit",text:"Reset Password"})]})}))," "]})})},Y=function(e){var r,t,o,n=g(),l=n.formState.errors,d=n.handleSubmit;return n.getValues,n.register,n.watch,n.reset,n.setValue,i(O,{maxWidth:400,noColor:!0,noMargin:!0,noPadding:!0,children:[i(O,{noMargin:!0,children:[e.error&&a(j,{text:"This is a sign in alert",severity:"error"}),a(b,L(L({},n),{},{children:i("form",{onSubmit:d(e.handleSignUp),children:[a(E,{name:"fullName",placeholder:"Fulan AlFulani",type:"text",inputLabel:"Full Name",startAdornment:a(C,{position:"start",children:a(S,{})}),rules:{required:"Full name rquired"},helperText:null===(r=l.fullName)||void 0===r?void 0:r.message}),a(E,{type:"text",inputLabel:"Email",placeholder:"Enter your email",name:"email",startAdornment:a(C,{position:"start",children:a(T,{})}),rules:{required:"Email required",pattern:{value:/^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/,message:"Invalid email address"}},helperText:null===(t=l.email)||void 0===t?void 0:t.message}),a(E,{name:"password",placeholder:"Minimum 8 characters",type:"password",inputLabel:"Password",startAdornment:a(C,{position:"start",children:a(k,{})}),rules:{required:"Password rquired",minLength:{value:8,message:"Password too short"}},helperText:null===(o=l.password)||void 0===o?void 0:o.message}),a(F,{fullWidth:!0,type:"submit",text:"Sign Up",last:!0})]})}))]}),e.viaGoogle&&a(I,{buttonText:e.googleButtonLabel,handleClick:e.handleGoogleSignIn}),e.viaGithub&&a(N,{buttonText:e.githubButtonLabel,handleClick:e.handleGithubSignUp}),e.viaTwitter&&a(G,{buttonText:e.twitterButtonLabel,handleClick:e.handleTwitterSignIn})]})};Y.propTypes={theme:n.oneOf(["secondary","primary"])};var ee=function(e){var r,t,o=g(),n=o.formState.errors,l=o.handleSubmit;return i(O,{maxWidth:400,noColor:!0,noMargin:!0,noPadding:!0,children:[i(O,{noMargin:!0,children:[e.error&&a(j,{text:"This is a sign in alert",severity:"error"}),a(b,L(L({},o),{},{children:i("form",{onSubmit:l(e.handleSignIn),children:[a(E,{type:"text",name:"email",inputLabel:"Email",placeholder:"Enter your email",startAdornment:a(C,{position:"start",children:a(T,{})}),rules:{required:"Email is required",pattern:{value:/^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/,message:"Invalid email address"}},helperText:null===(r=n.email)||void 0===r?void 0:r.message}),a(E,{name:"password",placeholder:"Enter password",type:"password",inputLabel:"Password",startAdornment:a(C,{position:"start",children:a(k,{})}),rules:{required:"Password is rquired"},helperText:null===(t=n.password)||void 0===t?void 0:t.message}),a(F,{type:"submit",fullWidth:!0,last:"true",text:"Sign In"})]})}))]}),e.viaGoogle&&a(I,{buttonText:e.googleButtonLabel,handleClick:e.handleGoogleSignIn}),e.viaGithub&&a(N,{buttonText:e.githubButtonLabel,handleClick:e.handleGithubSignIn}),e.viaTwitter&&a(G,{buttonText:e.twitterButtonLabel,handleClick:e.handleTwitterSignIn})]})},re=function(e){return a(O,{maxWidth:400,noColor:!0,noMargin:!0,noPadding:!0,children:i(O,{noMargin:!0,children:[a(M,{align:"center",children:"Choose Payment Method"}),e.viaWallet&&a(_,{buttonText:e.walletLabel,onClick:e.handleWallet}),e.viaCreditCard&&a(D,{buttonText:e.visaMasterLabel,handleClick:e.handleCreditCard}),e.viaMada&&a(V,{buttonText:e.madaLabel,handleClick:e.handleMada}),e.viaSTCPay&&a(U,{buttonText:e.stcPayLabel,handleClick:e.handleSTCPay}),e.viaPayPal&&a(Z,{buttonText:e.paypalLabel,handleClick:e.handlePayPal}),e.viaGooglePay&&a(H,{buttonText:e.googlePayLabel,handleClick:e.handleGooglePay}),e.viaApplePay&&a($,{buttonText:e.applePayLabel,handleClick:e.handleApplePay})]})})};E.propTypes={theme:n.oneOf(["secondary","primary"]),viaApplePay:n.bool,viaGooglePay:n.bool,viaSTCPay:n.bool,viaCreditCard:n.bool,viaPayPal:n.bool,handleApplePay:n.func};var te=function(e){var r,t,o=g(),n=o.formState.errors,l=o.handleSubmit;return a(O,{maxWidth:400,noColor:!0,noMargin:!0,noPadding:!0,children:a(O,{noMargin:!0,children:a(b,L(L({},o),{},{children:i("form",{onSubmit:l(e.handle),children:[a(E,{name:"password",placeholder:"Enter password",type:"password",inputLabel:"Password",rules:{required:"Password is rquired"},helperText:null===(r=n.password)||void 0===r?void 0:r.message}),a(E,{name:"password",placeholder:"Enter password",type:"password",inputLabel:"Password",rules:{required:"Password is rquired"},helperText:null===(t=n.password)||void 0===t?void 0:t.message}),a(F,{last:!0,fullWidth:!0,text:"Sign In",onClick:e.handleSignIn})]})}))})})},oe=function(e){var r,o=W(t(0),2),n=o[0],l=o[1],d=g(),s=d.formState.errors,u=d.handleSubmit;return a(O,{maxWidth:400,noColor:!0,noMargin:!0,noPadding:!0,children:i(O,{noMargin:!0,children:[i(M,{variant:"h2",align:"center",children:[Number(n).toLocaleString("en")," ",a("span",{style:{fontSize:20,letterSpacing:1},children:e.currency})]}),a(b,L(L({},d),{},{children:i("form",{onChange:function(e){e.preventDefault(),l(d.getValues().amount)},style:{marginTop:10},onSubmit:u(e.handleChargeWallet),children:[a(E,{name:"amount",placeholder:"Enter amount",type:"number",value:n,rules:{required:"Password is rquired"},helperText:null===(r=s.amount)||void 0===r?void 0:r.message}),a(F,{last:!0,fullWidth:!0,text:"Charge Wallet",onClick:e.handleSignIn})]})}))]})})},ne=function(e){return a(O,{maxWidth:400,noColor:!0,noMargin:!0,noPadding:!0,children:i(O,{noMargin:!0,children:[a("div",{children:"Wallet Balance"}),a(F,{text:"Pay now"})]})})};export{oe as ChargeWalletForm,te as CreditCardForm,Q as NewPasswordForm,ne as PayWithWallet,X as ResetPasswordForm,re as SelectPayment,ee as SignInForm,Y as SignUpForm,J as UserProfile,K as UserSettings};
+import{createContext as e,useContext as r,useState as t}from"react";import o from"@mui/material/Button";import"@mui/material/Tooltip";import a from"prop-types";import{jsx as n,jsxs as i,Fragment as l}from"react/jsx-runtime";import{darken as d,styled as s}from"@mui/material/styles";import"@mui/material/FormControlLabel";import"@mui/material/Checkbox";import"@mui/material";import"@mui/material/TextField";import u from"@mui/material/Typography";import m from"@mui/icons-material/GitHub";import c from"@mui/icons-material/Twitter";import p from"@mui/icons-material/AccountBalanceWallet";import g from"@mui/material/InputBase";import h from"@mui/material/InputLabel";import{useFormContext as b,Controller as y,useForm as f,FormProvider as w}from"react-hook-form";import v from"@mui/material/Alert";import x from"@mui/material/AlertTitle";import C from"@mui/material/InputAdornment";import k from"@mui/icons-material/HttpsOutlined";import T from"@mui/icons-material/MailOutline";import P from"@mui/icons-material/PermIdentityOutlined";function L(e,r){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);r&&(o=o.filter((function(r){return Object.getOwnPropertyDescriptor(e,r).enumerable}))),t.push.apply(t,o)}return t}function S(e){for(var r=1;r<arguments.length;r++){var t=null!=arguments[r]?arguments[r]:{};r%2?L(Object(t),!0).forEach((function(r){A(e,r,t[r])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):L(Object(t)).forEach((function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(t,r))}))}return e}function A(e,r,t){return r in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}function B(e,r){return function(e){if(Array.isArray(e))return e}(e)||function(e,r){var t=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null==t)return;var o,a,n=[],i=!0,l=!1;try{for(t=t.call(e);!(i=(o=t.next()).done)&&(n.push(o.value),!r||n.length!==r);i=!0);}catch(e){l=!0,a=e}finally{try{i||null==t.return||t.return()}finally{if(l)throw a}}return n}(e,r)||function(e,r){if(!e)return;if("string"==typeof e)return O(e,r);var t=Object.prototype.toString.call(e).slice(8,-1);"Object"===t&&e.constructor&&(t=e.constructor.name);if("Map"===t||"Set"===t)return Array.from(e);if("Arguments"===t||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t))return O(e,r)}(e,r)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function O(e,r){(null==r||r>e.length)&&(r=e.length);for(var t=0,o=new Array(r);t<r;t++)o[t]=e[t];return o}var W=e({allPrimaryBG:"#f90900",allPrimaryAction:"#138A36",allBorderRadius:10,borderRadius:10,primaryColor:"blue",secondaryColor:"grey",primaryActionColor:"grey",secondaryActionColor:"#4cc9f0",layoutColor:"#d3d4d9",textColor:"black",inputColor:"white",lightBackground:"#FBF5F3",darkBackground:"#0F0E0E",testcolor:"green",margins:10,paddings:10,typography:{fontFamily:["IBMPlex"].join(","),primary:{color:"black"},secondary:{color:"white"}},logoButton:{primary:{borderRadius:10,backgroundColor:"#B20D30",marginTop:10,padding:30,paddingTop:0,paddingBottom:0,border:"1px solid #ced4da",height:50,"&:focus":{borderColor:"#B20D30"}},secondary:{borderRadius:10,backgroundColor:"#f90900",marginTop:10,padding:30,paddingTop:0,paddingBottom:0,border:"1px solid #ced4da",height:50,"&:focus":{borderColor:"green"}}},actionButton:{primary:{borderRadius:10,backgroundColor:"#B20D30",color:"white",margin:10,padding:10,border:"1px solid #ced4da",fontSize:16,height:50,"&:focus":{borderColor:"red"}},secondary:{borderRadius:10,margin:10,padding:10,backgroundColor:"#FF8811",color:"black"}},layout:{primary:{backgroundColor:"#d3d4d9",color:"black",margin:10,padding:10,borderRadius:10},secondary:{backgroundColor:"#001E3C",color:"white",margin:10,padding:10,borderRadius:10}},inputFields:{primary:{backgroundColor:"white",borderRadius:10,"&:focus":{borderColor:"red",borderWidth:1,border:"1px solid black"},"&:hover":{borderColor:"red",borderWidth:1,border:"1px solid black"}},secondary:{backgroundColor:"white",borderRadius:10}},alerts:{primary:{marginBottom:10,padding:10,borderRadius:10},secondary:{marginBottom:10,padding:10,borderRadius:10}},settingsRow:{primary:{display:"flex",flexDirection:"row",justifyContent:"space-between",alignItems:"center",backgroundColor:"#F5F5F5",margin:0,padding:10,borderRadius:10},secondary:{display:"flex",flexDirection:"row",justifyContent:"space-between",alignItems:"center",backgroundColor:"blue",margin:0,padding:5,borderRadius:10}},radioSelector:{primary:{padding:10,borderRadius:10},secondary:{padding:10,borderRadius:10}}});a.string,a.bool,a.bool,a.bool;var q=function(e){var t,a=r(W),i=a.hawaTheme,l=a.themeName,u=Object.keys(i.actionButton).find((function(e){return e.toLowerCase()===(null==l?void 0:l.toLowerCase())})),m={};u?m=S(S({},i.actionButton[u]),{},{margin:e.last?0:i.actionButton[u].margin,marginTop:e.last?2*i.actionButton[u].margin:0,"&:hover":{backgroundColor:d(null===(t=i.actionButton[u])||void 0===t?void 0:t.backgroundColor,.1)}}):m={backgroundColor:"black",color:"white",padding:10,marginTop:e.last?20:0,borderRadius:0};var c=s(o)((function(e){return e.theme,S({},m)}));return n(c,S(S({},e),{},{children:e.text}))},E=function(e){var t=r(W),o=t.hawaTheme,a=t.themeName,i={},l=Object.keys(o.layout).find((function(e){return e.toLowerCase()===(null==a?void 0:a.toLowerCase())}));return i=l?S(S({display:"flex",flexDirection:e.horizontal?"row":"column"},o.layout[l]),{},{backgroundColor:e.noColor?"none":o.layout[l].backgroundColor,padding:e.noPadding?0:o.layout[l].padding,margin:e.noMargin?0:o.layout[l].margin,maxWidth:e.maxWidth}):{display:"flex",flexDirection:e.horizontal?"row":"column",color:"white",marginTop:e.last?20:0,backgroundColor:e.noColor?"none":"lightGrey",padding:e.noPadding?0:10,margin:e.noMargin?0:10,maxWidth:e.maxWidth,borderRadius:0},n("div",{style:i,children:e.children})},M=function(e){var t=r(W),o=t.hawaTheme,a=t.themeName,i=Object.keys(o.typography).find((function(e){return e.toLowerCase()===(null==a?void 0:a.toLowerCase())})),l={};l=i?S({},o.typography[i]):{color:"black"};var d=s(u)((function(e){return e.theme,S({},l)}));return n(d,S(S({},e),{},{children:e.children}))};a.oneOf(["text","number","password"]),a.string;var j=function(e){var t,a=r(W),l=a.hawaTheme,u=a.themeName,g={},h=Object.keys(l.logoButton).find((function(e){return e.toLowerCase()===(null==u?void 0:u.toLowerCase())}));g=h?S(S({},l.logoButton[h]),{},{backgroundColor:"white","&:hover":{backgroundColor:d("#ffffff",.1)}}):{cursor:"pointer",display:"flex",flexDirection:"row",alignItems:"center",justifyContent:"center",marginTop:10,height:50,padding:30,paddingTop:0,paddingBottom:0,border:"1px solid #ced4da",backgroundColor:"white","&:hover":{backgroundColor:d("#ffffff",.1)}};var b=s(o)((function(e){return e.theme,S({},g)})),y="";switch(null===(t=e.logo)||void 0===t?void 0:t.toLowerCase()){case"google":y=n("img",{src:"https://upload.wikimedia.org/wikipedia/commons/5/53/Google_%22G%22_Logo.svg"});break;case"github":y=n(m,{});break;case"twitter":y=n(c,{});break;case"mada":y=n("img",{src:"https://sikka-images.s3.ap-southeast-1.amazonaws.com/payments/mada.png",height:20});break;case"stcpay":y=n("img",{src:"https://sikka-images.s3.ap-southeast-1.amazonaws.com/payments/stc-pay.png",height:20});break;case"visa/master":y=n("img",{src:"https://sikka-images.s3.ap-southeast-1.amazonaws.com/payments/visa-master.png",height:30});break;case"paypal":y=n("img",{src:"https://sikka-images.s3.ap-southeast-1.amazonaws.com/payments/paypal.png",height:25});break;case"googlepay":y=n("img",{src:"https://sikka-images.s3.ap-southeast-1.amazonaws.com/payments/google-pay.png",height:20});break;case"applepay":y=n("img",{src:"https://sikka-images.s3.ap-southeast-1.amazonaws.com/payments/apple-pay.png",height:40});break;case"wallet":y=n(p,{})}return i(b,S(S({},e),{},{children:[y,n("div",{style:{width:10}}),n("p",{style:{color:"black",fontSize:14,textAlign:"center",letterSpacing:.4,fontFamily:"Roboto",fontWeight:500},children:e.buttonText})]}))},F=function(e){var t=r(W),o=t.hawaTheme,a=t.themeName,i={},l=Object.keys(o.actionButton).find((function(e){return e.toLowerCase()===(null==a?void 0:a.toLowerCase())}));return i=l?{margin:15,marginRight:5,marginLeft:5,color:o.layout[l].color}:{margin:15,marginRight:0,marginLeft:0,color:"black"},n(h,{style:i,children:n("div",{style:{fontSize:15},children:e.label})})},I=function(e){var t=b(),o=t.control,a=t.register,d=r(W),m=d.hawaTheme,c=d.themeName,p=Object.keys(m.inputFields).find((function(e){return e.toLowerCase()===(null==c?void 0:c.toLowerCase())})),h={};h=p?S(S({},m.inputFields[p]),{},{margin:e.last?0:m.inputFields[p].margin,marginTop:e.last?2*m.inputFields[p].margin:0}):{backgroundColor:"white"};var f=s(g)((function(r){return S({"& .MuiInputBase-input":{transition:r.theme.transitions.create(["border-color","background-color","box-shadow"])},border:"1px solid #ced4da",fontSize:16,padding:"10px 12px",marginBottom:e.helperText?5:0,paddingLeft:10,paddingRight:10},h)}));return n(y,{render:function(r){var t;return r.field,i(l,{children:[e.inputLabel&&n(F,{label:e.inputLabel}),n(f,S(S({fullWidth:!0,type:null!==(t=e.type)&&void 0!==t?t:"text",defaultValue:e.defaultValue&&"",value:e.value&&""},e),a(e.name))),n(u,{variant:"caption",style:{margin:5,marginBottom:0,color:"red"},children:e.helperText})]})},name:e.name,rules:e.rules,control:o,shouldUnregister:e.shouldUnregister})};I.propTypes={type:a.oneOf(["text","number","password"]),helperText:a.string};var R=function(e){var t=r(W),o=t.hawaTheme,a=t.themeName,l=Object.keys(o.alerts).find((function(e){return e.toLowerCase()===(null==a?void 0:a.toLowerCase())})),d={};d=l?S({},o.alerts[l]):{marginBottom:10};var u=s(v)((function(e){return e.theme,S({},d)}));return i(u,S(S({},e),{},{children:[e.title&&n(x,{children:e.title}),e.text]}))},N=function(e){var r,t,o,a,l=f(),d=l.formState.errors;return l.handleSubmit,n(E,{maxWidth:400,noMargin:!0,children:n(E,{noMargin:!0,noColor:!0,children:n(w,S(S({},l),{},{children:i("form",{children:[n(I,{type:"text",name:"fullName",inputLabel:"Full Name",placeholder:"Fulan AlFulani",rules:{required:"Email is required"},helperText:null===(r=d.fullName)||void 0===r?void 0:r.message}),n(I,{type:"text",name:"email",inputLabel:"New Email",placeholder:"Enter your new email",rules:{required:"Email is required"},helperText:null===(t=d.email)||void 0===t?void 0:t.message}),n(I,{type:"password",name:"password",inputLabel:"New password",placeholder:"Enter your new password",rules:{required:"Email is required"},helperText:null===(o=d.password)||void 0===o?void 0:o.message}),n(I,{type:"password",name:"confirmPassword",inputLabel:"Confirm new password",placeholder:"Confirm new password",rules:{required:"Email is required"},helperText:null===(a=d.confirmPassword)||void 0===a?void 0:a.message}),n(q,{fullWidth:!0,last:!0,text:"Update Account"})]})}))})})},z=function(e){return i(E,{maxWidth:400,children:[n(I,{type:"text",inputLabel:"First Name"}),n(I,{type:"text",inputLabel:"Last Name"}),n(I,{type:"email",inputLabel:"Email"}),n(I,{type:"password",inputLabel:"Password"}),n(q,{last:!0,text:"Update Account"})]})},G=function(e){var r,o,a=B(t(""),2),l=a[0],d=a[1],s=B(t(""),2);s[0],s[1];var u=B(t(!1),2);u[0],u[1];var m=B(t(""),2);m[0],m[1];var c=B(t(!0),2);c[0],c[1];var p=f(),g=p.formState.errors,h=p.handleSubmit;return p.getValues,p.register,p.watch,p.reset,p.setValue,n(E,{maxWidth:400,noColor:!0,noMargin:!0,noPadding:!0,children:i(E,{noMargin:!0,children:[e.error&&n(R,{text:"This is a new password alert",severity:"error"}),e.passwordChanged?n(M,{style:{textAlign:"center",margin:5},children:"Your password has been changed, you'll be redirected to sign in page"}):n(w,S(S({},p),{},{children:i("form",{onSubmit:h(e.handleNewPassword),children:[n(I,{name:"password",type:"password",inputLabel:"Choose new password",placeholder:"Enter password",onChange:function(e){return d(e.target.value)},value:l,startAdornment:n(C,{position:"start",children:n(k,{})}),rules:{required:"Password is rquired"},helperText:null===(r=g.password)||void 0===r?void 0:r.message}),n(I,{name:"confirmPassword",type:"password",placeholder:"Confirm Password",inputLabel:"Confirm",startAdornment:n(C,{position:"start",children:n(k,{})}),rules:{required:"Password is rquired"},helperText:null===(o=g.confirmPassword)||void 0===o?void 0:o.message}),n(q,{fullWidth:!0,type:"submit",last:!0,text:"Reset Password"})]})}))]})})},D=function(e){var r,t=f(),o=t.formState.errors,a=t.handleSubmit;return t.getValues,t.register,t.watch,t.reset,t.setValue,n(E,{maxWidth:400,noColor:!0,noMargin:!0,noPadding:!0,children:i(E,{noMargin:!0,children:[e.error&&n(R,{text:"This is a reset password alert",severity:"error"}),e.sent?n(M,{style:{textAlign:"center",margin:5},children:"An link was sent to your email to reset the password."}):n(w,S(S({},t),{},{children:i("form",{onSubmit:a(e.handleResetPassword),children:[n(I,{type:"text",name:"email",inputLabel:"Email",placeholder:"Enter your email",startAdornment:n(C,{position:"start",children:n(T,{})}),rules:{required:"Email is required",pattern:{value:/^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/,message:"Invalid email address"}},helperText:null===(r=o.email)||void 0===r?void 0:r.message}),n(q,{fullWidth:!0,last:!0,type:"submit",text:"Reset Password"})]})}))]})})},V=function(e){var r,t,o,a=f(),l=a.formState.errors,d=a.handleSubmit;return a.getValues,a.register,a.watch,a.reset,a.setValue,i(E,{maxWidth:400,noColor:!0,noMargin:!0,noPadding:!0,children:[i(E,{noMargin:!0,children:[e.error&&n(R,{text:"This is a sign in alert",severity:"error"}),n(w,S(S({},a),{},{children:i("form",{onSubmit:d(e.handleSignUp),children:[n(I,{name:"fullName",placeholder:"Fulan AlFulani",type:"text",inputLabel:"Full Name",startAdornment:n(C,{position:"start",children:n(P,{})}),rules:{required:"Full name rquired"},helperText:null===(r=l.fullName)||void 0===r?void 0:r.message}),n(I,{type:"text",inputLabel:"Email",placeholder:"Enter your email",name:"email",startAdornment:n(C,{position:"start",children:n(T,{})}),rules:{required:"Email required",pattern:{value:/^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/,message:"Invalid email address"}},helperText:null===(t=l.email)||void 0===t?void 0:t.message}),n(I,{name:"password",placeholder:"Minimum 8 characters",type:"password",inputLabel:"Password",startAdornment:n(C,{position:"start",children:n(k,{})}),rules:{required:"Password rquired",minLength:{value:8,message:"Password too short"}},helperText:null===(o=l.password)||void 0===o?void 0:o.message}),n(q,{fullWidth:!0,type:"submit",text:"Sign Up",last:!0})]})}))]}),i(M,{style:{marginTop:5,textAlign:"center",padding:5},children:["Existing user?"," ",n("span",{onClick:function(){return console.log("res")},style:{cursor:"pointer",color:"blue",textAlign:"center"},children:"Sign in"})]}),e.viaGoogle&&n(j,{logo:"google",buttonText:e.googleButtonLabel,handleClick:e.handleGoogleSignIn}),e.viaGithub&&n(j,{logo:"github",buttonText:e.githubButtonLabel,handleClick:e.handleGithubSignIn}),e.viaTwitter&&n(j,{logo:"twitter",buttonText:e.twitterButtonLabel,handleClick:e.handleTwitterSignIn})]})};V.propTypes={theme:a.oneOf(["secondary","primary"])};var U=function(e){var r,t,o=f(),a=o.formState.errors,l=o.handleSubmit;return i(E,{maxWidth:400,noColor:!0,noMargin:!0,noPadding:!0,children:[i(E,{noMargin:!0,children:[e.error&&n(R,{text:"This is a sign in alert",severity:"error"}),n(w,S(S({},o),{},{children:i("form",{onSubmit:l(e.handleSignIn),children:[n(I,{type:"text",name:"email",inputLabel:"Email",placeholder:"Enter your email",startAdornment:n(C,{position:"start",children:n(T,{})}),rules:{required:"Email is required",pattern:{value:/^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/,message:"Invalid email address"}},helperText:null===(r=a.email)||void 0===r?void 0:r.message}),n(I,{name:"password",placeholder:"Enter password",type:"password",inputLabel:"Password",startAdornment:n(C,{position:"start",children:n(k,{})}),rules:{required:"Password is rquired"},helperText:null===(t=a.password)||void 0===t?void 0:t.message}),n(M,{style:{cursor:"pointer",marginTop:5,width:"max-content",padding:5},onClick:function(){return console.log("res")},children:"Forgot password?"}),n(q,{type:"submit",fullWidth:!0,last:"true",text:"Sign In"})]})}))]}),i(M,{style:{marginTop:5,textAlign:"center",padding:5},children:["New user?"," ",n("span",{onClick:function(){return console.log("res")},style:{cursor:"pointer",color:"blue",textAlign:"center"},children:"Sign up"})]}),e.viaGoogle&&n(j,{logo:"google",buttonText:e.googleButtonLabel,handleClick:e.handleGoogleSignIn}),e.viaGithub&&n(j,{logo:"github",buttonText:e.githubButtonLabel,handleClick:e.handleGithubSignIn}),e.viaTwitter&&n(j,{logo:"twitter",buttonText:e.twitterButtonLabel,handleClick:e.handleTwitterSignIn})]})},Z=function(e){return n(E,{maxWidth:400,noColor:!0,noMargin:!0,noPadding:!0,children:i(E,{noMargin:!0,children:[n(M,{align:"center",children:"Choose Payment Method"}),e.viaWallet&&n(j,{logo:"wallet",buttonText:e.walletLabel,onClick:e.handleWallet}),e.viaCreditCard&&n(j,{logo:"visa/master",buttonText:e.visaMasterLabel,handleClick:e.handleCreditCard}),e.viaMada&&n(j,{logo:"mada",buttonText:e.madaLabel,handleClick:e.handleMada}),e.viaSTCPay&&n(j,{logo:"stcpay",buttonText:e.stcPayLabel,handleClick:e.handleSTCPay}),e.viaPayPal&&n(j,{logo:"paypal",buttonText:e.paypalLabel,handleClick:e.handlePayPal}),e.viaGooglePay&&n(j,{logo:"googlepay",buttonText:e.googlePayLabel,handleClick:e.handleGooglePay}),e.viaApplePay&&n(j,{logo:"applepay",buttonText:e.applePayLabel,handleClick:e.handleApplePay})]})})};I.propTypes={theme:a.oneOf(["secondary","primary"]),viaApplePay:a.bool,viaGooglePay:a.bool,viaSTCPay:a.bool,viaCreditCard:a.bool,viaPayPal:a.bool,handleApplePay:a.func};var $=function(e){var r,t,o=f(),a=o.formState.errors,l=o.handleSubmit;return n(E,{maxWidth:400,noColor:!0,noMargin:!0,noPadding:!0,children:n(E,{noMargin:!0,children:n(w,S(S({},o),{},{children:i("form",{onSubmit:l(e.handle),children:[n(I,{name:"password",placeholder:"Enter password",type:"password",inputLabel:"Password",rules:{required:"Password is rquired"},helperText:null===(r=a.password)||void 0===r?void 0:r.message}),n(I,{name:"password",placeholder:"Enter password",type:"password",inputLabel:"Password",rules:{required:"Password is rquired"},helperText:null===(t=a.password)||void 0===t?void 0:t.message}),n(q,{last:!0,fullWidth:!0,text:"Sign In",onClick:e.handleSignIn})]})}))})})},H=function(e){var r,o=B(t(0),2),a=o[0],l=o[1],d=f(),s=d.formState.errors,u=d.handleSubmit;return n(E,{maxWidth:400,noColor:!0,noMargin:!0,noPadding:!0,children:i(E,{noMargin:!0,children:[i(M,{variant:"h2",align:"center",children:[Number(a).toLocaleString("en")," ",n("span",{style:{fontSize:20,letterSpacing:1},children:e.currency})]}),n(w,S(S({},d),{},{children:i("form",{onChange:function(e){e.preventDefault(),l(d.getValues().amount)},style:{marginTop:10},onSubmit:u(e.handleChargeWallet),children:[n(I,{name:"amount",placeholder:"Enter amount",type:"number",value:a,rules:{required:"Password is rquired"},helperText:null===(r=s.amount)||void 0===r?void 0:r.message}),n(q,{last:!0,fullWidth:!0,text:"Charge Wallet",onClick:e.handleSignIn})]})}))]})})},_=function(e){return n(E,{maxWidth:400,noColor:!0,noMargin:!0,noPadding:!0,children:i(E,{noMargin:!0,children:[n("div",{children:"Wallet Balance"}),n(q,{text:"Pay now"})]})})};export{H as ChargeWalletForm,$ as CreditCardForm,G as NewPasswordForm,_ as PayWithWallet,D as ResetPasswordForm,Z as SelectPayment,U as SignInForm,V as SignUpForm,N as UserProfile,z as UserSettings};

package/lib/index.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),r=require("@mui/material/Button");require("@mui/material/Tooltip");var t=require("prop-types"),a=require("react/jsx-runtime"),o=require("@mui/material/styles");require("@mui/material/FormControlLabel"),require("@mui/material/Checkbox"),require("@mui/material"),require("@mui/material/TextField");var n=require("@mui/material/InputBase"),i=require("@mui/material/Typography"),l=require("@mui/material/InputLabel"),s=require("react-hook-form");require("@mui/icons-material");var d=require("@mui/material/Alert"),u=require("@mui/material/AlertTitle"),c=require("@mui/icons-material/GitHub"),m=require("@mui/icons-material/Twitter"),p=require("@mui/icons-material/AccountBalanceWallet"),h=require("@mui/material/InputAdornment"),x=require("@mui/icons-material/HttpsOutlined"),g=require("@mui/icons-material/MailOutline"),f=require("@mui/icons-material/PermIdentityOutlined");function b(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var y=b(r),j=b(t),v=b(n),w=b(i),C=b(l),k=b(d),S=b(u),P=b(c),T=b(m),F=b(p),L=b(h),q=b(x),A=b(g),W=b(f);function R(e,r){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);r&&(a=a.filter((function(r){return Object.getOwnPropertyDescriptor(e,r).enumerable}))),t.push.apply(t,a)}return t}function O(e){for(var r=1;r<arguments.length;r++){var t=null!=arguments[r]?arguments[r]:{};r%2?R(Object(t),!0).forEach((function(r){B(e,r,t[r])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):R(Object(t)).forEach((function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(t,r))}))}return e}function B(e,r,t){return r in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}function M(e,r){return function(e){if(Array.isArray(e))return e}(e)||function(e,r){var t=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null==t)return;var a,o,n=[],i=!0,l=!1;try{for(t=t.call(e);!(i=(a=t.next()).done)&&(n.push(a.value),!r||n.length!==r);i=!0);}catch(e){l=!0,o=e}finally{try{i||null==t.return||t.return()}finally{if(l)throw o}}return n}(e,r)||function(e,r){if(!e)return;if("string"==typeof e)return z(e,r);var t=Object.prototype.toString.call(e).slice(8,-1);"Object"===t&&e.constructor&&(t=e.constructor.name);if("Map"===t||"Set"===t)return Array.from(e);if("Arguments"===t||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t))return z(e,r)}(e,r)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function z(e,r){(null==r||r>e.length)&&(r=e.length);for(var t=0,a=new Array(r);t<r;t++)a[t]=e[t];return a}var E={allPrimaryBG:"#f90900",allPrimaryAction:"#138A36",allBorderRadius:10,borderRadius:10,primaryColor:"blue",secondaryColor:"grey",primaryActionColor:"grey",secondaryActionColor:"#4cc9f0",layoutColor:"#d3d4d9",textColor:"black",inputColor:"white",lightBackground:"#FBF5F3",darkBackground:"#0F0E0E",testcolor:"green",margins:10,paddings:10,typography:{primary:{color:"black"},secondary:{color:"white"}},logoButton:{primary:{borderRadius:10,backgroundColor:"#B20D30",marginTop:10,padding:10,border:"1px solid #ced4da",height:50,"&:focus":{borderColor:"#B20D30"}},secondary:{borderRadius:10,backgroundColor:"#f90900",marginTop:10,padding:10,border:"1px solid #ced4da",height:50,"&:focus":{borderColor:"green"}}},actionButton:{primary:{borderRadius:10,backgroundColor:"#B20D30",color:"white",margin:10,padding:10,border:"1px solid #ced4da",fontSize:16,height:50,"&:focus":{borderColor:"red"}},secondary:{borderRadius:10,margin:10,padding:10,backgroundColor:"#FF8811",color:"black"}},layout:{primary:{backgroundColor:"#d3d4d9",color:"black",margin:10,padding:10,borderRadius:10},secondary:{backgroundColor:"#001E3C",color:"white",margin:10,padding:10,borderRadius:10}},inputFields:{primary:{backgroundColor:"white",borderRadius:10,"&:focus":{borderColor:"red",borderWidth:1,border:"1px solid black"},"&:hover":{borderColor:"red",borderWidth:1,border:"1px solid black"}},secondary:{backgroundColor:"white",borderRadius:10}},alerts:{primary:{marginBottom:10,padding:10,borderRadius:10},secondary:{marginBottom:10,padding:10,borderRadius:10}},settingsRow:{primary:{display:"flex",flexDirection:"row",justifyContent:"space-between",alignItems:"center",backgroundColor:"#F5F5F5",margin:0,padding:10,borderRadius:10},secondary:{display:"flex",flexDirection:"row",justifyContent:"space-between",alignItems:"center",backgroundColor:"blue",margin:0,padding:5,borderRadius:10}},radioSelector:{primary:{padding:10,borderRadius:10},secondary:{padding:10,borderRadius:10}}},I=e.createContext(E);j.default.string,j.default.bool,j.default.bool,j.default.bool;var N=function(r){var t,n=e.useContext(I),i=n.hawaTheme,l=n.themeName,s=Object.keys(i.actionButton).find((function(e){return e.toLowerCase()===(null==l?void 0:l.toLowerCase())})),d={};s?d=O(O({},i.actionButton[s]),{},{margin:r.last?0:i.actionButton[s].margin,marginTop:r.last?2*i.actionButton[s].margin:0,"&:hover":{backgroundColor:o.darken(null===(t=i.actionButton[s])||void 0===t?void 0:t.backgroundColor,.1)}}):d={backgroundColor:"black",color:"white",padding:10,marginTop:r.last?20:0,borderRadius:0};var u=o.styled(y.default)((function(e){return e.theme,O({},d)}));return a.jsx(u,O(O({},r),{},{children:r.text}))},G=function(r){var t=e.useContext(I),o=t.hawaTheme,n=t.themeName,i={},l=Object.keys(o.layout).find((function(e){return e.toLowerCase()===(null==n?void 0:n.toLowerCase())}));return i=l?O(O({display:"flex",flexDirection:r.horizontal?"row":"column"},o.layout[l]),{},{backgroundColor:r.noColor?"none":o.layout[l].backgroundColor,padding:r.noPadding?0:o.layout[l].padding,margin:r.noMargin?0:o.layout[l].margin,maxWidth:r.maxWidth}):{display:"flex",flexDirection:r.horizontal?"row":"column",color:"white",marginTop:r.last?20:0,backgroundColor:r.noColor?"none":"lightGrey",padding:r.noPadding?0:10,margin:r.noMargin?0:10,maxWidth:r.maxWidth,borderRadius:0},a.jsx("div",{style:i,children:r.children})};j.default.oneOf(["text","number","password"]),j.default.string;var D=function(r){var t=e.useContext(I),n=t.hawaTheme,i=t.themeName,l={},s=Object.keys(n.logoButton).find((function(e){return e.toLowerCase()===(null==i?void 0:i.toLowerCase())}));l=s?O(O({},n.logoButton[s]),{},{backgroundColor:"white","&:hover":{backgroundColor:o.darken("#ffffff",.1)}}):{cursor:"pointer",display:"flex",flexDirection:"row",alignItems:"center",justifyContent:"center",marginTop:10,height:50,border:"1px solid #ced4da",backgroundColor:"white","&:hover":{backgroundColor:o.darken("#ffffff",.1)}};var d=o.styled(y.default)((function(e){return e.theme,O({},l)}));return a.jsx(d,O(O({},r),{},{children:r.children}))},U=function(r){var t=e.useContext(I),o=t.hawaTheme,n=t.themeName,i={},l=Object.keys(o.actionButton).find((function(e){return e.toLowerCase()===(null==n?void 0:n.toLowerCase())}));return i=l?{margin:15,marginRight:5,marginLeft:5,color:o.layout[l].color}:{margin:15,marginRight:0,marginLeft:0,color:"black"},a.jsx(C.default,{style:i,children:a.jsx("div",{style:{fontSize:15},children:r.label})})},V=function(r){var t=s.useFormContext(),n=t.control,i=t.register,l=e.useContext(I),d=l.hawaTheme,u=l.themeName,c=Object.keys(d.inputFields).find((function(e){return e.toLowerCase()===(null==u?void 0:u.toLowerCase())})),m={};m=c?O(O({},d.inputFields[c]),{},{margin:r.last?0:d.inputFields[c].margin,marginTop:r.last?2*d.inputFields[c].margin:0}):{backgroundColor:"white"};var p=o.styled(v.default)((function(e){return O({"& .MuiInputBase-input":{transition:e.theme.transitions.create(["border-color","background-color","box-shadow"])},border:"1px solid #ced4da",fontSize:16,padding:"10px 12px",marginBottom:r.helperText?5:0,paddingLeft:10,paddingRight:10},m)}));return a.jsx(s.Controller,{render:function(e){var t;return e.field,a.jsxs(a.Fragment,{children:[r.inputLabel&&a.jsx(U,{label:r.inputLabel}),a.jsx(p,O(O({fullWidth:!0,type:null!==(t=r.type)&&void 0!==t?t:"text",defaultValue:r.defaultValue&&"",value:r.value&&""},r),i(r.name))),a.jsx(w.default,{variant:"caption",style:{margin:5,marginBottom:0,color:"red"},children:r.helperText})]})},name:r.name,rules:r.rules,control:n,shouldUnregister:r.shouldUnregister})};V.propTypes={type:j.default.oneOf(["text","number","password"]),helperText:j.default.string};var Z=function(r){var t=e.useContext(I),n=t.hawaTheme,i=t.themeName,l=Object.keys(n.typography).find((function(e){return e.toLowerCase()===(null==i?void 0:i.toLowerCase())})),s={};s=l?O({},n.typography[l]):{color:"black"};var d=o.styled(w.default)((function(e){return e.theme,O({},s)}));return a.jsx(d,O(O({},r),{},{children:r.children}))},$=function(r){var t=e.useContext(I),n=t.hawaTheme,i=t.themeName,l=Object.keys(n.alerts).find((function(e){return e.toLowerCase()===(null==i?void 0:i.toLowerCase())})),s={};s=l?O({},n.alerts[l]):{marginBottom:10};var d=o.styled(k.default)((function(e){return e.theme,O({},s)}));return a.jsxs(d,O(O({},r),{},{children:[r.title&&a.jsx(S.default,{children:r.title}),r.text]}))},_=function(e){return a.jsxs(D,O(O({},e),{},{children:[a.jsx("img",{src:"https://upload.wikimedia.org/wikipedia/commons/5/53/Google_%22G%22_Logo.svg"}),a.jsx("div",{style:{width:10}}),a.jsx("p",{style:{color:"black",fontSize:14,textAlign:"center",letterSpacing:.4,fontFamily:"Roboto",fontWeight:500},children:e.buttonText})]}))},H=function(e){return a.jsxs(D,O(O({},e),{},{children:[a.jsx(P.default,{}),a.jsx("div",{style:{width:10}}),a.jsx("p",{style:{color:"black",fontSize:14,textAlign:"center",letterSpacing:.4,fontFamily:"Roboto",fontWeight:500},children:e.buttonText})]}))},J=function(e){return a.jsxs(D,O(O({},e),{},{children:[a.jsx(T.default,{}),a.jsx("div",{style:{width:10}}),a.jsx("p",{style:{color:"black",fontSize:14,textAlign:"center",letterSpacing:.4,fontFamily:"Roboto",fontWeight:500},children:e.buttonText})]}))},K=function(e){return a.jsxs(D,O(O({},e),{},{children:[a.jsx("img",{src:"https://sikka-images.s3.ap-southeast-1.amazonaws.com/payments/visa-master.png",height:30})," ",a.jsx("div",{style:{width:10}}),a.jsx("p",{style:{color:"black",fontSize:14,textAlign:"center",letterSpacing:.4,fontFamily:"Roboto",fontWeight:500},children:e.buttonText})]}))},Q=function(e){return a.jsxs(D,O(O({},e),{},{children:[a.jsx("img",{src:"https://sikka-images.s3.ap-southeast-1.amazonaws.com/payments/mada.png",height:20})," ",a.jsx("div",{style:{width:10}}),a.jsx("p",{style:{color:"black",fontSize:14,textAlign:"center",letterSpacing:.4,fontFamily:"Roboto",fontWeight:500},children:e.buttonText})]}))},X=function(e){return a.jsxs(D,O(O({},e),{},{children:[a.jsx("img",{src:"https://sikka-images.s3.ap-southeast-1.amazonaws.com/payments/stc-pay.png",height:20}),a.jsx("div",{style:{width:10}}),a.jsx("p",{style:{color:"black",fontSize:14,textAlign:"center",letterSpacing:.4,fontFamily:"Roboto",fontWeight:500},children:e.buttonText})]}))},Y=function(e){return a.jsxs(D,O(O({},e),{},{children:[a.jsx("img",{src:"https://sikka-images.s3.ap-southeast-1.amazonaws.com/payments/paypal.png",height:25})," ",a.jsx("div",{style:{width:10}}),a.jsx("p",{style:{color:"black",fontSize:14,textAlign:"center",letterSpacing:.4,fontFamily:"Roboto",fontWeight:500},children:e.buttonText})]}))},ee=function(e){return a.jsxs(D,O(O({},e),{},{children:[a.jsx("img",{src:"https://sikka-images.s3.ap-southeast-1.amazonaws.com/payments/apple-pay.png",height:40})," ",a.jsx("div",{style:{width:10}}),a.jsx("p",{style:{color:"black",fontSize:14,textAlign:"center",letterSpacing:.4,fontFamily:"Roboto",fontWeight:500},children:e.buttonText})]}))},re=function(e){return a.jsxs(D,O(O({},e),{},{children:[a.jsx("img",{src:"https://sikka-images.s3.ap-southeast-1.amazonaws.com/payments/google-pay.png",height:20}),a.jsx("div",{style:{width:10}}),a.jsx("p",{style:{color:"black",fontSize:14,textAlign:"center",letterSpacing:.4,fontFamily:"Roboto",fontWeight:500},children:e.buttonText})]}))},te=function(e){return a.jsxs(D,O(O({},e),{},{children:[a.jsx(F.default,{}),a.jsx("div",{style:{width:10}}),a.jsx("p",{style:{color:"black",fontSize:14,textAlign:"center",letterSpacing:.4,fontFamily:"Roboto",fontWeight:500},children:e.buttonText})]}))},ae=function(e){var r,t,o,n=s.useForm(),i=n.formState.errors,l=n.handleSubmit;return n.getValues,n.register,n.watch,n.reset,n.setValue,a.jsxs(G,{maxWidth:400,noColor:!0,noMargin:!0,noPadding:!0,children:[a.jsxs(G,{noMargin:!0,children:[e.error&&a.jsx($,{text:"This is a sign in alert",severity:"error"}),a.jsx(s.FormProvider,O(O({},n),{},{children:a.jsxs("form",{onSubmit:l(e.handleSignUp),children:[a.jsx(V,{name:"fullName",placeholder:"Fulan AlFulani",type:"text",inputLabel:"Full Name",startAdornment:a.jsx(L.default,{position:"start",children:a.jsx(W.default,{})}),rules:{required:"Full name rquired"},helperText:null===(r=i.fullName)||void 0===r?void 0:r.message}),a.jsx(V,{type:"text",inputLabel:"Email",placeholder:"Enter your email",name:"email",startAdornment:a.jsx(L.default,{position:"start",children:a.jsx(A.default,{})}),rules:{required:"Email required",pattern:{value:/^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/,message:"Invalid email address"}},helperText:null===(t=i.email)||void 0===t?void 0:t.message}),a.jsx(V,{name:"password",placeholder:"Minimum 8 characters",type:"password",inputLabel:"Password",startAdornment:a.jsx(L.default,{position:"start",children:a.jsx(q.default,{})}),rules:{required:"Password rquired",minLength:{value:8,message:"Password too short"}},helperText:null===(o=i.password)||void 0===o?void 0:o.message}),a.jsx(N,{fullWidth:!0,type:"submit",text:"Sign Up",last:!0})]})}))]}),e.viaGoogle&&a.jsx(_,{buttonText:e.googleButtonLabel,handleClick:e.handleGoogleSignIn}),e.viaGithub&&a.jsx(H,{buttonText:e.githubButtonLabel,handleClick:e.handleGithubSignUp}),e.viaTwitter&&a.jsx(J,{buttonText:e.twitterButtonLabel,handleClick:e.handleTwitterSignIn})]})};ae.propTypes={theme:j.default.oneOf(["secondary","primary"])};V.propTypes={theme:j.default.oneOf(["secondary","primary"]),viaApplePay:j.default.bool,viaGooglePay:j.default.bool,viaSTCPay:j.default.bool,viaCreditCard:j.default.bool,viaPayPal:j.default.bool,handleApplePay:j.default.func};exports.ChargeWalletForm=function(r){var t,o=M(e.useState(0),2),n=o[0],i=o[1],l=s.useForm(),d=l.formState.errors,u=l.handleSubmit;return a.jsx(G,{maxWidth:400,noColor:!0,noMargin:!0,noPadding:!0,children:a.jsxs(G,{noMargin:!0,children:[a.jsxs(Z,{variant:"h2",align:"center",children:[Number(n).toLocaleString("en")," ",a.jsx("span",{style:{fontSize:20,letterSpacing:1},children:r.currency})]}),a.jsx(s.FormProvider,O(O({},l),{},{children:a.jsxs("form",{onChange:function(e){e.preventDefault(),i(l.getValues().amount)},style:{marginTop:10},onSubmit:u(r.handleChargeWallet),children:[a.jsx(V,{name:"amount",placeholder:"Enter amount",type:"number",value:n,rules:{required:"Password is rquired"},helperText:null===(t=d.amount)||void 0===t?void 0:t.message}),a.jsx(N,{last:!0,fullWidth:!0,text:"Charge Wallet",onClick:r.handleSignIn})]})}))]})})},exports.CreditCardForm=function(e){var r,t,o=s.useForm(),n=o.formState.errors,i=o.handleSubmit;return a.jsx(G,{maxWidth:400,noColor:!0,noMargin:!0,noPadding:!0,children:a.jsx(G,{noMargin:!0,children:a.jsx(s.FormProvider,O(O({},o),{},{children:a.jsxs("form",{onSubmit:i(e.handle),children:[a.jsx(V,{name:"password",placeholder:"Enter password",type:"password",inputLabel:"Password",rules:{required:"Password is rquired"},helperText:null===(r=n.password)||void 0===r?void 0:r.message}),a.jsx(V,{name:"password",placeholder:"Enter password",type:"password",inputLabel:"Password",rules:{required:"Password is rquired"},helperText:null===(t=n.password)||void 0===t?void 0:t.message}),a.jsx(N,{last:!0,fullWidth:!0,text:"Sign In",onClick:e.handleSignIn})]})}))})})},exports.NewPasswordForm=function(r){var t,o,n=M(e.useState(""),2),i=n[0],l=n[1],d=M(e.useState(""),2);d[0],d[1];var u=M(e.useState(!1),2);u[0],u[1];var c=M(e.useState(""),2);c[0],c[1];var m=M(e.useState(!0),2);m[0],m[1];var p=s.useForm(),h=p.formState.errors,x=p.handleSubmit;return p.getValues,p.register,p.watch,p.reset,p.setValue,a.jsx(G,{maxWidth:400,noColor:!0,noMargin:!0,noPadding:!0,children:a.jsxs(G,{noMargin:!0,children:[r.error&&a.jsx($,{text:"This is a new password alert",severity:"error"}),a.jsx(s.FormProvider,O(O({},p),{},{children:a.jsxs("form",{onSubmit:x(r.handleNewPassword),children:[a.jsx(V,{name:"password",type:"password",inputLabel:"Choose new password",placeholder:"Enter password",onChange:function(e){return l(e.target.value)},value:i,startAdornment:a.jsx(L.default,{position:"start",children:a.jsx(q.default,{})}),rules:{required:"Password is rquired"},helperText:null===(t=h.password)||void 0===t?void 0:t.message}),a.jsx(V,{name:"confirmPassword",type:"password",placeholder:"Confirm Password",inputLabel:"Confirm",startAdornment:a.jsx(L.default,{position:"start",children:a.jsx(q.default,{})}),rules:{required:"Password is rquired"},helperText:null===(o=h.confirmPassword)||void 0===o?void 0:o.message}),a.jsx(N,{fullWidth:!0,type:"submit",last:!0,text:"Reset Password"})]})}))]})})},exports.PayWithWallet=function(e){return a.jsx(G,{maxWidth:400,noColor:!0,noMargin:!0,noPadding:!0,children:a.jsxs(G,{noMargin:!0,children:[a.jsx("div",{children:"Wallet Balance"}),a.jsx(N,{text:"Pay now"})]})})},exports.ResetPasswordForm=function(e){var r,t=s.useForm(),o=t.formState.errors,n=t.handleSubmit;return t.getValues,t.register,t.watch,t.reset,t.setValue,a.jsx(G,{maxWidth:400,noColor:!0,noMargin:!0,noPadding:!0,children:a.jsxs(G,{noMargin:!0,children:[e.error&&a.jsx($,{text:"This is a reset password alert",severity:"error"}),a.jsx(s.FormProvider,O(O({},t),{},{children:a.jsxs("form",{onSubmit:n(e.handleResetPassword),children:[a.jsx(V,{type:"text",name:"email",inputLabel:"Email",placeholder:"Enter your email",startAdornment:a.jsx(L.default,{position:"start",children:a.jsx(A.default,{})}),rules:{required:"Email is required",pattern:{value:/^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/,message:"Invalid email address"}},helperText:null===(r=o.email)||void 0===r?void 0:r.message}),a.jsx(N,{fullWidth:!0,last:!0,type:"submit",text:"Reset Password"})]})}))," "]})})},exports.SelectPayment=function(e){return a.jsx(G,{maxWidth:400,noColor:!0,noMargin:!0,noPadding:!0,children:a.jsxs(G,{noMargin:!0,children:[a.jsx(Z,{align:"center",children:"Choose Payment Method"}),e.viaWallet&&a.jsx(te,{buttonText:e.walletLabel,onClick:e.handleWallet}),e.viaCreditCard&&a.jsx(K,{buttonText:e.visaMasterLabel,handleClick:e.handleCreditCard}),e.viaMada&&a.jsx(Q,{buttonText:e.madaLabel,handleClick:e.handleMada}),e.viaSTCPay&&a.jsx(X,{buttonText:e.stcPayLabel,handleClick:e.handleSTCPay}),e.viaPayPal&&a.jsx(Y,{buttonText:e.paypalLabel,handleClick:e.handlePayPal}),e.viaGooglePay&&a.jsx(re,{buttonText:e.googlePayLabel,handleClick:e.handleGooglePay}),e.viaApplePay&&a.jsx(ee,{buttonText:e.applePayLabel,handleClick:e.handleApplePay})]})})},exports.SignInForm=function(e){var r,t,o=s.useForm(),n=o.formState.errors,i=o.handleSubmit;return a.jsxs(G,{maxWidth:400,noColor:!0,noMargin:!0,noPadding:!0,children:[a.jsxs(G,{noMargin:!0,children:[e.error&&a.jsx($,{text:"This is a sign in alert",severity:"error"}),a.jsx(s.FormProvider,O(O({},o),{},{children:a.jsxs("form",{onSubmit:i(e.handleSignIn),children:[a.jsx(V,{type:"text",name:"email",inputLabel:"Email",placeholder:"Enter your email",startAdornment:a.jsx(L.default,{position:"start",children:a.jsx(A.default,{})}),rules:{required:"Email is required",pattern:{value:/^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/,message:"Invalid email address"}},helperText:null===(r=n.email)||void 0===r?void 0:r.message}),a.jsx(V,{name:"password",placeholder:"Enter password",type:"password",inputLabel:"Password",startAdornment:a.jsx(L.default,{position:"start",children:a.jsx(q.default,{})}),rules:{required:"Password is rquired"},helperText:null===(t=n.password)||void 0===t?void 0:t.message}),a.jsx(N,{type:"submit",fullWidth:!0,last:"true",text:"Sign In"})]})}))]}),e.viaGoogle&&a.jsx(_,{buttonText:e.googleButtonLabel,handleClick:e.handleGoogleSignIn}),e.viaGithub&&a.jsx(H,{buttonText:e.githubButtonLabel,handleClick:e.handleGithubSignIn}),e.viaTwitter&&a.jsx(J,{buttonText:e.twitterButtonLabel,handleClick:e.handleTwitterSignIn})]})},exports.SignUpForm=ae,exports.UserProfile=function(e){var r,t,o,n,i=s.useForm(),l=i.formState.errors;return i.handleSubmit,a.jsx(G,{maxWidth:400,noMargin:!0,children:a.jsx(G,{noMargin:!0,noColor:!0,children:a.jsx(s.FormProvider,O(O({},i),{},{children:a.jsxs("form",{children:[a.jsx(V,{type:"text",name:"fullName",inputLabel:"Full Name",placeholder:"Fulan AlFulani",rules:{required:"Email is required"},helperText:null===(r=l.fullName)||void 0===r?void 0:r.message}),a.jsx(V,{type:"text",name:"email",inputLabel:"New Email",placeholder:"Enter your new email",rules:{required:"Email is required"},helperText:null===(t=l.email)||void 0===t?void 0:t.message}),a.jsx(V,{type:"password",name:"password",inputLabel:"New password",placeholder:"Enter your new password",rules:{required:"Email is required"},helperText:null===(o=l.password)||void 0===o?void 0:o.message}),a.jsx(V,{type:"password",name:"confirmPassword",inputLabel:"Confirm new password",placeholder:"Confirm new password",rules:{required:"Email is required"},helperText:null===(n=l.confirmPassword)||void 0===n?void 0:n.message}),a.jsx(N,{fullWidth:!0,last:!0,text:"Update Account"})]})}))})})},exports.UserSettings=function(e){return a.jsxs(G,{maxWidth:400,children:[a.jsx(V,{type:"text",inputLabel:"First Name"}),a.jsx(V,{type:"text",inputLabel:"Last Name"}),a.jsx(V,{type:"email",inputLabel:"Email"}),a.jsx(V,{type:"password",inputLabel:"Password"}),a.jsx(N,{last:!0,text:"Update Account"})]})};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),r=require("@mui/material/Button");require("@mui/material/Tooltip");var t=require("prop-types"),a=require("react/jsx-runtime"),o=require("@mui/material/styles");require("@mui/material/FormControlLabel"),require("@mui/material/Checkbox"),require("@mui/material"),require("@mui/material/TextField");var n=require("@mui/material/Typography"),i=require("@mui/icons-material/GitHub"),l=require("@mui/icons-material/Twitter"),s=require("@mui/icons-material/AccountBalanceWallet"),d=require("@mui/material/InputBase"),u=require("@mui/material/InputLabel"),c=require("react-hook-form"),m=require("@mui/material/Alert"),p=require("@mui/material/AlertTitle"),g=require("@mui/material/InputAdornment"),h=require("@mui/icons-material/HttpsOutlined"),x=require("@mui/icons-material/MailOutline"),f=require("@mui/icons-material/PermIdentityOutlined");function b(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var y=b(r),j=b(t),w=b(n),v=b(i),C=b(l),k=b(s),P=b(d),T=b(u),S=b(m),L=b(p),q=b(g),F=b(h),A=b(x),B=b(f);function O(e,r){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);r&&(a=a.filter((function(r){return Object.getOwnPropertyDescriptor(e,r).enumerable}))),t.push.apply(t,a)}return t}function W(e){for(var r=1;r<arguments.length;r++){var t=null!=arguments[r]?arguments[r]:{};r%2?O(Object(t),!0).forEach((function(r){M(e,r,t[r])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):O(Object(t)).forEach((function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(t,r))}))}return e}function M(e,r,t){return r in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}function E(e,r){return function(e){if(Array.isArray(e))return e}(e)||function(e,r){var t=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null==t)return;var a,o,n=[],i=!0,l=!1;try{for(t=t.call(e);!(i=(a=t.next()).done)&&(n.push(a.value),!r||n.length!==r);i=!0);}catch(e){l=!0,o=e}finally{try{i||null==t.return||t.return()}finally{if(l)throw o}}return n}(e,r)||function(e,r){if(!e)return;if("string"==typeof e)return I(e,r);var t=Object.prototype.toString.call(e).slice(8,-1);"Object"===t&&e.constructor&&(t=e.constructor.name);if("Map"===t||"Set"===t)return Array.from(e);if("Arguments"===t||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t))return I(e,r)}(e,r)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function I(e,r){(null==r||r>e.length)&&(r=e.length);for(var t=0,a=new Array(r);t<r;t++)a[t]=e[t];return a}var R={allPrimaryBG:"#f90900",allPrimaryAction:"#138A36",allBorderRadius:10,borderRadius:10,primaryColor:"blue",secondaryColor:"grey",primaryActionColor:"grey",secondaryActionColor:"#4cc9f0",layoutColor:"#d3d4d9",textColor:"black",inputColor:"white",lightBackground:"#FBF5F3",darkBackground:"#0F0E0E",testcolor:"green",margins:10,paddings:10,typography:{fontFamily:["IBMPlex"].join(","),primary:{color:"black"},secondary:{color:"white"}},logoButton:{primary:{borderRadius:10,backgroundColor:"#B20D30",marginTop:10,padding:30,paddingTop:0,paddingBottom:0,border:"1px solid #ced4da",height:50,"&:focus":{borderColor:"#B20D30"}},secondary:{borderRadius:10,backgroundColor:"#f90900",marginTop:10,padding:30,paddingTop:0,paddingBottom:0,border:"1px solid #ced4da",height:50,"&:focus":{borderColor:"green"}}},actionButton:{primary:{borderRadius:10,backgroundColor:"#B20D30",color:"white",margin:10,padding:10,border:"1px solid #ced4da",fontSize:16,height:50,"&:focus":{borderColor:"red"}},secondary:{borderRadius:10,margin:10,padding:10,backgroundColor:"#FF8811",color:"black"}},layout:{primary:{backgroundColor:"#d3d4d9",color:"black",margin:10,padding:10,borderRadius:10},secondary:{backgroundColor:"#001E3C",color:"white",margin:10,padding:10,borderRadius:10}},inputFields:{primary:{backgroundColor:"white",borderRadius:10,"&:focus":{borderColor:"red",borderWidth:1,border:"1px solid black"},"&:hover":{borderColor:"red",borderWidth:1,border:"1px solid black"}},secondary:{backgroundColor:"white",borderRadius:10}},alerts:{primary:{marginBottom:10,padding:10,borderRadius:10},secondary:{marginBottom:10,padding:10,borderRadius:10}},settingsRow:{primary:{display:"flex",flexDirection:"row",justifyContent:"space-between",alignItems:"center",backgroundColor:"#F5F5F5",margin:0,padding:10,borderRadius:10},secondary:{display:"flex",flexDirection:"row",justifyContent:"space-between",alignItems:"center",backgroundColor:"blue",margin:0,padding:5,borderRadius:10}},radioSelector:{primary:{padding:10,borderRadius:10},secondary:{padding:10,borderRadius:10}}},N=e.createContext(R);j.default.string,j.default.bool,j.default.bool,j.default.bool;var z=function(r){var t,n=e.useContext(N),i=n.hawaTheme,l=n.themeName,s=Object.keys(i.actionButton).find((function(e){return e.toLowerCase()===(null==l?void 0:l.toLowerCase())})),d={};s?d=W(W({},i.actionButton[s]),{},{margin:r.last?0:i.actionButton[s].margin,marginTop:r.last?2*i.actionButton[s].margin:0,"&:hover":{backgroundColor:o.darken(null===(t=i.actionButton[s])||void 0===t?void 0:t.backgroundColor,.1)}}):d={backgroundColor:"black",color:"white",padding:10,marginTop:r.last?20:0,borderRadius:0};var u=o.styled(y.default)((function(e){return e.theme,W({},d)}));return a.jsx(u,W(W({},r),{},{children:r.text}))},G=function(r){var t=e.useContext(N),o=t.hawaTheme,n=t.themeName,i={},l=Object.keys(o.layout).find((function(e){return e.toLowerCase()===(null==n?void 0:n.toLowerCase())}));return i=l?W(W({display:"flex",flexDirection:r.horizontal?"row":"column"},o.layout[l]),{},{backgroundColor:r.noColor?"none":o.layout[l].backgroundColor,padding:r.noPadding?0:o.layout[l].padding,margin:r.noMargin?0:o.layout[l].margin,maxWidth:r.maxWidth}):{display:"flex",flexDirection:r.horizontal?"row":"column",color:"white",marginTop:r.last?20:0,backgroundColor:r.noColor?"none":"lightGrey",padding:r.noPadding?0:10,margin:r.noMargin?0:10,maxWidth:r.maxWidth,borderRadius:0},a.jsx("div",{style:i,children:r.children})},D=function(r){var t=e.useContext(N),n=t.hawaTheme,i=t.themeName,l=Object.keys(n.typography).find((function(e){return e.toLowerCase()===(null==i?void 0:i.toLowerCase())})),s={};s=l?W({},n.typography[l]):{color:"black"};var d=o.styled(w.default)((function(e){return e.theme,W({},s)}));return a.jsx(d,W(W({},r),{},{children:r.children}))};j.default.oneOf(["text","number","password"]),j.default.string;var U=function(r){var t,n=e.useContext(N),i=n.hawaTheme,l=n.themeName,s={},d=Object.keys(i.logoButton).find((function(e){return e.toLowerCase()===(null==l?void 0:l.toLowerCase())}));s=d?W(W({},i.logoButton[d]),{},{backgroundColor:"white","&:hover":{backgroundColor:o.darken("#ffffff",.1)}}):{cursor:"pointer",display:"flex",flexDirection:"row",alignItems:"center",justifyContent:"center",marginTop:10,height:50,padding:30,paddingTop:0,paddingBottom:0,border:"1px solid #ced4da",backgroundColor:"white","&:hover":{backgroundColor:o.darken("#ffffff",.1)}};var u=o.styled(y.default)((function(e){return e.theme,W({},s)})),c="";switch(null===(t=r.logo)||void 0===t?void 0:t.toLowerCase()){case"google":c=a.jsx("img",{src:"https://upload.wikimedia.org/wikipedia/commons/5/53/Google_%22G%22_Logo.svg"});break;case"github":c=a.jsx(v.default,{});break;case"twitter":c=a.jsx(C.default,{});break;case"mada":c=a.jsx("img",{src:"https://sikka-images.s3.ap-southeast-1.amazonaws.com/payments/mada.png",height:20});break;case"stcpay":c=a.jsx("img",{src:"https://sikka-images.s3.ap-southeast-1.amazonaws.com/payments/stc-pay.png",height:20});break;case"visa/master":c=a.jsx("img",{src:"https://sikka-images.s3.ap-southeast-1.amazonaws.com/payments/visa-master.png",height:30});break;case"paypal":c=a.jsx("img",{src:"https://sikka-images.s3.ap-southeast-1.amazonaws.com/payments/paypal.png",height:25});break;case"googlepay":c=a.jsx("img",{src:"https://sikka-images.s3.ap-southeast-1.amazonaws.com/payments/google-pay.png",height:20});break;case"applepay":c=a.jsx("img",{src:"https://sikka-images.s3.ap-southeast-1.amazonaws.com/payments/apple-pay.png",height:40});break;case"wallet":c=a.jsx(k.default,{})}return a.jsxs(u,W(W({},r),{},{children:[c,a.jsx("div",{style:{width:10}}),a.jsx("p",{style:{color:"black",fontSize:14,textAlign:"center",letterSpacing:.4,fontFamily:"Roboto",fontWeight:500},children:r.buttonText})]}))},V=function(r){var t=e.useContext(N),o=t.hawaTheme,n=t.themeName,i={},l=Object.keys(o.actionButton).find((function(e){return e.toLowerCase()===(null==n?void 0:n.toLowerCase())}));return i=l?{margin:15,marginRight:5,marginLeft:5,color:o.layout[l].color}:{margin:15,marginRight:0,marginLeft:0,color:"black"},a.jsx(T.default,{style:i,children:a.jsx("div",{style:{fontSize:15},children:r.label})})},Z=function(r){var t=c.useFormContext(),n=t.control,i=t.register,l=e.useContext(N),s=l.hawaTheme,d=l.themeName,u=Object.keys(s.inputFields).find((function(e){return e.toLowerCase()===(null==d?void 0:d.toLowerCase())})),m={};m=u?W(W({},s.inputFields[u]),{},{margin:r.last?0:s.inputFields[u].margin,marginTop:r.last?2*s.inputFields[u].margin:0}):{backgroundColor:"white"};var p=o.styled(P.default)((function(e){return W({"& .MuiInputBase-input":{transition:e.theme.transitions.create(["border-color","background-color","box-shadow"])},border:"1px solid #ced4da",fontSize:16,padding:"10px 12px",marginBottom:r.helperText?5:0,paddingLeft:10,paddingRight:10},m)}));return a.jsx(c.Controller,{render:function(e){var t;return e.field,a.jsxs(a.Fragment,{children:[r.inputLabel&&a.jsx(V,{label:r.inputLabel}),a.jsx(p,W(W({fullWidth:!0,type:null!==(t=r.type)&&void 0!==t?t:"text",defaultValue:r.defaultValue&&"",value:r.value&&""},r),i(r.name))),a.jsx(w.default,{variant:"caption",style:{margin:5,marginBottom:0,color:"red"},children:r.helperText})]})},name:r.name,rules:r.rules,control:n,shouldUnregister:r.shouldUnregister})};Z.propTypes={type:j.default.oneOf(["text","number","password"]),helperText:j.default.string};var $=function(r){var t=e.useContext(N),n=t.hawaTheme,i=t.themeName,l=Object.keys(n.alerts).find((function(e){return e.toLowerCase()===(null==i?void 0:i.toLowerCase())})),s={};s=l?W({},n.alerts[l]):{marginBottom:10};var d=o.styled(S.default)((function(e){return e.theme,W({},s)}));return a.jsxs(d,W(W({},r),{},{children:[r.title&&a.jsx(L.default,{children:r.title}),r.text]}))},_=function(e){var r,t,o,n=c.useForm(),i=n.formState.errors,l=n.handleSubmit;return n.getValues,n.register,n.watch,n.reset,n.setValue,a.jsxs(G,{maxWidth:400,noColor:!0,noMargin:!0,noPadding:!0,children:[a.jsxs(G,{noMargin:!0,children:[e.error&&a.jsx($,{text:"This is a sign in alert",severity:"error"}),a.jsx(c.FormProvider,W(W({},n),{},{children:a.jsxs("form",{onSubmit:l(e.handleSignUp),children:[a.jsx(Z,{name:"fullName",placeholder:"Fulan AlFulani",type:"text",inputLabel:"Full Name",startAdornment:a.jsx(q.default,{position:"start",children:a.jsx(B.default,{})}),rules:{required:"Full name rquired"},helperText:null===(r=i.fullName)||void 0===r?void 0:r.message}),a.jsx(Z,{type:"text",inputLabel:"Email",placeholder:"Enter your email",name:"email",startAdornment:a.jsx(q.default,{position:"start",children:a.jsx(A.default,{})}),rules:{required:"Email required",pattern:{value:/^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/,message:"Invalid email address"}},helperText:null===(t=i.email)||void 0===t?void 0:t.message}),a.jsx(Z,{name:"password",placeholder:"Minimum 8 characters",type:"password",inputLabel:"Password",startAdornment:a.jsx(q.default,{position:"start",children:a.jsx(F.default,{})}),rules:{required:"Password rquired",minLength:{value:8,message:"Password too short"}},helperText:null===(o=i.password)||void 0===o?void 0:o.message}),a.jsx(z,{fullWidth:!0,type:"submit",text:"Sign Up",last:!0})]})}))]}),a.jsxs(D,{style:{marginTop:5,textAlign:"center",padding:5},children:["Existing user?"," ",a.jsx("span",{onClick:function(){return console.log("res")},style:{cursor:"pointer",color:"blue",textAlign:"center"},children:"Sign in"})]}),e.viaGoogle&&a.jsx(U,{logo:"google",buttonText:e.googleButtonLabel,handleClick:e.handleGoogleSignIn}),e.viaGithub&&a.jsx(U,{logo:"github",buttonText:e.githubButtonLabel,handleClick:e.handleGithubSignIn}),e.viaTwitter&&a.jsx(U,{logo:"twitter",buttonText:e.twitterButtonLabel,handleClick:e.handleTwitterSignIn})]})};_.propTypes={theme:j.default.oneOf(["secondary","primary"])};Z.propTypes={theme:j.default.oneOf(["secondary","primary"]),viaApplePay:j.default.bool,viaGooglePay:j.default.bool,viaSTCPay:j.default.bool,viaCreditCard:j.default.bool,viaPayPal:j.default.bool,handleApplePay:j.default.func};exports.ChargeWalletForm=function(r){var t,o=E(e.useState(0),2),n=o[0],i=o[1],l=c.useForm(),s=l.formState.errors,d=l.handleSubmit;return a.jsx(G,{maxWidth:400,noColor:!0,noMargin:!0,noPadding:!0,children:a.jsxs(G,{noMargin:!0,children:[a.jsxs(D,{variant:"h2",align:"center",children:[Number(n).toLocaleString("en")," ",a.jsx("span",{style:{fontSize:20,letterSpacing:1},children:r.currency})]}),a.jsx(c.FormProvider,W(W({},l),{},{children:a.jsxs("form",{onChange:function(e){e.preventDefault(),i(l.getValues().amount)},style:{marginTop:10},onSubmit:d(r.handleChargeWallet),children:[a.jsx(Z,{name:"amount",placeholder:"Enter amount",type:"number",value:n,rules:{required:"Password is rquired"},helperText:null===(t=s.amount)||void 0===t?void 0:t.message}),a.jsx(z,{last:!0,fullWidth:!0,text:"Charge Wallet",onClick:r.handleSignIn})]})}))]})})},exports.CreditCardForm=function(e){var r,t,o=c.useForm(),n=o.formState.errors,i=o.handleSubmit;return a.jsx(G,{maxWidth:400,noColor:!0,noMargin:!0,noPadding:!0,children:a.jsx(G,{noMargin:!0,children:a.jsx(c.FormProvider,W(W({},o),{},{children:a.jsxs("form",{onSubmit:i(e.handle),children:[a.jsx(Z,{name:"password",placeholder:"Enter password",type:"password",inputLabel:"Password",rules:{required:"Password is rquired"},helperText:null===(r=n.password)||void 0===r?void 0:r.message}),a.jsx(Z,{name:"password",placeholder:"Enter password",type:"password",inputLabel:"Password",rules:{required:"Password is rquired"},helperText:null===(t=n.password)||void 0===t?void 0:t.message}),a.jsx(z,{last:!0,fullWidth:!0,text:"Sign In",onClick:e.handleSignIn})]})}))})})},exports.NewPasswordForm=function(r){var t,o,n=E(e.useState(""),2),i=n[0],l=n[1],s=E(e.useState(""),2);s[0],s[1];var d=E(e.useState(!1),2);d[0],d[1];var u=E(e.useState(""),2);u[0],u[1];var m=E(e.useState(!0),2);m[0],m[1];var p=c.useForm(),g=p.formState.errors,h=p.handleSubmit;return p.getValues,p.register,p.watch,p.reset,p.setValue,a.jsx(G,{maxWidth:400,noColor:!0,noMargin:!0,noPadding:!0,children:a.jsxs(G,{noMargin:!0,children:[r.error&&a.jsx($,{text:"This is a new password alert",severity:"error"}),r.passwordChanged?a.jsx(D,{style:{textAlign:"center",margin:5},children:"Your password has been changed, you'll be redirected to sign in page"}):a.jsx(c.FormProvider,W(W({},p),{},{children:a.jsxs("form",{onSubmit:h(r.handleNewPassword),children:[a.jsx(Z,{name:"password",type:"password",inputLabel:"Choose new password",placeholder:"Enter password",onChange:function(e){return l(e.target.value)},value:i,startAdornment:a.jsx(q.default,{position:"start",children:a.jsx(F.default,{})}),rules:{required:"Password is rquired"},helperText:null===(t=g.password)||void 0===t?void 0:t.message}),a.jsx(Z,{name:"confirmPassword",type:"password",placeholder:"Confirm Password",inputLabel:"Confirm",startAdornment:a.jsx(q.default,{position:"start",children:a.jsx(F.default,{})}),rules:{required:"Password is rquired"},helperText:null===(o=g.confirmPassword)||void 0===o?void 0:o.message}),a.jsx(z,{fullWidth:!0,type:"submit",last:!0,text:"Reset Password"})]})}))]})})},exports.PayWithWallet=function(e){return a.jsx(G,{maxWidth:400,noColor:!0,noMargin:!0,noPadding:!0,children:a.jsxs(G,{noMargin:!0,children:[a.jsx("div",{children:"Wallet Balance"}),a.jsx(z,{text:"Pay now"})]})})},exports.ResetPasswordForm=function(e){var r,t=c.useForm(),o=t.formState.errors,n=t.handleSubmit;return t.getValues,t.register,t.watch,t.reset,t.setValue,a.jsx(G,{maxWidth:400,noColor:!0,noMargin:!0,noPadding:!0,children:a.jsxs(G,{noMargin:!0,children:[e.error&&a.jsx($,{text:"This is a reset password alert",severity:"error"}),e.sent?a.jsx(D,{style:{textAlign:"center",margin:5},children:"An link was sent to your email to reset the password."}):a.jsx(c.FormProvider,W(W({},t),{},{children:a.jsxs("form",{onSubmit:n(e.handleResetPassword),children:[a.jsx(Z,{type:"text",name:"email",inputLabel:"Email",placeholder:"Enter your email",startAdornment:a.jsx(q.default,{position:"start",children:a.jsx(A.default,{})}),rules:{required:"Email is required",pattern:{value:/^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/,message:"Invalid email address"}},helperText:null===(r=o.email)||void 0===r?void 0:r.message}),a.jsx(z,{fullWidth:!0,last:!0,type:"submit",text:"Reset Password"})]})}))]})})},exports.SelectPayment=function(e){return a.jsx(G,{maxWidth:400,noColor:!0,noMargin:!0,noPadding:!0,children:a.jsxs(G,{noMargin:!0,children:[a.jsx(D,{align:"center",children:"Choose Payment Method"}),e.viaWallet&&a.jsx(U,{logo:"wallet",buttonText:e.walletLabel,onClick:e.handleWallet}),e.viaCreditCard&&a.jsx(U,{logo:"visa/master",buttonText:e.visaMasterLabel,handleClick:e.handleCreditCard}),e.viaMada&&a.jsx(U,{logo:"mada",buttonText:e.madaLabel,handleClick:e.handleMada}),e.viaSTCPay&&a.jsx(U,{logo:"stcpay",buttonText:e.stcPayLabel,handleClick:e.handleSTCPay}),e.viaPayPal&&a.jsx(U,{logo:"paypal",buttonText:e.paypalLabel,handleClick:e.handlePayPal}),e.viaGooglePay&&a.jsx(U,{logo:"googlepay",buttonText:e.googlePayLabel,handleClick:e.handleGooglePay}),e.viaApplePay&&a.jsx(U,{logo:"applepay",buttonText:e.applePayLabel,handleClick:e.handleApplePay})]})})},exports.SignInForm=function(e){var r,t,o=c.useForm(),n=o.formState.errors,i=o.handleSubmit;return a.jsxs(G,{maxWidth:400,noColor:!0,noMargin:!0,noPadding:!0,children:[a.jsxs(G,{noMargin:!0,children:[e.error&&a.jsx($,{text:"This is a sign in alert",severity:"error"}),a.jsx(c.FormProvider,W(W({},o),{},{children:a.jsxs("form",{onSubmit:i(e.handleSignIn),children:[a.jsx(Z,{type:"text",name:"email",inputLabel:"Email",placeholder:"Enter your email",startAdornment:a.jsx(q.default,{position:"start",children:a.jsx(A.default,{})}),rules:{required:"Email is required",pattern:{value:/^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/,message:"Invalid email address"}},helperText:null===(r=n.email)||void 0===r?void 0:r.message}),a.jsx(Z,{name:"password",placeholder:"Enter password",type:"password",inputLabel:"Password",startAdornment:a.jsx(q.default,{position:"start",children:a.jsx(F.default,{})}),rules:{required:"Password is rquired"},helperText:null===(t=n.password)||void 0===t?void 0:t.message}),a.jsx(D,{style:{cursor:"pointer",marginTop:5,width:"max-content",padding:5},onClick:function(){return console.log("res")},children:"Forgot password?"}),a.jsx(z,{type:"submit",fullWidth:!0,last:"true",text:"Sign In"})]})}))]}),a.jsxs(D,{style:{marginTop:5,textAlign:"center",padding:5},children:["New user?"," ",a.jsx("span",{onClick:function(){return console.log("res")},style:{cursor:"pointer",color:"blue",textAlign:"center"},children:"Sign up"})]}),e.viaGoogle&&a.jsx(U,{logo:"google",buttonText:e.googleButtonLabel,handleClick:e.handleGoogleSignIn}),e.viaGithub&&a.jsx(U,{logo:"github",buttonText:e.githubButtonLabel,handleClick:e.handleGithubSignIn}),e.viaTwitter&&a.jsx(U,{logo:"twitter",buttonText:e.twitterButtonLabel,handleClick:e.handleTwitterSignIn})]})},exports.SignUpForm=_,exports.UserProfile=function(e){var r,t,o,n,i=c.useForm(),l=i.formState.errors;return i.handleSubmit,a.jsx(G,{maxWidth:400,noMargin:!0,children:a.jsx(G,{noMargin:!0,noColor:!0,children:a.jsx(c.FormProvider,W(W({},i),{},{children:a.jsxs("form",{children:[a.jsx(Z,{type:"text",name:"fullName",inputLabel:"Full Name",placeholder:"Fulan AlFulani",rules:{required:"Email is required"},helperText:null===(r=l.fullName)||void 0===r?void 0:r.message}),a.jsx(Z,{type:"text",name:"email",inputLabel:"New Email",placeholder:"Enter your new email",rules:{required:"Email is required"},helperText:null===(t=l.email)||void 0===t?void 0:t.message}),a.jsx(Z,{type:"password",name:"password",inputLabel:"New password",placeholder:"Enter your new password",rules:{required:"Email is required"},helperText:null===(o=l.password)||void 0===o?void 0:o.message}),a.jsx(Z,{type:"password",name:"confirmPassword",inputLabel:"Confirm new password",placeholder:"Confirm new password",rules:{required:"Email is required"},helperText:null===(n=l.confirmPassword)||void 0===n?void 0:n.message}),a.jsx(z,{fullWidth:!0,last:!0,text:"Update Account"})]})}))})})},exports.UserSettings=function(e){return a.jsxs(G,{maxWidth:400,children:[a.jsx(Z,{type:"text",inputLabel:"First Name"}),a.jsx(Z,{type:"text",inputLabel:"Last Name"}),a.jsx(Z,{type:"email",inputLabel:"Email"}),a.jsx(Z,{type:"password",inputLabel:"Password"}),a.jsx(z,{last:!0,text:"Update Account"})]})};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sikka/hawa",
-  "version": "0.0.7",
+  "version": "0.0.8",
   "description": "UI Kit",
   "main": "lib/index.js",
   "module": "es/index.es.js",
@@ -21,6 +21,7 @@
     "@rollup/plugin-commonjs": "^21.0.1",
     "@rollup/plugin-node-resolve": "^11.1.1",
     "@storybook/addon-actions": "^6.4.7",
+    "@storybook/addon-docs": "^6.4.19",
     "@storybook/addon-essentials": "^6.4.7",
     "@storybook/addon-links": "^6.4.7",
     "@storybook/addons": "^6.4.19",

package/src/blocks/AuthForms/NewPasswordForm.js

@@ -1,6 +1,11 @@
 import React, { useState } from "react";
 import { Box } from "../../layout";
-import { ActionButton, HawaTextField, HawaAlert } from "../../ui";
+import {
+  ActionButton,
+  HawaTextField,
+  HawaAlert,
+  HawaTypography
+} from "../../ui";
 import { FormProvider, useForm } from "react-hook-form";
 import InputAdornment from "@mui/material/InputAdornment";
 import PasswordIcon from "@mui/icons-material/HttpsOutlined";
@@ -48,43 +53,54 @@ export const NewPasswordForm = (props) => {
         {props.error && (
           <HawaAlert text="This is a new password alert" severity="error" />
         )}
-        <FormProvider {...methods}>
-          <form onSubmit={handleSubmit(props.handleNewPassword)}>
-            <HawaTextField
-              name="password"
-              type="password"
-              inputLabel="Choose new password"
-              placeholder="Enter password"
-              onChange={(e) => setNewPassword(e.target.value)}
-              value={newPassword}
-              startAdornment={
-                <InputAdornment position="start">
-                  <PasswordIcon />
-                </InputAdornment>
-              }
-              rules={{
-                required: "Password is rquired"
-              }}
-              helperText={errors.password?.message}
-            />
-            <HawaTextField
-              name="confirmPassword"
-              type="password"
-              placeholder="Confirm Password"
-              inputLabel="Confirm"
-              startAdornment={
-                <InputAdornment position="start">
-                  <PasswordIcon />
-                </InputAdornment>
-              }
-              rules={{
-                required: "Password is rquired"
-              }}
-              helperText={errors.confirmPassword?.message}
-            />
-            <ActionButton fullWidth type="submit" last text="Reset Password" />
-          </form>
-        </FormProvider>
+        {props.passwordChanged ? (
+          <HawaTypography style={{ textAlign: "center", margin: 5 }}>
+            Your password has been changed, you'll be redirected to sign in page
+          </HawaTypography>
+        ) : (
+          <FormProvider {...methods}>
+            <form onSubmit={handleSubmit(props.handleNewPassword)}>
+              <HawaTextField
+                name="password"
+                type="password"
+                inputLabel="Choose new password"
+                placeholder="Enter password"
+                onChange={(e) => setNewPassword(e.target.value)}
+                value={newPassword}
+                startAdornment={
+                  <InputAdornment position="start">
+                    <PasswordIcon />
+                  </InputAdornment>
+                }
+                rules={{
+                  required: "Password is rquired"
+                }}
+                helperText={errors.password?.message}
+              />
+              <HawaTextField
+                name="confirmPassword"
+                type="password"
+                placeholder="Confirm Password"
+                inputLabel="Confirm"
+                startAdornment={
+                  <InputAdornment position="start">
+                    <PasswordIcon />
+                  </InputAdornment>
+                }
+                rules={{
+                  required: "Password is rquired"
+                }}
+                helperText={errors.confirmPassword?.message}
+              />
+              <ActionButton
+                fullWidth
+                type="submit"
+                last
+                text="Reset Password"
+              />
+            </form>
+          </FormProvider>
+        )}
       </Box>
     </Box>
   );

package/src/blocks/AuthForms/ResetPasswordForm.js

@@ -1,7 +1,12 @@
 import React from "react";
 import { FormProvider, useForm } from "react-hook-form";
 import { Box } from "../../layout";
-import { HawaTextField, ActionButton, HawaAlert } from "../../ui";
+import {
+  HawaTextField,
+  ActionButton,
+  HawaAlert,
+  HawaTypography
+} from "../../ui";
 import InputAdornment from "@mui/material/InputAdornment";
 import EmailIcon from "@mui/icons-material/MailOutline";
 
@@ -22,31 +27,42 @@ export const ResetPasswordForm = (props) => {
         {props.error && (
           <HawaAlert text="This is a reset password alert" severity="error" />
         )}
-        <FormProvider {...methods}>
-          <form onSubmit={handleSubmit(props.handleResetPassword)}>
-            <HawaTextField
-              type="text"
-              name="email"
-              inputLabel="Email"
-              placeholder="Enter your email"
-              startAdornment={
-                <InputAdornment position="start">
-                  <EmailIcon />
-                </InputAdornment>
-              }
-              rules={{
-                required: "Email is required",
-                pattern: {
-                  value:
-                    /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/,
-                  message: "Invalid email address"
+        {!props.sent ? (
+          <FormProvider {...methods}>
+            <form onSubmit={handleSubmit(props.handleResetPassword)}>
+              <HawaTextField
+                type="text"
+                name="email"
+                inputLabel="Email"
+                placeholder="Enter your email"
+                startAdornment={
+                  <InputAdornment position="start">
+                    <EmailIcon />
+                  </InputAdornment>
                 }
-              }}
-              helperText={errors.email?.message}
-            />
-            <ActionButton fullWidth last type="submit" text="Reset Password" />
-          </form>
-        </FormProvider>{" "}
+                rules={{
+                  required: "Email is required",
+                  pattern: {
+                    value:
+                      /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/,
+                    message: "Invalid email address"
+                  }
+                }}
+                helperText={errors.email?.message}
+              />
+              <ActionButton
+                fullWidth
+                last
+                type="submit"
+                text="Reset Password"
+              />
+            </form>
+          </FormProvider>
+        ) : (
+          <HawaTypography style={{ textAlign: "center", margin: 5 }}>
+            An link was sent to your email to reset the password.
+          </HawaTypography>
+        )}
       </Box>
     </Box>
   );

package/src/blocks/AuthForms/SignInForm.js

@@ -2,10 +2,9 @@ import React from "react";
 import {
   HawaTextField,
   ActionButton,
-  GoogleButton,
-  TwitterButton,
-  GithubButton,
-  HawaAlert
+  HawaAlert,
+  HawaTypography,
+  HawaLogoButton
 } from "../../ui";
 import { Box } from "../../layout";
 import { FormProvider, useForm } from "react-hook-form";
@@ -65,6 +64,17 @@ export const SignInForm = (props) => {
               }}
               helperText={errors.password?.message}
             />
+            <HawaTypography
+              style={{
+                cursor: "pointer",
+                marginTop: 5,
+                width: "max-content",
+                padding: 5
+              }}
+              onClick={() => console.log("res")}
+            >
+              Forgot password?
+            </HawaTypography>
             <ActionButton
               type="submit"
               fullWidth
@@ -74,20 +84,43 @@ export const SignInForm = (props) => {
           </form>
         </FormProvider>
       </Box>
+      <HawaTypography
+        style={{
+          marginTop: 5,
+          // width: "max-content",
+          textAlign: "center",
+          padding: 5
+        }}
+      >
+        New user?{" "}
+        <span
+          onClick={() => console.log("res")}
+          style={{
+            cursor: "pointer",
+            color: "blue",
+            textAlign: "center"
+          }}
+        >
+          Sign up
+        </span>
+      </HawaTypography>
       {props.viaGoogle && (
-        <GoogleButton
+        <HawaLogoButton
+          logo="google"
           buttonText={props.googleButtonLabel}
           handleClick={props.handleGoogleSignIn}
         />
       )}
       {props.viaGithub && (
-        <GithubButton
+        <HawaLogoButton
+          logo="github"
           buttonText={props.githubButtonLabel}
           handleClick={props.handleGithubSignIn}
         />
       )}
       {props.viaTwitter && (
-        <TwitterButton
+        <HawaLogoButton
+          logo="twitter"
           buttonText={props.twitterButtonLabel}
           handleClick={props.handleTwitterSignIn}
         />

package/src/blocks/AuthForms/SignUpForm.js

@@ -3,10 +3,9 @@ import { Box } from "../../layout";
 import {
   HawaTextField,
   ActionButton,
-  GoogleButton,
-  GithubButton,
-  TwitterButton,
-  HawaAlert
+  HawaAlert,
+  HawaTypography,
+  HawaLogoButton
 } from "../../ui";
 import PropTypes from "prop-types";
 import { FormProvider, useForm } from "react-hook-form";
@@ -96,20 +95,43 @@ export const SignUpForm = (props) => {
           </form>
         </FormProvider>
       </Box>
+      <HawaTypography
+        style={{
+          marginTop: 5,
+          // width: "max-content",
+          textAlign: "center",
+          padding: 5
+        }}
+      >
+        Existing user?{" "}
+        <span
+          onClick={() => console.log("res")}
+          style={{
+            cursor: "pointer",
+            color: "blue",
+            textAlign: "center"
+          }}
+        >
+          Sign in
+        </span>
+      </HawaTypography>
       {props.viaGoogle && (
-        <GoogleButton
+        <HawaLogoButton
+          logo="google"
           buttonText={props.googleButtonLabel}
           handleClick={props.handleGoogleSignIn}
         />
       )}
       {props.viaGithub && (
-        <GithubButton
+        <HawaLogoButton
+          logo="github"
           buttonText={props.githubButtonLabel}
-          handleClick={props.handleGithubSignUp}
+          handleClick={props.handleGithubSignIn}
         />
       )}
       {props.viaTwitter && (
-        <TwitterButton
+        <HawaLogoButton
+          logo="twitter"
           buttonText={props.twitterButtonLabel}
           handleClick={props.handleTwitterSignIn}
         />

package/src/blocks/Payment/PayWithWallet.js

@@ -1,5 +1,5 @@
 import React from "react";
-import { ActionButton, WalletButton } from "../../ui";
+import { ActionButton } from "../../ui";
 import { Box } from "../../layout";
 
 export const PayWithWallet = (props) => {