@sikka/hawa 0.0.11 → 0.0.14

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{Typography as n,Button as o,Container as s}from"@mui/material";import"@mui/material/TextField";import d from"@mui/material/Typography";import u from"@mui/icons-material/GitHub";import m from"@mui/icons-material/Twitter";import p from"@mui/icons-material/AccountBalanceWallet";import c from"@mui/material/Input";import h from"@mui/material/InputLabel";import g from"@mui/material/Alert";import b from"@mui/material/AlertTitle";import{useForm as f,FormProvider as x}from"react-hook-form";import y from"@mui/material/Container";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 k(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){C(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 C(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function A(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=[],n=!0,o=!1;try{for(r=r.call(e);!(n=(a=r.next()).done)&&(i.push(a.value),!t||i.length!==t);n=!0);}catch(e){o=!0,l=e}finally{try{n||null==r.return||r.return()}finally{if(o)throw l}}return i}(e,t)||function(e,t){if(!e)return;if("string"==typeof e)return L(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 L(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 L(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 W=function(e){return a(t,k(k({},e),{},{children:e.text}))},q=function(e){return a("div",{children:e.children})},O=function(e){return a(d,k(k({},e),{},{children:e.children}))};r.oneOf(["text","number","password"]),r.string;var I=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(u,{});break;case"twitter":i=a(m,{});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(p,{})}return l(t,k(k({},e),{},{variant:"withLogo",children:[i,a("div",{style:{width:10}}),a(n,{style:{color:"black",fontSize:14,textAlign:"center",letterSpacing:.4,fontFamily:"Roboto",fontWeight:500},children:e.buttonText})]}))},j=function(e){return l(i,{children:[a(h,{children:e.label}),a(c,k({disableUnderline:!0},e))]})},E=function(e){return l(g,{children:[e.title&&a(b,{children:e.title}),e.text]})},z=function(e){var t,r,i,n,s=f(),d=s.formState.errors;return s.handleSubmit,a(y,{maxWidth:"xs",children:a(x,k(k({},s),{},{children:l("form",{children:[a(j,{fullWidth:!0,type:"text",name:"fullName",label:"Full Name",placeholder:"Fulan AlFulani",rules:{required:"Email is required"},helperText:null===(t=d.fullName)||void 0===t?void 0:t.message}),a(j,{fullWidth:!0,type:"text",name:"email",label:"New Email",placeholder:"Enter your new email",rules:{required:"Email is required"},helperText:null===(r=d.email)||void 0===r?void 0:r.message}),a(j,{fullWidth:!0,type:"password",name:"password",label:"New password",placeholder:"Enter your new password",rules:{required:"Email is required"},helperText:null===(i=d.password)||void 0===i?void 0:i.message}),a(j,{fullWidth:!0,type:"password",name:"confirmPassword",label:"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(o,{type:"submit",fullWidth:!0,variant:"last",children:"update profile"})," "]})}))})},G=function(e){return l(q,{maxWidth:400,children:[a(j,{type:"text",inputLabel:"First Name"}),a(j,{type:"text",inputLabel:"Last Name"}),a(j,{type:"email",inputLabel:"Email"}),a(j,{type:"password",inputLabel:"Password"}),a(W,{last:!0,text:"Update Account"})]})},N=function(r){var i,n,o=A(e(""),2),s=o[0],d=o[1],u=f(),m=u.formState.errors,p=u.handleSubmit;return l(y,{maxWidth:"xs",variant:"auth",children:[r.error&&a(E,{text:"This is a new password alert",severity:"error"}),r.passwordChanged?a(O,{style:{textAlign:"center",margin:5},children:"Your password has been changed, you'll be redirected to sign in page"}):a(x,k(k({},u),{},{children:l("form",{onSubmit:p(r.handleNewPassword),children:[a(j,{fullWidth:!0,name:"password",type:"password",label:r.texts.passwordLabel,placeholder:r.texts.passwordPlaceholder,onChange:function(e){return d(e.target.value)},value:s,startAdornment:a(v,{position:"start",children:a(w,{})}),rules:{required:r.texts.passwordRequiredText},helperText:null===(i=m.password)||void 0===i?void 0:i.message}),a(j,{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=m.confirmPassword)||void 0===n?void 0:n.message}),a(t,{type:"submit",fullWidth:!0,variant:"last",children:r.texts.updatePassword})]})}))]})},M=function(e){var r,i=f(),n=i.formState.errors,o=i.handleSubmit;return i.getValues,i.register,i.watch,i.reset,i.setValue,l(y,{maxWidth:"xs",variant:"auth",children:[e.error&&l(Alert,{severity:"error",children:[e.errorTitle&&a(AlertTitle,{children:e.errorTitle}),e.errorText]}),e.sent?a(O,{style:{textAlign:"center",margin:5},children:"An link was sent to your email to reset the password."}):a(x,k(k({},i),{},{children:l("form",{onSubmit:o(e.handleResetPassword),children:[a(j,{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})]})}))]})},U=function(e){var r,i,n,o=f(),s=o.formState.errors,u=o.handleSubmit;return l(y,{maxWidth:"xs",variant:"auth",children:[e.error&&l(g,{severity:"error",children:[e.errorTitle&&a(AlertTitle,{children:e.errorTitle}),e.errorText]}),a(x,k(k({},o),{},{children:l("form",{onSubmit:u(e.handleSignUp),children:[a(j,{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=s.fullName)||void 0===r?void 0:r.message}),a(j,{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=s.email)||void 0===i?void 0:i.message}),a(j,{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===(n=s.password)||void 0===n?void 0:n.message}),a(t,{fullWidth:!0,variant:"last",type:"submit",children:e.texts.signUpText})]})})),l(d,{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(I,{logo:"google",buttonText:e.texts.googleButtonLabel,onClick:e.handleGoogleSignUp}),e.viaGithub&&a(I,{logo:"github",buttonText:e.texts.githubButtonLabel,onClick:e.handleGithubSignUp}),e.viaTwitter&&a(I,{logo:"twitter",buttonText:e.texts.twitterButtonLabel,onClick:e.handleTwitterSignUp})]})]})};U.propTypes={theme:r.oneOf(["secondary","primary"])};var B=function(e){var r,i,n=f(),o=n.formState.errors,s=n.handleSubmit;return l(y,{maxWidth:"xs",variant:"auth",children:[e.error&&l(g,{severity:"error",children:[e.errorTitle&&a(AlertTitle,{children:e.errorTitle}),e.errorText]}),a(x,k(k({},n),{},{children:l("form",{onSubmit:s(e.handleSignIn),children:[a(j,{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=o.email)||void 0===r?void 0:r.message}),a(j,{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=o.password)||void 0===i?void 0:i.message}),a(O,{style:{cursor:"pointer",marginTop:5,width:"max-content",padding:5},onClick:e.handleForgotPassword,children:e.texts.forgotPasswordText}),a(t,{type:"submit",fullWidth:!0,variant:"last",children:e.texts.signInText})]})})),l(O,{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(I,{logo:"google",buttonText:e.texts.googleButtonLabel,onClick:e.handleGoogleSignIn}),e.viaGithub&&a(I,{logo:"github",buttonText:e.texts.githubButtonLabel,onClick:e.handleGithubSignIn}),e.viaTwitter&&a(I,{logo:"twitter",buttonText:e.texts.twitterButtonLabel,onClick:e.handleTwitterSignIn})]})]})},R=function(e){return l(s,{maxWidth:"xs",children:[a(O,{align:"center",children:"Choose Payment Method"}),e.viaWallet&&a(I,{logo:"wallet",buttonText:e.walletLabel,onClick:e.handleWallet}),e.viaCreditCard&&a(I,{logo:"visa/master",buttonText:e.visaMasterLabel,handleClick:e.handleCreditCard}),e.viaMada&&a(I,{logo:"mada",buttonText:e.madaLabel,handleClick:e.handleMada}),e.viaSTCPay&&a(I,{logo:"stcpay",buttonText:e.stcPayLabel,handleClick:e.handleSTCPay}),e.viaPayPal&&a(I,{logo:"paypal",buttonText:e.paypalLabel,handleClick:e.handlePayPal}),e.viaGooglePay&&a(I,{logo:"googlepay",buttonText:e.googlePayLabel,handleClick:e.handleGooglePay}),e.viaApplePay&&a(I,{logo:"applepay",buttonText:e.applePayLabel,handleClick:e.handleApplePay})]})};j.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 F=function(e){var t,r,i=f(),n=i.formState.errors,o=i.handleSubmit;return a(q,{maxWidth:400,noColor:!0,noMargin:!0,noPadding:!0,children:a(q,{noMargin:!0,children:a(x,k(k({},i),{},{children:l("form",{onSubmit:o(e.handle),children:[a(j,{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(j,{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(W,{last:!0,fullWidth:!0,text:"Sign In",onClick:e.handleSignIn})]})}))})})},D=function(t){var r,i=A(e(0),2),n=i[0],o=i[1],s=f(),d=s.formState.errors,u=s.handleSubmit;return a(q,{maxWidth:400,noColor:!0,noMargin:!0,noPadding:!0,children:l(q,{noMargin:!0,children:[l(O,{variant:"h2",align:"center",children:[Number(n).toLocaleString("en")," ",a("span",{style:{fontSize:20,letterSpacing:1},children:t.currency})]}),a(x,k(k({},s),{},{children:l("form",{onChange:function(e){e.preventDefault(),o(s.getValues().amount)},style:{marginTop:10},onSubmit:u(t.handleChargeWallet),children:[a(j,{name:"amount",placeholder:"Enter amount",type:"number",value:n,rules:{required:"Password is rquired"},helperText:null===(r=d.amount)||void 0===r?void 0:r.message}),a(W,{last:!0,fullWidth:!0,text:"Charge Wallet",onClick:t.handleSignIn})]})}))]})})},Z=function(e){return a(q,{maxWidth:400,noColor:!0,noMargin:!0,noPadding:!0,children:l(q,{noMargin:!0,children:[a("div",{children:"Wallet Balance"}),a(W,{text:"Pay now"})]})})};export{D as ChargeWalletForm,F as CreditCardForm,N as NewPasswordForm,Z as PayWithWallet,M as ResetPasswordForm,R as SelectPayment,B as SignInForm,U as SignUpForm,z as UserProfile,G as UserSettings};
+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 n from"@mui/material/Container";import{Typography as o,Container as s,Button as d}from"@mui/material";import"@mui/icons-material/CheckCircleOutlined";import u from"@mui/material/Typography";import m from"@mui/material/Input";import p from"@mui/material/InputLabel";import c from"@mui/icons-material/GitHub";import h from"@mui/icons-material/Twitter";import g from"@mui/icons-material/AccountBalanceWallet";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 C(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 S(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?C(Object(r),!0).forEach((function(t){k(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):C(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=[],n=!0,o=!1;try{for(r=r.call(e);!(n=(a=r.next()).done)&&(i.push(a.value),!t||i.length!==t);n=!0);}catch(e){o=!0,l=e}finally{try{n||null==r.return||r.return()}finally{if(o)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;var q=function(e){return a(u,S(S({},e),{},{children:e.children}))},L=function(e){return l(i,{children:[a(p,{children:e.label}),a(m,S({disableUnderline:!0},e))]})};r.oneOf(["text","number","password"]),r.string;var O=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(c,{});break;case"twitter":i=a(h,{});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(g,{})}return l(t,S(S({},e),{},{variant:"withLogo",children:[i,a("div",{style:{width:10}}),a(o,{style:{color:"black",fontSize:14,textAlign:"center",letterSpacing:.4,fontFamily:"Roboto",fontWeight:500},children:e.buttonText})]}))},I=function(e){return l(b,{children:[e.title&&a(f,{children:e.title}),e.text]})},N=function(e){var r,i,o,s,d=x(),u=d.formState.errors;return a(n,{maxWidth:"sm",children:a(y,S(S({},d),{},{children:l("form",{children:[a(L,{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(L,{fullWidth:!0,type:"text",name:"fullName",label:"Phone Number",placeholder:"+966",rules:{required:"Email is required"}}),a(L,{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(L,{fullWidth:!0,type:"password",name:"password",label:"New password",placeholder:"Enter your new password",rules:{required:"Email is required"},helperText:null===(o=u.password)||void 0===o?void 0:o.message}),a(L,{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(s,{maxWidth:"sm",children:[e.children,a(d,{type:"submit",fullWidth:!0,variant:"last",children:"Save Settings"})]})},E=function(r){var i,o,s=W(e(""),2),d=s[0],u=s[1],m=x(),p=m.formState.errors,c=m.handleSubmit;return l(n,{maxWidth:"xs",variant:"auth",children:[r.error&&a(I,{text:"This is a new password alert",severity:"error"}),r.passwordChanged?a(q,{style:{textAlign:"center",margin:5},children:"Your password has been changed, you'll be redirected to sign in page"}):a(y,S(S({},m),{},{children:l("form",{onSubmit:c(r.handleNewPassword),children:[a(L,{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(L,{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===(o=p.confirmPassword)||void 0===o?void 0:o.message}),a(t,{type:"submit",fullWidth:!0,variant:"last",children:r.texts.updatePassword})]})}))]})},z=function(e){var r,i=x(),o=i.formState.errors,s=i.handleSubmit;return i.getValues,i.register,i.watch,i.reset,i.setValue,l(n,{maxWidth:"xs",variant:"auth",children:[e.error&&l(Alert,{severity:"error",children:[e.errorTitle&&a(AlertTitle,{children:e.errorTitle}),e.errorText]}),e.sent?a(q,{style:{textAlign:"center",margin:5},children:"An link was sent to your email to reset the password."}):a(y,S(S({},i),{},{children:l("form",{onSubmit:s(e.handleResetPassword),children:[a(L,{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=o.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,o,s=x(),d=s.formState.errors,m=s.handleSubmit;return l(n,{maxWidth:"xs",variant:"auth",children:[e.error&&l(b,{severity:"error",children:[e.errorTitle&&a(f,{children:e.errorTitle}),e.errorText]}),a(y,S(S({},s),{},{children:l("form",{onSubmit:m(e.handleSignUp),children:[a(L,{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=d.fullName)||void 0===r?void 0:r.message}),a(L,{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=d.email)||void 0===i?void 0:i.message}),a(L,{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===(o=d.password)||void 0===o?void 0:o.message}),a(t,{fullWidth:!0,variant:"last",type:"submit",children:e.texts.signUpText})]})})),l(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})]}),l("div",{style:{display:"flex",flexDirection:"column"},children:[e.viaGoogle&&a(O,{logo:"google",buttonText:e.texts.googleButtonLabel,onClick:e.handleGoogleSignUp}),e.viaGithub&&a(O,{logo:"github",buttonText:e.texts.githubButtonLabel,onClick:e.handleGithubSignUp}),e.viaTwitter&&a(O,{logo:"twitter",buttonText:e.texts.twitterButtonLabel,onClick:e.handleTwitterSignUp})]})]})};G.propTypes={theme:r.oneOf(["secondary","primary"])};var R=function(e){var r,i,o=x(),s=o.formState.errors,d=o.handleSubmit;return l(n,{maxWidth:"xs",variant:"auth",children:[e.error&&l(b,{severity:"error",children:[e.errorTitle&&a(f,{children:e.errorTitle}),e.errorText]}),a(y,S(S({},o),{},{children:l("form",{onSubmit:d(e.handleSignIn),children:[a(L,{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=s.email)||void 0===r?void 0:r.message}),a(L,{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=s.password)||void 0===i?void 0:i.message}),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})]})})),l(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})]}),l("div",{style:{display:"flex",flexDirection:"column"},children:[e.viaGoogle&&a(O,{logo:"google",buttonText:e.texts.googleButtonLabel,onClick:e.handleGoogleSignIn}),e.viaGithub&&a(O,{logo:"github",buttonText:e.texts.githubButtonLabel,onClick:e.handleGithubSignIn}),e.viaTwitter&&a(O,{logo:"twitter",buttonText:e.texts.twitterButtonLabel,onClick:e.handleTwitterSignIn})]})]})},B=function(e){return l(s,{maxWidth:"xs",children:[a(q,{align:"center",children:"Choose Payment Method"}),e.viaWallet&&a(O,{logo:"wallet",buttonText:e.walletLabel,onClick:e.handleWallet}),e.viaCreditCard&&a(O,{logo:"visa/master",buttonText:e.visaMasterLabel,onClick:e.handleCreditCard}),e.viaMada&&a(O,{logo:"mada",buttonText:e.madaLabel,onClick:e.handleMada}),e.viaSTCPay&&a(O,{logo:"stcpay",buttonText:e.stcPayLabel,onClick:e.handleSTCPay}),e.viaPayPal&&a(O,{logo:"paypal",buttonText:e.paypalLabel,onClick:e.handlePayPal}),e.viaGooglePay&&a(O,{logo:"googlepay",buttonText:e.googlePayLabel,onClick:e.handleGooglePay}),e.viaApplePay&&a(O,{logo:"applepay",buttonText:e.applePayLabel,onClick:e.handleApplePay})]})};L.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(),n=i.formState.errors,o=i.handleSubmit;return a(s,{maxWidth:"xs",children:a(y,S(S({},i),{},{children:l("form",{onSubmit:o(e.handle),children:[a(L,{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(L,{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(d,{type:"submit",fullWidth:!0,variant:"last",onClick:e.handlePayWithCreditCard,children:"Pay with Credit Card"})]})}))})},D=function(r){var i,o=W(e(0),2),s=o[0],d=o[1],m=x(),p=m.formState.errors,c=m.handleSubmit;return l(n,{maxWidth:"xs",children:[l(u,{align:"center",variant:"h1",children:[Number(s).toLocaleString("en")||"0",a(u,{children:r.currency||"SAR"})]}),a(y,S(S({},m),{},{children:l("form",{onChange:function(e){e.preventDefault(),d(m.getValues().amount)},style:{marginTop:10},onSubmit:c(r.handleChargeWallet),children:[a(L,{fullWidth:!0,name:"amount",placeholder:"Enter amount",type:"number",value:s,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"})]})}))]})},F=function(e){return l(s,{maxWidth:"xs",children:[a(o,{align:"center",children:"Wallet Balance"}),l(o,{align:"center",variant:"h1",children:[e.walletBalance||"0",a(o,{children:e.currency||"SAR"})]}),a(d,{type:"submit",fullWidth:!0,variant:"last",onClick:e.handlePayWithWallet,children:"Pay Now"})]})};export{D as ChargeWalletForm,U as CreditCardForm,E as NewPasswordForm,F as PayWithWallet,z as ResetPasswordForm,B as SelectPayment,R as SignInForm,G as SignUpForm,N as UserProfileForm,j 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");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/Input"),u=require("@mui/material/InputLabel"),m=require("@mui/material/Alert"),x=require("@mui/material/AlertTitle"),p=require("react-hook-form"),c=require("@mui/material/Container"),h=require("@mui/material/InputAdornment"),g=require("@mui/icons-material/HttpsOutlined"),f=require("@mui/icons-material/MailOutline"),b=require("@mui/icons-material/PermIdentityOutlined");function j(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var y=j(t),v=j(r),w=j(s),T=j(i),P=j(n),S=j(o),q=j(d),C=j(u),k=j(m),A=j(x),W=j(c),L=j(h),F=j(g),O=j(f),I=j(b);function E(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 N(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?E(Object(r),!0).forEach((function(t){z(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):E(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 U(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 U(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 U(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 M=function(e){return a.jsx(y.default,N(N({},e),{},{children:e.text}))},R=function(e){return a.jsx("div",{children:e.children})},B=function(e){return a.jsx(w.default,N(N({},e),{},{children:e.children}))};v.default.oneOf(["text","number","password"]),v.default.string;var D=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(T.default,{});break;case"twitter":r=a.jsx(P.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(S.default,{})}return a.jsxs(y.default,N(N({},e),{},{variant:"withLogo",children:[r,a.jsx("div",{style:{width:10}}),a.jsx(l.Typography,{style:{color:"black",fontSize:14,textAlign:"center",letterSpacing:.4,fontFamily:"Roboto",fontWeight:500},children:e.buttonText})]}))},Z=function(e){return a.jsxs(a.Fragment,{children:[a.jsx(C.default,{children:e.label}),a.jsx(q.default,N({disableUnderline:!0},e))]})},$=function(e){return a.jsxs(k.default,{children:[e.title&&a.jsx(A.default,{children:e.title}),e.text]})},_=function(e){var t,r,l,s=p.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(AlertTitle,{children:e.errorTitle}),e.errorText]}),a.jsx(p.FormProvider,N(N({},s),{},{children:a.jsxs("form",{onSubmit:n(e.handleSignUp),children:[a.jsx(Z,{fullWidth:!0,type:"text",label:e.texts.fullNameLabel,name:"fullName",placeholder:e.texts.fullNamePlaceholder,inputLabel:e.texts.fullNameLabel,startAdornment:a.jsx(L.default,{position:"start",children:a.jsx(I.default,{})}),helperText:null===(t=i.fullName)||void 0===t?void 0:t.message}),a.jsx(Z,{fullWidth:!0,type:"text",label:e.texts.emailLabel,placeholder:e.texts.emailPlaceholder,name:"email",startAdornment:a.jsx(L.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(Z,{fullWidth:!0,name:"password",placeholder:e.texts.passwordPlaceholder,type:"password",label:e.texts.passwordLabel,startAdornment:a.jsx(L.default,{position:"start",children:a.jsx(F.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(y.default,{fullWidth:!0,variant:"last",type:"submit",children:e.texts.signUpText})]})})),a.jsxs(w.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(D,{logo:"google",buttonText:e.texts.googleButtonLabel,onClick:e.handleGoogleSignUp}),e.viaGithub&&a.jsx(D,{logo:"github",buttonText:e.texts.githubButtonLabel,onClick:e.handleGithubSignUp}),e.viaTwitter&&a.jsx(D,{logo:"twitter",buttonText:e.texts.twitterButtonLabel,onClick:e.handleTwitterSignUp})]})]})};_.propTypes={theme:v.default.oneOf(["secondary","primary"])};Z.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=p.useForm(),o=n.formState.errors,d=n.handleSubmit;return a.jsx(R,{maxWidth:400,noColor:!0,noMargin:!0,noPadding:!0,children:a.jsxs(R,{noMargin:!0,children:[a.jsxs(B,{variant:"h2",align:"center",children:[Number(s).toLocaleString("en")," ",a.jsx("span",{style:{fontSize:20,letterSpacing:1},children:t.currency})]}),a.jsx(p.FormProvider,N(N({},n),{},{children:a.jsxs("form",{onChange:function(e){e.preventDefault(),i(n.getValues().amount)},style:{marginTop:10},onSubmit:d(t.handleChargeWallet),children:[a.jsx(Z,{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(M,{last:!0,fullWidth:!0,text:"Charge Wallet",onClick:t.handleSignIn})]})}))]})})},exports.CreditCardForm=function(e){var t,r,l=p.useForm(),s=l.formState.errors,i=l.handleSubmit;return a.jsx(R,{maxWidth:400,noColor:!0,noMargin:!0,noPadding:!0,children:a.jsx(R,{noMargin:!0,children:a.jsx(p.FormProvider,N(N({},l),{},{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===(t=s.password)||void 0===t?void 0:t.message}),a.jsx(Z,{name:"password",placeholder:"Enter password",type:"password",inputLabel:"Password",rules:{required:"Password is rquired"},helperText:null===(r=s.password)||void 0===r?void 0:r.message}),a.jsx(M,{last:!0,fullWidth:!0,text:"Sign In",onClick:e.handleSignIn})]})}))})})},exports.NewPasswordForm=function(t){var r,l,s=G(e.useState(""),2),i=s[0],n=s[1],o=p.useForm(),d=o.formState.errors,u=o.handleSubmit;return a.jsxs(W.default,{maxWidth:"xs",variant:"auth",children:[t.error&&a.jsx($,{text:"This is a new password alert",severity:"error"}),t.passwordChanged?a.jsx(B,{style:{textAlign:"center",margin:5},children:"Your password has been changed, you'll be redirected to sign in page"}):a.jsx(p.FormProvider,N(N({},o),{},{children:a.jsxs("form",{onSubmit:u(t.handleNewPassword),children:[a.jsx(Z,{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(L.default,{position:"start",children:a.jsx(F.default,{})}),rules:{required:t.texts.passwordRequiredText},helperText:null===(r=d.password)||void 0===r?void 0:r.message}),a.jsx(Z,{fullWidth:!0,name:"confirmPassword",type:"password",placeholder:t.texts.confirmPasswordPlaceholder,label:t.texts.confirmPasswordLabel,startAdornment:a.jsx(L.default,{position:"start",children:a.jsx(F.default,{})}),rules:{required:"Password is rquired"},helperText:null===(l=d.confirmPassword)||void 0===l?void 0:l.message}),a.jsx(y.default,{type:"submit",fullWidth:!0,variant:"last",children:t.texts.updatePassword})]})}))]})},exports.PayWithWallet=function(e){return a.jsx(R,{maxWidth:400,noColor:!0,noMargin:!0,noPadding:!0,children:a.jsxs(R,{noMargin:!0,children:[a.jsx("div",{children:"Wallet Balance"}),a.jsx(M,{text:"Pay now"})]})})},exports.ResetPasswordForm=function(e){var t,r=p.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(B,{style:{textAlign:"center",margin:5},children:"An link was sent to your email to reset the password."}):a.jsx(p.FormProvider,N(N({},r),{},{children:a.jsxs("form",{onSubmit:s(e.handleResetPassword),children:[a.jsx(Z,{fullWidth:!0,type:"text",name:"email",label:e.texts.emailLabel,placeholder:e.texts.emailPlaceholder,startAdornment:a.jsx(L.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(y.default,{type:"submit",fullWidth:!0,variant:"last",children:e.texts.resetPassword})]})}))]})},exports.SelectPayment=function(e){return a.jsxs(l.Container,{maxWidth:"xs",children:[a.jsx(B,{align:"center",children:"Choose Payment Method"}),e.viaWallet&&a.jsx(D,{logo:"wallet",buttonText:e.walletLabel,onClick:e.handleWallet}),e.viaCreditCard&&a.jsx(D,{logo:"visa/master",buttonText:e.visaMasterLabel,handleClick:e.handleCreditCard}),e.viaMada&&a.jsx(D,{logo:"mada",buttonText:e.madaLabel,handleClick:e.handleMada}),e.viaSTCPay&&a.jsx(D,{logo:"stcpay",buttonText:e.stcPayLabel,handleClick:e.handleSTCPay}),e.viaPayPal&&a.jsx(D,{logo:"paypal",buttonText:e.paypalLabel,handleClick:e.handlePayPal}),e.viaGooglePay&&a.jsx(D,{logo:"googlepay",buttonText:e.googlePayLabel,handleClick:e.handleGooglePay}),e.viaApplePay&&a.jsx(D,{logo:"applepay",buttonText:e.applePayLabel,handleClick:e.handleApplePay})]})},exports.SignInForm=function(e){var t,r,l=p.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(AlertTitle,{children:e.errorTitle}),e.errorText]}),a.jsx(p.FormProvider,N(N({},l),{},{children:a.jsxs("form",{onSubmit:i(e.handleSignIn),children:[a.jsx(Z,{fullWidth:!0,type:"text",name:"email",label:e.texts.emailLabel,placeholder:e.texts.emailPlaceholder,startAdornment:a.jsx(L.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(Z,{fullWidth:!0,name:"password",placeholder:e.texts.passwordPlaceholder,type:"password",label:e.texts.passwordLabel,startAdornment:a.jsx(L.default,{position:"start",children:a.jsx(F.default,{})}),rules:{required:e.texts.passwordRequired},helperText:null===(r=s.password)||void 0===r?void 0:r.message}),a.jsx(B,{style:{cursor:"pointer",marginTop:5,width:"max-content",padding:5},onClick:e.handleForgotPassword,children:e.texts.forgotPasswordText}),a.jsx(y.default,{type:"submit",fullWidth:!0,variant:"last",children:e.texts.signInText})]})})),a.jsxs(B,{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(D,{logo:"google",buttonText:e.texts.googleButtonLabel,onClick:e.handleGoogleSignIn}),e.viaGithub&&a.jsx(D,{logo:"github",buttonText:e.texts.githubButtonLabel,onClick:e.handleGithubSignIn}),e.viaTwitter&&a.jsx(D,{logo:"twitter",buttonText:e.texts.twitterButtonLabel,onClick:e.handleTwitterSignIn})]})]})},exports.SignUpForm=_,exports.UserProfile=function(e){var t,r,s,i,n=p.useForm(),o=n.formState.errors;return n.handleSubmit,a.jsx(W.default,{maxWidth:"xs",children:a.jsx(p.FormProvider,N(N({},n),{},{children:a.jsxs("form",{children:[a.jsx(Z,{fullWidth:!0,type:"text",name:"fullName",label:"Full Name",placeholder:"Fulan AlFulani",rules:{required:"Email is required"},helperText:null===(t=o.fullName)||void 0===t?void 0:t.message}),a.jsx(Z,{fullWidth:!0,type:"text",name:"email",label:"New Email",placeholder:"Enter your new email",rules:{required:"Email is required"},helperText:null===(r=o.email)||void 0===r?void 0:r.message}),a.jsx(Z,{fullWidth:!0,type:"password",name:"password",label:"New password",placeholder:"Enter your new password",rules:{required:"Email is required"},helperText:null===(s=o.password)||void 0===s?void 0:s.message}),a.jsx(Z,{fullWidth:!0,type:"password",name:"confirmPassword",label:"Confirm new password",placeholder:"Confirm new password",rules:{required:"Email is required"},helperText:null===(i=o.confirmPassword)||void 0===i?void 0:i.message}),a.jsx(l.Button,{type:"submit",fullWidth:!0,variant:"last",children:"update profile"})," "]})}))})},exports.UserSettings=function(e){return a.jsxs(R,{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(M,{last:!0,text:"Update Account"})]})};
+"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"),s=require("@mui/material");require("@mui/icons-material/CheckCircleOutlined");var i=require("@mui/material/Typography"),n=require("@mui/material/Input"),o=require("@mui/material/InputLabel"),d=require("@mui/icons-material/GitHub"),u=require("@mui/icons-material/Twitter"),m=require("@mui/icons-material/AccountBalanceWallet"),c=require("@mui/material/Alert"),h=require("@mui/material/AlertTitle"),x=require("react-hook-form"),p=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(i),P=y(n),C=y(o),S=y(d),q=y(u),k=y(m),W=y(c),A=y(h),L=y(p),F=y(f),O=y(g),I=y(b);function N(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?N(Object(r),!0).forEach((function(t){z(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):N(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;var R=function(e){return a.jsx(T.default,E(E({},e),{},{children:e.children}))},U=function(e){return a.jsxs(a.Fragment,{children:[a.jsx(C.default,{children:e.label}),a.jsx(P.default,E({disableUnderline:!0},e))]})};v.default.oneOf(["text","number","password"]),v.default.string;var D=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(S.default,{});break;case"twitter":r=a.jsx(q.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(k.default,{})}return a.jsxs(j.default,E(E({},e),{},{variant:"withLogo",children:[r,a.jsx("div",{style:{width:10}}),a.jsx(s.Typography,{style:{color:"black",fontSize:14,textAlign:"center",letterSpacing:.4,fontFamily:"Roboto",fontWeight:500},children:e.buttonText})]}))},M=function(e){return a.jsxs(W.default,{children:[e.title&&a.jsx(A.default,{children:e.title}),e.text]})},Z=function(e){var t,r,l,s=x.useForm(),i=s.formState.errors,n=s.handleSubmit;return a.jsxs(w.default,{maxWidth:"xs",variant:"auth",children:[e.error&&a.jsxs(W.default,{severity:"error",children:[e.errorTitle&&a.jsx(A.default,{children:e.errorTitle}),e.errorText]}),a.jsx(x.FormProvider,E(E({},s),{},{children:a.jsxs("form",{onSubmit:n(e.handleSignUp),children:[a.jsx(U,{fullWidth:!0,type:"text",label:e.texts.fullNameLabel,name:"fullName",placeholder:e.texts.fullNamePlaceholder,inputLabel:e.texts.fullNameLabel,startAdornment:a.jsx(L.default,{position:"start",children:a.jsx(I.default,{})}),helperText:null===(t=i.fullName)||void 0===t?void 0:t.message}),a.jsx(U,{fullWidth:!0,type:"text",label:e.texts.emailLabel,placeholder:e.texts.emailPlaceholder,name:"email",startAdornment:a.jsx(L.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(U,{fullWidth:!0,name:"password",placeholder:e.texts.passwordPlaceholder,type:"password",label:e.texts.passwordLabel,startAdornment:a.jsx(L.default,{position:"start",children:a.jsx(F.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(D,{logo:"google",buttonText:e.texts.googleButtonLabel,onClick:e.handleGoogleSignUp}),e.viaGithub&&a.jsx(D,{logo:"github",buttonText:e.texts.githubButtonLabel,onClick:e.handleGithubSignUp}),e.viaTwitter&&a.jsx(D,{logo:"twitter",buttonText:e.texts.twitterButtonLabel,onClick:e.handleTwitterSignUp})]})]})};Z.propTypes={theme:v.default.oneOf(["secondary","primary"])};U.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=x.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(x.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(U,{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=x.useForm(),i=l.formState.errors,n=l.handleSubmit;return a.jsx(s.Container,{maxWidth:"xs",children:a.jsx(x.FormProvider,E(E({},l),{},{children:a.jsxs("form",{onSubmit:n(e.handle),children:[a.jsx(U,{fullWidth:!0,name:"password",placeholder:"Enter password",type:"number",label:"Card Number",rules:{required:"Password is rquired"},helperText:null===(t=i.password)||void 0===t?void 0:t.message}),a.jsx(U,{fullWidth:!0,name:"password",placeholder:"Enter password",type:"password",label:"Name On Card",rules:{required:"Password is rquired"},helperText:null===(r=i.password)||void 0===r?void 0:r.message}),a.jsx(s.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=x.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(x.FormProvider,E(E({},o),{},{children:a.jsxs("form",{onSubmit:u(t.handleNewPassword),children:[a.jsx(U,{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(L.default,{position:"start",children:a.jsx(F.default,{})}),rules:{required:t.texts.passwordRequiredText},helperText:null===(r=d.password)||void 0===r?void 0:r.message}),a.jsx(U,{fullWidth:!0,name:"confirmPassword",type:"password",placeholder:t.texts.confirmPasswordPlaceholder,label:t.texts.confirmPasswordLabel,startAdornment:a.jsx(L.default,{position:"start",children:a.jsx(F.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(s.Container,{maxWidth:"xs",children:[a.jsx(s.Typography,{align:"center",children:"Wallet Balance"}),a.jsxs(s.Typography,{align:"center",variant:"h1",children:[e.walletBalance||"0",a.jsx(s.Typography,{children:e.currency||"SAR"})]}),a.jsx(s.Button,{type:"submit",fullWidth:!0,variant:"last",onClick:e.handlePayWithWallet,children:"Pay Now"})]})},exports.ResetPasswordForm=function(e){var t,r=x.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(x.FormProvider,E(E({},r),{},{children:a.jsxs("form",{onSubmit:s(e.handleResetPassword),children:[a.jsx(U,{fullWidth:!0,type:"text",name:"email",label:e.texts.emailLabel,placeholder:e.texts.emailPlaceholder,startAdornment:a.jsx(L.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(s.Container,{maxWidth:"xs",children:[a.jsx(R,{align:"center",children:"Choose Payment Method"}),e.viaWallet&&a.jsx(D,{logo:"wallet",buttonText:e.walletLabel,onClick:e.handleWallet}),e.viaCreditCard&&a.jsx(D,{logo:"visa/master",buttonText:e.visaMasterLabel,onClick:e.handleCreditCard}),e.viaMada&&a.jsx(D,{logo:"mada",buttonText:e.madaLabel,onClick:e.handleMada}),e.viaSTCPay&&a.jsx(D,{logo:"stcpay",buttonText:e.stcPayLabel,onClick:e.handleSTCPay}),e.viaPayPal&&a.jsx(D,{logo:"paypal",buttonText:e.paypalLabel,onClick:e.handlePayPal}),e.viaGooglePay&&a.jsx(D,{logo:"googlepay",buttonText:e.googlePayLabel,onClick:e.handleGooglePay}),e.viaApplePay&&a.jsx(D,{logo:"applepay",buttonText:e.applePayLabel,onClick:e.handleApplePay})]})},exports.SignInForm=function(e){var t,r,l=x.useForm(),s=l.formState.errors,i=l.handleSubmit;return a.jsxs(w.default,{maxWidth:"xs",variant:"auth",children:[e.error&&a.jsxs(W.default,{severity:"error",children:[e.errorTitle&&a.jsx(A.default,{children:e.errorTitle}),e.errorText]}),a.jsx(x.FormProvider,E(E({},l),{},{children:a.jsxs("form",{onSubmit:i(e.handleSignIn),children:[a.jsx(U,{fullWidth:!0,type:"text",name:"email",label:e.texts.emailLabel,placeholder:e.texts.emailPlaceholder,startAdornment:a.jsx(L.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(U,{fullWidth:!0,name:"password",placeholder:e.texts.passwordPlaceholder,type:"password",label:e.texts.passwordLabel,startAdornment:a.jsx(L.default,{position:"start",children:a.jsx(F.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(D,{logo:"google",buttonText:e.texts.googleButtonLabel,onClick:e.handleGoogleSignIn}),e.viaGithub&&a.jsx(D,{logo:"github",buttonText:e.texts.githubButtonLabel,onClick:e.handleGithubSignIn}),e.viaTwitter&&a.jsx(D,{logo:"twitter",buttonText:e.texts.twitterButtonLabel,onClick:e.handleTwitterSignIn})]})]})},exports.SignUpForm=Z,exports.UserProfileForm=function(e){var t,r,l,s,i=x.useForm(),n=i.formState.errors;return a.jsx(w.default,{maxWidth:"sm",children:a.jsx(x.FormProvider,E(E({},i),{},{children:a.jsxs("form",{children:[a.jsx(U,{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(U,{fullWidth:!0,type:"text",name:"fullName",label:"Phone Number",placeholder:"+966",rules:{required:"Email is required"}}),a.jsx(U,{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(U,{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(U,{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(s.Container,{maxWidth:"sm",children:[e.children,a.jsx(s.Button,{type:"submit",fullWidth:!0,variant:"last",children:"Save Settings"})]})};

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@sikka/hawa",
-  "version": "0.0.11",
+  "version": "0.0.14",
   "description": "UI Kit",
   "main": "lib/index.js",
   "module": "es/index.es.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
-    "start": "start-storybook -p 6006",
-    "storybook": "start-storybook -p 6006",
+    "start": "start-storybook -p 6006 -s public",
+    "storybook": "start-storybook -p 6006 -s public",
     "build-storybook": "build-storybook",
     "build-lib": "rollup -c",
     "build:styles": " node tools/build-styles"

package/src/blocks/Account/{UserProfile.js → UserProfileForm.js}

@@ -1,19 +1,17 @@
 import React from "react";
-import { HawaInputLabel, ActionButton, HawaTextField } from "../../ui";
-import { Box } from "../../layout";
+import { HawaTextField } from "../../elements";
 import { FormProvider, useForm } from "react-hook-form";
 import Container from "@mui/material/Container";
-import { Button } from "@mui/material";
+import Button from "@mui/material/Button";
 
-export const UserProfile = (props) => {
+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
@@ -27,6 +25,17 @@ export const UserProfile = (props) => {
             }}
             helperText={errors.fullName?.message}
           />
+          <HawaTextField
+            fullWidth
+            type="text"
+            name="fullName"
+            label="Phone Number"
+            placeholder="+966"
+            rules={{
+              required: "Email is required"
+            }}
+            // helperText={errors.fullName?.message}
+          />
           <HawaTextField
             fullWidth
             type="text"

package/src/blocks/Account/UserSettingsForm.js

@@ -0,0 +1,13 @@
+import { HawaSettingsRow } from "../../elements";
+import { Button, Container } from "@mui/material";
+
+export const UserSettingsForm = (props) => {
+  return (
+    <Container maxWidth="sm">
+      {props.children}
+      <Button type="submit" fullWidth variant="last">
+        Save Settings
+      </Button>
+    </Container>
+  );
+};

package/src/blocks/Account/index.js

@@ -1,2 +1,2 @@
-export * from "./UserProfile.js";
-export * from "./UserSettings.js";
+export * from "./UserProfileForm.js";
+export * from "./UserSettingsForm.js";

package/src/blocks/AuthForms/NewPasswordForm.js

@@ -5,7 +5,7 @@ import {
   HawaTextField,
   HawaAlert,
   HawaTypography
-} from "../../ui";
+} from "../../elements";
 import { FormProvider, useForm } from "react-hook-form";
 import InputAdornment from "@mui/material/InputAdornment";
 import PasswordIcon from "@mui/icons-material/HttpsOutlined";

package/src/blocks/AuthForms/ResetPasswordForm.js

@@ -6,7 +6,7 @@ import {
   ActionButton,
   HawaAlert,
   HawaTypography
-} from "../../ui";
+} from "../../elements";
 import InputAdornment from "@mui/material/InputAdornment";
 import EmailIcon from "@mui/icons-material/MailOutline";
 import Container from "@mui/material/Container";

package/src/blocks/AuthForms/SignInForm.js

@@ -1,12 +1,14 @@
 import React from "react";
-import { HawaTextField, HawaTypography, HawaLogoButton } from "../../ui";
+import { HawaTextField, HawaLogoButton } from "../../elements";
 import { 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";
 import Container from "@mui/material/Container";
+import Typography from "@mui/material/Typography";
 import Button from "@mui/material/Button";
 import Alert from "@mui/material/Alert";
+import AlertTitle from "@mui/material/AlertTitle";
 
 export const SignInForm = (props) => {
   const methods = useForm();
@@ -63,29 +65,26 @@ export const SignInForm = (props) => {
             }}
             helperText={errors.password?.message}
           />
-          <HawaTypography
+          <Typography
             style={{
               cursor: "pointer",
               marginTop: 5,
               width: "max-content",
+              fontSize: 15,
               padding: 5
             }}
             onClick={props.handleForgotPassword}
           >
             {props.texts.forgotPasswordText}
-          </HawaTypography>
+          </Typography>
           <Button type="submit" fullWidth variant="last">
             {props.texts.signInText}
           </Button>
         </form>
       </FormProvider>
-      <HawaTypography
-        style={{
-          marginTop: 5,
-          // width: "max-content",
-          textAlign: "center",
-          padding: 5
-        }}
+      <Typography
+        variant="subtitle2"
+        style={{ marginTop: 5, textAlign: "center", padding: 5 }}
       >
         {props.texts.newUserText}{" "}
         <span
@@ -98,7 +97,7 @@ export const SignInForm = (props) => {
         >
           {props.texts.signUpText}
         </span>
-      </HawaTypography>
+      </Typography>
       <div style={{ display: "flex", flexDirection: "column" }}>
         {props.viaGoogle && (
           <HawaLogoButton

package/src/blocks/AuthForms/SignUpForm.js

@@ -1,5 +1,5 @@
 import React from "react";
-import { HawaTextField, HawaLogoButton } from "../../ui";
+import { HawaTextField, HawaLogoButton } from "../../elements";
 import PropTypes from "prop-types";
 import { FormProvider, useForm } from "react-hook-form";
 import PersonIcon from "@mui/icons-material/PermIdentityOutlined";
@@ -10,6 +10,7 @@ import Container from "@mui/material/Container";
 import Typography from "@mui/material/Typography";
 import Button from "@mui/material/Button";
 import Alert from "@mui/material/Alert";
+import AlertTitle from "@mui/material/AlertTitle";
 
 export const SignUpForm = (props) => {
   const methods = useForm();

package/src/blocks/Payment/ChargeWalletForm.js

@@ -1,7 +1,9 @@
 import React, { useState } from "react";
-import { HawaTextField, ActionButton, HawaTypography } from "../../ui";
-import { Box } from "../../layout";
+import { HawaTextField } from "../../elements";
 import { FormProvider, useForm } from "react-hook-form";
+import Container from "@mui/material/Container";
+import Button from "@mui/material/Button";
+import Typography from "@mui/material/Typography";
 
 export const ChargeWalletForm = (props) => {
   const [walletAmount, setWalletAmount] = useState(0);
@@ -12,42 +14,43 @@ export const ChargeWalletForm = (props) => {
   } = methods;
 
   return (
-    <Box maxWidth={400} noColor noMargin noPadding>
-      <Box noMargin>
-        <HawaTypography variant="h2" align="center">
-          {Number(walletAmount).toLocaleString("en")}{" "}
-          <span style={{ fontSize: 20, letterSpacing: 1 }}>
-            {props.currency}
-          </span>
-        </HawaTypography>
-        <FormProvider {...methods}>
-          <form
-            onChange={(e) => {
-              e.preventDefault();
-              setWalletAmount(methods.getValues().amount);
+    <Container maxWidth="xs">
+      <Typography align="center" variant="h1">
+        {Number(walletAmount).toLocaleString("en") || "0"}
+        <Typography>{props.currency || "SAR"}</Typography>
+      </Typography>
+      <FormProvider {...methods}>
+        <form
+          onChange={(e) => {
+            e.preventDefault();
+            setWalletAmount(methods.getValues().amount);
+          }}
+          style={{ marginTop: 10 }}
+          onSubmit={handleSubmit(props.handleChargeWallet)}
+        >
+          <HawaTextField
+            fullWidth
+            name="amount"
+            placeholder="Enter amount"
+            type="number"
+            value={walletAmount}
+            rules={{
+              required: "Password is rquired"
             }}
-            style={{ marginTop: 10 }}
-            onSubmit={handleSubmit(props.handleChargeWallet)}
+            helperText={errors.amount?.message}
+          />
+
+          <Button
+            type="submit"
+            fullWidth
+            variant="last"
+            onClick={props.handleSignIn}
           >
-            <HawaTextField
-              name="amount"
-              placeholder="Enter amount"
-              type="number"
-              value={walletAmount}
-              rules={{
-                required: "Password is rquired"
-              }}
-              helperText={errors.amount?.message}
-            />
-            <ActionButton
-              last
-              fullWidth
-              text={"Charge Wallet"} //move this to props
-              onClick={props.handleSignIn}
-            />
-          </form>
-        </FormProvider>
-      </Box>
-    </Box>
+            {/* {props.texts.signInText} */}
+            {"Charge Wallet"}
+          </Button>
+        </form>
+      </FormProvider>
+    </Container>
   );
 };

package/src/blocks/Payment/CreditCardForm.js

@@ -1,7 +1,8 @@
 import React from "react";
-import { HawaTextField, ActionButton } from "../../ui";
+import { HawaTextField, ActionButton } from "../../elements";
 import { Box } from "../../layout";
 import { FormProvider, useForm } from "react-hook-form";
+import { Button, Container } from "@mui/material";
 
 export const CreditCardForm = (props) => {
   const methods = useForm();
@@ -11,50 +12,54 @@ export const CreditCardForm = (props) => {
   } = methods;
 
   return (
-    <Box maxWidth={400} noColor noMargin noPadding>
-      <Box noMargin>
-        <FormProvider {...methods}>
-          <form onSubmit={handleSubmit(props.handle)}>
-            <HawaTextField
-              name="password"
-              placeholder="Enter password"
-              type="password"
-              inputLabel="Password"
-              // startAdornment={
-              //   <InputAdornment position="start">
-              //     <PasswordIcon />
-              //   </InputAdornment>
-              // }
-              rules={{
-                required: "Password is rquired"
-              }}
-              helperText={errors.password?.message}
-            />
+    <Container maxWidth="xs">
+      <FormProvider {...methods}>
+        <form onSubmit={handleSubmit(props.handle)}>
+          <HawaTextField
+            fullWidth
+            name="password"
+            placeholder="Enter password"
+            type="number"
+            label="Card Number"
+            // startAdornment={
+            //   <InputAdornment position="start">
+            //     <PasswordIcon />
+            //   </InputAdornment>
+            // }
+            rules={{
+              required: "Password is rquired"
+            }}
+            helperText={errors.password?.message}
+          />
 
-            <HawaTextField
-              name="password"
-              placeholder="Enter password"
-              type="password"
-              inputLabel="Password"
-              // startAdornment={
-              //   <InputAdornment position="start">
-              //     <PasswordIcon />
-              //   </InputAdornment>
-              // }
-              rules={{
-                required: "Password is rquired"
-              }}
-              helperText={errors.password?.message}
-            />
-            <ActionButton
-              last
-              fullWidth
-              text={"Sign In"}
-              onClick={props.handleSignIn}
-            />
-          </form>
-        </FormProvider>
-      </Box>
-    </Box>
+          <HawaTextField
+            fullWidth
+            name="password"
+            placeholder="Enter password"
+            type="password"
+            label="Name On Card"
+            // startAdornment={
+            //   <InputAdornment position="start">
+            //     <PasswordIcon />
+            //   </InputAdornment>
+            // }
+            rules={{
+              required: "Password is rquired"
+            }}
+            helperText={errors.password?.message}
+          />
+
+          <Button
+            type="submit"
+            fullWidth
+            variant="last"
+            onClick={props.handlePayWithCreditCard}
+          >
+            {/* {props.texts.signInText} */}
+            {"Pay with Credit Card"}
+          </Button>
+        </form>
+      </FormProvider>
+    </Container>
   );
 };

package/src/blocks/Payment/PayWithWallet.js

@@ -1,14 +1,24 @@
 import React from "react";
-import { ActionButton } from "../../ui";
+import { ActionButton } from "../../elements";
 import { Box } from "../../layout";
+import { Button, Container, Typography } from "@mui/material";
 
 export const PayWithWallet = (props) => {
   return (
-    <Box maxWidth={400} noColor noMargin noPadding>
-      <Box noMargin>
-        <div>Wallet Balance</div>
-        <ActionButton text="Pay now" />
-      </Box>
-    </Box>
+    <Container maxWidth="xs">
+      <Typography align="center">Wallet Balance</Typography>
+      <Typography align="center" variant="h1">
+        {props.walletBalance || "0"}
+        <Typography>{props.currency || "SAR"}</Typography>
+      </Typography>
+      <Button
+        type="submit"
+        fullWidth
+        variant="last"
+        onClick={props.handlePayWithWallet}
+      >
+        {"Pay Now"}
+      </Button>
+    </Container>
   );
 };