@sikka/hawa 0.0.16 → 0.0.19
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +0 -8
- package/es/index.es.js +1 -1
- package/lib/index.js +1 -1
- package/package.json +1 -1
- package/src/blocks/Account/UserProfileForm.js +1 -1
- package/src/blocks/Account/UserSettingsForm.js +7 -2
- package/src/blocks/AuthForms/SignUpForm.js +1 -1
- package/src/blocks/Payment/CheckoutForm.js +98 -0
- package/src/blocks/Payment/CreditCardForm.js +2 -1
- package/src/blocks/Payment/index.js +1 -0
- package/src/elements/HawaAlert.js +1 -24
- package/src/elements/HawaTable.js +60 -0
- package/src/elements/HawaTypography.js +0 -19
- package/src/elements/OfflineBanner.js +20 -0
- package/src/elements/index.js +2 -0
- package/src/layout/HawaDialog.js +45 -0
- package/src/layout/index.js +1 -0
- package/storybook-static/{6.704d1e8d.iframe.bundle.js → 6.13a534cb.iframe.bundle.js} +1 -1
- package/storybook-static/iframe.html +1 -1
- package/storybook-static/main.894e2873.iframe.bundle.js +1 -0
- package/storybook-static/{runtime~main.f1ebae9b.iframe.bundle.js → runtime~main.708d7ac1.iframe.bundle.js} +1 -1
- package/storybook-static/vendors~main.ae39b38c.iframe.bundle.js +76 -0
- package/storybook-static/{vendors~main.b4186832.iframe.bundle.js.LICENSE.txt → vendors~main.ae39b38c.iframe.bundle.js.LICENSE.txt} +0 -0
- package/storybook-static/vendors~main.ae39b38c.iframe.bundle.js.map +1 -0
- package/src/stories/BlocksStories/Account/UserProfile.stories.js +0 -45
- package/src/stories/BlocksStories/Account/UserSettings.stories.js +0 -55
- package/src/stories/BlocksStories/Auth/NewPassword.stories.js +0 -61
- package/src/stories/BlocksStories/Auth/ResetPassword.stories.js +0 -58
- package/src/stories/BlocksStories/Auth/SignIn.stories.js +0 -97
- package/src/stories/BlocksStories/Auth/SignUp.stories.js +0 -98
- package/src/stories/BlocksStories/Payment/ChargeWallet.stories.js +0 -35
- package/src/stories/BlocksStories/Payment/PayWithCreditCard.stories.js +0 -37
- package/src/stories/BlocksStories/Payment/PayWithWallet.stories.js +0 -17
- package/src/stories/BlocksStories/Payment/PaymentSelection.stories.js +0 -60
- package/src/stories/BlocksStories/Pricing/BillingPlans.stories.js +0 -63
- package/src/stories/BlocksStories/Pricing/LandingPlans.stories.js +0 -63
- package/src/stories/ElementsStories/AdaptiveButton.stories.js +0 -51
- package/src/stories/ElementsStories/Alert.stories.js +0 -41
- package/src/stories/ElementsStories/InputLabel.stories.js +0 -13
- package/src/stories/ElementsStories/ItemCard.stories.js +0 -18
- package/src/stories/ElementsStories/LogoButtons.stories.js +0 -73
- package/src/stories/ElementsStories/PricingCard.stories.js +0 -91
- package/src/stories/ElementsStories/RadioSelector.stories.js +0 -36
- package/src/stories/ElementsStories/SettingsRow.stories.js +0 -63
- package/src/stories/ElementsStories/TextField.stories.js +0 -49
- package/src/stories/Introduction.stories.mdx +0 -229
- package/src/stories/LayoutStories/AppBar.stories.js +0 -29
- package/src/stories/LayoutStories/AppLayout.stories.js +0 -52
- package/src/stories/LayoutStories/Box.stories.js +0 -36
- package/storybook-static/main.66955578.iframe.bundle.js +0 -1
- package/storybook-static/vendors~main.b4186832.iframe.bundle.js +0 -76
- package/storybook-static/vendors~main.b4186832.iframe.bundle.js.map +0 -1
package/README.md
CHANGED
|
@@ -71,14 +71,8 @@ lighten a given `color` by a given `percent`
|
|
|
71
71
|
## Components
|
|
72
72
|
|
|
73
73
|
- [ ] Layout
|
|
74
|
-
- [ ] Box
|
|
75
|
-
- [ ] TextField
|
|
76
74
|
- [ ] TextArea
|
|
77
|
-
- [ ] Radio Selector
|
|
78
|
-
- [ ] PasswordField
|
|
79
75
|
- [ ] Autocomplete
|
|
80
|
-
- [ ] Tabs
|
|
81
|
-
- [ ] Alerts
|
|
82
76
|
- [ ] Badges
|
|
83
77
|
|
|
84
78
|
## Install
|
|
@@ -144,6 +138,4 @@ npm publish --access public
|
|
|
144
138
|
|
|
145
139
|
## License
|
|
146
140
|
|
|
147
|
-
<!-- https://github.com/react-component/drawer -->
|
|
148
|
-
|
|
149
141
|
MIT © [SIKKA SOFTWARE](https://sikka.sa)
|
package/es/index.es.js
CHANGED
|
@@ -1 +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 i,Fragment as l}from"react/jsx-runtime";import{Typography as n,Container as o,Button as s}from"@mui/material";import"@mui/icons-material/MoveToInbox";import d from"@mui/material/AppBar";import"@mui/material/Box";import"@mui/material/Toolbar";import"@mui/material/IconButton";import u from"@mui/material/Typography";import"@mui/material/Menu";import"@mui/icons-material/Menu";import m from"@mui/material/Container";import"@mui/material/Avatar";import"@mui/material/MenuItem";import"@mui/material/FormControlLabel";import"@mui/material/Checkbox";import"@mui/icons-material/CheckCircleOutlined";import c from"@mui/material/Input";import p from"@mui/material/InputLabel";import h from"@mui/icons-material/GitHub";import f from"@mui/icons-material/Twitter";import g from"@mui/icons-material/AccountBalanceWallet";import v from"@mui/material/Alert";import x from"@mui/material/AlertTitle";import{useForm as b,FormProvider as y,Controller as w}from"react-hook-form";import T from"@mui/material/InputAdornment";import P from"@mui/icons-material/HttpsOutlined";import S from"@mui/icons-material/MailOutline";import C from"@mui/icons-material/PermIdentityOutlined";import{styled as k}from"@mui/material/styles";import W from"@mui/material/Drawer";import"@mui/material/List";import"@mui/material/Divider";import"@mui/icons-material/ChevronLeft";import"@mui/icons-material/ChevronRight";import"@mui/material/ListItemButton";import"@mui/material/ListItemIcon";import"@mui/material/ListItemText";import"@mui/icons-material/Mail";function A(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);t&&(a=a.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,a)}return r}function L(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?A(Object(r),!0).forEach((function(t){I(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):A(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}function I(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function O(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){var r=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null==r)return;var a,i,l=[],n=!0,o=!1;try{for(r=r.call(e);!(n=(a=r.next()).done)&&(l.push(a.value),!t||l.length!==t);n=!0);}catch(e){o=!0,i=e}finally{try{n||null==r.return||r.return()}finally{if(o)throw i}}return l}(e,t)||function(e,t){if(!e)return;if("string"==typeof e)return q(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 q(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 q(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 z=function(e){return a(u,L(L({},e),{},{children:e.children}))},j=function(e){return i(l,{children:[i("div",{style:{display:"flex",flexDirection:"row",justifyContent:"space-between",alignItems:"center"},children:[a(p,{children:e.label}),e.helperText&&a(n,{variant:"validation",children:e.helperText})]}),a(c,L({disableUnderline:!0},e))]})};r.oneOf(["text","number","password"]),r.string;var R=function(e){var r,l="";switch(null===(r=e.logo)||void 0===r?void 0:r.toLowerCase()){case"google":l=a("img",{src:"https://upload.wikimedia.org/wikipedia/commons/5/53/Google_%22G%22_Logo.svg"});break;case"github":l=a(h,{});break;case"twitter":l=a(f,{});break;case"mada":l=a("img",{src:"https://sikka-images.s3.ap-southeast-1.amazonaws.com/payments/mada.png",height:20});break;case"stcpay":l=a("img",{src:"https://sikka-images.s3.ap-southeast-1.amazonaws.com/payments/stc-pay.png",height:20});break;case"visa/master":l=a("img",{src:"https://sikka-images.s3.ap-southeast-1.amazonaws.com/payments/visa-master.png",height:30});break;case"paypal":l=a("img",{src:"https://sikka-images.s3.ap-southeast-1.amazonaws.com/payments/paypal.png",height:25});break;case"googlepay":l=a("img",{src:"https://sikka-images.s3.ap-southeast-1.amazonaws.com/payments/google-pay.png",height:20});break;case"applepay":l=a("img",{src:"https://sikka-images.s3.ap-southeast-1.amazonaws.com/payments/apple-pay.png",height:40});break;case"wallet":l=a(g,{})}return i(t,L(L({},e),{},{variant:"withLogo",children:[l,a("div",{style:{width:10}}),a(n,{style:{color:"black",fontSize:14,textAlign:"center",letterSpacing:.4,fontFamily:"Roboto",fontWeight:500},children:e.buttonText})]}))},N=function(e){return i(v,L(L({},e),{},{children:[e.title&&a(x,{children:e.title}),e.text]}))},B=function(e){var r=b(),l=r.formState.errors,n=r.handleSubmit,o=r.control;return a(m,{maxWidth:"sm",children:a(y,L(L({},r),{},{children:i("form",{onSubmit:n(e.handleUpdateProfile),children:[a(w,{control:o,name:"fullName",render:function(t){var r,i,n=t.field;return a(j,L({fullWidth:!0,type:"text",value:null!==(r=n.value)&&void 0!==r?r:"",label:e.texts.fullNameLabel,placeholder:e.texts.fullNamePlaceholder,helperText:null===(i=l.fullName)||void 0===i?void 0:i.message},n))}}),a(w,{control:o,name:"phoneNumber",render:function(e){var t=e.field;return a(j,L({fullWidth:!0,type:"number",label:"Phone Number",placeholder:"+966"},t))}}),a(w,{control:o,name:"email",render:function(t){var r,i,n=t.field;return a(j,L({fullWidth:!0,type:"text",value:null!==(r=n.value)&&void 0!==r?r:"",label:e.texts.emailLabel,helperText:null===(i=l.email)||void 0===i?void 0:i.message,placeholder:e.texts.emailPlaceholder},n))},rules:{required:e.texts.emailRequiredText,pattern:{value:/^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/,message:e.texts.emailInvalidText}}}),a(w,{control:o,name:"password",render:function(t){var r,i,n=t.field;return a(j,L({fullWidth:!0,type:"password",value:null!==(r=n.value)&&void 0!==r?r:"",label:e.texts.passwordLabel,placeholder:e.texts.passwordPlaceholder,helperText:null===(i=l.password)||void 0===i?void 0:i.message},n))},rules:{required:e.texts.passwordRequiredText}}),a(w,{control:o,name:"confirmPassword",render:function(t){var r,i,n=t.field;return a(j,L({fullWidth:!0,type:"password",value:null!==(r=n.value)&&void 0!==r?r:"",label:e.texts.confirmPasswordLabel,placeholder:e.texts.confirmPasswordPlaceholder,helperText:null===(i=l.confirmPassword)||void 0===i?void 0:i.message},n))},rules:{required:e.texts.confirmPasswordRequiredText}}),a(t,{type:"submit",fullWidth:!0,variant:"last",children:"update profile"})," "]})}))})},M=function(e){return i(o,{maxWidth:"sm",children:[e.children,a(s,{type:"submit",fullWidth:!0,variant:"last",children:"Save Settings"})]})},G=function(r){var l=O(e(""),2);l[0],l[1];var n=O(e(""),2);n[0],n[1];var o=O(e(!1),2),s=o[0],d=o[1],u=b(),c=u.formState.errors,p=u.handleSubmit,h=u.control;return i(m,{maxWidth:"xs",variant:"auth",children:[s&&a(N,{text:r.texts.passwordMatchError,severity:"error"}),r.passwordChanged?a(z,{style:{textAlign:"center",margin:5},children:"Your password has been changed, you'll be redirected to sign in page"}):a(y,L(L({},u),{},{children:i("form",{onSubmit:p((function(e){console.log("handling subb",e),e.password===e.confirmPassword?r.handleNewPassword():d(!0)})),children:[a(w,{control:h,name:"password",render:function(e){var t,i,l=e.field;return a(j,L({fullWidth:!0,type:"password",value:null!==(t=l.value)&&void 0!==t?t:"",label:r.texts.passwordLabel,placeholder:r.texts.passwordPlaceholder,helperText:null===(i=c.password)||void 0===i?void 0:i.message,startAdornment:a(T,{position:"start",children:a(P,{})})},l))},rules:{required:r.texts.passwordRequiredText}}),a(w,{control:h,name:"confirmPassword",render:function(e){var t,i,l=e.field;return a(j,L({fullWidth:!0,type:"password",value:null!==(t=l.value)&&void 0!==t?t:"",label:r.texts.confirmPasswordLabel,placeholder:r.texts.confirmPasswordPlaceholder,helperText:null===(i=c.confirmPassword)||void 0===i?void 0:i.message,startAdornment:a(T,{position:"start",children:a(P,{})})},l))},rules:{required:r.texts.confirmPasswordRequiredText}}),a(t,{type:"submit",fullWidth:!0,variant:"last",children:r.texts.updatePassword})]})}))]})},D=function(e){var r,l=b(),n=l.formState.errors,o=l.handleSubmit;l.register;var s=l.control;return i(m,{maxWidth:"xs",variant:"auth",children:[e.error&&i(Alert,{severity:"error",children:[e.errorTitle&&a(AlertTitle,{children:e.errorTitle}),e.errorText]}),e.sent?a(z,{style:{textAlign:"center",margin:5},children:"An link was sent to your email to reset the password."}):i("form",{onSubmit:o(e.handleResetPassword),children:[console.log("eror ",null===(r=n.email)||void 0===r?void 0:r.message),a(w,{control:s,name:"email",render:function(t){var r,i,l=t.field;return a(j,L({fullWidth:!0,type:"text",value:null!==(r=l.value)&&void 0!==r?r:"",label:e.texts.emailLabel,helperText:null===(i=n.email)||void 0===i?void 0:i.message,placeholder:e.texts.emailPlaceholder,startAdornment:a(T,{position:"start",children:a(S,{})})},l))},rules:{required:e.texts.emailRequiredText,pattern:{value:/^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/,message:e.texts.emailInvalidText}}}),a(t,{type:"submit",fullWidth:!0,variant:"last",children:e.texts.resetPassword})]})]})},U=function(e){var r=b(),l=r.formState.errors,n=r.handleSubmit,o=r.control;return i(m,{maxWidth:"xs",variant:"auth",style:{direction:"ar"===e.lang?"rtl":"ltr"},children:[e.error&&i(v,{severity:"error",children:[e.errorTitle&&a(x,{children:e.errorTitle}),e.errorText]}),a(y,L(L({},r),{},{children:i("form",{onSubmit:n(e.handleSignUp),children:[a(w,{control:o,name:"fullName",render:function(t){var r,i,n=t.field;return a(j,{fullWidth:!0,type:"text",value:null!==(r=n.value)&&void 0!==r?r:"",label:e.texts.fullNameLabel,placeholder:e.texts.fullNamePlaceholder,helperText:null===(i=l.fullName)||void 0===i?void 0:i.message,startAdornment:a(T,{position:"start",children:a(C,{})})})},rules:{required:e.texts.fullNameRequiredText}}),a(w,{control:o,name:"email",render:function(t){var r,i,n=t.field;return a(j,{fullWidth:!0,type:"text",value:null!==(r=n.value)&&void 0!==r?r:"",label:e.texts.emailLabel,helperText:null===(i=l.email)||void 0===i?void 0:i.message,placeholder:e.texts.emailPlaceholder,startAdornment:a(T,{position:"start",children:a(S,{})})})},rules:{required:e.texts.emailRequiredText,pattern:{value:/^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/,message:e.texts.emailInvalidText}}}),a(w,{control:o,name:"password",render:function(t){var r,i,n,o=t.field;return a(j,L({fullWidth:!0,type:"password",defaultValue:null!==(r=o.value)&&void 0!==r?r:"",value:null!==(i=o.value)&&void 0!==i?i:"",label:e.texts.passwordLabel,placeholder:e.texts.passwordPlaceholder,helperText:null===(n=l.password)||void 0===n?void 0:n.message,startAdornment:a(T,{position:"start",children:a(P,{})})},o))},rules:{required:e.texts.passwordRequiredText}}),a(t,{fullWidth:!0,variant:"last",type:"submit",children:e.texts.signUpText})]})})),i(u,{variant:"subtitle2",style:{marginTop:5,textAlign:"center",padding:5},children:["Existing user?"," ",a("span",{onClick:e.handleRouteToSignIn,style:{cursor:"pointer",color:"blue",textAlign:"center"},children:e.texts.signInText})]}),i("div",{style:{display:"flex",flexDirection:"column"},children:[e.viaGoogle&&a(R,{logo:"google",buttonText:e.texts.googleButtonLabel,onClick:e.handleGoogleSignUp}),e.viaGithub&&a(R,{logo:"github",buttonText:e.texts.githubButtonLabel,onClick:e.handleGithubSignUp}),e.viaTwitter&&a(R,{logo:"twitter",buttonText:e.texts.twitterButtonLabel,onClick:e.handleTwitterSignUp})]})]})};U.propTypes={theme:r.oneOf(["secondary","primary"])};var E=function(e){var r=b(),l=r.formState.errors,n=r.handleSubmit;r.register;var o=r.control;return i(m,{maxWidth:"xs",variant:"auth",style:{direction:"ar"===e.lang?"rtl":"ltr"},children:[e.error&&i(v,{severity:"error",children:[e.errorTitle&&a(x,{children:e.errorTitle}),e.errorText]}),i("form",{onSubmit:n(e.handleSignIn),children:[a(w,{control:o,name:"email",render:function(t){var r,i,n=t.field;return a(j,L({fullWidth:!0,type:"text",value:null!==(r=n.value)&&void 0!==r?r:"",label:e.texts.emailLabel,helperText:null===(i=l.email)||void 0===i?void 0:i.message,placeholder:e.texts.emailPlaceholder,startAdornment:a(T,{position:"start",children:a(S,{})})},n))},rules:{required:e.texts.emailRequiredText,pattern:{value:/^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/,message:e.texts.emailInvalidText}}}),a(w,{control:o,name:"password",render:function(t){var r,i,n,o=t.field;return a(j,L({fullWidth:!0,type:"password",defaultValue:null!==(r=o.value)&&void 0!==r?r:"",value:null!==(i=o.value)&&void 0!==i?i:"",label:e.texts.passwordLabel,placeholder:e.texts.passwordPlaceholder,helperText:null===(n=l.password)||void 0===n?void 0:n.message,startAdornment:a(T,{position:"start",children:a(P,{})})},o))},rules:{required:e.texts.passwordRequiredText}}),a(u,{style:{cursor:"pointer",marginTop:5,width:"max-content",fontSize:15,padding:5},onClick:e.handleForgotPassword,children:e.texts.forgotPasswordText}),a(t,{type:"submit",fullWidth:!0,variant:"last",children:e.texts.signInText})]}),i(u,{variant:"subtitle2",style:{marginTop:5,textAlign:"center",padding:5},children:[e.texts.newUserText," ",a("span",{onClick:e.handleRouteToSignUp,style:{cursor:"pointer",color:"blue",textAlign:"center"},children:e.texts.signUpText})]}),i("div",{style:{display:"flex",flexDirection:"column"},children:[e.viaGoogle&&a(R,{logo:"google",buttonText:e.texts.googleButtonLabel,onClick:e.handleGoogleSignIn}),e.viaGithub&&a(R,{logo:"github",buttonText:e.texts.githubButtonLabel,onClick:e.handleGithubSignIn}),e.viaTwitter&&a(R,{logo:"twitter",buttonText:e.texts.twitterButtonLabel,onClick:e.handleTwitterSignIn})]})]})},Z=function(e){return i(o,{maxWidth:"xs",children:[a(z,{align:"center",children:"Choose Payment Method"}),e.viaWallet&&a(R,{logo:"wallet",buttonText:e.walletLabel,onClick:e.handleWallet}),e.viaCreditCard&&a(R,{logo:"visa/master",buttonText:e.visaMasterLabel,onClick:e.handleCreditCard}),e.viaMada&&a(R,{logo:"mada",buttonText:e.madaLabel,onClick:e.handleMada}),e.viaSTCPay&&a(R,{logo:"stcpay",buttonText:e.stcPayLabel,onClick:e.handleSTCPay}),e.viaPayPal&&a(R,{logo:"paypal",buttonText:e.paypalLabel,onClick:e.handlePayPal}),e.viaGooglePay&&a(R,{logo:"googlepay",buttonText:e.googlePayLabel,onClick:e.handleGooglePay}),e.viaApplePay&&a(R,{logo:"applepay",buttonText:e.applePayLabel,onClick: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){return{width:240,transition:e.transitions.create("width",{easing:e.transitions.easing.sharp,duration:e.transitions.duration.enteringScreen}),overflowX:"hidden"}},$=function(e){return I({transition:e.transitions.create("width",{easing:e.transitions.easing.sharp,duration:e.transitions.duration.leavingScreen}),overflowX:"hidden",width:"calc(".concat(e.spacing(7)," + 1px)")},e.breakpoints.up("sm"),{width:"calc(".concat(e.spacing(8)," + 1px)")})};k("div")((function(e){var t=e.theme;return L({display:"flex",alignItems:"center",justifyContent:"flex-end",padding:t.spacing(0,1)},t.mixins.toolbar)})),k(d,{shouldForwardProp:function(e){return"open"!==e}})((function(e){var t=e.theme,r=e.open;return L({zIndex:t.zIndex.drawer+1,transition:t.transitions.create(["width","margin"],{easing:t.transitions.easing.sharp,duration:t.transitions.duration.leavingScreen})},r&&{marginLeft:240,width:"calc(100% - ".concat(240,"px)"),transition:t.transitions.create(["width","margin"],{easing:t.transitions.easing.sharp,duration:t.transitions.duration.enteringScreen})})})),k(W,{shouldForwardProp:function(e){return"open"!==e}})((function(e){var t=e.theme,r=e.open;return L(L({width:240,flexShrink:0,whiteSpace:"nowrap",boxSizing:"border-box"},r&&L(L({},F(t)),{},{"& .MuiDrawer-paper":F(t)})),!r&&L(L({},$(t)),{},{"& .MuiDrawer-paper":$(t)}))}));var H=function(e){var t,r,l=b(),n=l.formState.errors,d=l.handleSubmit;return a(o,{maxWidth:"xs",children:a(y,L(L({},l),{},{children:i("form",{onSubmit:d(e.handle),children:[a(j,{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(j,{fullWidth:!0,name:"password",placeholder:"Enter password",type:"password",label:"Name On Card",rules:{required:"Password is rquired"},helperText:null===(r=n.password)||void 0===r?void 0:r.message}),a(s,{type:"submit",fullWidth:!0,variant:"last",onClick:e.handlePayWithCreditCard,children:"Pay with Credit Card"})]})}))})},V=function(r){var l=O(e(0),2),n=l[0],o=l[1],s=b();s.formState.errors;var d=s.handleSubmit,c=s.control;return i(m,{maxWidth:"xs",children:[i(u,{align:"center",variant:"h2",fontWeight:500,children:[Number(n).toLocaleString("en")||"0",a(u,{children:r.currency||"SAR"})]}),a(y,L(L({},s),{},{children:i("form",{onSubmit:d(r.handleChargeWallet),children:[a(w,{control:c,name:"amount",render:function(e){var t,r=e.field;return a(j,L(L({fullWidth:!0,placeholder:"Enter amount",type:"number",value:null!==(t=r.value)&&void 0!==t?t:""},r),{},{inputProps:{inputMode:"numeric",min:"0",max:"9999999",step:"0.01"},onChange:function(e){r.onChange(parseFloat(e.target.value)),console.log("e",e.target.value),o(e.target.value)}}))}}),a(t,{type:"submit",fullWidth:!0,variant:"last",onClick:r.handleSignIn,children:"Charge Wallet"})]})}))]})},X=function(e){return i(o,{maxWidth:"xs",children:[a(n,{align:"center",children:"Wallet Balance"}),i(n,{align:"center",variant:"h1",children:[e.walletBalance||"0",a(n,{children:e.currency||"SAR"})]}),a(s,{type:"submit",fullWidth:!0,variant:"last",onClick:e.handlePayWithWallet,children:"Pay Now"})]})};export{V as ChargeWalletForm,H as CreditCardForm,G as NewPasswordForm,X as PayWithWallet,D as ResetPasswordForm,Z as SelectPayment,E as SignInForm,U as SignUpForm,B as UserProfileForm,M as UserSettingsForm};
|
|
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 i,Fragment as l}from"react/jsx-runtime";import{Typography as n,Container as o,Button as s}from"@mui/material";import"@mui/icons-material/MoveToInbox";import d from"@mui/material/AppBar";import"@mui/material/Box";import"@mui/material/Toolbar";import"@mui/material/IconButton";import u from"@mui/material/Typography";import"@mui/material/Menu";import"@mui/icons-material/Menu";import m from"@mui/material/Container";import"@mui/material/Avatar";import"@mui/material/MenuItem";import"@mui/material/FormControlLabel";import"@mui/material/Checkbox";import"@mui/icons-material/CheckCircleOutlined";import c from"@mui/material/Input";import p from"@mui/material/InputLabel";import h from"@mui/icons-material/GitHub";import f from"@mui/icons-material/Twitter";import g from"@mui/icons-material/AccountBalanceWallet";import v from"@mui/material/Alert";import b from"@mui/material/AlertTitle";import x from"@mui/material/Table";import y from"@mui/material/TableBody";import w from"@mui/material/TableCell";import T from"@mui/material/TableContainer";import P from"@mui/material/TableHead";import S from"@mui/material/TableRow";import"@mui/material/Snackbar";import{useForm as C,FormProvider as W,Controller as k}from"react-hook-form";import A from"@mui/material/InputAdornment";import L from"@mui/icons-material/HttpsOutlined";import q from"@mui/icons-material/MailOutline";import I from"@mui/icons-material/PermIdentityOutlined";import{styled as O}from"@mui/material/styles";import R from"@mui/material/Drawer";import"@mui/material/List";import"@mui/material/Divider";import"@mui/icons-material/ChevronLeft";import"@mui/icons-material/ChevronRight";import"@mui/material/ListItemButton";import"@mui/material/ListItemIcon";import"@mui/material/ListItemText";import"@mui/icons-material/Mail";import"@mui/icons-material/Close";function z(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 j(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?z(Object(r),!0).forEach((function(t){B(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):z(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}function B(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function N(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){var r=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null==r)return;var a,i,l=[],n=!0,o=!1;try{for(r=r.call(e);!(n=(a=r.next()).done)&&(l.push(a.value),!t||l.length!==t);n=!0);}catch(e){o=!0,i=e}finally{try{n||null==r.return||r.return()}finally{if(o)throw i}}return l}(e,t)||function(e,t){if(!e)return;if("string"==typeof e)return M(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 M(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 M(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 D=function(e){return a(u,j(j({},e),{},{children:e.children}))},G=function(e){return i(l,{children:[i("div",{style:{display:"flex",flexDirection:"row",justifyContent:"space-between",alignItems:"center"},children:[a(p,{children:e.label}),e.helperText&&a(n,{variant:"validation",children:e.helperText})]}),a(c,j({disableUnderline:!0},e))]})};r.oneOf(["text","number","password"]),r.string;var U=function(e){var r,l="";switch(null===(r=e.logo)||void 0===r?void 0:r.toLowerCase()){case"google":l=a("img",{src:"https://upload.wikimedia.org/wikipedia/commons/5/53/Google_%22G%22_Logo.svg"});break;case"github":l=a(h,{});break;case"twitter":l=a(f,{});break;case"mada":l=a("img",{src:"https://sikka-images.s3.ap-southeast-1.amazonaws.com/payments/mada.png",height:20});break;case"stcpay":l=a("img",{src:"https://sikka-images.s3.ap-southeast-1.amazonaws.com/payments/stc-pay.png",height:20});break;case"visa/master":l=a("img",{src:"https://sikka-images.s3.ap-southeast-1.amazonaws.com/payments/visa-master.png",height:30});break;case"paypal":l=a("img",{src:"https://sikka-images.s3.ap-southeast-1.amazonaws.com/payments/paypal.png",height:25});break;case"googlepay":l=a("img",{src:"https://sikka-images.s3.ap-southeast-1.amazonaws.com/payments/google-pay.png",height:20});break;case"applepay":l=a("img",{src:"https://sikka-images.s3.ap-southeast-1.amazonaws.com/payments/apple-pay.png",height:40});break;case"wallet":l=a(g,{})}return i(t,j(j({},e),{},{variant:"withLogo",children:[l,a("div",{style:{width:10}}),a(n,{style:{color:"black",fontSize:14,textAlign:"center",letterSpacing:.4,fontFamily:"Roboto",fontWeight:500},children:e.buttonText})]}))},E=function(e){return i(v,{severity:e.severity,children:[e.title&&a(b,{children:e.title}),e.text]})},Z=function(e){return a(T,{children:i(x,{"aria-label":"a dense table",children:[a(P,{children:a(S,{children:e.columns.map((function(e,t){return a(w,{style:{fontWeight:700},variant:0==t||"bordered",children:e})}))})}),a(y,{children:e.rows.map((function(e,t){return a(S,{children:e.map((function(e,t){return a(w,{component:"th",scope:"row",variant:0==t||"bordered",children:e},t)}))},t)}))}),e.end&&a(S,{children:e.end.map((function(e,t){return a(w,{style:{fontWeight:700},component:"th",scope:"row",variant:0==t||"bordered",children:e},t)}))})]})})},F=function(e){var r=C(),l=r.formState.errors,n=r.handleSubmit,o=r.control;return a(m,{maxWidth:"sm",children:a(W,j(j({},r),{},{children:i("form",{onSubmit:n(e.handleUpdateProfile),children:[a(k,{control:o,name:"fullName",render:function(t){var r,i,n=t.field;return a(G,j({fullWidth:!0,type:"text",value:null!==(r=n.value)&&void 0!==r?r:"",label:e.texts.fullNameLabel,placeholder:e.texts.fullNamePlaceholder,helperText:null===(i=l.fullName)||void 0===i?void 0:i.message},n))}}),a(k,{control:o,name:"phoneNumber",render:function(e){var t=e.field;return a(G,j({fullWidth:!0,type:"tel",label:"Phone Number",placeholder:"+966"},t))}}),a(k,{control:o,name:"email",render:function(t){var r,i,n=t.field;return a(G,j({fullWidth:!0,type:"text",value:null!==(r=n.value)&&void 0!==r?r:"",label:e.texts.emailLabel,helperText:null===(i=l.email)||void 0===i?void 0:i.message,placeholder:e.texts.emailPlaceholder},n))},rules:{required:e.texts.emailRequiredText,pattern:{value:/^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/,message:e.texts.emailInvalidText}}}),a(k,{control:o,name:"password",render:function(t){var r,i,n=t.field;return a(G,j({fullWidth:!0,type:"password",value:null!==(r=n.value)&&void 0!==r?r:"",label:e.texts.passwordLabel,placeholder:e.texts.passwordPlaceholder,helperText:null===(i=l.password)||void 0===i?void 0:i.message},n))},rules:{required:e.texts.passwordRequiredText}}),a(k,{control:o,name:"confirmPassword",render:function(t){var r,i,n=t.field;return a(G,j({fullWidth:!0,type:"password",value:null!==(r=n.value)&&void 0!==r?r:"",label:e.texts.confirmPasswordLabel,placeholder:e.texts.confirmPasswordPlaceholder,helperText:null===(i=l.confirmPassword)||void 0===i?void 0:i.message},n))},rules:{required:e.texts.confirmPasswordRequiredText}}),a(t,{type:"submit",fullWidth:!0,variant:"last",children:"update profile"})," "]})}))})},$=function(e){return i(o,{maxWidth:"sm",children:[e.children,a(s,{type:"submit",fullWidth:!0,variant:"last",onClick:e.handleSaveSettings,children:e.saveSettingsText})]})},H=function(r){var l=N(e(""),2);l[0],l[1];var n=N(e(""),2);n[0],n[1];var o=N(e(!1),2),s=o[0],d=o[1],u=C(),c=u.formState.errors,p=u.handleSubmit,h=u.control;return i(m,{maxWidth:"xs",variant:"auth",children:[s&&a(E,{text:r.texts.passwordMatchError,severity:"error"}),r.passwordChanged?a(D,{style:{textAlign:"center",margin:5},children:"Your password has been changed, you'll be redirected to sign in page"}):a(W,j(j({},u),{},{children:i("form",{onSubmit:p((function(e){console.log("handling subb",e),e.password===e.confirmPassword?r.handleNewPassword():d(!0)})),children:[a(k,{control:h,name:"password",render:function(e){var t,i,l=e.field;return a(G,j({fullWidth:!0,type:"password",value:null!==(t=l.value)&&void 0!==t?t:"",label:r.texts.passwordLabel,placeholder:r.texts.passwordPlaceholder,helperText:null===(i=c.password)||void 0===i?void 0:i.message,startAdornment:a(A,{position:"start",children:a(L,{})})},l))},rules:{required:r.texts.passwordRequiredText}}),a(k,{control:h,name:"confirmPassword",render:function(e){var t,i,l=e.field;return a(G,j({fullWidth:!0,type:"password",value:null!==(t=l.value)&&void 0!==t?t:"",label:r.texts.confirmPasswordLabel,placeholder:r.texts.confirmPasswordPlaceholder,helperText:null===(i=c.confirmPassword)||void 0===i?void 0:i.message,startAdornment:a(A,{position:"start",children:a(L,{})})},l))},rules:{required:r.texts.confirmPasswordRequiredText}}),a(t,{type:"submit",fullWidth:!0,variant:"last",children:r.texts.updatePassword})]})}))]})},V=function(e){var r,l=C(),n=l.formState.errors,o=l.handleSubmit;l.register;var s=l.control;return i(m,{maxWidth:"xs",variant:"auth",children:[e.error&&i(Alert,{severity:"error",children:[e.errorTitle&&a(AlertTitle,{children:e.errorTitle}),e.errorText]}),e.sent?a(D,{style:{textAlign:"center",margin:5},children:"An link was sent to your email to reset the password."}):i("form",{onSubmit:o(e.handleResetPassword),children:[console.log("eror ",null===(r=n.email)||void 0===r?void 0:r.message),a(k,{control:s,name:"email",render:function(t){var r,i,l=t.field;return a(G,j({fullWidth:!0,type:"text",value:null!==(r=l.value)&&void 0!==r?r:"",label:e.texts.emailLabel,helperText:null===(i=n.email)||void 0===i?void 0:i.message,placeholder:e.texts.emailPlaceholder,startAdornment:a(A,{position:"start",children:a(q,{})})},l))},rules:{required:e.texts.emailRequiredText,pattern:{value:/^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/,message:e.texts.emailInvalidText}}}),a(t,{type:"submit",fullWidth:!0,variant:"last",children:e.texts.resetPassword})]})]})},X=function(e){var r=C(),l=r.formState.errors,n=r.handleSubmit,o=r.control;return i(m,{maxWidth:"xs",variant:"auth",style:{direction:"ar"===e.lang?"rtl":"ltr"},children:[e.error&&i(v,{severity:"error",children:[e.errorTitle&&a(b,{children:e.errorTitle}),e.errorText]}),a(W,j(j({},r),{},{children:i("form",{onSubmit:n(e.handleSignUp),children:[a(k,{control:o,name:"fullName",render:function(t){var r,i,n=t.field;return a(G,{fullWidth:!0,type:"text",value:null!==(r=n.value)&&void 0!==r?r:"",label:e.texts.fullNameLabel,placeholder:e.texts.fullNamePlaceholder,helperText:null===(i=l.fullName)||void 0===i?void 0:i.message,startAdornment:a(A,{position:"start",children:a(I,{})})})},rules:{required:e.texts.fullNameRequiredText}}),a(k,{control:o,name:"email",render:function(t){var r,i,n=t.field;return a(G,{fullWidth:!0,type:"text",value:null!==(r=n.value)&&void 0!==r?r:"",label:e.texts.emailLabel,helperText:null===(i=l.email)||void 0===i?void 0:i.message,placeholder:e.texts.emailPlaceholder,startAdornment:a(A,{position:"start",children:a(q,{})})})},rules:{required:e.texts.emailRequiredText,pattern:{value:/^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/,message:e.texts.emailInvalidText}}}),a(k,{control:o,name:"password",render:function(t){var r,i,n,o=t.field;return a(G,j({fullWidth:!0,type:"password",defaultValue:null!==(r=o.value)&&void 0!==r?r:"",value:null!==(i=o.value)&&void 0!==i?i:"",label:e.texts.passwordLabel,placeholder:e.texts.passwordPlaceholder,helperText:null===(n=l.password)||void 0===n?void 0:n.message,startAdornment:a(A,{position:"start",children:a(L,{})})},o))},rules:{required:e.texts.passwordRequiredText}}),a(t,{fullWidth:!0,variant:"last",type:"submit",children:e.texts.signUpText})]})})),i(u,{variant:"subtitle2",style:{marginTop:5,textAlign:"center",padding:5},children:[e.texts.existingUserText," ",a("span",{onClick:e.handleRouteToSignIn,style:{cursor:"pointer",color:"blue",textAlign:"center"},children:e.texts.signInText})]}),i("div",{style:{display:"flex",flexDirection:"column"},children:[e.viaGoogle&&a(U,{logo:"google",buttonText:e.texts.googleButtonLabel,onClick:e.handleGoogleSignUp}),e.viaGithub&&a(U,{logo:"github",buttonText:e.texts.githubButtonLabel,onClick:e.handleGithubSignUp}),e.viaTwitter&&a(U,{logo:"twitter",buttonText:e.texts.twitterButtonLabel,onClick:e.handleTwitterSignUp})]})]})};X.propTypes={theme:r.oneOf(["secondary","primary"])};var _=function(e){var r=C(),l=r.formState.errors,n=r.handleSubmit;r.register;var o=r.control;return i(m,{maxWidth:"xs",variant:"auth",style:{direction:"ar"===e.lang?"rtl":"ltr"},children:[e.error&&i(v,{severity:"error",children:[e.errorTitle&&a(b,{children:e.errorTitle}),e.errorText]}),i("form",{onSubmit:n(e.handleSignIn),children:[a(k,{control:o,name:"email",render:function(t){var r,i,n=t.field;return a(G,j({fullWidth:!0,type:"text",value:null!==(r=n.value)&&void 0!==r?r:"",label:e.texts.emailLabel,helperText:null===(i=l.email)||void 0===i?void 0:i.message,placeholder:e.texts.emailPlaceholder,startAdornment:a(A,{position:"start",children:a(q,{})})},n))},rules:{required:e.texts.emailRequiredText,pattern:{value:/^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/,message:e.texts.emailInvalidText}}}),a(k,{control:o,name:"password",render:function(t){var r,i,n,o=t.field;return a(G,j({fullWidth:!0,type:"password",defaultValue:null!==(r=o.value)&&void 0!==r?r:"",value:null!==(i=o.value)&&void 0!==i?i:"",label:e.texts.passwordLabel,placeholder:e.texts.passwordPlaceholder,helperText:null===(n=l.password)||void 0===n?void 0:n.message,startAdornment:a(A,{position:"start",children:a(L,{})})},o))},rules:{required:e.texts.passwordRequiredText}}),a(u,{style:{cursor:"pointer",marginTop:5,width:"max-content",fontSize:15,padding:5},onClick:e.handleForgotPassword,children:e.texts.forgotPasswordText}),a(t,{type:"submit",fullWidth:!0,variant:"last",children:e.texts.signInText})]}),i(u,{variant:"subtitle2",style:{marginTop:5,textAlign:"center",padding:5},children:[e.texts.newUserText," ",a("span",{onClick:e.handleRouteToSignUp,style:{cursor:"pointer",color:"blue",textAlign:"center"},children:e.texts.signUpText})]}),i("div",{style:{display:"flex",flexDirection:"column"},children:[e.viaGoogle&&a(U,{logo:"google",buttonText:e.texts.googleButtonLabel,onClick:e.handleGoogleSignIn}),e.viaGithub&&a(U,{logo:"github",buttonText:e.texts.githubButtonLabel,onClick:e.handleGithubSignIn}),e.viaTwitter&&a(U,{logo:"twitter",buttonText:e.texts.twitterButtonLabel,onClick:e.handleTwitterSignIn})]})]})},Y=function(e){return i(o,{maxWidth:"xs",children:[a(D,{align:"center",children:"Choose Payment Method"}),e.viaWallet&&a(U,{logo:"wallet",buttonText:e.walletLabel,onClick:e.handleWallet}),e.viaCreditCard&&a(U,{logo:"visa/master",buttonText:e.visaMasterLabel,onClick:e.handleCreditCard}),e.viaMada&&a(U,{logo:"mada",buttonText:e.madaLabel,onClick:e.handleMada}),e.viaSTCPay&&a(U,{logo:"stcpay",buttonText:e.stcPayLabel,onClick:e.handleSTCPay}),e.viaPayPal&&a(U,{logo:"paypal",buttonText:e.paypalLabel,onClick:e.handlePayPal}),e.viaGooglePay&&a(U,{logo:"googlepay",buttonText:e.googlePayLabel,onClick:e.handleGooglePay}),e.viaApplePay&&a(U,{logo:"applepay",buttonText:e.applePayLabel,onClick:e.handleApplePay})]})};G.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 J=function(e){return{width:240,transition:e.transitions.create("width",{easing:e.transitions.easing.sharp,duration:e.transitions.duration.enteringScreen}),overflowX:"hidden"}},K=function(e){return B({transition:e.transitions.create("width",{easing:e.transitions.easing.sharp,duration:e.transitions.duration.leavingScreen}),overflowX:"hidden",width:"calc(".concat(e.spacing(7)," + 1px)")},e.breakpoints.up("sm"),{width:"calc(".concat(e.spacing(8)," + 1px)")})};O("div")((function(e){var t=e.theme;return j({display:"flex",alignItems:"center",justifyContent:"flex-end",padding:t.spacing(0,1)},t.mixins.toolbar)})),O(d,{shouldForwardProp:function(e){return"open"!==e}})((function(e){var t=e.theme,r=e.open;return j({zIndex:t.zIndex.drawer+1,transition:t.transitions.create(["width","margin"],{easing:t.transitions.easing.sharp,duration:t.transitions.duration.leavingScreen})},r&&{marginLeft:240,width:"calc(100% - ".concat(240,"px)"),transition:t.transitions.create(["width","margin"],{easing:t.transitions.easing.sharp,duration:t.transitions.duration.enteringScreen})})})),O(R,{shouldForwardProp:function(e){return"open"!==e}})((function(e){var t=e.theme,r=e.open;return j(j({width:240,flexShrink:0,whiteSpace:"nowrap",boxSizing:"border-box"},r&&j(j({},J(t)),{},{"& .MuiDrawer-paper":J(t)})),!r&&j(j({},K(t)),{},{"& .MuiDrawer-paper":K(t)}))}));var Q=function(e){var t,r,l=C(),n=l.formState.errors,d=l.handleSubmit;return a(o,{maxWidth:"xs",children:a(W,j(j({},l),{},{children:i("form",{onSubmit:d(e.handle),children:[a(G,{fullWidth:!0,name:"password",placeholder:"Enter password",type:"tel",label:"Card Number",rules:{required:"Password is rquired"},helperText:null===(t=n.password)||void 0===t?void 0:t.message}),a(G,{fullWidth:!0,name:"password",placeholder:"Enter password",type:"password",label:"Name On Card",rules:{required:"Password is rquired"},helperText:null===(r=n.password)||void 0===r?void 0:r.message}),a(s,{type:"submit",fullWidth:!0,variant:"last",onClick:e.handlePayWithCreditCard,children:"Pay with Credit Card"})]})}))})},ee=function(r){var l=N(e(0),2),n=l[0],o=l[1],s=C();s.formState.errors;var d=s.handleSubmit,c=s.control;return i(m,{maxWidth:"xs",children:[i(u,{align:"center",variant:"h2",fontWeight:500,children:[Number(n).toLocaleString("en")||"0",a(u,{children:r.currency||"SAR"})]}),a(W,j(j({},s),{},{children:i("form",{onSubmit:d(r.handleChargeWallet),children:[a(k,{control:c,name:"amount",render:function(e){var t,r=e.field;return a(G,j(j({fullWidth:!0,placeholder:"Enter amount",type:"number",value:null!==(t=r.value)&&void 0!==t?t:""},r),{},{inputProps:{inputMode:"numeric",min:"0",max:"9999999",step:"0.01"},onChange:function(e){r.onChange(parseFloat(e.target.value)),console.log("e",e.target.value),o(e.target.value)}}))}}),a(t,{type:"submit",fullWidth:!0,variant:"last",onClick:r.handleSignIn,children:"Charge Wallet"})]})}))]})},te=function(e){return i(o,{maxWidth:"xs",children:[a(n,{align:"center",children:"Wallet Balance"}),i(n,{align:"center",variant:"h1",children:[e.walletBalance||"0",a(n,{children:e.currency||"SAR"})]}),a(s,{type:"submit",fullWidth:!0,variant:"last",onClick:e.handlePayWithWallet,children:"Pay Now"})]})},re=function(e){var t,r,l=C(),d=l.formState.errors,u=l.handleSubmit;return i(o,{maxWidth:"xs",children:[a(n,{align:"center",variant:"h4",fontWeight:400,style:{marginBottom:10},children:"Order Details"}),a(Z,{columns:["Product","Price"],rows:[["Logo Design","1,200 SAR"],["Website Design","1,500 SAR"],["Website Development","900 SAR"],["Hosting","200 SAR"],["Social Media Management","700 SAR"]],end:["Total","5,330 SAR"]}),a(n,{align:"center",variant:"h4",fontWeight:400,style:{marginTop:10},children:"Billing Address"}),a(W,j(j({},l),{},{children:i("form",{onSubmit:u(e.handle),children:[a(G,{fullWidth:!0,name:"password",placeholder:"Enter password",type:"tel",label:"Card Number",rules:{required:"Password is rquired"},helperText:null===(t=d.password)||void 0===t?void 0:t.message}),a(G,{fullWidth:!0,name:"password",placeholder:"Enter password",type:"password",label:"Name On Card",rules:{required:"Password is rquired"},helperText:null===(r=d.password)||void 0===r?void 0:r.message}),a(s,{type:"submit",fullWidth:!0,variant:"last",onClick:e.handlePayWithCreditCard,children:"Pay with Credit Card"})]})}))]})};export{ee as ChargeWalletForm,re as CheckoutForm,Q as CreditCardForm,H as NewPasswordForm,te as PayWithWallet,V as ResetPasswordForm,Y as SelectPayment,_ as SignInForm,X as SignUpForm,F as UserProfileForm,$ as UserSettingsForm};
|
package/lib/index.js
CHANGED
|
@@ -1 +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"),l=require("@mui/material");require("@mui/icons-material/MoveToInbox");var i=require("@mui/material/AppBar");require("@mui/material/Box"),require("@mui/material/Toolbar"),require("@mui/material/IconButton");var n=require("@mui/material/Typography");require("@mui/material/Menu"),require("@mui/icons-material/Menu");var o=require("@mui/material/Container");require("@mui/material/Avatar"),require("@mui/material/MenuItem"),require("@mui/material/FormControlLabel"),require("@mui/material/Checkbox"),require("@mui/icons-material/CheckCircleOutlined");var s=require("@mui/material/Input"),u=require("@mui/material/InputLabel"),d=require("@mui/icons-material/GitHub"),c=require("@mui/icons-material/Twitter"),m=require("@mui/icons-material/AccountBalanceWallet"),x=require("@mui/material/Alert"),h=require("@mui/material/AlertTitle"),p=require("react-hook-form"),f=require("@mui/material/InputAdornment"),v=require("@mui/icons-material/HttpsOutlined"),g=require("@mui/icons-material/MailOutline"),b=require("@mui/icons-material/PermIdentityOutlined"),j=require("@mui/material/styles"),y=require("@mui/material/Drawer");function w(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}require("@mui/material/List"),require("@mui/material/Divider"),require("@mui/icons-material/ChevronLeft"),require("@mui/icons-material/ChevronRight"),require("@mui/material/ListItemButton"),require("@mui/material/ListItemIcon"),require("@mui/material/ListItemText"),require("@mui/icons-material/Mail");var T=w(t),P=w(r),C=w(i),q=w(n),S=w(o),k=w(s),W=w(u),A=w(d),L=w(c),I=w(m),O=w(x),F=w(h),z=w(f),R=w(v),B=w(g),N=w(b),M=w(y);function G(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 U(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?G(Object(r),!0).forEach((function(t){D(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):G(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}function D(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function E(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 Z(e,t);var r=Object.prototype.toString.call(e).slice(8,-1);"Object"===r&&e.constructor&&(r=e.constructor.name);if("Map"===r||"Set"===r)return Array.from(e);if("Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r))return Z(e,t)}(e,t)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function Z(e,t){(null==t||t>e.length)&&(t=e.length);for(var r=0,a=new Array(t);r<t;r++)a[r]=e[r];return a}P.default.string,P.default.bool;var $=function(e){return a.jsx(q.default,U(U({},e),{},{children:e.children}))},_=function(e){return a.jsxs(a.Fragment,{children:[a.jsxs("div",{style:{display:"flex",flexDirection:"row",justifyContent:"space-between",alignItems:"center"},children:[a.jsx(W.default,{children:e.label}),e.helperText&&a.jsx(l.Typography,{variant:"validation",children:e.helperText})]}),a.jsx(k.default,U({disableUnderline:!0},e))]})};P.default.oneOf(["text","number","password"]),P.default.string;var H=function(e){var t,r="";switch(null===(t=e.logo)||void 0===t?void 0:t.toLowerCase()){case"google":r=a.jsx("img",{src:"https://upload.wikimedia.org/wikipedia/commons/5/53/Google_%22G%22_Logo.svg"});break;case"github":r=a.jsx(A.default,{});break;case"twitter":r=a.jsx(L.default,{});break;case"mada":r=a.jsx("img",{src:"https://sikka-images.s3.ap-southeast-1.amazonaws.com/payments/mada.png",height:20});break;case"stcpay":r=a.jsx("img",{src:"https://sikka-images.s3.ap-southeast-1.amazonaws.com/payments/stc-pay.png",height:20});break;case"visa/master":r=a.jsx("img",{src:"https://sikka-images.s3.ap-southeast-1.amazonaws.com/payments/visa-master.png",height:30});break;case"paypal":r=a.jsx("img",{src:"https://sikka-images.s3.ap-southeast-1.amazonaws.com/payments/paypal.png",height:25});break;case"googlepay":r=a.jsx("img",{src:"https://sikka-images.s3.ap-southeast-1.amazonaws.com/payments/google-pay.png",height:20});break;case"applepay":r=a.jsx("img",{src:"https://sikka-images.s3.ap-southeast-1.amazonaws.com/payments/apple-pay.png",height:40});break;case"wallet":r=a.jsx(I.default,{})}return a.jsxs(T.default,U(U({},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})]}))},V=function(e){return a.jsxs(O.default,U(U({},e),{},{children:[e.title&&a.jsx(F.default,{children:e.title}),e.text]}))},X=function(e){var t=p.useForm(),r=t.formState.errors,l=t.handleSubmit,i=t.control;return a.jsxs(S.default,{maxWidth:"xs",variant:"auth",style:{direction:"ar"===e.lang?"rtl":"ltr"},children:[e.error&&a.jsxs(O.default,{severity:"error",children:[e.errorTitle&&a.jsx(F.default,{children:e.errorTitle}),e.errorText]}),a.jsx(p.FormProvider,U(U({},t),{},{children:a.jsxs("form",{onSubmit:l(e.handleSignUp),children:[a.jsx(p.Controller,{control:i,name:"fullName",render:function(t){var l,i,n=t.field;return a.jsx(_,{fullWidth:!0,type:"text",value:null!==(l=n.value)&&void 0!==l?l:"",label:e.texts.fullNameLabel,placeholder:e.texts.fullNamePlaceholder,helperText:null===(i=r.fullName)||void 0===i?void 0:i.message,startAdornment:a.jsx(z.default,{position:"start",children:a.jsx(N.default,{})})})},rules:{required:e.texts.fullNameRequiredText}}),a.jsx(p.Controller,{control:i,name:"email",render:function(t){var l,i,n=t.field;return a.jsx(_,{fullWidth:!0,type:"text",value:null!==(l=n.value)&&void 0!==l?l:"",label:e.texts.emailLabel,helperText:null===(i=r.email)||void 0===i?void 0:i.message,placeholder:e.texts.emailPlaceholder,startAdornment:a.jsx(z.default,{position:"start",children:a.jsx(B.default,{})})})},rules:{required:e.texts.emailRequiredText,pattern:{value:/^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/,message:e.texts.emailInvalidText}}}),a.jsx(p.Controller,{control:i,name:"password",render:function(t){var l,i,n,o=t.field;return a.jsx(_,U({fullWidth:!0,type:"password",defaultValue:null!==(l=o.value)&&void 0!==l?l:"",value:null!==(i=o.value)&&void 0!==i?i:"",label:e.texts.passwordLabel,placeholder:e.texts.passwordPlaceholder,helperText:null===(n=r.password)||void 0===n?void 0:n.message,startAdornment:a.jsx(z.default,{position:"start",children:a.jsx(R.default,{})})},o))},rules:{required:e.texts.passwordRequiredText}}),a.jsx(T.default,{fullWidth:!0,variant:"last",type:"submit",children:e.texts.signUpText})]})})),a.jsxs(q.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(H,{logo:"google",buttonText:e.texts.googleButtonLabel,onClick:e.handleGoogleSignUp}),e.viaGithub&&a.jsx(H,{logo:"github",buttonText:e.texts.githubButtonLabel,onClick:e.handleGithubSignUp}),e.viaTwitter&&a.jsx(H,{logo:"twitter",buttonText:e.texts.twitterButtonLabel,onClick:e.handleTwitterSignUp})]})]})};X.propTypes={theme:P.default.oneOf(["secondary","primary"])};_.propTypes={theme:P.default.oneOf(["secondary","primary"]),viaApplePay:P.default.bool,viaGooglePay:P.default.bool,viaSTCPay:P.default.bool,viaCreditCard:P.default.bool,viaPayPal:P.default.bool,handleApplePay:P.default.func};var Y=function(e){return{width:240,transition:e.transitions.create("width",{easing:e.transitions.easing.sharp,duration:e.transitions.duration.enteringScreen}),overflowX:"hidden"}},J=function(e){return D({transition:e.transitions.create("width",{easing:e.transitions.easing.sharp,duration:e.transitions.duration.leavingScreen}),overflowX:"hidden",width:"calc(".concat(e.spacing(7)," + 1px)")},e.breakpoints.up("sm"),{width:"calc(".concat(e.spacing(8)," + 1px)")})};j.styled("div")((function(e){var t=e.theme;return U({display:"flex",alignItems:"center",justifyContent:"flex-end",padding:t.spacing(0,1)},t.mixins.toolbar)})),j.styled(C.default,{shouldForwardProp:function(e){return"open"!==e}})((function(e){var t=e.theme,r=e.open;return U({zIndex:t.zIndex.drawer+1,transition:t.transitions.create(["width","margin"],{easing:t.transitions.easing.sharp,duration:t.transitions.duration.leavingScreen})},r&&{marginLeft:240,width:"calc(100% - ".concat(240,"px)"),transition:t.transitions.create(["width","margin"],{easing:t.transitions.easing.sharp,duration:t.transitions.duration.enteringScreen})})})),j.styled(M.default,{shouldForwardProp:function(e){return"open"!==e}})((function(e){var t=e.theme,r=e.open;return U(U({width:240,flexShrink:0,whiteSpace:"nowrap",boxSizing:"border-box"},r&&U(U({},Y(t)),{},{"& .MuiDrawer-paper":Y(t)})),!r&&U(U({},J(t)),{},{"& .MuiDrawer-paper":J(t)}))}));exports.ChargeWalletForm=function(t){var r=E(e.useState(0),2),l=r[0],i=r[1],n=p.useForm();n.formState.errors;var o=n.handleSubmit,s=n.control;return a.jsxs(S.default,{maxWidth:"xs",children:[a.jsxs(q.default,{align:"center",variant:"h2",fontWeight:500,children:[Number(l).toLocaleString("en")||"0",a.jsx(q.default,{children:t.currency||"SAR"})]}),a.jsx(p.FormProvider,U(U({},n),{},{children:a.jsxs("form",{onSubmit:o(t.handleChargeWallet),children:[a.jsx(p.Controller,{control:s,name:"amount",render:function(e){var t,r=e.field;return a.jsx(_,U(U({fullWidth:!0,placeholder:"Enter amount",type:"number",value:null!==(t=r.value)&&void 0!==t?t:""},r),{},{inputProps:{inputMode:"numeric",min:"0",max:"9999999",step:"0.01"},onChange:function(e){r.onChange(parseFloat(e.target.value)),console.log("e",e.target.value),i(e.target.value)}}))}}),a.jsx(T.default,{type:"submit",fullWidth:!0,variant:"last",onClick:t.handleSignIn,children:"Charge Wallet"})]})}))]})},exports.CreditCardForm=function(e){var t,r,i=p.useForm(),n=i.formState.errors,o=i.handleSubmit;return a.jsx(l.Container,{maxWidth:"xs",children:a.jsx(p.FormProvider,U(U({},i),{},{children:a.jsxs("form",{onSubmit:o(e.handle),children:[a.jsx(_,{fullWidth:!0,name:"password",placeholder:"Enter password",type:"number",label:"Card Number",rules:{required:"Password is rquired"},helperText:null===(t=n.password)||void 0===t?void 0:t.message}),a.jsx(_,{fullWidth:!0,name:"password",placeholder:"Enter password",type:"password",label:"Name On Card",rules:{required:"Password is rquired"},helperText:null===(r=n.password)||void 0===r?void 0:r.message}),a.jsx(l.Button,{type:"submit",fullWidth:!0,variant:"last",onClick:e.handlePayWithCreditCard,children:"Pay with Credit Card"})]})}))})},exports.NewPasswordForm=function(t){var r=E(e.useState(""),2);r[0],r[1];var l=E(e.useState(""),2);l[0],l[1];var i=E(e.useState(!1),2),n=i[0],o=i[1],s=p.useForm(),u=s.formState.errors,d=s.handleSubmit,c=s.control;return a.jsxs(S.default,{maxWidth:"xs",variant:"auth",children:[n&&a.jsx(V,{text:t.texts.passwordMatchError,severity:"error"}),t.passwordChanged?a.jsx($,{style:{textAlign:"center",margin:5},children:"Your password has been changed, you'll be redirected to sign in page"}):a.jsx(p.FormProvider,U(U({},s),{},{children:a.jsxs("form",{onSubmit:d((function(e){console.log("handling subb",e),e.password===e.confirmPassword?t.handleNewPassword():o(!0)})),children:[a.jsx(p.Controller,{control:c,name:"password",render:function(e){var r,l,i=e.field;return a.jsx(_,U({fullWidth:!0,type:"password",value:null!==(r=i.value)&&void 0!==r?r:"",label:t.texts.passwordLabel,placeholder:t.texts.passwordPlaceholder,helperText:null===(l=u.password)||void 0===l?void 0:l.message,startAdornment:a.jsx(z.default,{position:"start",children:a.jsx(R.default,{})})},i))},rules:{required:t.texts.passwordRequiredText}}),a.jsx(p.Controller,{control:c,name:"confirmPassword",render:function(e){var r,l,i=e.field;return a.jsx(_,U({fullWidth:!0,type:"password",value:null!==(r=i.value)&&void 0!==r?r:"",label:t.texts.confirmPasswordLabel,placeholder:t.texts.confirmPasswordPlaceholder,helperText:null===(l=u.confirmPassword)||void 0===l?void 0:l.message,startAdornment:a.jsx(z.default,{position:"start",children:a.jsx(R.default,{})})},i))},rules:{required:t.texts.confirmPasswordRequiredText}}),a.jsx(T.default,{type:"submit",fullWidth:!0,variant:"last",children:t.texts.updatePassword})]})}))]})},exports.PayWithWallet=function(e){return a.jsxs(l.Container,{maxWidth:"xs",children:[a.jsx(l.Typography,{align:"center",children:"Wallet Balance"}),a.jsxs(l.Typography,{align:"center",variant:"h1",children:[e.walletBalance||"0",a.jsx(l.Typography,{children:e.currency||"SAR"})]}),a.jsx(l.Button,{type:"submit",fullWidth:!0,variant:"last",onClick:e.handlePayWithWallet,children:"Pay Now"})]})},exports.ResetPasswordForm=function(e){var t,r=p.useForm(),l=r.formState.errors,i=r.handleSubmit;r.register;var n=r.control;return a.jsxs(S.default,{maxWidth:"xs",variant:"auth",children:[e.error&&a.jsxs(Alert,{severity:"error",children:[e.errorTitle&&a.jsx(AlertTitle,{children:e.errorTitle}),e.errorText]}),e.sent?a.jsx($,{style:{textAlign:"center",margin:5},children:"An link was sent to your email to reset the password."}):a.jsxs("form",{onSubmit:i(e.handleResetPassword),children:[console.log("eror ",null===(t=l.email)||void 0===t?void 0:t.message),a.jsx(p.Controller,{control:n,name:"email",render:function(t){var r,i,n=t.field;return a.jsx(_,U({fullWidth:!0,type:"text",value:null!==(r=n.value)&&void 0!==r?r:"",label:e.texts.emailLabel,helperText:null===(i=l.email)||void 0===i?void 0:i.message,placeholder:e.texts.emailPlaceholder,startAdornment:a.jsx(z.default,{position:"start",children:a.jsx(B.default,{})})},n))},rules:{required:e.texts.emailRequiredText,pattern:{value:/^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/,message:e.texts.emailInvalidText}}}),a.jsx(T.default,{type:"submit",fullWidth:!0,variant:"last",children:e.texts.resetPassword})]})]})},exports.SelectPayment=function(e){return a.jsxs(l.Container,{maxWidth:"xs",children:[a.jsx($,{align:"center",children:"Choose Payment Method"}),e.viaWallet&&a.jsx(H,{logo:"wallet",buttonText:e.walletLabel,onClick:e.handleWallet}),e.viaCreditCard&&a.jsx(H,{logo:"visa/master",buttonText:e.visaMasterLabel,onClick:e.handleCreditCard}),e.viaMada&&a.jsx(H,{logo:"mada",buttonText:e.madaLabel,onClick:e.handleMada}),e.viaSTCPay&&a.jsx(H,{logo:"stcpay",buttonText:e.stcPayLabel,onClick:e.handleSTCPay}),e.viaPayPal&&a.jsx(H,{logo:"paypal",buttonText:e.paypalLabel,onClick:e.handlePayPal}),e.viaGooglePay&&a.jsx(H,{logo:"googlepay",buttonText:e.googlePayLabel,onClick:e.handleGooglePay}),e.viaApplePay&&a.jsx(H,{logo:"applepay",buttonText:e.applePayLabel,onClick:e.handleApplePay})]})},exports.SignInForm=function(e){var t=p.useForm(),r=t.formState.errors,l=t.handleSubmit;t.register;var i=t.control;return a.jsxs(S.default,{maxWidth:"xs",variant:"auth",style:{direction:"ar"===e.lang?"rtl":"ltr"},children:[e.error&&a.jsxs(O.default,{severity:"error",children:[e.errorTitle&&a.jsx(F.default,{children:e.errorTitle}),e.errorText]}),a.jsxs("form",{onSubmit:l(e.handleSignIn),children:[a.jsx(p.Controller,{control:i,name:"email",render:function(t){var l,i,n=t.field;return a.jsx(_,U({fullWidth:!0,type:"text",value:null!==(l=n.value)&&void 0!==l?l:"",label:e.texts.emailLabel,helperText:null===(i=r.email)||void 0===i?void 0:i.message,placeholder:e.texts.emailPlaceholder,startAdornment:a.jsx(z.default,{position:"start",children:a.jsx(B.default,{})})},n))},rules:{required:e.texts.emailRequiredText,pattern:{value:/^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/,message:e.texts.emailInvalidText}}}),a.jsx(p.Controller,{control:i,name:"password",render:function(t){var l,i,n,o=t.field;return a.jsx(_,U({fullWidth:!0,type:"password",defaultValue:null!==(l=o.value)&&void 0!==l?l:"",value:null!==(i=o.value)&&void 0!==i?i:"",label:e.texts.passwordLabel,placeholder:e.texts.passwordPlaceholder,helperText:null===(n=r.password)||void 0===n?void 0:n.message,startAdornment:a.jsx(z.default,{position:"start",children:a.jsx(R.default,{})})},o))},rules:{required:e.texts.passwordRequiredText}}),a.jsx(q.default,{style:{cursor:"pointer",marginTop:5,width:"max-content",fontSize:15,padding:5},onClick:e.handleForgotPassword,children:e.texts.forgotPasswordText}),a.jsx(T.default,{type:"submit",fullWidth:!0,variant:"last",children:e.texts.signInText})]}),a.jsxs(q.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(H,{logo:"google",buttonText:e.texts.googleButtonLabel,onClick:e.handleGoogleSignIn}),e.viaGithub&&a.jsx(H,{logo:"github",buttonText:e.texts.githubButtonLabel,onClick:e.handleGithubSignIn}),e.viaTwitter&&a.jsx(H,{logo:"twitter",buttonText:e.texts.twitterButtonLabel,onClick:e.handleTwitterSignIn})]})]})},exports.SignUpForm=X,exports.UserProfileForm=function(e){var t=p.useForm(),r=t.formState.errors,l=t.handleSubmit,i=t.control;return a.jsx(S.default,{maxWidth:"sm",children:a.jsx(p.FormProvider,U(U({},t),{},{children:a.jsxs("form",{onSubmit:l(e.handleUpdateProfile),children:[a.jsx(p.Controller,{control:i,name:"fullName",render:function(t){var l,i,n=t.field;return a.jsx(_,U({fullWidth:!0,type:"text",value:null!==(l=n.value)&&void 0!==l?l:"",label:e.texts.fullNameLabel,placeholder:e.texts.fullNamePlaceholder,helperText:null===(i=r.fullName)||void 0===i?void 0:i.message},n))}}),a.jsx(p.Controller,{control:i,name:"phoneNumber",render:function(e){var t=e.field;return a.jsx(_,U({fullWidth:!0,type:"number",label:"Phone Number",placeholder:"+966"},t))}}),a.jsx(p.Controller,{control:i,name:"email",render:function(t){var l,i,n=t.field;return a.jsx(_,U({fullWidth:!0,type:"text",value:null!==(l=n.value)&&void 0!==l?l:"",label:e.texts.emailLabel,helperText:null===(i=r.email)||void 0===i?void 0:i.message,placeholder:e.texts.emailPlaceholder},n))},rules:{required:e.texts.emailRequiredText,pattern:{value:/^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/,message:e.texts.emailInvalidText}}}),a.jsx(p.Controller,{control:i,name:"password",render:function(t){var l,i,n=t.field;return a.jsx(_,U({fullWidth:!0,type:"password",value:null!==(l=n.value)&&void 0!==l?l:"",label:e.texts.passwordLabel,placeholder:e.texts.passwordPlaceholder,helperText:null===(i=r.password)||void 0===i?void 0:i.message},n))},rules:{required:e.texts.passwordRequiredText}}),a.jsx(p.Controller,{control:i,name:"confirmPassword",render:function(t){var l,i,n=t.field;return a.jsx(_,U({fullWidth:!0,type:"password",value:null!==(l=n.value)&&void 0!==l?l:"",label:e.texts.confirmPasswordLabel,placeholder:e.texts.confirmPasswordPlaceholder,helperText:null===(i=r.confirmPassword)||void 0===i?void 0:i.message},n))},rules:{required:e.texts.confirmPasswordRequiredText}}),a.jsx(T.default,{type:"submit",fullWidth:!0,variant:"last",children:"update profile"})," "]})}))})},exports.UserSettingsForm=function(e){return a.jsxs(l.Container,{maxWidth:"sm",children:[e.children,a.jsx(l.Button,{type:"submit",fullWidth:!0,variant:"last",children:"Save Settings"})]})};
|
|
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"),l=require("@mui/material");require("@mui/icons-material/MoveToInbox");var i=require("@mui/material/AppBar");require("@mui/material/Box"),require("@mui/material/Toolbar"),require("@mui/material/IconButton");var n=require("@mui/material/Typography");require("@mui/material/Menu"),require("@mui/icons-material/Menu");var o=require("@mui/material/Container");require("@mui/material/Avatar"),require("@mui/material/MenuItem"),require("@mui/material/FormControlLabel"),require("@mui/material/Checkbox"),require("@mui/icons-material/CheckCircleOutlined");var s=require("@mui/material/Input"),u=require("@mui/material/InputLabel"),d=require("@mui/icons-material/GitHub"),c=require("@mui/icons-material/Twitter"),m=require("@mui/icons-material/AccountBalanceWallet"),h=require("@mui/material/Alert"),x=require("@mui/material/AlertTitle"),p=require("@mui/material/Table"),f=require("@mui/material/TableBody"),g=require("@mui/material/TableCell"),v=require("@mui/material/TableContainer"),b=require("@mui/material/TableHead"),j=require("@mui/material/TableRow");require("@mui/material/Snackbar");var y=require("react-hook-form"),w=require("@mui/material/InputAdornment"),T=require("@mui/icons-material/HttpsOutlined"),P=require("@mui/icons-material/MailOutline"),C=require("@mui/icons-material/PermIdentityOutlined"),q=require("@mui/material/styles"),S=require("@mui/material/Drawer");function W(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}require("@mui/material/List"),require("@mui/material/Divider"),require("@mui/icons-material/ChevronLeft"),require("@mui/icons-material/ChevronRight"),require("@mui/material/ListItemButton"),require("@mui/material/ListItemIcon"),require("@mui/material/ListItemText"),require("@mui/icons-material/Mail"),require("@mui/icons-material/Close");var k=W(t),A=W(r),L=W(i),I=W(n),O=W(o),F=W(s),R=W(u),B=W(d),z=W(c),N=W(m),M=W(h),D=W(x),U=W(p),G=W(f),E=W(g),Z=W(v),$=W(b),H=W(j),_=W(w),V=W(T),X=W(P),Y=W(C),J=W(S);function K(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 Q(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?K(Object(r),!0).forEach((function(t){ee(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):K(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}function ee(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function te(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 re(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 re(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 re(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}A.default.string,A.default.bool;var ae=function(e){return a.jsx(I.default,Q(Q({},e),{},{children:e.children}))},le=function(e){return a.jsxs(a.Fragment,{children:[a.jsxs("div",{style:{display:"flex",flexDirection:"row",justifyContent:"space-between",alignItems:"center"},children:[a.jsx(R.default,{children:e.label}),e.helperText&&a.jsx(l.Typography,{variant:"validation",children:e.helperText})]}),a.jsx(F.default,Q({disableUnderline:!0},e))]})};A.default.oneOf(["text","number","password"]),A.default.string;var ie=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(B.default,{});break;case"twitter":r=a.jsx(z.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(N.default,{})}return a.jsxs(k.default,Q(Q({},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})]}))},ne=function(e){return a.jsxs(M.default,{severity:e.severity,children:[e.title&&a.jsx(D.default,{children:e.title}),e.text]})},oe=function(e){return a.jsx(Z.default,{children:a.jsxs(U.default,{"aria-label":"a dense table",children:[a.jsx($.default,{children:a.jsx(H.default,{children:e.columns.map((function(e,t){return a.jsx(E.default,{style:{fontWeight:700},variant:0==t||"bordered",children:e})}))})}),a.jsx(G.default,{children:e.rows.map((function(e,t){return a.jsx(H.default,{children:e.map((function(e,t){return a.jsx(E.default,{component:"th",scope:"row",variant:0==t||"bordered",children:e},t)}))},t)}))}),e.end&&a.jsx(H.default,{children:e.end.map((function(e,t){return a.jsx(E.default,{style:{fontWeight:700},component:"th",scope:"row",variant:0==t||"bordered",children:e},t)}))})]})})},se=function(e){var t=y.useForm(),r=t.formState.errors,l=t.handleSubmit,i=t.control;return a.jsxs(O.default,{maxWidth:"xs",variant:"auth",style:{direction:"ar"===e.lang?"rtl":"ltr"},children:[e.error&&a.jsxs(M.default,{severity:"error",children:[e.errorTitle&&a.jsx(D.default,{children:e.errorTitle}),e.errorText]}),a.jsx(y.FormProvider,Q(Q({},t),{},{children:a.jsxs("form",{onSubmit:l(e.handleSignUp),children:[a.jsx(y.Controller,{control:i,name:"fullName",render:function(t){var l,i,n=t.field;return a.jsx(le,{fullWidth:!0,type:"text",value:null!==(l=n.value)&&void 0!==l?l:"",label:e.texts.fullNameLabel,placeholder:e.texts.fullNamePlaceholder,helperText:null===(i=r.fullName)||void 0===i?void 0:i.message,startAdornment:a.jsx(_.default,{position:"start",children:a.jsx(Y.default,{})})})},rules:{required:e.texts.fullNameRequiredText}}),a.jsx(y.Controller,{control:i,name:"email",render:function(t){var l,i,n=t.field;return a.jsx(le,{fullWidth:!0,type:"text",value:null!==(l=n.value)&&void 0!==l?l:"",label:e.texts.emailLabel,helperText:null===(i=r.email)||void 0===i?void 0:i.message,placeholder:e.texts.emailPlaceholder,startAdornment:a.jsx(_.default,{position:"start",children:a.jsx(X.default,{})})})},rules:{required:e.texts.emailRequiredText,pattern:{value:/^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/,message:e.texts.emailInvalidText}}}),a.jsx(y.Controller,{control:i,name:"password",render:function(t){var l,i,n,o=t.field;return a.jsx(le,Q({fullWidth:!0,type:"password",defaultValue:null!==(l=o.value)&&void 0!==l?l:"",value:null!==(i=o.value)&&void 0!==i?i:"",label:e.texts.passwordLabel,placeholder:e.texts.passwordPlaceholder,helperText:null===(n=r.password)||void 0===n?void 0:n.message,startAdornment:a.jsx(_.default,{position:"start",children:a.jsx(V.default,{})})},o))},rules:{required:e.texts.passwordRequiredText}}),a.jsx(k.default,{fullWidth:!0,variant:"last",type:"submit",children:e.texts.signUpText})]})})),a.jsxs(I.default,{variant:"subtitle2",style:{marginTop:5,textAlign:"center",padding:5},children:[e.texts.existingUserText," ",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(ie,{logo:"google",buttonText:e.texts.googleButtonLabel,onClick:e.handleGoogleSignUp}),e.viaGithub&&a.jsx(ie,{logo:"github",buttonText:e.texts.githubButtonLabel,onClick:e.handleGithubSignUp}),e.viaTwitter&&a.jsx(ie,{logo:"twitter",buttonText:e.texts.twitterButtonLabel,onClick:e.handleTwitterSignUp})]})]})};se.propTypes={theme:A.default.oneOf(["secondary","primary"])};le.propTypes={theme:A.default.oneOf(["secondary","primary"]),viaApplePay:A.default.bool,viaGooglePay:A.default.bool,viaSTCPay:A.default.bool,viaCreditCard:A.default.bool,viaPayPal:A.default.bool,handleApplePay:A.default.func};var ue=function(e){return{width:240,transition:e.transitions.create("width",{easing:e.transitions.easing.sharp,duration:e.transitions.duration.enteringScreen}),overflowX:"hidden"}},de=function(e){return ee({transition:e.transitions.create("width",{easing:e.transitions.easing.sharp,duration:e.transitions.duration.leavingScreen}),overflowX:"hidden",width:"calc(".concat(e.spacing(7)," + 1px)")},e.breakpoints.up("sm"),{width:"calc(".concat(e.spacing(8)," + 1px)")})};q.styled("div")((function(e){var t=e.theme;return Q({display:"flex",alignItems:"center",justifyContent:"flex-end",padding:t.spacing(0,1)},t.mixins.toolbar)})),q.styled(L.default,{shouldForwardProp:function(e){return"open"!==e}})((function(e){var t=e.theme,r=e.open;return Q({zIndex:t.zIndex.drawer+1,transition:t.transitions.create(["width","margin"],{easing:t.transitions.easing.sharp,duration:t.transitions.duration.leavingScreen})},r&&{marginLeft:240,width:"calc(100% - ".concat(240,"px)"),transition:t.transitions.create(["width","margin"],{easing:t.transitions.easing.sharp,duration:t.transitions.duration.enteringScreen})})})),q.styled(J.default,{shouldForwardProp:function(e){return"open"!==e}})((function(e){var t=e.theme,r=e.open;return Q(Q({width:240,flexShrink:0,whiteSpace:"nowrap",boxSizing:"border-box"},r&&Q(Q({},ue(t)),{},{"& .MuiDrawer-paper":ue(t)})),!r&&Q(Q({},de(t)),{},{"& .MuiDrawer-paper":de(t)}))}));exports.ChargeWalletForm=function(t){var r=te(e.useState(0),2),l=r[0],i=r[1],n=y.useForm();n.formState.errors;var o=n.handleSubmit,s=n.control;return a.jsxs(O.default,{maxWidth:"xs",children:[a.jsxs(I.default,{align:"center",variant:"h2",fontWeight:500,children:[Number(l).toLocaleString("en")||"0",a.jsx(I.default,{children:t.currency||"SAR"})]}),a.jsx(y.FormProvider,Q(Q({},n),{},{children:a.jsxs("form",{onSubmit:o(t.handleChargeWallet),children:[a.jsx(y.Controller,{control:s,name:"amount",render:function(e){var t,r=e.field;return a.jsx(le,Q(Q({fullWidth:!0,placeholder:"Enter amount",type:"number",value:null!==(t=r.value)&&void 0!==t?t:""},r),{},{inputProps:{inputMode:"numeric",min:"0",max:"9999999",step:"0.01"},onChange:function(e){r.onChange(parseFloat(e.target.value)),console.log("e",e.target.value),i(e.target.value)}}))}}),a.jsx(k.default,{type:"submit",fullWidth:!0,variant:"last",onClick:t.handleSignIn,children:"Charge Wallet"})]})}))]})},exports.CheckoutForm=function(e){var t,r,i=y.useForm(),n=i.formState.errors,o=i.handleSubmit;return a.jsxs(l.Container,{maxWidth:"xs",children:[a.jsx(l.Typography,{align:"center",variant:"h4",fontWeight:400,style:{marginBottom:10},children:"Order Details"}),a.jsx(oe,{columns:["Product","Price"],rows:[["Logo Design","1,200 SAR"],["Website Design","1,500 SAR"],["Website Development","900 SAR"],["Hosting","200 SAR"],["Social Media Management","700 SAR"]],end:["Total","5,330 SAR"]}),a.jsx(l.Typography,{align:"center",variant:"h4",fontWeight:400,style:{marginTop:10},children:"Billing Address"}),a.jsx(y.FormProvider,Q(Q({},i),{},{children:a.jsxs("form",{onSubmit:o(e.handle),children:[a.jsx(le,{fullWidth:!0,name:"password",placeholder:"Enter password",type:"tel",label:"Card Number",rules:{required:"Password is rquired"},helperText:null===(t=n.password)||void 0===t?void 0:t.message}),a.jsx(le,{fullWidth:!0,name:"password",placeholder:"Enter password",type:"password",label:"Name On Card",rules:{required:"Password is rquired"},helperText:null===(r=n.password)||void 0===r?void 0:r.message}),a.jsx(l.Button,{type:"submit",fullWidth:!0,variant:"last",onClick:e.handlePayWithCreditCard,children:"Pay with Credit Card"})]})}))]})},exports.CreditCardForm=function(e){var t,r,i=y.useForm(),n=i.formState.errors,o=i.handleSubmit;return a.jsx(l.Container,{maxWidth:"xs",children:a.jsx(y.FormProvider,Q(Q({},i),{},{children:a.jsxs("form",{onSubmit:o(e.handle),children:[a.jsx(le,{fullWidth:!0,name:"password",placeholder:"Enter password",type:"tel",label:"Card Number",rules:{required:"Password is rquired"},helperText:null===(t=n.password)||void 0===t?void 0:t.message}),a.jsx(le,{fullWidth:!0,name:"password",placeholder:"Enter password",type:"password",label:"Name On Card",rules:{required:"Password is rquired"},helperText:null===(r=n.password)||void 0===r?void 0:r.message}),a.jsx(l.Button,{type:"submit",fullWidth:!0,variant:"last",onClick:e.handlePayWithCreditCard,children:"Pay with Credit Card"})]})}))})},exports.NewPasswordForm=function(t){var r=te(e.useState(""),2);r[0],r[1];var l=te(e.useState(""),2);l[0],l[1];var i=te(e.useState(!1),2),n=i[0],o=i[1],s=y.useForm(),u=s.formState.errors,d=s.handleSubmit,c=s.control;return a.jsxs(O.default,{maxWidth:"xs",variant:"auth",children:[n&&a.jsx(ne,{text:t.texts.passwordMatchError,severity:"error"}),t.passwordChanged?a.jsx(ae,{style:{textAlign:"center",margin:5},children:"Your password has been changed, you'll be redirected to sign in page"}):a.jsx(y.FormProvider,Q(Q({},s),{},{children:a.jsxs("form",{onSubmit:d((function(e){console.log("handling subb",e),e.password===e.confirmPassword?t.handleNewPassword():o(!0)})),children:[a.jsx(y.Controller,{control:c,name:"password",render:function(e){var r,l,i=e.field;return a.jsx(le,Q({fullWidth:!0,type:"password",value:null!==(r=i.value)&&void 0!==r?r:"",label:t.texts.passwordLabel,placeholder:t.texts.passwordPlaceholder,helperText:null===(l=u.password)||void 0===l?void 0:l.message,startAdornment:a.jsx(_.default,{position:"start",children:a.jsx(V.default,{})})},i))},rules:{required:t.texts.passwordRequiredText}}),a.jsx(y.Controller,{control:c,name:"confirmPassword",render:function(e){var r,l,i=e.field;return a.jsx(le,Q({fullWidth:!0,type:"password",value:null!==(r=i.value)&&void 0!==r?r:"",label:t.texts.confirmPasswordLabel,placeholder:t.texts.confirmPasswordPlaceholder,helperText:null===(l=u.confirmPassword)||void 0===l?void 0:l.message,startAdornment:a.jsx(_.default,{position:"start",children:a.jsx(V.default,{})})},i))},rules:{required:t.texts.confirmPasswordRequiredText}}),a.jsx(k.default,{type:"submit",fullWidth:!0,variant:"last",children:t.texts.updatePassword})]})}))]})},exports.PayWithWallet=function(e){return a.jsxs(l.Container,{maxWidth:"xs",children:[a.jsx(l.Typography,{align:"center",children:"Wallet Balance"}),a.jsxs(l.Typography,{align:"center",variant:"h1",children:[e.walletBalance||"0",a.jsx(l.Typography,{children:e.currency||"SAR"})]}),a.jsx(l.Button,{type:"submit",fullWidth:!0,variant:"last",onClick:e.handlePayWithWallet,children:"Pay Now"})]})},exports.ResetPasswordForm=function(e){var t,r=y.useForm(),l=r.formState.errors,i=r.handleSubmit;r.register;var n=r.control;return a.jsxs(O.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(ae,{style:{textAlign:"center",margin:5},children:"An link was sent to your email to reset the password."}):a.jsxs("form",{onSubmit:i(e.handleResetPassword),children:[console.log("eror ",null===(t=l.email)||void 0===t?void 0:t.message),a.jsx(y.Controller,{control:n,name:"email",render:function(t){var r,i,n=t.field;return a.jsx(le,Q({fullWidth:!0,type:"text",value:null!==(r=n.value)&&void 0!==r?r:"",label:e.texts.emailLabel,helperText:null===(i=l.email)||void 0===i?void 0:i.message,placeholder:e.texts.emailPlaceholder,startAdornment:a.jsx(_.default,{position:"start",children:a.jsx(X.default,{})})},n))},rules:{required:e.texts.emailRequiredText,pattern:{value:/^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/,message:e.texts.emailInvalidText}}}),a.jsx(k.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(ae,{align:"center",children:"Choose Payment Method"}),e.viaWallet&&a.jsx(ie,{logo:"wallet",buttonText:e.walletLabel,onClick:e.handleWallet}),e.viaCreditCard&&a.jsx(ie,{logo:"visa/master",buttonText:e.visaMasterLabel,onClick:e.handleCreditCard}),e.viaMada&&a.jsx(ie,{logo:"mada",buttonText:e.madaLabel,onClick:e.handleMada}),e.viaSTCPay&&a.jsx(ie,{logo:"stcpay",buttonText:e.stcPayLabel,onClick:e.handleSTCPay}),e.viaPayPal&&a.jsx(ie,{logo:"paypal",buttonText:e.paypalLabel,onClick:e.handlePayPal}),e.viaGooglePay&&a.jsx(ie,{logo:"googlepay",buttonText:e.googlePayLabel,onClick:e.handleGooglePay}),e.viaApplePay&&a.jsx(ie,{logo:"applepay",buttonText:e.applePayLabel,onClick:e.handleApplePay})]})},exports.SignInForm=function(e){var t=y.useForm(),r=t.formState.errors,l=t.handleSubmit;t.register;var i=t.control;return a.jsxs(O.default,{maxWidth:"xs",variant:"auth",style:{direction:"ar"===e.lang?"rtl":"ltr"},children:[e.error&&a.jsxs(M.default,{severity:"error",children:[e.errorTitle&&a.jsx(D.default,{children:e.errorTitle}),e.errorText]}),a.jsxs("form",{onSubmit:l(e.handleSignIn),children:[a.jsx(y.Controller,{control:i,name:"email",render:function(t){var l,i,n=t.field;return a.jsx(le,Q({fullWidth:!0,type:"text",value:null!==(l=n.value)&&void 0!==l?l:"",label:e.texts.emailLabel,helperText:null===(i=r.email)||void 0===i?void 0:i.message,placeholder:e.texts.emailPlaceholder,startAdornment:a.jsx(_.default,{position:"start",children:a.jsx(X.default,{})})},n))},rules:{required:e.texts.emailRequiredText,pattern:{value:/^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/,message:e.texts.emailInvalidText}}}),a.jsx(y.Controller,{control:i,name:"password",render:function(t){var l,i,n,o=t.field;return a.jsx(le,Q({fullWidth:!0,type:"password",defaultValue:null!==(l=o.value)&&void 0!==l?l:"",value:null!==(i=o.value)&&void 0!==i?i:"",label:e.texts.passwordLabel,placeholder:e.texts.passwordPlaceholder,helperText:null===(n=r.password)||void 0===n?void 0:n.message,startAdornment:a.jsx(_.default,{position:"start",children:a.jsx(V.default,{})})},o))},rules:{required:e.texts.passwordRequiredText}}),a.jsx(I.default,{style:{cursor:"pointer",marginTop:5,width:"max-content",fontSize:15,padding:5},onClick:e.handleForgotPassword,children:e.texts.forgotPasswordText}),a.jsx(k.default,{type:"submit",fullWidth:!0,variant:"last",children:e.texts.signInText})]}),a.jsxs(I.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(ie,{logo:"google",buttonText:e.texts.googleButtonLabel,onClick:e.handleGoogleSignIn}),e.viaGithub&&a.jsx(ie,{logo:"github",buttonText:e.texts.githubButtonLabel,onClick:e.handleGithubSignIn}),e.viaTwitter&&a.jsx(ie,{logo:"twitter",buttonText:e.texts.twitterButtonLabel,onClick:e.handleTwitterSignIn})]})]})},exports.SignUpForm=se,exports.UserProfileForm=function(e){var t=y.useForm(),r=t.formState.errors,l=t.handleSubmit,i=t.control;return a.jsx(O.default,{maxWidth:"sm",children:a.jsx(y.FormProvider,Q(Q({},t),{},{children:a.jsxs("form",{onSubmit:l(e.handleUpdateProfile),children:[a.jsx(y.Controller,{control:i,name:"fullName",render:function(t){var l,i,n=t.field;return a.jsx(le,Q({fullWidth:!0,type:"text",value:null!==(l=n.value)&&void 0!==l?l:"",label:e.texts.fullNameLabel,placeholder:e.texts.fullNamePlaceholder,helperText:null===(i=r.fullName)||void 0===i?void 0:i.message},n))}}),a.jsx(y.Controller,{control:i,name:"phoneNumber",render:function(e){var t=e.field;return a.jsx(le,Q({fullWidth:!0,type:"tel",label:"Phone Number",placeholder:"+966"},t))}}),a.jsx(y.Controller,{control:i,name:"email",render:function(t){var l,i,n=t.field;return a.jsx(le,Q({fullWidth:!0,type:"text",value:null!==(l=n.value)&&void 0!==l?l:"",label:e.texts.emailLabel,helperText:null===(i=r.email)||void 0===i?void 0:i.message,placeholder:e.texts.emailPlaceholder},n))},rules:{required:e.texts.emailRequiredText,pattern:{value:/^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/,message:e.texts.emailInvalidText}}}),a.jsx(y.Controller,{control:i,name:"password",render:function(t){var l,i,n=t.field;return a.jsx(le,Q({fullWidth:!0,type:"password",value:null!==(l=n.value)&&void 0!==l?l:"",label:e.texts.passwordLabel,placeholder:e.texts.passwordPlaceholder,helperText:null===(i=r.password)||void 0===i?void 0:i.message},n))},rules:{required:e.texts.passwordRequiredText}}),a.jsx(y.Controller,{control:i,name:"confirmPassword",render:function(t){var l,i,n=t.field;return a.jsx(le,Q({fullWidth:!0,type:"password",value:null!==(l=n.value)&&void 0!==l?l:"",label:e.texts.confirmPasswordLabel,placeholder:e.texts.confirmPasswordPlaceholder,helperText:null===(i=r.confirmPassword)||void 0===i?void 0:i.message},n))},rules:{required:e.texts.confirmPasswordRequiredText}}),a.jsx(k.default,{type:"submit",fullWidth:!0,variant:"last",children:"update profile"})," "]})}))})},exports.UserSettingsForm=function(e){return a.jsxs(l.Container,{maxWidth:"sm",children:[e.children,a.jsx(l.Button,{type:"submit",fullWidth:!0,variant:"last",onClick:e.handleSaveSettings,children:e.saveSettingsText})]})};
|
package/package.json
CHANGED
|
@@ -5,8 +5,13 @@ export const UserSettingsForm = (props) => {
|
|
|
5
5
|
return (
|
|
6
6
|
<Container maxWidth="sm">
|
|
7
7
|
{props.children}
|
|
8
|
-
<Button
|
|
9
|
-
|
|
8
|
+
<Button
|
|
9
|
+
type="submit"
|
|
10
|
+
fullWidth
|
|
11
|
+
variant="last"
|
|
12
|
+
onClick={props.handleSaveSettings}
|
|
13
|
+
>
|
|
14
|
+
{props.saveSettingsText}
|
|
10
15
|
</Button>
|
|
11
16
|
</Container>
|
|
12
17
|
);
|
|
@@ -0,0 +1,98 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import {
|
|
3
|
+
HawaTextField,
|
|
4
|
+
ActionButton,
|
|
5
|
+
HawaTypography,
|
|
6
|
+
HawaTable
|
|
7
|
+
} from "../../elements";
|
|
8
|
+
import { Box } from "../../layout";
|
|
9
|
+
import { FormProvider, useForm } from "react-hook-form";
|
|
10
|
+
import { Button, Container, Typography } from "@mui/material";
|
|
11
|
+
|
|
12
|
+
export const CheckoutForm = (props) => {
|
|
13
|
+
const methods = useForm();
|
|
14
|
+
const {
|
|
15
|
+
formState: { errors },
|
|
16
|
+
handleSubmit
|
|
17
|
+
} = methods;
|
|
18
|
+
|
|
19
|
+
return (
|
|
20
|
+
<Container maxWidth="xs">
|
|
21
|
+
<Typography
|
|
22
|
+
align="center"
|
|
23
|
+
variant="h4"
|
|
24
|
+
fontWeight={400}
|
|
25
|
+
style={{ marginBottom: 10 }}
|
|
26
|
+
>
|
|
27
|
+
Order Details
|
|
28
|
+
</Typography>
|
|
29
|
+
<HawaTable
|
|
30
|
+
columns={["Product", "Price"]}
|
|
31
|
+
rows={[
|
|
32
|
+
["Logo Design", "1,200 SAR"],
|
|
33
|
+
["Website Design", "1,500 SAR"],
|
|
34
|
+
["Website Development", "900 SAR"],
|
|
35
|
+
["Hosting", "200 SAR"],
|
|
36
|
+
["Social Media Management", "700 SAR"]
|
|
37
|
+
]}
|
|
38
|
+
end={["Total", "5,330 SAR"]}
|
|
39
|
+
/>
|
|
40
|
+
<Typography
|
|
41
|
+
align="center"
|
|
42
|
+
variant="h4"
|
|
43
|
+
fontWeight={400}
|
|
44
|
+
style={{ marginTop: 10 }}
|
|
45
|
+
>
|
|
46
|
+
Billing Address
|
|
47
|
+
</Typography>
|
|
48
|
+
<FormProvider {...methods}>
|
|
49
|
+
<form onSubmit={handleSubmit(props.handle)}>
|
|
50
|
+
<HawaTextField
|
|
51
|
+
fullWidth
|
|
52
|
+
name="password"
|
|
53
|
+
placeholder="Enter password"
|
|
54
|
+
type="tel"
|
|
55
|
+
label="Card Number"
|
|
56
|
+
// variant="unscrollable"
|
|
57
|
+
// startAdornment={
|
|
58
|
+
// <InputAdornment position="start">
|
|
59
|
+
// <PasswordIcon />
|
|
60
|
+
// </InputAdornment>
|
|
61
|
+
// }
|
|
62
|
+
rules={{
|
|
63
|
+
required: "Password is rquired"
|
|
64
|
+
}}
|
|
65
|
+
helperText={errors.password?.message}
|
|
66
|
+
/>
|
|
67
|
+
|
|
68
|
+
<HawaTextField
|
|
69
|
+
fullWidth
|
|
70
|
+
name="password"
|
|
71
|
+
placeholder="Enter password"
|
|
72
|
+
type="password"
|
|
73
|
+
label="Name On Card"
|
|
74
|
+
// startAdornment={
|
|
75
|
+
// <InputAdornment position="start">
|
|
76
|
+
// <PasswordIcon />
|
|
77
|
+
// </InputAdornment>
|
|
78
|
+
// }
|
|
79
|
+
rules={{
|
|
80
|
+
required: "Password is rquired"
|
|
81
|
+
}}
|
|
82
|
+
helperText={errors.password?.message}
|
|
83
|
+
/>
|
|
84
|
+
|
|
85
|
+
<Button
|
|
86
|
+
type="submit"
|
|
87
|
+
fullWidth
|
|
88
|
+
variant="last"
|
|
89
|
+
onClick={props.handlePayWithCreditCard}
|
|
90
|
+
>
|
|
91
|
+
{/* {props.texts.signInText} */}
|
|
92
|
+
{"Pay with Credit Card"}
|
|
93
|
+
</Button>
|
|
94
|
+
</form>
|
|
95
|
+
</FormProvider>
|
|
96
|
+
</Container>
|
|
97
|
+
);
|
|
98
|
+
};
|
|
@@ -19,8 +19,9 @@ export const CreditCardForm = (props) => {
|
|
|
19
19
|
fullWidth
|
|
20
20
|
name="password"
|
|
21
21
|
placeholder="Enter password"
|
|
22
|
-
type="
|
|
22
|
+
type="tel"
|
|
23
23
|
label="Card Number"
|
|
24
|
+
// variant="unscrollable"
|
|
24
25
|
// startAdornment={
|
|
25
26
|
// <InputAdornment position="start">
|
|
26
27
|
// <PasswordIcon />
|
|
@@ -1,33 +1,10 @@
|
|
|
1
1
|
import React from "react";
|
|
2
|
-
// import { styled } from "@mui/material/styles";
|
|
3
|
-
|
|
4
2
|
import Alert from "@mui/material/Alert";
|
|
5
3
|
import AlertTitle from "@mui/material/AlertTitle";
|
|
6
4
|
|
|
7
5
|
export const HawaAlert = (props) => {
|
|
8
|
-
// const currentTheme = Object.keys(hawaTheme.alerts).find(
|
|
9
|
-
// (tName) => tName.toLowerCase() === themeName?.toLowerCase()
|
|
10
|
-
// );
|
|
11
|
-
// let alertStyle = {};
|
|
12
|
-
|
|
13
|
-
// if (currentTheme) {
|
|
14
|
-
// alertStyle = {
|
|
15
|
-
// ...hawaTheme.alerts[currentTheme]
|
|
16
|
-
// };
|
|
17
|
-
// } else {
|
|
18
|
-
// alertStyle = {
|
|
19
|
-
// marginBottom: 10
|
|
20
|
-
// };
|
|
21
|
-
// }
|
|
22
|
-
|
|
23
|
-
// const StyledAlert = styled(Alert)(({ theme }) => {
|
|
24
|
-
// return {
|
|
25
|
-
// ...alertStyle
|
|
26
|
-
// };
|
|
27
|
-
// });
|
|
28
|
-
|
|
29
6
|
return (
|
|
30
|
-
<Alert {
|
|
7
|
+
<Alert severity={props.severity}>
|
|
31
8
|
{props.title && <AlertTitle>{props.title}</AlertTitle>}
|
|
32
9
|
{props.text}
|
|
33
10
|
</Alert>
|
|
@@ -0,0 +1,60 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import Table from "@mui/material/Table";
|
|
3
|
+
import TableBody from "@mui/material/TableBody";
|
|
4
|
+
import TableCell from "@mui/material/TableCell";
|
|
5
|
+
import TableContainer from "@mui/material/TableContainer";
|
|
6
|
+
import TableHead from "@mui/material/TableHead";
|
|
7
|
+
import TableRow from "@mui/material/TableRow";
|
|
8
|
+
|
|
9
|
+
export const HawaTable = (props) => {
|
|
10
|
+
return (
|
|
11
|
+
<TableContainer>
|
|
12
|
+
<Table aria-label="a dense table">
|
|
13
|
+
<TableHead>
|
|
14
|
+
<TableRow>
|
|
15
|
+
{props.columns.map((col, i) => (
|
|
16
|
+
<TableCell
|
|
17
|
+
style={{ fontWeight: 700 }}
|
|
18
|
+
variant={i == 0 || "bordered"}
|
|
19
|
+
>
|
|
20
|
+
{col}
|
|
21
|
+
</TableCell>
|
|
22
|
+
))}
|
|
23
|
+
</TableRow>
|
|
24
|
+
</TableHead>
|
|
25
|
+
|
|
26
|
+
<TableBody>
|
|
27
|
+
{props.rows.map((singleRow, j) => (
|
|
28
|
+
<TableRow key={j}>
|
|
29
|
+
{singleRow.map((r, i) => (
|
|
30
|
+
<TableCell
|
|
31
|
+
key={i}
|
|
32
|
+
component="th"
|
|
33
|
+
scope="row"
|
|
34
|
+
variant={i == 0 || "bordered"}
|
|
35
|
+
>
|
|
36
|
+
{r}
|
|
37
|
+
</TableCell>
|
|
38
|
+
))}
|
|
39
|
+
</TableRow>
|
|
40
|
+
))}
|
|
41
|
+
</TableBody>
|
|
42
|
+
{props.end && (
|
|
43
|
+
<TableRow>
|
|
44
|
+
{props.end.map((e, k) => (
|
|
45
|
+
<TableCell
|
|
46
|
+
style={{ fontWeight: 700 ,}}
|
|
47
|
+
key={k}
|
|
48
|
+
component="th"
|
|
49
|
+
scope="row"
|
|
50
|
+
variant={k == 0 || "bordered"}
|
|
51
|
+
>
|
|
52
|
+
{e}
|
|
53
|
+
</TableCell>
|
|
54
|
+
))}
|
|
55
|
+
</TableRow>
|
|
56
|
+
)}
|
|
57
|
+
</Table>
|
|
58
|
+
</TableContainer>
|
|
59
|
+
);
|
|
60
|
+
};
|
|
@@ -3,24 +3,5 @@ import React from "react";
|
|
|
3
3
|
import Typography from "@mui/material/Typography";
|
|
4
4
|
|
|
5
5
|
export const HawaTypography = (props) => {
|
|
6
|
-
// const currentTheme = Object.keys(hawaTheme.typography).find(
|
|
7
|
-
// (tName) => tName.toLowerCase() === themeName?.toLowerCase()
|
|
8
|
-
// );
|
|
9
|
-
// let typographyStyle = {};
|
|
10
|
-
|
|
11
|
-
// if (currentTheme) {
|
|
12
|
-
// typographyStyle = { ...hawaTheme.typography[currentTheme] };
|
|
13
|
-
// } else {
|
|
14
|
-
// typographyStyle = {
|
|
15
|
-
// color: "black"
|
|
16
|
-
// };
|
|
17
|
-
// }
|
|
18
|
-
|
|
19
|
-
// const StyledTypography = styled(Typography)(({ theme }) => {
|
|
20
|
-
// return {
|
|
21
|
-
// ...typographyStyle
|
|
22
|
-
// };
|
|
23
|
-
// });
|
|
24
|
-
|
|
25
6
|
return <Typography {...props}>{props.children}</Typography>;
|
|
26
7
|
};
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import Snackbar from "@mui/material/Snackbar";
|
|
3
|
+
import AlertTitle from "@mui/material/AlertTitle";
|
|
4
|
+
import Alert from "@mui/material/Alert";
|
|
5
|
+
|
|
6
|
+
export const OfflineBanner = (props) => {
|
|
7
|
+
return (
|
|
8
|
+
<Snackbar
|
|
9
|
+
variant="danger"
|
|
10
|
+
// style={{ outline: "1px solid red" }}
|
|
11
|
+
open={props.open}
|
|
12
|
+
onClose={props.handleClose}
|
|
13
|
+
>
|
|
14
|
+
<Alert icon={false} severity={"error"} variant="offline">
|
|
15
|
+
{props.title && <AlertTitle>{props.title}</AlertTitle>}
|
|
16
|
+
{props.text}
|
|
17
|
+
</Alert>
|
|
18
|
+
</Snackbar>
|
|
19
|
+
);
|
|
20
|
+
};
|
package/src/elements/index.js
CHANGED
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
import CloseIcon from "@mui/icons-material/Close";
|
|
2
|
+
import {
|
|
3
|
+
Dialog,
|
|
4
|
+
DialogActions,
|
|
5
|
+
DialogContent,
|
|
6
|
+
DialogTitle,
|
|
7
|
+
IconButton
|
|
8
|
+
} from "@mui/material";
|
|
9
|
+
import React, { useState } from "react";
|
|
10
|
+
|
|
11
|
+
const BootstrapDialogTitle = (props) => {
|
|
12
|
+
const { children, onClose, hideClose, ...other } = props;
|
|
13
|
+
|
|
14
|
+
return (
|
|
15
|
+
<DialogTitle sx={{ m: 0, p: 2 }} {...other}>
|
|
16
|
+
{children}
|
|
17
|
+
{!hideClose ? (
|
|
18
|
+
<IconButton
|
|
19
|
+
aria-label="close"
|
|
20
|
+
onClick={onClose}
|
|
21
|
+
sx={{
|
|
22
|
+
position: "absolute",
|
|
23
|
+
right: 8,
|
|
24
|
+
top: 8,
|
|
25
|
+
color: (theme) => theme.palette.grey[500]
|
|
26
|
+
}}
|
|
27
|
+
>
|
|
28
|
+
<CloseIcon />
|
|
29
|
+
</IconButton>
|
|
30
|
+
) : null}
|
|
31
|
+
</DialogTitle>
|
|
32
|
+
);
|
|
33
|
+
};
|
|
34
|
+
export function HawaDialog(props) {
|
|
35
|
+
const [open, setOpen] = useState(false);
|
|
36
|
+
return (
|
|
37
|
+
<Dialog {...props} variant="main">
|
|
38
|
+
<BootstrapDialogTitle onClose={props.onClose} hideClose={props.hideClose}>
|
|
39
|
+
{props.title}
|
|
40
|
+
</BootstrapDialogTitle>
|
|
41
|
+
<DialogContent>{props.children}</DialogContent>
|
|
42
|
+
<DialogActions>{props.actions}</DialogActions>
|
|
43
|
+
</Dialog>
|
|
44
|
+
);
|
|
45
|
+
}
|
package/src/layout/index.js
CHANGED