@sikka/hawa 0.0.12 → 0.0.13

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 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/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");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,6 +1,6 @@
 {
   "name": "@sikka/hawa",
-  "version": "0.0.12",
+  "version": "0.0.13",
   "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

@@ -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,5 +1,5 @@
 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";
@@ -84,12 +84,7 @@ export const SignInForm = (props) => {
       </FormProvider>
       <Typography
         variant="subtitle2"
-        style={{
-          // fontSize: 15,
-          marginTop: 5,
-          textAlign: "center",
-          padding: 5
-        }}
+        style={{ marginTop: 5, textAlign: "center", padding: 5 }}
       >
         {props.texts.newUserText}{" "}
         <span

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";

package/src/blocks/Payment/ChargeWalletForm.js

@@ -1,5 +1,5 @@
 import React, { useState } 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";

package/src/blocks/Payment/CreditCardForm.js

@@ -1,5 +1,5 @@
 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";

package/src/blocks/Payment/PayWithWallet.js

@@ -1,5 +1,5 @@
 import React from "react";
-import { ActionButton } from "../../ui";
+import { ActionButton } from "../../elements";
 import { Box } from "../../layout";
 import { Button, Container, Typography } from "@mui/material";
 

package/src/blocks/Payment/SelectPayment.js

@@ -1,6 +1,6 @@
 import React from "react";
 import PropTypes from "prop-types";
-import { HawaTextField, HawaTypography, HawaLogoButton } from "../../ui";
+import { HawaTextField, HawaTypography, HawaLogoButton } from "../../elements";
 import { Container } from "@mui/material";
 
 export const SelectPayment = (props) => {

package/src/blocks/Pricing/SignInForm.js

@@ -0,0 +1,126 @@
+import React from "react";
+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();
+  const {
+    formState: { errors },
+    handleSubmit
+  } = methods;
+
+  return (
+    <Container maxWidth="xs" variant="auth">
+      {props.error && (
+        <Alert severity="error">
+          {props.errorTitle && <AlertTitle>{props.errorTitle}</AlertTitle>}
+          {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
+              }
+            }}
+            helperText={errors.email?.message}
+          />
+
+          <HawaTextField
+            fullWidth
+            name="password"
+            placeholder={props.texts.passwordPlaceholder}
+            type="password"
+            label={props.texts.passwordLabel}
+            startAdornment={
+              <InputAdornment position="start">
+                <PasswordIcon />
+              </InputAdornment>
+            }
+            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>
+      <Typography
+        variant="subtitle2"
+        style={{ marginTop: 5, textAlign: "center", padding: 5 }}
+      >
+        {props.texts.newUserText}{" "}
+        <span
+          onClick={props.handleRouteToSignUp}
+          style={{
+            cursor: "pointer",
+            color: "blue",
+            textAlign: "center"
+          }}
+        >
+          {props.texts.signUpText}
+        </span>
+      </Typography>
+      <div style={{ display: "flex", flexDirection: "column" }}>
+        {props.viaGoogle && (
+          <HawaLogoButton
+            logo="google"
+            buttonText={props.texts.googleButtonLabel}
+            onClick={props.handleGoogleSignIn}
+          />
+        )}
+        {props.viaGithub && (
+          <HawaLogoButton
+            logo="github"
+            buttonText={props.texts.githubButtonLabel}
+            onClick={props.handleGithubSignIn}
+          />
+        )}
+        {props.viaTwitter && (
+          <HawaLogoButton
+            logo="twitter"
+            buttonText={props.texts.twitterButtonLabel}
+            onClick={props.handleTwitterSignIn}
+          />
+        )}
+      </div>
+    </Container>
+  );
+};

package/src/elements/AdaptiveButton.js

@@ -0,0 +1,32 @@
+import React, { useState } from "react";
+import Button from "@mui/material/Button";
+import Tooltip from "@mui/material/Tooltip";
+import PropTypes from "prop-types";
+import { StyledTooltip } from "./StyledTooltip";
+import { getTextColor } from "../util";
+
+export const AdaptiveButton = (props) => {
+  if (props.showText) {
+    return (
+      <Button variant="adaptive-dark" onClick={props.onClick}>
+        {props.icon}
+        <div style={{ width: 10 }} />
+        {props.buttonText}
+      </Button>
+    );
+  } else {
+    //icon only
+    return (
+      <Tooltip title={props.buttonText} placement="top">
+        <Button variant="adaptive-dark" onClick={props.onClick}>
+          {props.icon}
+        </Button>
+      </Tooltip>
+    );
+  }
+};
+
+AdaptiveButton.propTypes = {
+  buttonText: PropTypes.string,
+  showText: PropTypes.bool
+};

package/src/elements/HawaCard.js

@@ -0,0 +1,77 @@
+import React from "react";
+import Container from "@mui/material/Container";
+import { Button, Typography } from "@mui/material";
+import CheckIcon from "@mui/icons-material/CheckCircleOutlined";
+export const HawaCard = (props) => {
+  return (
+    <Container maxWidth="xs" variant="price-card">
+      <Container variant="price-header">
+        <Typography variant="h3" fontWeight={500}>
+          {props.title}
+        </Typography>
+        <Typography variant="caption">{props.subtitle}</Typography>
+        <br />
+        <Typography variant="h5" fontWeight={500}>
+          {props.price} {props.currency} /{" "}
+          <span style={{ fontSize: 14 }}>{props.cycleText}</span>
+        </Typography>
+        {/* <div style={{ width: 5 }} /> */}
+        {/* <Typography variant="caption">{props.currency}</Typography> */}
+      </Container>
+      {/* <div style={{ marginBottom: 20, width: "100%" }}>
+        <div
+          style={{
+            display: "flex",
+            flexDirection: "row",
+            alignItems: "center",
+            // justifyContent: "center",
+            // backgroundColor: "red",
+
+            width: "100%"
+          }}
+        >
+          <Typography variant="h2" fontWeight={500}>
+            {props.price}
+          </Typography>
+          <div style={{ width: 5 }} />
+          <Typography variant="caption">{props.currency}</Typography>
+        </div>
+        <Typography>{props.cycleText}</Typography>
+      </div> */}
+      <div style={{ padding: 20 }}>
+        {props.features?.map((feature) => {
+          return (
+            <div
+              style={{
+                display: "flex",
+                flexDirection: "row",
+                alignItems: "center",
+                justifyContent: "flex-start",
+                marginTop: 10,
+                width: "100%"
+              }}
+            >
+              <div
+                style={{
+                  display: "flex",
+                  flexDirection: "row",
+                  // alignItems: "flex-end",
+                  justifyContent: "flex-end",
+                  // backgroundColor: "red",
+                  width: "10%"
+                }}
+              >
+                <CheckIcon fontSize="small" />
+              </div>
+              <div style={{ width: 10 }} />
+              <Typography variant="subtitle2">{feature}</Typography>
+            </div>
+          );
+        })}
+      </div>
+      <Button variant="contained" style={{ margin: 20 }}>
+        Select Plan
+      </Button>
+    </Container>
+  );
+};

package/src/{ui → elements}/HawaRadio.js

@@ -5,7 +5,9 @@ import Container from "@mui/material/Container";
 export const HawaRadio = (props) => {
   const [value, setValue] = useState(props.defaultValue);
   return (
-    <Container variant="selection">
+    <Container
+      variant={props.location === "inSettings" ? "inSettings" : "panelTabs"}
+    >
       {props.options.map((singleOption, i) => {
         return (
           <Button

package/src/elements/HawaSettingsRow.js

@@ -0,0 +1,27 @@
+import React from "react";
+
+import PropTypes from "prop-types";
+import Checkbox from "@mui/material/Checkbox";
+import { HawaTypography } from "./HawaTypography";
+import Container from "@mui/material/Container";
+import { HawaTextField } from "./HawaTextField";
+import { HawaRadio } from "./HawaRadio";
+import { HawaSwitch } from "./HawaSwitch";
+export const HawaSettingsRow = (props) => {
+  return (
+    <Container variant="settingsRow">
+      <HawaTypography>{props.settingsLabel}</HawaTypography>
+      {props.settingsType === "checkbox" && <Checkbox {...props} />}
+      {props.settingsType === "text" && <HawaTextField {...props} />}
+      {props.settingsType === "radio" && (
+        <HawaRadio location="inSettings" {...props} />
+      )}
+      {props.settingsType === "boolean" && <HawaSwitch {...props} />}
+    </Container>
+  );
+};
+
+HawaSettingsRow.propTypes = {
+  type: PropTypes.oneOf(["text", "number", "password"]),
+  helperText: PropTypes.string
+};

package/src/elements/HawaSwitch.js

@@ -0,0 +1,6 @@
+import React from "react";
+import { Switch } from "@mui/material";
+
+export const HawaSwitch = (props) => {
+  return <Switch {...props} />;
+};