@sikka/hawa 0.0.12 → 0.0.15

package/es/index.es.js

@@ -1 +1 @@
-import{useState as e}from"react";import t from"@mui/material/Button";import"@mui/material/Tooltip";import r from"prop-types";import{jsx as a,jsxs as l,Fragment as i}from"react/jsx-runtime";import"@mui/material/FormControlLabel";import"@mui/material/Checkbox";import o from"@mui/material/Container";import"@mui/material/TextField";import n from"@mui/material/Typography";import s from"@mui/icons-material/GitHub";import d from"@mui/icons-material/Twitter";import u from"@mui/icons-material/AccountBalanceWallet";import{Typography as m,Container as p,Button as c}from"@mui/material";import h from"@mui/material/Input";import g from"@mui/material/InputLabel";import b from"@mui/material/Alert";import f from"@mui/material/AlertTitle";import{useForm as x,FormProvider as y}from"react-hook-form";import v from"@mui/material/InputAdornment";import w from"@mui/icons-material/HttpsOutlined";import T from"@mui/icons-material/MailOutline";import P from"@mui/icons-material/PermIdentityOutlined";function S(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);t&&(a=a.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,a)}return r}function C(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?S(Object(r),!0).forEach((function(t){k(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):S(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}function k(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function W(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){var r=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null==r)return;var a,l,i=[],o=!0,n=!1;try{for(r=r.call(e);!(o=(a=r.next()).done)&&(i.push(a.value),!t||i.length!==t);o=!0);}catch(e){n=!0,l=e}finally{try{o||null==r.return||r.return()}finally{if(n)throw l}}return i}(e,t)||function(e,t){if(!e)return;if("string"==typeof e)return A(e,t);var r=Object.prototype.toString.call(e).slice(8,-1);"Object"===r&&e.constructor&&(r=e.constructor.name);if("Map"===r||"Set"===r)return Array.from(e);if("Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r))return A(e,t)}(e,t)||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 A(e,t){(null==t||t>e.length)&&(t=e.length);for(var r=0,a=new Array(t);r<t;r++)a[r]=e[r];return a}r.string,r.bool,r.bool,r.bool;var L=function(e){return a(n,C(C({},e),{},{children:e.children}))};r.oneOf(["text","number","password"]),r.string;var q=function(e){var r,i="";switch(null===(r=e.logo)||void 0===r?void 0:r.toLowerCase()){case"google":i=a("img",{src:"https://upload.wikimedia.org/wikipedia/commons/5/53/Google_%22G%22_Logo.svg"});break;case"github":i=a(s,{});break;case"twitter":i=a(d,{});break;case"mada":i=a("img",{src:"https://sikka-images.s3.ap-southeast-1.amazonaws.com/payments/mada.png",height:20});break;case"stcpay":i=a("img",{src:"https://sikka-images.s3.ap-southeast-1.amazonaws.com/payments/stc-pay.png",height:20});break;case"visa/master":i=a("img",{src:"https://sikka-images.s3.ap-southeast-1.amazonaws.com/payments/visa-master.png",height:30});break;case"paypal":i=a("img",{src:"https://sikka-images.s3.ap-southeast-1.amazonaws.com/payments/paypal.png",height:25});break;case"googlepay":i=a("img",{src:"https://sikka-images.s3.ap-southeast-1.amazonaws.com/payments/google-pay.png",height:20});break;case"applepay":i=a("img",{src:"https://sikka-images.s3.ap-southeast-1.amazonaws.com/payments/apple-pay.png",height:40});break;case"wallet":i=a(u,{})}return l(t,C(C({},e),{},{variant:"withLogo",children:[i,a("div",{style:{width:10}}),a(m,{style:{color:"black",fontSize:14,textAlign:"center",letterSpacing:.4,fontFamily:"Roboto",fontWeight:500},children:e.buttonText})]}))},O=function(e){return l(i,{children:[a(g,{children:e.label}),a(h,C({disableUnderline:!0},e))]})},N=function(e){return l(b,{children:[e.title&&a(f,{children:e.title}),e.text]})},I=function(e){var r,i,n,s,d=x(),u=d.formState.errors;return d.handleSubmit,a(o,{maxWidth:"xs",children:a(y,C(C({},d),{},{children:l("form",{children:[a(O,{fullWidth:!0,type:"text",name:"fullName",label:"Full Name",placeholder:"Fulan AlFulani",rules:{required:"Email is required"},helperText:null===(r=u.fullName)||void 0===r?void 0:r.message}),a(O,{fullWidth:!0,type:"text",name:"fullName",label:"Phone Number",placeholder:"+966",rules:{required:"Email is required"}}),a(O,{fullWidth:!0,type:"text",name:"email",label:"New Email",placeholder:"Enter your new email",rules:{required:"Email is required"},helperText:null===(i=u.email)||void 0===i?void 0:i.message}),a(O,{fullWidth:!0,type:"password",name:"password",label:"New password",placeholder:"Enter your new password",rules:{required:"Email is required"},helperText:null===(n=u.password)||void 0===n?void 0:n.message}),a(O,{fullWidth:!0,type:"password",name:"confirmPassword",label:"Confirm new password",placeholder:"Confirm new password",rules:{required:"Email is required"},helperText:null===(s=u.confirmPassword)||void 0===s?void 0:s.message}),a(t,{type:"submit",fullWidth:!0,variant:"last",children:"update profile"})," "]})}))})},j=function(e){return l(p,{maxWidth:"xs",children:[a(O,{type:"text",label:"First Name"}),a(O,{type:"text",label:"Last Name"}),a(O,{type:"email",label:"Email"}),a(O,{type:"password",label:"Password"}),a(c,{type:"submit",fullWidth:!0,variant:"last",children:"Save Settings"})]})},E=function(r){var i,n,s=W(e(""),2),d=s[0],u=s[1],m=x(),p=m.formState.errors,c=m.handleSubmit;return l(o,{maxWidth:"xs",variant:"auth",children:[r.error&&a(N,{text:"This is a new password alert",severity:"error"}),r.passwordChanged?a(L,{style:{textAlign:"center",margin:5},children:"Your password has been changed, you'll be redirected to sign in page"}):a(y,C(C({},m),{},{children:l("form",{onSubmit:c(r.handleNewPassword),children:[a(O,{fullWidth:!0,name:"password",type:"password",label:r.texts.passwordLabel,placeholder:r.texts.passwordPlaceholder,onChange:function(e){return u(e.target.value)},value:d,startAdornment:a(v,{position:"start",children:a(w,{})}),rules:{required:r.texts.passwordRequiredText},helperText:null===(i=p.password)||void 0===i?void 0:i.message}),a(O,{fullWidth:!0,name:"confirmPassword",type:"password",placeholder:r.texts.confirmPasswordPlaceholder,label:r.texts.confirmPasswordLabel,startAdornment:a(v,{position:"start",children:a(w,{})}),rules:{required:"Password is rquired"},helperText:null===(n=p.confirmPassword)||void 0===n?void 0:n.message}),a(t,{type:"submit",fullWidth:!0,variant:"last",children:r.texts.updatePassword})]})}))]})},z=function(e){var r,i=x(),n=i.formState.errors,s=i.handleSubmit;return i.getValues,i.register,i.watch,i.reset,i.setValue,l(o,{maxWidth:"xs",variant:"auth",children:[e.error&&l(Alert,{severity:"error",children:[e.errorTitle&&a(AlertTitle,{children:e.errorTitle}),e.errorText]}),e.sent?a(L,{style:{textAlign:"center",margin:5},children:"An link was sent to your email to reset the password."}):a(y,C(C({},i),{},{children:l("form",{onSubmit:s(e.handleResetPassword),children:[a(O,{fullWidth:!0,type:"text",name:"email",label:e.texts.emailLabel,placeholder:e.texts.emailPlaceholder,startAdornment:a(v,{position:"start",children:a(T,{})}),rules:{required:e.texts.emailRequiredText,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:e.texts.emailInvalidText}},helperText:null===(r=n.email)||void 0===r?void 0:r.message}),a(t,{type:"submit",fullWidth:!0,variant:"last",children:e.texts.resetPassword})]})}))]})},G=function(e){var r,i,s,d=x(),u=d.formState.errors,m=d.handleSubmit;return l(o,{maxWidth:"xs",variant:"auth",children:[e.error&&l(b,{severity:"error",children:[e.errorTitle&&a(f,{children:e.errorTitle}),e.errorText]}),a(y,C(C({},d),{},{children:l("form",{onSubmit:m(e.handleSignUp),children:[a(O,{fullWidth:!0,type:"text",label:e.texts.fullNameLabel,name:"fullName",placeholder:e.texts.fullNamePlaceholder,inputLabel:e.texts.fullNameLabel,startAdornment:a(v,{position:"start",children:a(P,{})}),helperText:null===(r=u.fullName)||void 0===r?void 0:r.message}),a(O,{fullWidth:!0,type:"text",label:e.texts.emailLabel,placeholder:e.texts.emailPlaceholder,name:"email",startAdornment:a(v,{position:"start",children:a(T,{})}),rules:{required:e.texts.emailRequiredText,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:e.texts.emailInvalidText}},helperText:null===(i=u.email)||void 0===i?void 0:i.message}),a(O,{fullWidth:!0,name:"password",placeholder:e.texts.passwordPlaceholder,type:"password",label:e.texts.passwordLabel,startAdornment:a(v,{position:"start",children:a(w,{})}),rules:{required:e.texts.passwordRequiredText,minLength:{value:8,message:e.texts.passwordTooShortText}},helperText:null===(s=u.password)||void 0===s?void 0:s.message}),a(t,{fullWidth:!0,variant:"last",type:"submit",children:e.texts.signUpText})]})})),l(n,{variant:"subtitle2",style:{marginTop:5,textAlign:"center",padding:5},children:["Existing user?"," ",a("span",{onClick:e.handleRouteToSignIn,style:{cursor:"pointer",color:"blue",textAlign:"center"},children:e.texts.signInText})]}),l("div",{style:{display:"flex",flexDirection:"column"},children:[e.viaGoogle&&a(q,{logo:"google",buttonText:e.texts.googleButtonLabel,onClick:e.handleGoogleSignUp}),e.viaGithub&&a(q,{logo:"github",buttonText:e.texts.githubButtonLabel,onClick:e.handleGithubSignUp}),e.viaTwitter&&a(q,{logo:"twitter",buttonText:e.texts.twitterButtonLabel,onClick:e.handleTwitterSignUp})]})]})};G.propTypes={theme:r.oneOf(["secondary","primary"])};var R=function(e){var r,i,s=x(),d=s.formState.errors,u=s.handleSubmit;return l(o,{maxWidth:"xs",variant:"auth",children:[e.error&&l(b,{severity:"error",children:[e.errorTitle&&a(f,{children:e.errorTitle}),e.errorText]}),a(y,C(C({},s),{},{children:l("form",{onSubmit:u(e.handleSignIn),children:[a(O,{fullWidth:!0,type:"text",name:"email",label:e.texts.emailLabel,placeholder:e.texts.emailPlaceholder,startAdornment:a(v,{position:"start",children:a(T,{})}),rules:{required:e.texts.emailRequired,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:e.texts.emailInvalidText}},helperText:null===(r=d.email)||void 0===r?void 0:r.message}),a(O,{fullWidth:!0,name:"password",placeholder:e.texts.passwordPlaceholder,type:"password",label:e.texts.passwordLabel,startAdornment:a(v,{position:"start",children:a(w,{})}),rules:{required:e.texts.passwordRequired},helperText:null===(i=d.password)||void 0===i?void 0:i.message}),a(n,{style:{cursor:"pointer",marginTop:5,width:"max-content",fontSize:15,padding:5},onClick:e.handleForgotPassword,children:e.texts.forgotPasswordText}),a(t,{type:"submit",fullWidth:!0,variant:"last",children:e.texts.signInText})]})})),l(n,{variant:"subtitle2",style:{marginTop:5,textAlign:"center",padding:5},children:[e.texts.newUserText," ",a("span",{onClick:e.handleRouteToSignUp,style:{cursor:"pointer",color:"blue",textAlign:"center"},children:e.texts.signUpText})]}),l("div",{style:{display:"flex",flexDirection:"column"},children:[e.viaGoogle&&a(q,{logo:"google",buttonText:e.texts.googleButtonLabel,onClick:e.handleGoogleSignIn}),e.viaGithub&&a(q,{logo:"github",buttonText:e.texts.githubButtonLabel,onClick:e.handleGithubSignIn}),e.viaTwitter&&a(q,{logo:"twitter",buttonText:e.texts.twitterButtonLabel,onClick:e.handleTwitterSignIn})]})]})},B=function(e){return l(p,{maxWidth:"xs",children:[a(L,{align:"center",children:"Choose Payment Method"}),e.viaWallet&&a(q,{logo:"wallet",buttonText:e.walletLabel,onClick:e.handleWallet}),e.viaCreditCard&&a(q,{logo:"visa/master",buttonText:e.visaMasterLabel,onClick:e.handleCreditCard}),e.viaMada&&a(q,{logo:"mada",buttonText:e.madaLabel,onClick:e.handleMada}),e.viaSTCPay&&a(q,{logo:"stcpay",buttonText:e.stcPayLabel,onClick:e.handleSTCPay}),e.viaPayPal&&a(q,{logo:"paypal",buttonText:e.paypalLabel,onClick:e.handlePayPal}),e.viaGooglePay&&a(q,{logo:"googlepay",buttonText:e.googlePayLabel,onClick:e.handleGooglePay}),e.viaApplePay&&a(q,{logo:"applepay",buttonText:e.applePayLabel,onClick:e.handleApplePay})]})};O.propTypes={theme:r.oneOf(["secondary","primary"]),viaApplePay:r.bool,viaGooglePay:r.bool,viaSTCPay:r.bool,viaCreditCard:r.bool,viaPayPal:r.bool,handleApplePay:r.func};var U=function(e){var t,r,i=x(),o=i.formState.errors,n=i.handleSubmit;return a(p,{maxWidth:"xs",children:a(y,C(C({},i),{},{children:l("form",{onSubmit:n(e.handle),children:[a(O,{fullWidth:!0,name:"password",placeholder:"Enter password",type:"number",label:"Card Number",rules:{required:"Password is rquired"},helperText:null===(t=o.password)||void 0===t?void 0:t.message}),a(O,{fullWidth:!0,name:"password",placeholder:"Enter password",type:"password",label:"Name On Card",rules:{required:"Password is rquired"},helperText:null===(r=o.password)||void 0===r?void 0:r.message}),a(c,{type:"submit",fullWidth:!0,variant:"last",onClick:e.handlePayWithCreditCard,children:"Pay with Credit Card"})]})}))})},F=function(r){var i,s=W(e(0),2),d=s[0],u=s[1],m=x(),p=m.formState.errors,c=m.handleSubmit;return l(o,{maxWidth:"xs",children:[l(n,{align:"center",variant:"h1",children:[Number(d).toLocaleString("en")||"0",a(n,{children:r.currency||"SAR"})]}),a(y,C(C({},m),{},{children:l("form",{onChange:function(e){e.preventDefault(),u(m.getValues().amount)},style:{marginTop:10},onSubmit:c(r.handleChargeWallet),children:[a(O,{fullWidth:!0,name:"amount",placeholder:"Enter amount",type:"number",value:d,rules:{required:"Password is rquired"},helperText:null===(i=p.amount)||void 0===i?void 0:i.message}),a(t,{type:"submit",fullWidth:!0,variant:"last",onClick:r.handleSignIn,children:"Charge Wallet"})]})}))]})},D=function(e){return l(p,{maxWidth:"xs",children:[a(m,{align:"center",children:"Wallet Balance"}),l(m,{align:"center",variant:"h1",children:[e.walletBalance||"0",a(m,{children:e.currency||"SAR"})]}),a(c,{type:"submit",fullWidth:!0,variant:"last",onClick:e.handlePayWithWallet,children:"Pay Now"})]})};export{F as ChargeWalletForm,U as CreditCardForm,E as NewPasswordForm,D as PayWithWallet,z as ResetPasswordForm,B as SelectPayment,R as SignInForm,G as SignUpForm,I as UserProfileForm,j as UserSettingsForm};
+import{useState as e}from"react";import t from"@mui/material/Button";import"@mui/material/Tooltip";import r from"prop-types";import{jsx as a,jsxs as i,Fragment as l}from"react/jsx-runtime";import{Typography as n,Container as o,Button as s}from"@mui/material";import"@mui/icons-material/MoveToInbox";import d from"@mui/material/AppBar";import"@mui/material/Box";import"@mui/material/Toolbar";import"@mui/material/IconButton";import u from"@mui/material/Typography";import"@mui/material/Menu";import"@mui/icons-material/Menu";import m from"@mui/material/Container";import"@mui/material/Avatar";import"@mui/material/MenuItem";import"@mui/material/FormControlLabel";import"@mui/material/Checkbox";import"@mui/icons-material/CheckCircleOutlined";import c from"@mui/material/Input";import p from"@mui/material/InputLabel";import h from"@mui/icons-material/GitHub";import g from"@mui/icons-material/Twitter";import f from"@mui/icons-material/AccountBalanceWallet";import v from"@mui/material/Alert";import x from"@mui/material/AlertTitle";import{useForm as b,FormProvider as y,Controller as w}from"react-hook-form";import T from"@mui/material/InputAdornment";import P from"@mui/icons-material/HttpsOutlined";import S from"@mui/icons-material/MailOutline";import C from"@mui/icons-material/PermIdentityOutlined";import{styled as k}from"@mui/material/styles";import W from"@mui/material/Drawer";import"@mui/material/List";import"@mui/material/Divider";import"@mui/icons-material/ChevronLeft";import"@mui/icons-material/ChevronRight";import"@mui/material/ListItemButton";import"@mui/material/ListItemIcon";import"@mui/material/ListItemText";import"@mui/icons-material/Mail";function A(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);t&&(a=a.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,a)}return r}function L(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?A(Object(r),!0).forEach((function(t){q(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):A(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}function q(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function I(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){var r=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null==r)return;var a,i,l=[],n=!0,o=!1;try{for(r=r.call(e);!(n=(a=r.next()).done)&&(l.push(a.value),!t||l.length!==t);n=!0);}catch(e){o=!0,i=e}finally{try{n||null==r.return||r.return()}finally{if(o)throw i}}return l}(e,t)||function(e,t){if(!e)return;if("string"==typeof e)return O(e,t);var r=Object.prototype.toString.call(e).slice(8,-1);"Object"===r&&e.constructor&&(r=e.constructor.name);if("Map"===r||"Set"===r)return Array.from(e);if("Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r))return O(e,t)}(e,t)||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,t){(null==t||t>e.length)&&(t=e.length);for(var r=0,a=new Array(t);r<t;r++)a[r]=e[r];return a}r.string,r.bool;var j=function(e){return a(u,L(L({},e),{},{children:e.children}))},z=function(e){return i(l,{children:[i("div",{style:{display:"flex",flexDirection:"row",justifyContent:"space-between",alignItems:"center"},children:[a(p,{children:e.label}),e.helperText&&a(n,{variant:"validation",children:e.helperText})]}),a(c,L({disableUnderline:!0},e))]})};r.oneOf(["text","number","password"]),r.string;var N=function(e){var r,l="";switch(null===(r=e.logo)||void 0===r?void 0:r.toLowerCase()){case"google":l=a("img",{src:"https://upload.wikimedia.org/wikipedia/commons/5/53/Google_%22G%22_Logo.svg"});break;case"github":l=a(h,{});break;case"twitter":l=a(g,{});break;case"mada":l=a("img",{src:"https://sikka-images.s3.ap-southeast-1.amazonaws.com/payments/mada.png",height:20});break;case"stcpay":l=a("img",{src:"https://sikka-images.s3.ap-southeast-1.amazonaws.com/payments/stc-pay.png",height:20});break;case"visa/master":l=a("img",{src:"https://sikka-images.s3.ap-southeast-1.amazonaws.com/payments/visa-master.png",height:30});break;case"paypal":l=a("img",{src:"https://sikka-images.s3.ap-southeast-1.amazonaws.com/payments/paypal.png",height:25});break;case"googlepay":l=a("img",{src:"https://sikka-images.s3.ap-southeast-1.amazonaws.com/payments/google-pay.png",height:20});break;case"applepay":l=a("img",{src:"https://sikka-images.s3.ap-southeast-1.amazonaws.com/payments/apple-pay.png",height:40});break;case"wallet":l=a(f,{})}return i(t,L(L({},e),{},{variant:"withLogo",children:[l,a("div",{style:{width:10}}),a(n,{style:{color:"black",fontSize:14,textAlign:"center",letterSpacing:.4,fontFamily:"Roboto",fontWeight:500},children:e.buttonText})]}))},E=function(e){return i(v,L(L({},e),{},{children:[e.title&&a(x,{children:e.title}),e.text]}))},B=function(e){var r,l,n,o,s=b(),d=s.formState.errors;return a(m,{maxWidth:"sm",children:a(y,L(L({},s),{},{children:i("form",{children:[a(z,{fullWidth:!0,type:"text",name:"fullName",label:"Full Name",placeholder:"Fulan AlFulani",rules:{required:"Email is required"},helperText:null===(r=d.fullName)||void 0===r?void 0:r.message}),a(z,{fullWidth:!0,type:"text",name:"fullName",label:"Phone Number",placeholder:"+966",rules:{required:"Email is required"}}),a(z,{fullWidth:!0,type:"text",name:"email",label:"New Email",placeholder:"Enter your new email",rules:{required:"Email is required"},helperText:null===(l=d.email)||void 0===l?void 0:l.message}),a(z,{fullWidth:!0,type:"password",name:"password",label:"New password",placeholder:"Enter your new password",rules:{required:"Email is required"},helperText:null===(n=d.password)||void 0===n?void 0:n.message}),a(z,{fullWidth:!0,type:"password",name:"confirmPassword",label:"Confirm new password",placeholder:"Confirm new password",rules:{required:"Email is required"},helperText:null===(o=d.confirmPassword)||void 0===o?void 0:o.message}),a(t,{type:"submit",fullWidth:!0,variant:"last",children:"update profile"})," "]})}))})},R=function(e){return i(o,{maxWidth:"sm",children:[e.children,a(s,{type:"submit",fullWidth:!0,variant:"last",children:"Save Settings"})]})},G=function(r){var l=I(e(""),2);l[0],l[1];var n=I(e(""),2);n[0],n[1];var o=I(e(!1),2),s=o[0],d=o[1],u=b(),c=u.formState.errors,p=u.handleSubmit,h=u.control;return i(m,{maxWidth:"xs",variant:"auth",children:[s&&a(E,{text:r.texts.passwordMatchError,severity:"error"}),r.passwordChanged?a(j,{style:{textAlign:"center",margin:5},children:"Your password has been changed, you'll be redirected to sign in page"}):a(y,L(L({},u),{},{children:i("form",{onSubmit:p((function(e){console.log("handling subb",e),e.password===e.confirmPassword?r.handleNewPassword():d(!0)})),children:[a(w,{control:h,name:"password",render:function(e){var t,i,l=e.field;return a(z,L({fullWidth:!0,type:"password",value:null!==(t=l.value)&&void 0!==t?t:"",label:r.texts.passwordLabel,placeholder:r.texts.passwordPlaceholder,helperText:null===(i=c.password)||void 0===i?void 0:i.message,startAdornment:a(T,{position:"start",children:a(P,{})})},l))},rules:{required:r.texts.passwordRequiredText}}),a(w,{control:h,name:"confirmPassword",render:function(e){var t,i,l=e.field;return a(z,L({fullWidth:!0,type:"password",value:null!==(t=l.value)&&void 0!==t?t:"",label:r.texts.confirmPasswordLabel,placeholder:r.texts.confirmPasswordPlaceholder,helperText:null===(i=c.confirmPassword)||void 0===i?void 0:i.message,startAdornment:a(T,{position:"start",children:a(P,{})})},l))},rules:{required:r.texts.confirmPasswordRequiredText}}),a(t,{type:"submit",fullWidth:!0,variant:"last",children:r.texts.updatePassword})]})}))]})},M=function(e){var r,l=b(),n=l.formState.errors,o=l.handleSubmit;l.register;var s=l.control;return i(m,{maxWidth:"xs",variant:"auth",children:[e.error&&i(Alert,{severity:"error",children:[e.errorTitle&&a(AlertTitle,{children:e.errorTitle}),e.errorText]}),e.sent?a(j,{style:{textAlign:"center",margin:5},children:"An link was sent to your email to reset the password."}):i("form",{onSubmit:o(e.handleResetPassword),children:[console.log("eror ",null===(r=n.email)||void 0===r?void 0:r.message),a(w,{control:s,name:"email",render:function(t){var r,i,l=t.field;return a(z,L({fullWidth:!0,type:"text",value:null!==(r=l.value)&&void 0!==r?r:"",label:e.texts.emailLabel,helperText:null===(i=n.email)||void 0===i?void 0:i.message,placeholder:e.texts.emailPlaceholder,startAdornment:a(T,{position:"start",children:a(S,{})})},l))},rules:{required:e.texts.emailRequiredText,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:e.texts.emailInvalidText}}}),a(t,{type:"submit",fullWidth:!0,variant:"last",children:e.texts.resetPassword})]})]})},D=function(e){var r=b(),l=r.formState.errors,n=r.handleSubmit,o=r.control;return i(m,{maxWidth:"xs",variant:"auth",children:[e.error&&i(v,{severity:"error",children:[e.errorTitle&&a(x,{children:e.errorTitle}),e.errorText]}),a(y,L(L({},r),{},{children:i("form",{onSubmit:n(e.handleSignUp),children:[a(w,{control:o,name:"fullName",render:function(t){var r,i,n=t.field;return a(z,{fullWidth:!0,type:"text",value:null!==(r=n.value)&&void 0!==r?r:"",label:e.texts.fullNameLabel,placeholder:e.texts.fullNamePlaceholder,helperText:null===(i=l.fullName)||void 0===i?void 0:i.message,startAdornment:a(T,{position:"start",children:a(C,{})})})},rules:{required:e.texts.fullNameRequiredText}}),a(w,{control:o,name:"email",render:function(t){var r,i,n=t.field;return a(z,{fullWidth:!0,type:"text",value:null!==(r=n.value)&&void 0!==r?r:"",label:e.texts.emailLabel,helperText:null===(i=l.email)||void 0===i?void 0:i.message,placeholder:e.texts.emailPlaceholder,startAdornment:a(T,{position:"start",children:a(S,{})})})},rules:{required:e.texts.emailRequiredText,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:e.texts.emailInvalidText}}}),a(w,{control:o,name:"password",render:function(t){var r,i,n,o=t.field;return a(z,L({fullWidth:!0,type:"password",defaultValue:null!==(r=o.value)&&void 0!==r?r:"",value:null!==(i=o.value)&&void 0!==i?i:"",label:e.texts.passwordLabel,placeholder:e.texts.passwordPlaceholder,helperText:null===(n=l.password)||void 0===n?void 0:n.message,startAdornment:a(T,{position:"start",children:a(P,{})})},o))},rules:{required:e.texts.passwordRequiredText}}),a(t,{fullWidth:!0,variant:"last",type:"submit",children:e.texts.signUpText})]})})),i(u,{variant:"subtitle2",style:{marginTop:5,textAlign:"center",padding:5},children:["Existing user?"," ",a("span",{onClick:e.handleRouteToSignIn,style:{cursor:"pointer",color:"blue",textAlign:"center"},children:e.texts.signInText})]}),i("div",{style:{display:"flex",flexDirection:"column"},children:[e.viaGoogle&&a(N,{logo:"google",buttonText:e.texts.googleButtonLabel,onClick:e.handleGoogleSignUp}),e.viaGithub&&a(N,{logo:"github",buttonText:e.texts.githubButtonLabel,onClick:e.handleGithubSignUp}),e.viaTwitter&&a(N,{logo:"twitter",buttonText:e.texts.twitterButtonLabel,onClick:e.handleTwitterSignUp})]})]})};D.propTypes={theme:r.oneOf(["secondary","primary"])};var U=function(e){var r=b(),l=r.formState.errors,n=r.handleSubmit;r.register;var o=r.control;return i(m,{maxWidth:"xs",variant:"auth",children:[e.error&&i(v,{severity:"error",children:[e.errorTitle&&a(x,{children:e.errorTitle}),e.errorText]}),i("form",{onSubmit:n(e.handleSignIn),children:[a(w,{control:o,name:"email",render:function(t){var r,i,n=t.field;return a(z,L({fullWidth:!0,type:"text",value:null!==(r=n.value)&&void 0!==r?r:"",label:e.texts.emailLabel,helperText:null===(i=l.email)||void 0===i?void 0:i.message,placeholder:e.texts.emailPlaceholder,startAdornment:a(T,{position:"start",children:a(S,{})})},n))},rules:{required:e.texts.emailRequiredText,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:e.texts.emailInvalidText}}}),a(w,{control:o,name:"password",render:function(t){var r,i,n,o=t.field;return a(z,L({fullWidth:!0,type:"password",defaultValue:null!==(r=o.value)&&void 0!==r?r:"",value:null!==(i=o.value)&&void 0!==i?i:"",label:e.texts.passwordLabel,placeholder:e.texts.passwordPlaceholder,helperText:null===(n=l.password)||void 0===n?void 0:n.message,startAdornment:a(T,{position:"start",children:a(P,{})})},o))},rules:{required:e.texts.passwordRequiredText}}),a(u,{style:{cursor:"pointer",marginTop:5,width:"max-content",fontSize:15,padding:5},onClick:e.handleForgotPassword,children:e.texts.forgotPasswordText}),a(t,{type:"submit",fullWidth:!0,variant:"last",children:e.texts.signInText})]}),i(u,{variant:"subtitle2",style:{marginTop:5,textAlign:"center",padding:5},children:[e.texts.newUserText," ",a("span",{onClick:e.handleRouteToSignUp,style:{cursor:"pointer",color:"blue",textAlign:"center"},children:e.texts.signUpText})]}),i("div",{style:{display:"flex",flexDirection:"column"},children:[e.viaGoogle&&a(N,{logo:"google",buttonText:e.texts.googleButtonLabel,onClick:e.handleGoogleSignIn}),e.viaGithub&&a(N,{logo:"github",buttonText:e.texts.githubButtonLabel,onClick:e.handleGithubSignIn}),e.viaTwitter&&a(N,{logo:"twitter",buttonText:e.texts.twitterButtonLabel,onClick:e.handleTwitterSignIn})]})]})},F=function(e){return i(o,{maxWidth:"xs",children:[a(j,{align:"center",children:"Choose Payment Method"}),e.viaWallet&&a(N,{logo:"wallet",buttonText:e.walletLabel,onClick:e.handleWallet}),e.viaCreditCard&&a(N,{logo:"visa/master",buttonText:e.visaMasterLabel,onClick:e.handleCreditCard}),e.viaMada&&a(N,{logo:"mada",buttonText:e.madaLabel,onClick:e.handleMada}),e.viaSTCPay&&a(N,{logo:"stcpay",buttonText:e.stcPayLabel,onClick:e.handleSTCPay}),e.viaPayPal&&a(N,{logo:"paypal",buttonText:e.paypalLabel,onClick:e.handlePayPal}),e.viaGooglePay&&a(N,{logo:"googlepay",buttonText:e.googlePayLabel,onClick:e.handleGooglePay}),e.viaApplePay&&a(N,{logo:"applepay",buttonText:e.applePayLabel,onClick:e.handleApplePay})]})};z.propTypes={theme:r.oneOf(["secondary","primary"]),viaApplePay:r.bool,viaGooglePay:r.bool,viaSTCPay:r.bool,viaCreditCard:r.bool,viaPayPal:r.bool,handleApplePay:r.func};var Z=function(e){return{width:240,transition:e.transitions.create("width",{easing:e.transitions.easing.sharp,duration:e.transitions.duration.enteringScreen}),overflowX:"hidden"}},$=function(e){return q({transition:e.transitions.create("width",{easing:e.transitions.easing.sharp,duration:e.transitions.duration.leavingScreen}),overflowX:"hidden",width:"calc(".concat(e.spacing(7)," + 1px)")},e.breakpoints.up("sm"),{width:"calc(".concat(e.spacing(8)," + 1px)")})};k("div")((function(e){var t=e.theme;return L({display:"flex",alignItems:"center",justifyContent:"flex-end",padding:t.spacing(0,1)},t.mixins.toolbar)})),k(d,{shouldForwardProp:function(e){return"open"!==e}})((function(e){var t=e.theme,r=e.open;return L({zIndex:t.zIndex.drawer+1,transition:t.transitions.create(["width","margin"],{easing:t.transitions.easing.sharp,duration:t.transitions.duration.leavingScreen})},r&&{marginLeft:240,width:"calc(100% - ".concat(240,"px)"),transition:t.transitions.create(["width","margin"],{easing:t.transitions.easing.sharp,duration:t.transitions.duration.enteringScreen})})})),k(W,{shouldForwardProp:function(e){return"open"!==e}})((function(e){var t=e.theme,r=e.open;return L(L({width:240,flexShrink:0,whiteSpace:"nowrap",boxSizing:"border-box"},r&&L(L({},Z(t)),{},{"& .MuiDrawer-paper":Z(t)})),!r&&L(L({},$(t)),{},{"& .MuiDrawer-paper":$(t)}))}));var V=function(e){var t,r,l=b(),n=l.formState.errors,d=l.handleSubmit;return a(o,{maxWidth:"xs",children:a(y,L(L({},l),{},{children:i("form",{onSubmit:d(e.handle),children:[a(z,{fullWidth:!0,name:"password",placeholder:"Enter password",type:"number",label:"Card Number",rules:{required:"Password is rquired"},helperText:null===(t=n.password)||void 0===t?void 0:t.message}),a(z,{fullWidth:!0,name:"password",placeholder:"Enter password",type:"password",label:"Name On Card",rules:{required:"Password is rquired"},helperText:null===(r=n.password)||void 0===r?void 0:r.message}),a(s,{type:"submit",fullWidth:!0,variant:"last",onClick:e.handlePayWithCreditCard,children:"Pay with Credit Card"})]})}))})},H=function(r){var l,n=I(e(0),2),o=n[0],s=n[1],d=b(),c=d.formState.errors,p=d.handleSubmit;return i(m,{maxWidth:"xs",children:[i(u,{align:"center",variant:"h1",children:[Number(o).toLocaleString("en")||"0",a(u,{children:r.currency||"SAR"})]}),a(y,L(L({},d),{},{children:i("form",{onChange:function(e){e.preventDefault(),s(d.getValues().amount)},style:{marginTop:10},onSubmit:p(r.handleChargeWallet),children:[a(z,{fullWidth:!0,name:"amount",placeholder:"Enter amount",type:"number",value:o,rules:{required:"Password is rquired"},helperText:null===(l=c.amount)||void 0===l?void 0:l.message}),a(t,{type:"submit",fullWidth:!0,variant:"last",onClick:r.handleSignIn,children:"Charge Wallet"})]})}))]})},X=function(e){return i(o,{maxWidth:"xs",children:[a(n,{align:"center",children:"Wallet Balance"}),i(n,{align:"center",variant:"h1",children:[e.walletBalance||"0",a(n,{children:e.currency||"SAR"})]}),a(s,{type:"submit",fullWidth:!0,variant:"last",onClick:e.handlePayWithWallet,children:"Pay Now"})]})};export{H as ChargeWalletForm,V as CreditCardForm,G as NewPasswordForm,X as PayWithWallet,M as ResetPasswordForm,F as SelectPayment,U as SignInForm,D as SignUpForm,B as UserProfileForm,R as UserSettingsForm};

package/lib/index.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("@mui/material/Button");require("@mui/material/Tooltip");var r=require("prop-types"),a=require("react/jsx-runtime");require("@mui/material/FormControlLabel"),require("@mui/material/Checkbox");var l=require("@mui/material/Container");require("@mui/material/TextField");var s=require("@mui/material/Typography"),i=require("@mui/icons-material/GitHub"),n=require("@mui/icons-material/Twitter"),o=require("@mui/icons-material/AccountBalanceWallet"),d=require("@mui/material"),u=require("@mui/material/Input"),m=require("@mui/material/InputLabel"),x=require("@mui/material/Alert"),p=require("@mui/material/AlertTitle"),c=require("react-hook-form"),h=require("@mui/material/InputAdornment"),f=require("@mui/icons-material/HttpsOutlined"),g=require("@mui/icons-material/MailOutline"),b=require("@mui/icons-material/PermIdentityOutlined");function y(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var j=y(t),v=y(r),w=y(l),T=y(s),P=y(i),S=y(n),C=y(o),q=y(u),W=y(m),k=y(x),A=y(p),F=y(h),L=y(f),O=y(g),N=y(b);function I(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);t&&(a=a.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,a)}return r}function E(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?I(Object(r),!0).forEach((function(t){z(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):I(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}function z(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function G(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){var r=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null==r)return;var a,l,s=[],i=!0,n=!1;try{for(r=r.call(e);!(i=(a=r.next()).done)&&(s.push(a.value),!t||s.length!==t);i=!0);}catch(e){n=!0,l=e}finally{try{i||null==r.return||r.return()}finally{if(n)throw l}}return s}(e,t)||function(e,t){if(!e)return;if("string"==typeof e)return B(e,t);var r=Object.prototype.toString.call(e).slice(8,-1);"Object"===r&&e.constructor&&(r=e.constructor.name);if("Map"===r||"Set"===r)return Array.from(e);if("Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r))return B(e,t)}(e,t)||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 B(e,t){(null==t||t>e.length)&&(t=e.length);for(var r=0,a=new Array(t);r<t;r++)a[r]=e[r];return a}v.default.string,v.default.bool,v.default.bool,v.default.bool;var R=function(e){return a.jsx(T.default,E(E({},e),{},{children:e.children}))};v.default.oneOf(["text","number","password"]),v.default.string;var U=function(e){var t,r="";switch(null===(t=e.logo)||void 0===t?void 0:t.toLowerCase()){case"google":r=a.jsx("img",{src:"https://upload.wikimedia.org/wikipedia/commons/5/53/Google_%22G%22_Logo.svg"});break;case"github":r=a.jsx(P.default,{});break;case"twitter":r=a.jsx(S.default,{});break;case"mada":r=a.jsx("img",{src:"https://sikka-images.s3.ap-southeast-1.amazonaws.com/payments/mada.png",height:20});break;case"stcpay":r=a.jsx("img",{src:"https://sikka-images.s3.ap-southeast-1.amazonaws.com/payments/stc-pay.png",height:20});break;case"visa/master":r=a.jsx("img",{src:"https://sikka-images.s3.ap-southeast-1.amazonaws.com/payments/visa-master.png",height:30});break;case"paypal":r=a.jsx("img",{src:"https://sikka-images.s3.ap-southeast-1.amazonaws.com/payments/paypal.png",height:25});break;case"googlepay":r=a.jsx("img",{src:"https://sikka-images.s3.ap-southeast-1.amazonaws.com/payments/google-pay.png",height:20});break;case"applepay":r=a.jsx("img",{src:"https://sikka-images.s3.ap-southeast-1.amazonaws.com/payments/apple-pay.png",height:40});break;case"wallet":r=a.jsx(C.default,{})}return a.jsxs(j.default,E(E({},e),{},{variant:"withLogo",children:[r,a.jsx("div",{style:{width:10}}),a.jsx(d.Typography,{style:{color:"black",fontSize:14,textAlign:"center",letterSpacing:.4,fontFamily:"Roboto",fontWeight:500},children:e.buttonText})]}))},D=function(e){return a.jsxs(a.Fragment,{children:[a.jsx(W.default,{children:e.label}),a.jsx(q.default,E({disableUnderline:!0},e))]})},M=function(e){return a.jsxs(k.default,{children:[e.title&&a.jsx(A.default,{children:e.title}),e.text]})},Z=function(e){var t,r,l,s=c.useForm(),i=s.formState.errors,n=s.handleSubmit;return a.jsxs(w.default,{maxWidth:"xs",variant:"auth",children:[e.error&&a.jsxs(k.default,{severity:"error",children:[e.errorTitle&&a.jsx(A.default,{children:e.errorTitle}),e.errorText]}),a.jsx(c.FormProvider,E(E({},s),{},{children:a.jsxs("form",{onSubmit:n(e.handleSignUp),children:[a.jsx(D,{fullWidth:!0,type:"text",label:e.texts.fullNameLabel,name:"fullName",placeholder:e.texts.fullNamePlaceholder,inputLabel:e.texts.fullNameLabel,startAdornment:a.jsx(F.default,{position:"start",children:a.jsx(N.default,{})}),helperText:null===(t=i.fullName)||void 0===t?void 0:t.message}),a.jsx(D,{fullWidth:!0,type:"text",label:e.texts.emailLabel,placeholder:e.texts.emailPlaceholder,name:"email",startAdornment:a.jsx(F.default,{position:"start",children:a.jsx(O.default,{})}),rules:{required:e.texts.emailRequiredText,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:e.texts.emailInvalidText}},helperText:null===(r=i.email)||void 0===r?void 0:r.message}),a.jsx(D,{fullWidth:!0,name:"password",placeholder:e.texts.passwordPlaceholder,type:"password",label:e.texts.passwordLabel,startAdornment:a.jsx(F.default,{position:"start",children:a.jsx(L.default,{})}),rules:{required:e.texts.passwordRequiredText,minLength:{value:8,message:e.texts.passwordTooShortText}},helperText:null===(l=i.password)||void 0===l?void 0:l.message}),a.jsx(j.default,{fullWidth:!0,variant:"last",type:"submit",children:e.texts.signUpText})]})})),a.jsxs(T.default,{variant:"subtitle2",style:{marginTop:5,textAlign:"center",padding:5},children:["Existing user?"," ",a.jsx("span",{onClick:e.handleRouteToSignIn,style:{cursor:"pointer",color:"blue",textAlign:"center"},children:e.texts.signInText})]}),a.jsxs("div",{style:{display:"flex",flexDirection:"column"},children:[e.viaGoogle&&a.jsx(U,{logo:"google",buttonText:e.texts.googleButtonLabel,onClick:e.handleGoogleSignUp}),e.viaGithub&&a.jsx(U,{logo:"github",buttonText:e.texts.githubButtonLabel,onClick:e.handleGithubSignUp}),e.viaTwitter&&a.jsx(U,{logo:"twitter",buttonText:e.texts.twitterButtonLabel,onClick:e.handleTwitterSignUp})]})]})};Z.propTypes={theme:v.default.oneOf(["secondary","primary"])};D.propTypes={theme:v.default.oneOf(["secondary","primary"]),viaApplePay:v.default.bool,viaGooglePay:v.default.bool,viaSTCPay:v.default.bool,viaCreditCard:v.default.bool,viaPayPal:v.default.bool,handleApplePay:v.default.func};exports.ChargeWalletForm=function(t){var r,l=G(e.useState(0),2),s=l[0],i=l[1],n=c.useForm(),o=n.formState.errors,d=n.handleSubmit;return a.jsxs(w.default,{maxWidth:"xs",children:[a.jsxs(T.default,{align:"center",variant:"h1",children:[Number(s).toLocaleString("en")||"0",a.jsx(T.default,{children:t.currency||"SAR"})]}),a.jsx(c.FormProvider,E(E({},n),{},{children:a.jsxs("form",{onChange:function(e){e.preventDefault(),i(n.getValues().amount)},style:{marginTop:10},onSubmit:d(t.handleChargeWallet),children:[a.jsx(D,{fullWidth:!0,name:"amount",placeholder:"Enter amount",type:"number",value:s,rules:{required:"Password is rquired"},helperText:null===(r=o.amount)||void 0===r?void 0:r.message}),a.jsx(j.default,{type:"submit",fullWidth:!0,variant:"last",onClick:t.handleSignIn,children:"Charge Wallet"})]})}))]})},exports.CreditCardForm=function(e){var t,r,l=c.useForm(),s=l.formState.errors,i=l.handleSubmit;return a.jsx(d.Container,{maxWidth:"xs",children:a.jsx(c.FormProvider,E(E({},l),{},{children:a.jsxs("form",{onSubmit:i(e.handle),children:[a.jsx(D,{fullWidth:!0,name:"password",placeholder:"Enter password",type:"number",label:"Card Number",rules:{required:"Password is rquired"},helperText:null===(t=s.password)||void 0===t?void 0:t.message}),a.jsx(D,{fullWidth:!0,name:"password",placeholder:"Enter password",type:"password",label:"Name On Card",rules:{required:"Password is rquired"},helperText:null===(r=s.password)||void 0===r?void 0:r.message}),a.jsx(d.Button,{type:"submit",fullWidth:!0,variant:"last",onClick:e.handlePayWithCreditCard,children:"Pay with Credit Card"})]})}))})},exports.NewPasswordForm=function(t){var r,l,s=G(e.useState(""),2),i=s[0],n=s[1],o=c.useForm(),d=o.formState.errors,u=o.handleSubmit;return a.jsxs(w.default,{maxWidth:"xs",variant:"auth",children:[t.error&&a.jsx(M,{text:"This is a new password alert",severity:"error"}),t.passwordChanged?a.jsx(R,{style:{textAlign:"center",margin:5},children:"Your password has been changed, you'll be redirected to sign in page"}):a.jsx(c.FormProvider,E(E({},o),{},{children:a.jsxs("form",{onSubmit:u(t.handleNewPassword),children:[a.jsx(D,{fullWidth:!0,name:"password",type:"password",label:t.texts.passwordLabel,placeholder:t.texts.passwordPlaceholder,onChange:function(e){return n(e.target.value)},value:i,startAdornment:a.jsx(F.default,{position:"start",children:a.jsx(L.default,{})}),rules:{required:t.texts.passwordRequiredText},helperText:null===(r=d.password)||void 0===r?void 0:r.message}),a.jsx(D,{fullWidth:!0,name:"confirmPassword",type:"password",placeholder:t.texts.confirmPasswordPlaceholder,label:t.texts.confirmPasswordLabel,startAdornment:a.jsx(F.default,{position:"start",children:a.jsx(L.default,{})}),rules:{required:"Password is rquired"},helperText:null===(l=d.confirmPassword)||void 0===l?void 0:l.message}),a.jsx(j.default,{type:"submit",fullWidth:!0,variant:"last",children:t.texts.updatePassword})]})}))]})},exports.PayWithWallet=function(e){return a.jsxs(d.Container,{maxWidth:"xs",children:[a.jsx(d.Typography,{align:"center",children:"Wallet Balance"}),a.jsxs(d.Typography,{align:"center",variant:"h1",children:[e.walletBalance||"0",a.jsx(d.Typography,{children:e.currency||"SAR"})]}),a.jsx(d.Button,{type:"submit",fullWidth:!0,variant:"last",onClick:e.handlePayWithWallet,children:"Pay Now"})]})},exports.ResetPasswordForm=function(e){var t,r=c.useForm(),l=r.formState.errors,s=r.handleSubmit;return r.getValues,r.register,r.watch,r.reset,r.setValue,a.jsxs(w.default,{maxWidth:"xs",variant:"auth",children:[e.error&&a.jsxs(Alert,{severity:"error",children:[e.errorTitle&&a.jsx(AlertTitle,{children:e.errorTitle}),e.errorText]}),e.sent?a.jsx(R,{style:{textAlign:"center",margin:5},children:"An link was sent to your email to reset the password."}):a.jsx(c.FormProvider,E(E({},r),{},{children:a.jsxs("form",{onSubmit:s(e.handleResetPassword),children:[a.jsx(D,{fullWidth:!0,type:"text",name:"email",label:e.texts.emailLabel,placeholder:e.texts.emailPlaceholder,startAdornment:a.jsx(F.default,{position:"start",children:a.jsx(O.default,{})}),rules:{required:e.texts.emailRequiredText,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:e.texts.emailInvalidText}},helperText:null===(t=l.email)||void 0===t?void 0:t.message}),a.jsx(j.default,{type:"submit",fullWidth:!0,variant:"last",children:e.texts.resetPassword})]})}))]})},exports.SelectPayment=function(e){return a.jsxs(d.Container,{maxWidth:"xs",children:[a.jsx(R,{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,onClick:e.handleCreditCard}),e.viaMada&&a.jsx(U,{logo:"mada",buttonText:e.madaLabel,onClick:e.handleMada}),e.viaSTCPay&&a.jsx(U,{logo:"stcpay",buttonText:e.stcPayLabel,onClick:e.handleSTCPay}),e.viaPayPal&&a.jsx(U,{logo:"paypal",buttonText:e.paypalLabel,onClick:e.handlePayPal}),e.viaGooglePay&&a.jsx(U,{logo:"googlepay",buttonText:e.googlePayLabel,onClick:e.handleGooglePay}),e.viaApplePay&&a.jsx(U,{logo:"applepay",buttonText:e.applePayLabel,onClick:e.handleApplePay})]})},exports.SignInForm=function(e){var t,r,l=c.useForm(),s=l.formState.errors,i=l.handleSubmit;return a.jsxs(w.default,{maxWidth:"xs",variant:"auth",children:[e.error&&a.jsxs(k.default,{severity:"error",children:[e.errorTitle&&a.jsx(A.default,{children:e.errorTitle}),e.errorText]}),a.jsx(c.FormProvider,E(E({},l),{},{children:a.jsxs("form",{onSubmit:i(e.handleSignIn),children:[a.jsx(D,{fullWidth:!0,type:"text",name:"email",label:e.texts.emailLabel,placeholder:e.texts.emailPlaceholder,startAdornment:a.jsx(F.default,{position:"start",children:a.jsx(O.default,{})}),rules:{required:e.texts.emailRequired,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:e.texts.emailInvalidText}},helperText:null===(t=s.email)||void 0===t?void 0:t.message}),a.jsx(D,{fullWidth:!0,name:"password",placeholder:e.texts.passwordPlaceholder,type:"password",label:e.texts.passwordLabel,startAdornment:a.jsx(F.default,{position:"start",children:a.jsx(L.default,{})}),rules:{required:e.texts.passwordRequired},helperText:null===(r=s.password)||void 0===r?void 0:r.message}),a.jsx(T.default,{style:{cursor:"pointer",marginTop:5,width:"max-content",fontSize:15,padding:5},onClick:e.handleForgotPassword,children:e.texts.forgotPasswordText}),a.jsx(j.default,{type:"submit",fullWidth:!0,variant:"last",children:e.texts.signInText})]})})),a.jsxs(T.default,{variant:"subtitle2",style:{marginTop:5,textAlign:"center",padding:5},children:[e.texts.newUserText," ",a.jsx("span",{onClick:e.handleRouteToSignUp,style:{cursor:"pointer",color:"blue",textAlign:"center"},children:e.texts.signUpText})]}),a.jsxs("div",{style:{display:"flex",flexDirection:"column"},children:[e.viaGoogle&&a.jsx(U,{logo:"google",buttonText:e.texts.googleButtonLabel,onClick:e.handleGoogleSignIn}),e.viaGithub&&a.jsx(U,{logo:"github",buttonText:e.texts.githubButtonLabel,onClick:e.handleGithubSignIn}),e.viaTwitter&&a.jsx(U,{logo:"twitter",buttonText:e.texts.twitterButtonLabel,onClick:e.handleTwitterSignIn})]})]})},exports.SignUpForm=Z,exports.UserProfileForm=function(e){var t,r,l,s,i=c.useForm(),n=i.formState.errors;return i.handleSubmit,a.jsx(w.default,{maxWidth:"xs",children:a.jsx(c.FormProvider,E(E({},i),{},{children:a.jsxs("form",{children:[a.jsx(D,{fullWidth:!0,type:"text",name:"fullName",label:"Full Name",placeholder:"Fulan AlFulani",rules:{required:"Email is required"},helperText:null===(t=n.fullName)||void 0===t?void 0:t.message}),a.jsx(D,{fullWidth:!0,type:"text",name:"fullName",label:"Phone Number",placeholder:"+966",rules:{required:"Email is required"}}),a.jsx(D,{fullWidth:!0,type:"text",name:"email",label:"New Email",placeholder:"Enter your new email",rules:{required:"Email is required"},helperText:null===(r=n.email)||void 0===r?void 0:r.message}),a.jsx(D,{fullWidth:!0,type:"password",name:"password",label:"New password",placeholder:"Enter your new password",rules:{required:"Email is required"},helperText:null===(l=n.password)||void 0===l?void 0:l.message}),a.jsx(D,{fullWidth:!0,type:"password",name:"confirmPassword",label:"Confirm new password",placeholder:"Confirm new password",rules:{required:"Email is required"},helperText:null===(s=n.confirmPassword)||void 0===s?void 0:s.message}),a.jsx(j.default,{type:"submit",fullWidth:!0,variant:"last",children:"update profile"})," "]})}))})},exports.UserSettingsForm=function(e){return a.jsxs(d.Container,{maxWidth:"xs",children:[a.jsx(D,{type:"text",label:"First Name"}),a.jsx(D,{type:"text",label:"Last Name"}),a.jsx(D,{type:"email",label:"Email"}),a.jsx(D,{type:"password",label:"Password"}),a.jsx(d.Button,{type:"submit",fullWidth:!0,variant:"last",children:"Save Settings"})]})};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("@mui/material/Button");require("@mui/material/Tooltip");var r=require("prop-types"),a=require("react/jsx-runtime"),i=require("@mui/material");require("@mui/icons-material/MoveToInbox");var l=require("@mui/material/AppBar");require("@mui/material/Box"),require("@mui/material/Toolbar"),require("@mui/material/IconButton");var n=require("@mui/material/Typography");require("@mui/material/Menu"),require("@mui/icons-material/Menu");var s=require("@mui/material/Container");require("@mui/material/Avatar"),require("@mui/material/MenuItem"),require("@mui/material/FormControlLabel"),require("@mui/material/Checkbox"),require("@mui/icons-material/CheckCircleOutlined");var o=require("@mui/material/Input"),u=require("@mui/material/InputLabel"),d=require("@mui/icons-material/GitHub"),m=require("@mui/icons-material/Twitter"),c=require("@mui/icons-material/AccountBalanceWallet"),p=require("@mui/material/Alert"),x=require("@mui/material/AlertTitle"),h=require("react-hook-form"),f=require("@mui/material/InputAdornment"),g=require("@mui/icons-material/HttpsOutlined"),v=require("@mui/icons-material/MailOutline"),b=require("@mui/icons-material/PermIdentityOutlined"),y=require("@mui/material/styles"),j=require("@mui/material/Drawer");function w(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}require("@mui/material/List"),require("@mui/material/Divider"),require("@mui/icons-material/ChevronLeft"),require("@mui/icons-material/ChevronRight"),require("@mui/material/ListItemButton"),require("@mui/material/ListItemIcon"),require("@mui/material/ListItemText"),require("@mui/icons-material/Mail");var T=w(t),q=w(r),P=w(l),C=w(n),S=w(s),k=w(o),W=w(u),A=w(d),L=w(m),I=w(c),F=w(p),O=w(x),N=w(f),z=w(g),B=w(v),E=w(b),R=w(j);function M(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);t&&(a=a.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,a)}return r}function G(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?M(Object(r),!0).forEach((function(t){U(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):M(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}function U(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function D(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){var r=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null==r)return;var a,i,l=[],n=!0,s=!1;try{for(r=r.call(e);!(n=(a=r.next()).done)&&(l.push(a.value),!t||l.length!==t);n=!0);}catch(e){s=!0,i=e}finally{try{n||null==r.return||r.return()}finally{if(s)throw i}}return l}(e,t)||function(e,t){if(!e)return;if("string"==typeof e)return Z(e,t);var r=Object.prototype.toString.call(e).slice(8,-1);"Object"===r&&e.constructor&&(r=e.constructor.name);if("Map"===r||"Set"===r)return Array.from(e);if("Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r))return Z(e,t)}(e,t)||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,t){(null==t||t>e.length)&&(t=e.length);for(var r=0,a=new Array(t);r<t;r++)a[r]=e[r];return a}q.default.string,q.default.bool;var $=function(e){return a.jsx(C.default,G(G({},e),{},{children:e.children}))},_=function(e){return a.jsxs(a.Fragment,{children:[a.jsxs("div",{style:{display:"flex",flexDirection:"row",justifyContent:"space-between",alignItems:"center"},children:[a.jsx(W.default,{children:e.label}),e.helperText&&a.jsx(i.Typography,{variant:"validation",children:e.helperText})]}),a.jsx(k.default,G({disableUnderline:!0},e))]})};q.default.oneOf(["text","number","password"]),q.default.string;var V=function(e){var t,r="";switch(null===(t=e.logo)||void 0===t?void 0:t.toLowerCase()){case"google":r=a.jsx("img",{src:"https://upload.wikimedia.org/wikipedia/commons/5/53/Google_%22G%22_Logo.svg"});break;case"github":r=a.jsx(A.default,{});break;case"twitter":r=a.jsx(L.default,{});break;case"mada":r=a.jsx("img",{src:"https://sikka-images.s3.ap-southeast-1.amazonaws.com/payments/mada.png",height:20});break;case"stcpay":r=a.jsx("img",{src:"https://sikka-images.s3.ap-southeast-1.amazonaws.com/payments/stc-pay.png",height:20});break;case"visa/master":r=a.jsx("img",{src:"https://sikka-images.s3.ap-southeast-1.amazonaws.com/payments/visa-master.png",height:30});break;case"paypal":r=a.jsx("img",{src:"https://sikka-images.s3.ap-southeast-1.amazonaws.com/payments/paypal.png",height:25});break;case"googlepay":r=a.jsx("img",{src:"https://sikka-images.s3.ap-southeast-1.amazonaws.com/payments/google-pay.png",height:20});break;case"applepay":r=a.jsx("img",{src:"https://sikka-images.s3.ap-southeast-1.amazonaws.com/payments/apple-pay.png",height:40});break;case"wallet":r=a.jsx(I.default,{})}return a.jsxs(T.default,G(G({},e),{},{variant:"withLogo",children:[r,a.jsx("div",{style:{width:10}}),a.jsx(i.Typography,{style:{color:"black",fontSize:14,textAlign:"center",letterSpacing:.4,fontFamily:"Roboto",fontWeight:500},children:e.buttonText})]}))},H=function(e){return a.jsxs(F.default,G(G({},e),{},{children:[e.title&&a.jsx(O.default,{children:e.title}),e.text]}))},X=function(e){var t=h.useForm(),r=t.formState.errors,i=t.handleSubmit,l=t.control;return a.jsxs(S.default,{maxWidth:"xs",variant:"auth",children:[e.error&&a.jsxs(F.default,{severity:"error",children:[e.errorTitle&&a.jsx(O.default,{children:e.errorTitle}),e.errorText]}),a.jsx(h.FormProvider,G(G({},t),{},{children:a.jsxs("form",{onSubmit:i(e.handleSignUp),children:[a.jsx(h.Controller,{control:l,name:"fullName",render:function(t){var i,l,n=t.field;return a.jsx(_,{fullWidth:!0,type:"text",value:null!==(i=n.value)&&void 0!==i?i:"",label:e.texts.fullNameLabel,placeholder:e.texts.fullNamePlaceholder,helperText:null===(l=r.fullName)||void 0===l?void 0:l.message,startAdornment:a.jsx(N.default,{position:"start",children:a.jsx(E.default,{})})})},rules:{required:e.texts.fullNameRequiredText}}),a.jsx(h.Controller,{control:l,name:"email",render:function(t){var i,l,n=t.field;return a.jsx(_,{fullWidth:!0,type:"text",value:null!==(i=n.value)&&void 0!==i?i:"",label:e.texts.emailLabel,helperText:null===(l=r.email)||void 0===l?void 0:l.message,placeholder:e.texts.emailPlaceholder,startAdornment:a.jsx(N.default,{position:"start",children:a.jsx(B.default,{})})})},rules:{required:e.texts.emailRequiredText,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:e.texts.emailInvalidText}}}),a.jsx(h.Controller,{control:l,name:"password",render:function(t){var i,l,n,s=t.field;return a.jsx(_,G({fullWidth:!0,type:"password",defaultValue:null!==(i=s.value)&&void 0!==i?i:"",value:null!==(l=s.value)&&void 0!==l?l:"",label:e.texts.passwordLabel,placeholder:e.texts.passwordPlaceholder,helperText:null===(n=r.password)||void 0===n?void 0:n.message,startAdornment:a.jsx(N.default,{position:"start",children:a.jsx(z.default,{})})},s))},rules:{required:e.texts.passwordRequiredText}}),a.jsx(T.default,{fullWidth:!0,variant:"last",type:"submit",children:e.texts.signUpText})]})})),a.jsxs(C.default,{variant:"subtitle2",style:{marginTop:5,textAlign:"center",padding:5},children:["Existing user?"," ",a.jsx("span",{onClick:e.handleRouteToSignIn,style:{cursor:"pointer",color:"blue",textAlign:"center"},children:e.texts.signInText})]}),a.jsxs("div",{style:{display:"flex",flexDirection:"column"},children:[e.viaGoogle&&a.jsx(V,{logo:"google",buttonText:e.texts.googleButtonLabel,onClick:e.handleGoogleSignUp}),e.viaGithub&&a.jsx(V,{logo:"github",buttonText:e.texts.githubButtonLabel,onClick:e.handleGithubSignUp}),e.viaTwitter&&a.jsx(V,{logo:"twitter",buttonText:e.texts.twitterButtonLabel,onClick:e.handleTwitterSignUp})]})]})};X.propTypes={theme:q.default.oneOf(["secondary","primary"])};_.propTypes={theme:q.default.oneOf(["secondary","primary"]),viaApplePay:q.default.bool,viaGooglePay:q.default.bool,viaSTCPay:q.default.bool,viaCreditCard:q.default.bool,viaPayPal:q.default.bool,handleApplePay:q.default.func};var Y=function(e){return{width:240,transition:e.transitions.create("width",{easing:e.transitions.easing.sharp,duration:e.transitions.duration.enteringScreen}),overflowX:"hidden"}},J=function(e){return U({transition:e.transitions.create("width",{easing:e.transitions.easing.sharp,duration:e.transitions.duration.leavingScreen}),overflowX:"hidden",width:"calc(".concat(e.spacing(7)," + 1px)")},e.breakpoints.up("sm"),{width:"calc(".concat(e.spacing(8)," + 1px)")})};y.styled("div")((function(e){var t=e.theme;return G({display:"flex",alignItems:"center",justifyContent:"flex-end",padding:t.spacing(0,1)},t.mixins.toolbar)})),y.styled(P.default,{shouldForwardProp:function(e){return"open"!==e}})((function(e){var t=e.theme,r=e.open;return G({zIndex:t.zIndex.drawer+1,transition:t.transitions.create(["width","margin"],{easing:t.transitions.easing.sharp,duration:t.transitions.duration.leavingScreen})},r&&{marginLeft:240,width:"calc(100% - ".concat(240,"px)"),transition:t.transitions.create(["width","margin"],{easing:t.transitions.easing.sharp,duration:t.transitions.duration.enteringScreen})})})),y.styled(R.default,{shouldForwardProp:function(e){return"open"!==e}})((function(e){var t=e.theme,r=e.open;return G(G({width:240,flexShrink:0,whiteSpace:"nowrap",boxSizing:"border-box"},r&&G(G({},Y(t)),{},{"& .MuiDrawer-paper":Y(t)})),!r&&G(G({},J(t)),{},{"& .MuiDrawer-paper":J(t)}))}));exports.ChargeWalletForm=function(t){var r,i=D(e.useState(0),2),l=i[0],n=i[1],s=h.useForm(),o=s.formState.errors,u=s.handleSubmit;return a.jsxs(S.default,{maxWidth:"xs",children:[a.jsxs(C.default,{align:"center",variant:"h1",children:[Number(l).toLocaleString("en")||"0",a.jsx(C.default,{children:t.currency||"SAR"})]}),a.jsx(h.FormProvider,G(G({},s),{},{children:a.jsxs("form",{onChange:function(e){e.preventDefault(),n(s.getValues().amount)},style:{marginTop:10},onSubmit:u(t.handleChargeWallet),children:[a.jsx(_,{fullWidth:!0,name:"amount",placeholder:"Enter amount",type:"number",value:l,rules:{required:"Password is rquired"},helperText:null===(r=o.amount)||void 0===r?void 0:r.message}),a.jsx(T.default,{type:"submit",fullWidth:!0,variant:"last",onClick:t.handleSignIn,children:"Charge Wallet"})]})}))]})},exports.CreditCardForm=function(e){var t,r,l=h.useForm(),n=l.formState.errors,s=l.handleSubmit;return a.jsx(i.Container,{maxWidth:"xs",children:a.jsx(h.FormProvider,G(G({},l),{},{children:a.jsxs("form",{onSubmit:s(e.handle),children:[a.jsx(_,{fullWidth:!0,name:"password",placeholder:"Enter password",type:"number",label:"Card Number",rules:{required:"Password is rquired"},helperText:null===(t=n.password)||void 0===t?void 0:t.message}),a.jsx(_,{fullWidth:!0,name:"password",placeholder:"Enter password",type:"password",label:"Name On Card",rules:{required:"Password is rquired"},helperText:null===(r=n.password)||void 0===r?void 0:r.message}),a.jsx(i.Button,{type:"submit",fullWidth:!0,variant:"last",onClick:e.handlePayWithCreditCard,children:"Pay with Credit Card"})]})}))})},exports.NewPasswordForm=function(t){var r=D(e.useState(""),2);r[0],r[1];var i=D(e.useState(""),2);i[0],i[1];var l=D(e.useState(!1),2),n=l[0],s=l[1],o=h.useForm(),u=o.formState.errors,d=o.handleSubmit,m=o.control;return a.jsxs(S.default,{maxWidth:"xs",variant:"auth",children:[n&&a.jsx(H,{text:t.texts.passwordMatchError,severity:"error"}),t.passwordChanged?a.jsx($,{style:{textAlign:"center",margin:5},children:"Your password has been changed, you'll be redirected to sign in page"}):a.jsx(h.FormProvider,G(G({},o),{},{children:a.jsxs("form",{onSubmit:d((function(e){console.log("handling subb",e),e.password===e.confirmPassword?t.handleNewPassword():s(!0)})),children:[a.jsx(h.Controller,{control:m,name:"password",render:function(e){var r,i,l=e.field;return a.jsx(_,G({fullWidth:!0,type:"password",value:null!==(r=l.value)&&void 0!==r?r:"",label:t.texts.passwordLabel,placeholder:t.texts.passwordPlaceholder,helperText:null===(i=u.password)||void 0===i?void 0:i.message,startAdornment:a.jsx(N.default,{position:"start",children:a.jsx(z.default,{})})},l))},rules:{required:t.texts.passwordRequiredText}}),a.jsx(h.Controller,{control:m,name:"confirmPassword",render:function(e){var r,i,l=e.field;return a.jsx(_,G({fullWidth:!0,type:"password",value:null!==(r=l.value)&&void 0!==r?r:"",label:t.texts.confirmPasswordLabel,placeholder:t.texts.confirmPasswordPlaceholder,helperText:null===(i=u.confirmPassword)||void 0===i?void 0:i.message,startAdornment:a.jsx(N.default,{position:"start",children:a.jsx(z.default,{})})},l))},rules:{required:t.texts.confirmPasswordRequiredText}}),a.jsx(T.default,{type:"submit",fullWidth:!0,variant:"last",children:t.texts.updatePassword})]})}))]})},exports.PayWithWallet=function(e){return a.jsxs(i.Container,{maxWidth:"xs",children:[a.jsx(i.Typography,{align:"center",children:"Wallet Balance"}),a.jsxs(i.Typography,{align:"center",variant:"h1",children:[e.walletBalance||"0",a.jsx(i.Typography,{children:e.currency||"SAR"})]}),a.jsx(i.Button,{type:"submit",fullWidth:!0,variant:"last",onClick:e.handlePayWithWallet,children:"Pay Now"})]})},exports.ResetPasswordForm=function(e){var t,r=h.useForm(),i=r.formState.errors,l=r.handleSubmit;r.register;var n=r.control;return a.jsxs(S.default,{maxWidth:"xs",variant:"auth",children:[e.error&&a.jsxs(Alert,{severity:"error",children:[e.errorTitle&&a.jsx(AlertTitle,{children:e.errorTitle}),e.errorText]}),e.sent?a.jsx($,{style:{textAlign:"center",margin:5},children:"An link was sent to your email to reset the password."}):a.jsxs("form",{onSubmit:l(e.handleResetPassword),children:[console.log("eror ",null===(t=i.email)||void 0===t?void 0:t.message),a.jsx(h.Controller,{control:n,name:"email",render:function(t){var r,l,n=t.field;return a.jsx(_,G({fullWidth:!0,type:"text",value:null!==(r=n.value)&&void 0!==r?r:"",label:e.texts.emailLabel,helperText:null===(l=i.email)||void 0===l?void 0:l.message,placeholder:e.texts.emailPlaceholder,startAdornment:a.jsx(N.default,{position:"start",children:a.jsx(B.default,{})})},n))},rules:{required:e.texts.emailRequiredText,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:e.texts.emailInvalidText}}}),a.jsx(T.default,{type:"submit",fullWidth:!0,variant:"last",children:e.texts.resetPassword})]})]})},exports.SelectPayment=function(e){return a.jsxs(i.Container,{maxWidth:"xs",children:[a.jsx($,{align:"center",children:"Choose Payment Method"}),e.viaWallet&&a.jsx(V,{logo:"wallet",buttonText:e.walletLabel,onClick:e.handleWallet}),e.viaCreditCard&&a.jsx(V,{logo:"visa/master",buttonText:e.visaMasterLabel,onClick:e.handleCreditCard}),e.viaMada&&a.jsx(V,{logo:"mada",buttonText:e.madaLabel,onClick:e.handleMada}),e.viaSTCPay&&a.jsx(V,{logo:"stcpay",buttonText:e.stcPayLabel,onClick:e.handleSTCPay}),e.viaPayPal&&a.jsx(V,{logo:"paypal",buttonText:e.paypalLabel,onClick:e.handlePayPal}),e.viaGooglePay&&a.jsx(V,{logo:"googlepay",buttonText:e.googlePayLabel,onClick:e.handleGooglePay}),e.viaApplePay&&a.jsx(V,{logo:"applepay",buttonText:e.applePayLabel,onClick:e.handleApplePay})]})},exports.SignInForm=function(e){var t=h.useForm(),r=t.formState.errors,i=t.handleSubmit;t.register;var l=t.control;return a.jsxs(S.default,{maxWidth:"xs",variant:"auth",children:[e.error&&a.jsxs(F.default,{severity:"error",children:[e.errorTitle&&a.jsx(O.default,{children:e.errorTitle}),e.errorText]}),a.jsxs("form",{onSubmit:i(e.handleSignIn),children:[a.jsx(h.Controller,{control:l,name:"email",render:function(t){var i,l,n=t.field;return a.jsx(_,G({fullWidth:!0,type:"text",value:null!==(i=n.value)&&void 0!==i?i:"",label:e.texts.emailLabel,helperText:null===(l=r.email)||void 0===l?void 0:l.message,placeholder:e.texts.emailPlaceholder,startAdornment:a.jsx(N.default,{position:"start",children:a.jsx(B.default,{})})},n))},rules:{required:e.texts.emailRequiredText,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:e.texts.emailInvalidText}}}),a.jsx(h.Controller,{control:l,name:"password",render:function(t){var i,l,n,s=t.field;return a.jsx(_,G({fullWidth:!0,type:"password",defaultValue:null!==(i=s.value)&&void 0!==i?i:"",value:null!==(l=s.value)&&void 0!==l?l:"",label:e.texts.passwordLabel,placeholder:e.texts.passwordPlaceholder,helperText:null===(n=r.password)||void 0===n?void 0:n.message,startAdornment:a.jsx(N.default,{position:"start",children:a.jsx(z.default,{})})},s))},rules:{required:e.texts.passwordRequiredText}}),a.jsx(C.default,{style:{cursor:"pointer",marginTop:5,width:"max-content",fontSize:15,padding:5},onClick:e.handleForgotPassword,children:e.texts.forgotPasswordText}),a.jsx(T.default,{type:"submit",fullWidth:!0,variant:"last",children:e.texts.signInText})]}),a.jsxs(C.default,{variant:"subtitle2",style:{marginTop:5,textAlign:"center",padding:5},children:[e.texts.newUserText," ",a.jsx("span",{onClick:e.handleRouteToSignUp,style:{cursor:"pointer",color:"blue",textAlign:"center"},children:e.texts.signUpText})]}),a.jsxs("div",{style:{display:"flex",flexDirection:"column"},children:[e.viaGoogle&&a.jsx(V,{logo:"google",buttonText:e.texts.googleButtonLabel,onClick:e.handleGoogleSignIn}),e.viaGithub&&a.jsx(V,{logo:"github",buttonText:e.texts.githubButtonLabel,onClick:e.handleGithubSignIn}),e.viaTwitter&&a.jsx(V,{logo:"twitter",buttonText:e.texts.twitterButtonLabel,onClick:e.handleTwitterSignIn})]})]})},exports.SignUpForm=X,exports.UserProfileForm=function(e){var t,r,i,l,n=h.useForm(),s=n.formState.errors;return a.jsx(S.default,{maxWidth:"sm",children:a.jsx(h.FormProvider,G(G({},n),{},{children:a.jsxs("form",{children:[a.jsx(_,{fullWidth:!0,type:"text",name:"fullName",label:"Full Name",placeholder:"Fulan AlFulani",rules:{required:"Email is required"},helperText:null===(t=s.fullName)||void 0===t?void 0:t.message}),a.jsx(_,{fullWidth:!0,type:"text",name:"fullName",label:"Phone Number",placeholder:"+966",rules:{required:"Email is required"}}),a.jsx(_,{fullWidth:!0,type:"text",name:"email",label:"New Email",placeholder:"Enter your new email",rules:{required:"Email is required"},helperText:null===(r=s.email)||void 0===r?void 0:r.message}),a.jsx(_,{fullWidth:!0,type:"password",name:"password",label:"New password",placeholder:"Enter your new password",rules:{required:"Email is required"},helperText:null===(i=s.password)||void 0===i?void 0:i.message}),a.jsx(_,{fullWidth:!0,type:"password",name:"confirmPassword",label:"Confirm new password",placeholder:"Confirm new password",rules:{required:"Email is required"},helperText:null===(l=s.confirmPassword)||void 0===l?void 0:l.message}),a.jsx(T.default,{type:"submit",fullWidth:!0,variant:"last",children:"update profile"})," "]})}))})},exports.UserSettingsForm=function(e){return a.jsxs(i.Container,{maxWidth:"sm",children:[e.children,a.jsx(i.Button,{type:"submit",fullWidth:!0,variant:"last",children:"Save Settings"})]})};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sikka/hawa",
-  "version": "0.0.12",
+  "version": "0.0.15",
   "description": "UI Kit",
   "main": "lib/index.js",
   "module": "es/index.es.js",

package/src/blocks/Account/UserProfileForm.js

@@ -1,5 +1,5 @@
 import React from "react";
-import { HawaTextField } from "../../ui";
+import { HawaTextField } from "../../elements";
 import { FormProvider, useForm } from "react-hook-form";
 import Container from "@mui/material/Container";
 import Button from "@mui/material/Button";
@@ -7,12 +7,11 @@ import Button from "@mui/material/Button";
 export const UserProfileForm = (props) => {
   const methods = useForm();
   const {
-    formState: { errors },
-    handleSubmit
+    formState: { errors }
   } = methods;
 
   return (
-    <Container maxWidth="xs">
+    <Container maxWidth="sm">
       <FormProvider {...methods}>
         <form>
           <HawaTextField

package/src/blocks/Account/UserSettingsForm.js

@@ -1,14 +1,10 @@
-import { HawaTextField, ActionButton } from "../../ui";
-import { Box } from "../../layout";
+import { HawaSettingsRow } from "../../elements";
 import { Button, Container } from "@mui/material";
 
 export const UserSettingsForm = (props) => {
   return (
-    <Container maxWidth="xs">
-      <HawaTextField type="text" label="First Name" />
-      <HawaTextField type="text" label="Last Name" />
-      <HawaTextField type="email" label="Email" />
-      <HawaTextField type="password" label="Password" />
+    <Container maxWidth="sm">
+      {props.children}
       <Button type="submit" fullWidth variant="last">
         Save Settings
       </Button>

package/src/blocks/AuthForms/NewPasswordForm.js

@@ -1,30 +1,35 @@
 import React, { useState } from "react";
-import { Box } from "../../layout";
-import {
-  ActionButton,
-  HawaTextField,
-  HawaAlert,
-  HawaTypography
-} from "../../ui";
-import { FormProvider, useForm } from "react-hook-form";
+import { HawaTextField, HawaAlert, HawaTypography } from "../../elements";
+import { Controller, FormProvider, useForm } from "react-hook-form";
 import InputAdornment from "@mui/material/InputAdornment";
 import PasswordIcon from "@mui/icons-material/HttpsOutlined";
 import Container from "@mui/material/Container";
 import Button from "@mui/material/Button";
-import Alert from "@mui/material/Alert";
 
 export const NewPasswordForm = (props) => {
   const [newPassword, setNewPassword] = useState("");
+  const [confirmPassword, setConfirmPassword] = useState("");
+  const [matchError, setMatchError] = useState(false);
   const methods = useForm();
   const {
     formState: { errors },
-    handleSubmit
+    handleSubmit,
+    control
   } = methods;
 
+  const handleSubmission = (e) => {
+    console.log("handling subb", e);
+    if (e.password === e.confirmPassword) {
+      props.handleNewPassword();
+    } else {
+      setMatchError(true);
+    }
+  };
+
   return (
     <Container maxWidth="xs" variant="auth">
-      {props.error && (
-        <HawaAlert text="This is a new password alert" severity="error" />
+      {matchError && (
+        <HawaAlert text={props.texts.passwordMatchError} severity="error" />
       )}
       {props.passwordChanged ? (
         <HawaTypography style={{ textAlign: "center", margin: 5 }}>
@@ -32,40 +37,54 @@ export const NewPasswordForm = (props) => {
         </HawaTypography>
       ) : (
         <FormProvider {...methods}>
-          <form onSubmit={handleSubmit(props.handleNewPassword)}>
-            <HawaTextField
-              fullWidth
+          <form onSubmit={handleSubmit(handleSubmission)}>
+            <Controller
+              control={control}
               name="password"
-              type="password"
-              label={props.texts.passwordLabel}
-              placeholder={props.texts.passwordPlaceholder}
-              onChange={(e) => setNewPassword(e.target.value)}
-              value={newPassword}
-              startAdornment={
-                <InputAdornment position="start">
-                  <PasswordIcon />
-                </InputAdornment>
-              }
+              render={({ field }) => (
+                <HawaTextField
+                  fullWidth
+                  type="password"
+                  value={field.value ?? ""}
+                  label={props.texts.passwordLabel}
+                  placeholder={props.texts.passwordPlaceholder}
+                  // onChange={(e) => setNewPassword(e.target.value)}
+                  helperText={errors.password?.message}
+                  startAdornment={
+                    <InputAdornment position="start">
+                      <PasswordIcon />
+                    </InputAdornment>
+                  }
+                  {...field}
+                />
+              )}
               rules={{
                 required: props.texts.passwordRequiredText
               }}
-              helperText={errors.password?.message}
             />
-            <HawaTextField
-              fullWidth
+            <Controller
+              control={control}
               name="confirmPassword"
-              type="password"
-              placeholder={props.texts.confirmPasswordPlaceholder}
-              label={props.texts.confirmPasswordLabel}
-              startAdornment={
-                <InputAdornment position="start">
-                  <PasswordIcon />
-                </InputAdornment>
-              }
+              render={({ field }) => (
+                <HawaTextField
+                  fullWidth
+                  type="password"
+                  value={field.value ?? ""}
+                  label={props.texts.confirmPasswordLabel}
+                  placeholder={props.texts.confirmPasswordPlaceholder}
+                  // onChange={(e) => setConfirmPassword(e.target.value)}
+                  helperText={errors.confirmPassword?.message}
+                  startAdornment={
+                    <InputAdornment position="start">
+                      <PasswordIcon />
+                    </InputAdornment>
+                  }
+                  {...field}
+                />
+              )}
               rules={{
-                required: "Password is rquired"
+                required: props.texts.confirmPasswordRequiredText
               }}
-              helperText={errors.confirmPassword?.message}
             />
 
             <Button type="submit" fullWidth variant="last">

package/src/blocks/AuthForms/ResetPasswordForm.js

@@ -1,12 +1,6 @@
 import React from "react";
-import { FormProvider, useForm } from "react-hook-form";
-import { Box } from "../../layout";
-import {
-  HawaTextField,
-  ActionButton,
-  HawaAlert,
-  HawaTypography
-} from "../../ui";
+import { Controller, useForm } from "react-hook-form";
+import { HawaTextField, HawaTypography } from "../../elements";
 import InputAdornment from "@mui/material/InputAdornment";
 import EmailIcon from "@mui/icons-material/MailOutline";
 import Container from "@mui/material/Container";
@@ -17,11 +11,8 @@ export const ResetPasswordForm = (props) => {
   const {
     formState: { errors },
     handleSubmit,
-    getValues,
     register,
-    watch,
-    reset,
-    setValue
+    control
   } = methods;
   return (
     <Container maxWidth="xs" variant="auth">
@@ -32,34 +23,40 @@ export const ResetPasswordForm = (props) => {
         </Alert>
       )}
       {!props.sent ? (
-        <FormProvider {...methods}>
-          <form onSubmit={handleSubmit(props.handleResetPassword)}>
-            <HawaTextField
-              fullWidth
-              type="text"
-              name="email"
-              label={props.texts.emailLabel}
-              placeholder={props.texts.emailPlaceholder}
-              startAdornment={
-                <InputAdornment position="start">
-                  <EmailIcon />
-                </InputAdornment>
-              }
-              rules={{
-                required: props.texts.emailRequiredText,
-                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: props.texts.emailInvalidText
+        <form onSubmit={handleSubmit(props.handleResetPassword)}>
+          {console.log("eror ", errors.email?.message)}
+          <Controller
+            control={control}
+            name="email"
+            render={({ field }) => (
+              <HawaTextField
+                fullWidth
+                type="text"
+                value={field.value ?? ""}
+                label={props.texts.emailLabel}
+                helperText={errors.email?.message}
+                placeholder={props.texts.emailPlaceholder}
+                startAdornment={
+                  <InputAdornment position="start">
+                    <EmailIcon />
+                  </InputAdornment>
                 }
-              }}
-              helperText={errors.email?.message}
-            />
-            <Button type="submit" fullWidth variant="last">
-              {props.texts.resetPassword}
-            </Button>
-          </form>
-        </FormProvider>
+                {...field}
+              />
+            )}
+            rules={{
+              required: props.texts.emailRequiredText,
+              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: props.texts.emailInvalidText
+              }
+            }}
+          />
+          <Button type="submit" fullWidth variant="last">
+            {props.texts.resetPassword}
+          </Button>
+        </form>
       ) : (
         <HawaTypography style={{ textAlign: "center", margin: 5 }}>
           An link was sent to your email to reset the password.

package/src/blocks/AuthForms/SignInForm.js

@@ -1,6 +1,6 @@
-import React from "react";
-import { HawaTextField, HawaTypography, HawaLogoButton } from "../../ui";
-import { FormProvider, useForm } from "react-hook-form";
+import React, { useState } from "react";
+import { HawaTextField, HawaLogoButton } from "../../elements";
+import { Controller, FormProvider, useForm } from "react-hook-form";
 import InputAdornment from "@mui/material/InputAdornment";
 import EmailIcon from "@mui/icons-material/MailOutline";
 import PasswordIcon from "@mui/icons-material/HttpsOutlined";
@@ -14,7 +14,9 @@ export const SignInForm = (props) => {
   const methods = useForm();
   const {
     formState: { errors },
-    handleSubmit
+    handleSubmit,
+    register,
+    control
   } = methods;
 
   return (
@@ -25,71 +27,77 @@ export const SignInForm = (props) => {
           {props.errorText}
         </Alert>
       )}
-      <FormProvider {...methods}>
-        <form onSubmit={handleSubmit(props.handleSignIn)}>
-          <HawaTextField
-            fullWidth
-            type="text"
-            name="email"
-            label={props.texts.emailLabel}
-            placeholder={props.texts.emailPlaceholder}
-            startAdornment={
-              <InputAdornment position="start">
-                <EmailIcon />
-              </InputAdornment>
-            }
-            rules={{
-              required: props.texts.emailRequired,
-              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: props.texts.emailInvalidText
+      <form onSubmit={handleSubmit(props.handleSignIn)}>
+        <Controller
+          control={control}
+          name="email"
+          render={({ field }) => (
+            <HawaTextField
+              fullWidth
+              type="text"
+              value={field.value ?? ""}
+              label={props.texts.emailLabel}
+              helperText={errors.email?.message}
+              placeholder={props.texts.emailPlaceholder}
+              startAdornment={
+                <InputAdornment position="start">
+                  <EmailIcon />
+                </InputAdornment>
               }
-            }}
-            helperText={errors.email?.message}
-          />
-
-          <HawaTextField
-            fullWidth
-            name="password"
-            placeholder={props.texts.passwordPlaceholder}
-            type="password"
-            label={props.texts.passwordLabel}
-            startAdornment={
-              <InputAdornment position="start">
-                <PasswordIcon />
-              </InputAdornment>
+              {...field}
+            />
+          )}
+          rules={{
+            required: props.texts.emailRequiredText,
+            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: props.texts.emailInvalidText
             }
-            rules={{
-              required: props.texts.passwordRequired
-            }}
-            helperText={errors.password?.message}
-          />
-          <Typography
-            style={{
-              cursor: "pointer",
-              marginTop: 5,
-              width: "max-content",
-              fontSize: 15,
-              padding: 5
-            }}
-            onClick={props.handleForgotPassword}
-          >
-            {props.texts.forgotPasswordText}
-          </Typography>
-          <Button type="submit" fullWidth variant="last">
-            {props.texts.signInText}
-          </Button>
-        </form>
-      </FormProvider>
+          }}
+        />
+
+        <Controller
+          control={control}
+          name="password"
+          render={({ field }) => (
+            <HawaTextField
+              fullWidth
+              type="password"
+              defaultValue={field.value ?? ""}
+              value={field.value ?? ""}
+              label={props.texts.passwordLabel}
+              placeholder={props.texts.passwordPlaceholder}
+              helperText={errors.password?.message}
+              startAdornment={
+                <InputAdornment position="start">
+                  <PasswordIcon />
+                </InputAdornment>
+              }
+              {...field}
+            />
+          )}
+          rules={{ required: props.texts.passwordRequiredText }}
+        />
+        <Typography
+          style={{
+            cursor: "pointer",
+            marginTop: 5,
+            width: "max-content",
+            fontSize: 15,
+            padding: 5
+          }}
+          onClick={props.handleForgotPassword}
+        >
+          {props.texts.forgotPasswordText}
+        </Typography>
+        <Button type="submit" fullWidth variant="last">
+          {props.texts.signInText}
+        </Button>
+      </form>
       <Typography
         variant="subtitle2"
-        style={{
-          // fontSize: 15,
-          marginTop: 5,
-          textAlign: "center",
-          padding: 5
-        }}
+        style={{ marginTop: 5, textAlign: "center", padding: 5 }}
       >
         {props.texts.newUserText}{" "}
         <span