@ludo.ninja/components 1.5.7 → 1.5.9

package/dist/components/inviteCodesForms/joinWaitListForm/index.jsx

@@ -0,0 +1,132 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+import React from 'react';
+import { useRouter } from 'next/router';
+import { useForm } from 'react-hook-form';
+import { H2, SmallText } from '@ludo.ninja/ui';
+import { eventsTypes, sendEventToExtension } from '@ludo.ninja/utils';
+import useSaveEmailOfJoiner from '@/api/server-identities/mutations/useSaveEmailOfJoiner';
+import { FormContent, FormFooter, FormHeader, FormLogOutBtn, FormSubmitBtn, } from '@/components/inviteCodesForms/styles';
+import MainButton from '@/system/Buttons/MainButton';
+import { Input } from '@/system/Forms';
+import messages from '@/system/Forms/Messages';
+var JoinWaitListForm = function () {
+    var _a = useSaveEmailOfJoiner(), saveEmailOfJoiner = _a.saveEmailOfJoiner, loading = _a.loading;
+    var router = useRouter();
+    var query = router.query;
+    var isFromChromeExtension = query.isFromChromeExtension;
+    var btnText = isFromChromeExtension ? 'Go back to Ludo X' : 'Go back';
+    var _b = useForm({
+        mode: 'onSubmit',
+    }), register = _b.register, _c = _b.formState, errors = _c.errors, isValid = _c.isValid, isDirty = _c.isDirty, handleSubmit = _b.handleSubmit;
+    var onSubmit = function (_a) {
+        var userEmail = _a.userEmail;
+        return __awaiter(void 0, void 0, void 0, function () {
+            return __generator(this, function (_b) {
+                switch (_b.label) {
+                    case 0: return [4 /*yield*/, saveEmailOfJoiner({ email: userEmail, isSubscribed: true })];
+                    case 1:
+                        _b.sent();
+                        return [2 /*return*/];
+                }
+            });
+        });
+    };
+    var dataUserEmail = {
+        labelText: 'Your email',
+        name: 'userEmail',
+        placeHolder: 'Your email',
+    };
+    var registerEmail = register('userEmail', messages[dataUserEmail.name]);
+    var errorInviteCode = {
+        isNeedShowError: Boolean(errors === null || errors === void 0 ? void 0 : errors.userEmail),
+        message: (errors === null || errors === void 0 ? void 0 : errors.userEmail) && (errors === null || errors === void 0 ? void 0 : errors.userEmail.message),
+    };
+    var handleLogOut = function () { return __awaiter(void 0, void 0, void 0, function () {
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    if (!isFromChromeExtension) return [3 /*break*/, 2];
+                    return [4 /*yield*/, sendEventToExtension(eventsTypes.returnToExtension)];
+                case 1:
+                    _a.sent();
+                    return [3 /*break*/, 4];
+                case 2: return [4 /*yield*/, router.replace({
+                        query: __assign(__assign({}, router.query), { joinWaitList: [] }),
+                    }, undefined, { shallow: true })];
+                case 3:
+                    _a.sent();
+                    _a.label = 4;
+                case 4: return [2 /*return*/];
+            }
+        });
+    }); };
+    return (<>
+      <FormHeader>
+        <H2>Join the Waitlist</H2>
+        <SmallText mt={16} textAlign={'left'}>
+          Ludo uses invites to build a healthier community. If you don’t know
+          anybody with an invite, you can either join our Discord and ask our
+          community for one, or sign up for the the waitlist and we’ll send you
+          one soon.
+        </SmallText>
+      </FormHeader>
+      <FormContent onSubmit={handleSubmit(onSubmit)}>
+        <Input register={registerEmail} error={errorInviteCode} data={dataUserEmail}/>
+        <FormSubmitBtn>
+          <MainButton onClick={function () { return null; }} type={'submit'} disabled={!isDirty || !isValid || loading} variant="primaryM" text={'Join Waitlist'}/>
+        </FormSubmitBtn>
+      </FormContent>
+      <FormFooter>
+        <FormLogOutBtn>
+          <MainButton onClick={handleLogOut} type={'button'} variant="outline" text={btnText}/>
+        </FormLogOutBtn>
+      </FormFooter>
+    </>);
+};
+export default JoinWaitListForm;

package/dist/components/inviteCodesForms/styles/index.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+export declare const FormHeader: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const FormContent: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").FormHTMLAttributes<HTMLFormElement>, HTMLFormElement>, never>> & string;
+export declare const FormSubmitBtn: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const FormLogOutBtn: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const FormFooter: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;

package/dist/components/inviteCodesForms/styles/index.js

@@ -0,0 +1,12 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import styled from 'styled-components';
+import { AccentColor, BlackColor, GrayBackgroundColor, } from '@ludo.ninja/ui/build/styles/colors';
+export var FormHeader = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  text-align: center;\n  user-select: none;\n\n  .caption {\n    display: inline-flex;\n    flex-direction: column;\n    align-items: center;\n    font-size: 20px;\n    line-height: 28px;\n    color: ", ";\n    text-decoration: none;\n\n    img {\n      margin-top: 8px;\n    }\n  }\n  &--text {\n    color: ", ";\n    margin-top: 16px;\n    text-align: left;\n    font-size: 13px;\n    line-height: 18px;\n  }\n"], ["\n  text-align: center;\n  user-select: none;\n\n  .caption {\n    display: inline-flex;\n    flex-direction: column;\n    align-items: center;\n    font-size: 20px;\n    line-height: 28px;\n    color: ", ";\n    text-decoration: none;\n\n    img {\n      margin-top: 8px;\n    }\n  }\n  &--text {\n    color: ", ";\n    margin-top: 16px;\n    text-align: left;\n    font-size: 13px;\n    line-height: 18px;\n  }\n"])), BlackColor, GrayBackgroundColor);
+export var FormContent = styled.form(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  margin-top: 24px;\n"], ["\n  margin-top: 24px;\n"])));
+export var FormSubmitBtn = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  margin-top: 24px;\n\n  button {\n    width: 100%;\n  }\n"], ["\n  margin-top: 24px;\n\n  button {\n    width: 100%;\n  }\n"])));
+export var FormLogOutBtn = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  margin-top: 17px;\n"], ["\n  margin-top: 17px;\n"])));
+export var FormFooter = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  margin-top: 24px;\n  text-align: center;\n\n  a,\n  strong {\n    color: ", ";\n    cursor: pointer;\n    font-weight: 400;\n  }\n"], ["\n  margin-top: 24px;\n  text-align: center;\n\n  a,\n  strong {\n    color: ", ";\n    cursor: pointer;\n    font-weight: 400;\n  }\n"])), AccentColor);
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;

package/dist/components/inviteCodesPage/components/index.d.ts

@@ -0,0 +1,5 @@
+import InviteCodes from '@/components/inviteCodesPage/components/inviteCodes';
+import InviteCodeCaption from '@/components/inviteCodesPage/components/inviteCodes/inviteCodeCaption';
+import InviteCodeCopy from '@/components/inviteCodesPage/components/inviteCodes/inviteCodeCopy';
+import InviteCodeDate from '@/components/inviteCodesPage/components/inviteCodes/inviteCodeDate';
+export { InviteCodes, InviteCodeCaption, InviteCodeCopy, InviteCodeDate };

package/dist/components/inviteCodesPage/components/index.jsx

@@ -0,0 +1,5 @@
+import InviteCodes from '@/components/inviteCodesPage/components/inviteCodes';
+import InviteCodeCaption from '@/components/inviteCodesPage/components/inviteCodes/inviteCodeCaption';
+import InviteCodeCopy from '@/components/inviteCodesPage/components/inviteCodes/inviteCodeCopy';
+import InviteCodeDate from '@/components/inviteCodesPage/components/inviteCodes/inviteCodeDate';
+export { InviteCodes, InviteCodeCaption, InviteCodeCopy, InviteCodeDate };

package/dist/components/inviteCodesPage/components/inviteCodes/index.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+declare const InviteCodes: ({ isLoading, children, }: {
+    isLoading: boolean;
+    children: JSX.Element[];
+}) => React.JSX.Element;
+export default InviteCodes;

package/dist/components/inviteCodesPage/components/inviteCodes/index.jsx

@@ -0,0 +1,19 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import React from 'react';
+import styled from 'styled-components';
+import InviteCodeLoader from '@/components/inviteCodesPage/components/inviteCodes/inviteCode/loader';
+// Styles
+var StyledInviteCodes = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  overflow-x: auto;\n  padding: 5px 10px 0 0;\n"], ["\n  overflow-x: auto;\n  padding: 5px 10px 0 0;\n"])));
+// Component
+var InviteCodes = function (_a) {
+    var isLoading = _a.isLoading, children = _a.children;
+    if (isLoading)
+        return <InviteCodeLoader />;
+    return <StyledInviteCodes>{children}</StyledInviteCodes>;
+};
+// Export
+export default InviteCodes;
+var templateObject_1;

package/dist/components/inviteCodesPage/components/inviteCodes/inviteCode/index.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { identitySchema as schema } from '@ludo.ninja/api';
+declare const InviteCode: ({ inviteCode, children, }: {
+    inviteCode: schema.IUserInviteCode;
+    children: JSX.Element;
+}) => React.JSX.Element;
+export default InviteCode;

package/dist/components/inviteCodesPage/components/inviteCodes/inviteCode/index.jsx

@@ -0,0 +1,26 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import React from 'react';
+import styled from 'styled-components';
+import { BlackColor, TextDarkGrayColor, WhiteColor } from '@/styles/colors';
+import BoxShadow from '@/styles/mixins/boxShadow';
+import BoxTransform from '@/styles/mixins/boxTransform';
+import { H5 } from '@system';
+import { dmsansFontVarCss } from '@/fonts/vars';
+// Styles
+var StyledInviteCode = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  font-family: ", ";\n  ", ";\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  background-color: ", ";\n  border-radius: 22px;\n  padding: 12px 18px;\n  min-height: 22px;\n  margin-bottom: 8px;\n\n  .code {\n    color: ", ";\n  }\n"], ["\n  font-family: ", ";\n  ", ";\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  background-color: ", ";\n  border-radius: 22px;\n  padding: 12px 18px;\n  min-height: 22px;\n  margin-bottom: 8px;\n\n  .code {\n    color: ", ";\n  }\n"])), dmsansFontVarCss.css, function (props) { return (props.isCodeDisabled ? null : [BoxShadow, BoxTransform]); }, WhiteColor, function (props) {
+    return props.isCodeDisabled ? TextDarkGrayColor : BlackColor;
+});
+// Component
+var InviteCode = function (_a) {
+    var inviteCode = _a.inviteCode, children = _a.children;
+    return (<StyledInviteCode isCodeDisabled={inviteCode.isUsed}>
+      <H5 className={'code'}>{inviteCode.inviteCode}</H5>
+      {children}
+    </StyledInviteCode>);
+};
+// Export
+export default InviteCode;
+var templateObject_1;

package/dist/components/inviteCodesPage/components/inviteCodes/inviteCode/loader/index.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const InviteCodeLoader: () => React.JSX.Element;
+export default InviteCodeLoader;

package/dist/components/inviteCodesPage/components/inviteCodes/inviteCode/loader/index.jsx

@@ -0,0 +1,22 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import React from 'react';
+import Skeleton from 'react-loading-skeleton';
+import styled from 'styled-components';
+//Styles
+var StyledSkeleton = styled(Skeleton)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  border-radius: 22px;\n  height: 44px;\n"], ["\n  border-radius: 22px;\n  height: 44px;\n"])));
+// Component
+var InviteCodeLoader = function () {
+    return (<>
+      <StyledSkeleton />
+      <StyledSkeleton style={{ marginTop: '8px' }}/>
+      <StyledSkeleton style={{ marginTop: '8px' }}/>
+      <StyledSkeleton style={{ marginTop: '8px' }}/>
+      <StyledSkeleton style={{ marginTop: '8px' }}/>
+    </>);
+};
+// Export
+export default InviteCodeLoader;
+var templateObject_1;

package/dist/components/inviteCodesPage/components/inviteCodes/inviteCodeCaption/index.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+declare const InviteCodeCaption: ({ isLoading, text, isNeedRender, }: {
+    isLoading: boolean;
+    text: string;
+    isNeedRender: boolean;
+}) => React.JSX.Element;
+export default InviteCodeCaption;

package/dist/components/inviteCodesPage/components/inviteCodes/inviteCodeCaption/index.jsx

@@ -0,0 +1,23 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import React from 'react';
+import styled from 'styled-components';
+import { BlackColor } from '@/styles/colors';
+import InviteCodeCaptionLoader from '@/components/inviteCodesPage/components/inviteCodes/inviteCodeCaption/loader';
+import { H3 } from '@system';
+// Styles
+var StyledIInviteCodeCaption = styled(H3)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  color: ", ";\n  user-select: none;\n"], ["\n  color: ", ";\n  user-select: none;\n"])), BlackColor);
+// Component
+var InviteCodeCaption = function (_a) {
+    var isLoading = _a.isLoading, text = _a.text, isNeedRender = _a.isNeedRender;
+    if (!isNeedRender)
+        return null;
+    if (isLoading)
+        return <InviteCodeCaptionLoader />;
+    return <StyledIInviteCodeCaption>{text}</StyledIInviteCodeCaption>;
+};
+// Export
+export default InviteCodeCaption;
+var templateObject_1;

package/dist/components/inviteCodesPage/components/inviteCodes/inviteCodeCaption/loader/index.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const InviteCodeCaptionLoader: () => React.JSX.Element;
+export default InviteCodeCaptionLoader;

package/dist/components/inviteCodesPage/components/inviteCodes/inviteCodeCaption/loader/index.jsx

@@ -0,0 +1,16 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import React from 'react';
+import Skeleton from 'react-loading-skeleton';
+import styled from 'styled-components';
+//Styles
+var StyledSkeleton = styled(Skeleton)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  height: 22px;\n"], ["\n  height: 22px;\n"])));
+// Component
+var InviteCodeCaptionLoader = function () {
+    return <StyledSkeleton style={{ marginBottom: '16px' }}/>;
+};
+// Export
+export default InviteCodeCaptionLoader;
+var templateObject_1;

package/dist/components/inviteCodesPage/components/inviteCodes/inviteCodeCopy/index.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { identitySchema as schema } from '@ludo.ninja/api';
+declare const InviteCodeCopy: ({ inviteCode, }: {
+    inviteCode: schema.IUserInviteCode;
+}) => React.JSX.Element;
+export default InviteCodeCopy;

package/dist/components/inviteCodesPage/components/inviteCodes/inviteCodeCopy/index.jsx

@@ -0,0 +1,27 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import React from 'react';
+import styled from 'styled-components';
+import { AccentColor } from '@/styles/colors';
+import { H5 } from '@system';
+import { CopyButton } from '@/utils/copyBtn';
+// Styles
+var StyledInviteCodeCopy = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  .copyBtn {\n    display: flex;\n    user-select: none;\n  }\n"], ["\n  .copyBtn {\n    display: flex;\n    user-select: none;\n  }\n"])));
+// Component
+var InviteCodeCopy = function (_a) {
+    var inviteCode = _a.inviteCode;
+    return (<StyledInviteCodeCopy>
+      <div className={'copyBtn'}>
+        <CopyButton value={inviteCode.inviteCode}>
+          <H5 style={{ marginLeft: '4px', cursor: 'pointer' }} color={AccentColor}>
+            Copy
+          </H5>
+        </CopyButton>
+      </div>
+    </StyledInviteCodeCopy>);
+};
+// Export
+export default InviteCodeCopy;
+var templateObject_1;

package/dist/components/inviteCodesPage/components/inviteCodes/inviteCodeDate/index.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+declare const InviteCodeActivatedDate: ({ value }: {
+    value: Date;
+}) => React.JSX.Element;
+export default InviteCodeActivatedDate;

package/dist/components/inviteCodesPage/components/inviteCodes/inviteCodeDate/index.jsx

@@ -0,0 +1,20 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import React from 'react';
+import styled from 'styled-components';
+import { ProgressColor } from '@/styles/colors';
+import { H5 } from '@system';
+// Styles
+var StyledInviteCodeActivatedDate = styled(H5)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  color: ", ";\n  font-size: 15px;\n  font-weight: 400;\n"], ["\n  color: ", ";\n  font-size: 15px;\n  font-weight: 400;\n"])), ProgressColor);
+// Component
+var InviteCodeActivatedDate = function (_a) {
+    var value = _a.value;
+    return (<StyledInviteCodeActivatedDate>
+      {"Activated on ".concat(value.toLocaleDateString('en-GB'))}
+    </StyledInviteCodeActivatedDate>);
+};
+// Export
+export default InviteCodeActivatedDate;
+var templateObject_1;

package/dist/components/inviteCodesPage/wrappers/index.d.ts

@@ -0,0 +1,4 @@
+import ResumeCodes from '@/components/inviteCodesPage/wrappers/resumeCodes';
+import UnusedCodes from '@/components/inviteCodesPage/wrappers/unusedCodes';
+import UsedCodes from '@/components/inviteCodesPage/wrappers/usedCodes';
+export { ResumeCodes, UnusedCodes, UsedCodes };

package/dist/components/inviteCodesPage/wrappers/index.jsx

@@ -0,0 +1,4 @@
+import ResumeCodes from '@/components/inviteCodesPage/wrappers/resumeCodes';
+import UnusedCodes from '@/components/inviteCodesPage/wrappers/unusedCodes';
+import UsedCodes from '@/components/inviteCodesPage/wrappers/usedCodes';
+export { ResumeCodes, UnusedCodes, UsedCodes };

package/dist/components/inviteCodesPage/wrappers/resumeCodes/index.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+declare const ResumeCodes: ({ invites, activeInvites, isLoading, userId, }: {
+    invites: number;
+    activeInvites: number;
+    isLoading: boolean;
+    userId: string;
+}) => React.JSX.Element;
+export default ResumeCodes;

package/dist/components/inviteCodesPage/wrappers/resumeCodes/index.jsx

@@ -0,0 +1,59 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import React from 'react';
+import styled from 'styled-components';
+import { TextGray2Color } from '@ludo.ninja/ui/build/styles/colors';
+import { ASK_MORE_INVITES_GOOGLE_FORM } from '@ludo.ninja/utils';
+import { mediaQuery } from '@/styles/ScreenWidth';
+import { AccentColor, BlackColor, TextGrayColor, WhiteColor, } from '@/styles/colors';
+import BoxShadow from '@/styles/mixins/boxShadow';
+import BoxTransform from '@/styles/mixins/boxTransform';
+import { FH5 } from '@/styles/typography';
+import ResumeCodesLoader from '@/components/inviteCodesPage/wrappers/resumeCodes/loader';
+import MainButton from '@/system/Buttons/MainButton';
+import { H1, H3, MainText } from '@system';
+import { dmsansFontVarCss } from '@/fonts/vars';
+// Styles
+var StyledResumeCodes = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", ";\n  ", ";\n  background-color: ", ";\n  padding: 24px 32px;\n  border-radius: 8px;\n  text-align: left;\n\n  ", " {\n    padding: 20px;\n  }\n"], ["\n  ", ";\n  ", ";\n  background-color: ", ";\n  padding: 24px 32px;\n  border-radius: 8px;\n  text-align: left;\n\n  ", " {\n    padding: 20px;\n  }\n"])), BoxShadow, BoxTransform, WhiteColor, mediaQuery.mobile);
+var StyledResumeCodesCaption = styled(H1)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  color: ", ";\n\n  strong {\n    color: ", ";\n  }\n"], ["\n  color: ", ";\n\n  strong {\n    color: ", ";\n  }\n"])), BlackColor, AccentColor);
+var StyledResumeCodesSubCaption = styled(H3)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  margin-top: 12px;\n  color: ", ";\n\n  strong {\n    color: ", ";\n  }\n"], ["\n  margin-top: 12px;\n  color: ", ";\n\n  strong {\n    color: ", ";\n  }\n"])), TextGrayColor, BlackColor);
+var StyledResumeCodesText = styled(MainText)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  font-family: ", ";\n  margin-top: 24px;\n  color: ", ";\n"], ["\n  font-family: ", ";\n  margin-top: 24px;\n  color: ", ";\n"])), dmsansFontVarCss.css, TextGrayColor);
+var StyledAddCodesText = styled(MainText)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  ", ";\n  font-family: ", ";\n  margin-top: 24px;\n  margin-bottom: 16px;\n  color: ", ";\n"], ["\n  ", ";\n  font-family: ", ";\n  margin-top: 24px;\n  margin-bottom: 16px;\n  color: ", ";\n"])), FH5, dmsansFontVarCss.css, TextGray2Color);
+// Component
+var ResumeCodes = function (_a) {
+    var invites = _a.invites, activeInvites = _a.activeInvites, isLoading = _a.isLoading, userId = _a.userId;
+    if (isLoading)
+        return <ResumeCodesLoader />;
+    var isPlural = function (nmb) { return (nmb <= 1 ? 'invite' : 'invites'); };
+    return (<div>
+      <StyledResumeCodes>
+        <StyledResumeCodesCaption>
+          You have <strong>{"".concat(invites, " active ").concat(isPlural(invites))}</strong>
+        </StyledResumeCodesCaption>
+        <StyledResumeCodesSubCaption>
+          Your friends activated{' '}
+          <strong>{"".concat(activeInvites, " ").concat(isPlural(activeInvites))}</strong>{' '}
+          already
+        </StyledResumeCodesSubCaption>
+      </StyledResumeCodes>
+      <StyledResumeCodesText>
+        Invite your friends to be among the first who will collect Ludo XP,
+        which is the key to unlock a variety of benefits. From benefiting from
+        selected partner projects, such as airdrops or whitelisting spots, to
+        increased XP for your engagement and activities, such as referrals, to
+        an increased Ludo Rank. The more Ludo XP you gather, the richer your
+        experience.
+      </StyledResumeCodesText>
+      <StyledAddCodesText>
+        Do you have more friends to invite?
+      </StyledAddCodesText>
+      <MainButton onClick={function () {
+            return window.open("".concat(ASK_MORE_INVITES_GOOGLE_FORM).concat(userId), '_blank');
+        }} variant="primaryM" text={'Ask for more invites'}/>
+    </div>);
+};
+// Export
+export default ResumeCodes;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;

package/dist/components/inviteCodesPage/wrappers/resumeCodes/loader/index.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const ResumeCodesLoader: () => React.JSX.Element;
+export default ResumeCodesLoader;

package/dist/components/inviteCodesPage/wrappers/resumeCodes/loader/index.jsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import Skeleton from 'react-loading-skeleton';
+// Component
+var ResumeCodesLoader = function () {
+    return (<>
+      <Skeleton style={{ borderRadius: '8px', padding: '24px 32px' }} height="100px"/>
+      <Skeleton style={{ borderRadius: '8px', marginTop: '24px' }} height="30px"/>
+      <Skeleton style={{ borderRadius: '8px', marginTop: '12px' }} height="20px"/>
+      <Skeleton style={{ borderRadius: '8px', marginTop: '12px' }} height="20px"/>
+    </>);
+};
+// Export
+export default ResumeCodesLoader;

package/dist/components/inviteCodesPage/wrappers/unusedCodes/index.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { identitySchema as schema } from '@ludo.ninja/api';
+declare const UnusedCodes: ({ unusedInvites, isLoading, }: {
+    unusedInvites: schema.IUserInviteCode[];
+    isLoading: boolean;
+}) => React.JSX.Element;
+export default UnusedCodes;

package/dist/components/inviteCodesPage/wrappers/unusedCodes/index.jsx

@@ -0,0 +1,28 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import React from 'react';
+import styled from 'styled-components';
+import { InviteCodeCopy } from '@/components/inviteCodesPage/components';
+import InviteCodes from '@/components/inviteCodesPage/components/inviteCodes';
+import InviteCode from '@/components/inviteCodesPage/components/inviteCodes/inviteCode';
+var StyledUnusedCodes = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  margin-bottom: 40px;\n"], ["\n  margin-bottom: 40px;\n"])));
+// Component
+var UnusedCodes = function (_a) {
+    var unusedInvites = _a.unusedInvites, isLoading = _a.isLoading;
+    var renderUnusedInviteCodes = unusedInvites === null || unusedInvites === void 0 ? void 0 : unusedInvites.map(function (inviteCode) {
+        return (<InviteCode key={inviteCode.inviteCode} inviteCode={inviteCode}>
+        <InviteCodeCopy inviteCode={inviteCode}/>
+      </InviteCode>);
+    });
+    if (!isLoading && (!unusedInvites || !unusedInvites.length)) {
+        return null;
+    }
+    return (<StyledUnusedCodes>
+      <InviteCodes isLoading={isLoading}>{renderUnusedInviteCodes}</InviteCodes>
+    </StyledUnusedCodes>);
+};
+// Export
+export default UnusedCodes;
+var templateObject_1;

package/dist/components/inviteCodesPage/wrappers/usedCodes/index.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { identitySchema as schema } from '@ludo.ninja/api';
+declare const UsedCodes: ({ usedInvites, isLoading, }: {
+    usedInvites: schema.IUserInviteCode[];
+    isLoading: boolean;
+}) => React.JSX.Element;
+export default UsedCodes;

package/dist/components/inviteCodesPage/wrappers/usedCodes/index.jsx

@@ -0,0 +1,35 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import React from 'react';
+import styled from 'styled-components';
+import { InviteCodeCaption, InviteCodes, } from '@/components/inviteCodesPage/components';
+import InviteCode from '@/components/inviteCodesPage/components/inviteCodes/inviteCode';
+import InviteCodeActivatedDate from '@/components/inviteCodesPage/components/inviteCodes/inviteCodeDate';
+// Styles
+var StyledUsedCodesCaption = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  margin-bottom: 16px;\n"], ["\n  margin-bottom: 16px;\n"])));
+// Component
+var UsedCodes = function (_a) {
+    var usedInvites = _a.usedInvites, isLoading = _a.isLoading;
+    var sortedInvitesOnDate = usedInvites
+        .sort(function (value, nextValue) { return value.usedAt - nextValue.usedAt; })
+        .reverse();
+    if (!isLoading && (!sortedInvitesOnDate || !sortedInvitesOnDate.length)) {
+        return null;
+    }
+    var renderUsedInviteCodes = sortedInvitesOnDate.map(function (inviteCode) {
+        return (<InviteCode key={inviteCode.inviteCode} inviteCode={inviteCode}>
+        <InviteCodeActivatedDate value={new Date(inviteCode.usedAt)}/>
+      </InviteCode>);
+    });
+    return (<>
+      <StyledUsedCodesCaption>
+        <InviteCodeCaption isNeedRender={sortedInvitesOnDate.length} text={'Activated invites'} isLoading={isLoading}/>
+      </StyledUsedCodesCaption>
+      <InviteCodes isLoading={isLoading}>{renderUsedInviteCodes}</InviteCodes>
+    </>);
+};
+// Export
+export default UsedCodes;
+var templateObject_1;

package/dist/components/linkTabs/index.d.ts

@@ -0,0 +1,7 @@
+import React, { CSSProperties } from 'react';
+declare const LinkTabs: ({ isUnderlined, children, style, }: {
+    children: React.ReactNode;
+    isUnderlined: boolean;
+    style?: CSSProperties;
+}) => React.JSX.Element;
+export default LinkTabs;

package/dist/components/linkTabs/index.jsx

@@ -0,0 +1,21 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import React from 'react';
+import styled from 'styled-components';
+import { adaptiveValueCalc } from '@ludo.ninja/ui/build/utils/4k';
+import { mediaQuery } from '@/styles/ScreenWidth';
+import { BorderColorLight } from '@/styles/colors';
+// Styles
+var StyledLinkTabs = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  margin-bottom: 24px;\n  position: relative;\n\n  &::after {\n    display: ", ";\n    position: absolute;\n    content: '';\n    border-bottom: 1px solid ", ";\n    width: 100%;\n    bottom: -4px;\n    left: 0;\n    right: 0;\n  }\n\n  a {\n    margin-left: 32px;\n\n    :first-child {\n      margin: 0;\n    }\n  }\n  ", " {\n    margin-bottom: ", ";\n\n    &::after {\n      bottom: ", ";\n      border-bottom-width: ", ";\n    }\n    a {\n      margin-left: ", ";\n    }\n  }\n"], ["\n  margin-bottom: 24px;\n  position: relative;\n\n  &::after {\n    display: ", ";\n    position: absolute;\n    content: '';\n    border-bottom: 1px solid ", ";\n    width: 100%;\n    bottom: -4px;\n    left: 0;\n    right: 0;\n  }\n\n  a {\n    margin-left: 32px;\n\n    :first-child {\n      margin: 0;\n    }\n  }\n  ", " {\n    margin-bottom: ", ";\n\n    &::after {\n      bottom: ", ";\n      border-bottom-width: ", ";\n    }\n    a {\n      margin-left: ", ";\n    }\n  }\n"])), function (props) { return (props.isUnderlined ? 'block' : 'none'); }, BorderColorLight, mediaQuery.minWidthFourK, adaptiveValueCalc(24), adaptiveValueCalc(-4), adaptiveValueCalc(1), adaptiveValueCalc(32));
+// Component
+var LinkTabs = function (_a) {
+    var isUnderlined = _a.isUnderlined, children = _a.children, style = _a.style;
+    return (<StyledLinkTabs isUnderlined={isUnderlined} style={style}>
+      {children}
+    </StyledLinkTabs>);
+};
+// Export
+export default LinkTabs;
+var templateObject_1;

package/dist/components/linkTabs/linkTab/index.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+interface LinkTabsProps {
+    link: string;
+    isActive: boolean;
+    countItems: number | null;
+    text: string;
+}
+declare const LinkTabs: ({ link, isActive, countItems, text }: LinkTabsProps) => React.JSX.Element;
+export default LinkTabs;